v8: Extend the umb-checkbox component to handle localization (#5635)
This commit is contained in:
committed by
Sebastiaan Janssen
parent
4c86756640
commit
20fd5acae6
@@ -26,6 +26,7 @@
|
||||
@param {string} value Set the value of the checkbox.
|
||||
@param {string} name Set the name of the checkbox.
|
||||
@param {string} text Set the text for the checkbox label.
|
||||
@param {string} labelKey Set a dictinary/localization string for the checkbox label
|
||||
@param {string} serverValidationField Set the <code>val-server-field</code> of the checkbox.
|
||||
@param {boolean} disabled Set the checkbox to be disabled.
|
||||
@param {boolean} required Set the checkbox to be required.
|
||||
@@ -35,13 +36,25 @@
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function UmbCheckboxController($timeout) {
|
||||
|
||||
|
||||
function UmbCheckboxController($timeout, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.$onInit = onInit;
|
||||
vm.change = change;
|
||||
|
||||
function onInit() {
|
||||
// If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
|
||||
if (vm.labelKey) {
|
||||
localizationService.localize(vm.labelKey).then(function (data) {
|
||||
if(data.indexOf('[') === -1){
|
||||
vm.text = data;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function change() {
|
||||
if (vm.onChange) {
|
||||
$timeout(function () {
|
||||
@@ -50,7 +63,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var component = {
|
||||
templateUrl: 'views/components/forms/umb-checkbox.html',
|
||||
controller: UmbCheckboxController,
|
||||
@@ -61,6 +74,7 @@
|
||||
value: "@",
|
||||
name: "@",
|
||||
text: "@",
|
||||
labelKey: "@?",
|
||||
serverValidationField: "@",
|
||||
disabled: "<",
|
||||
required: "<",
|
||||
|
||||
@@ -36,6 +36,10 @@ a.umb-list-item:focus {
|
||||
color: @gray-4;
|
||||
}
|
||||
|
||||
.umb-list-item__description--checkbox{
|
||||
margin: 0 0 0 26px;
|
||||
}
|
||||
|
||||
.umb-list-checkbox {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
|
||||
@@ -48,6 +48,10 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.date-wrapper-mini--checkbox{
|
||||
margin: 0 0 0 26px;
|
||||
}
|
||||
|
||||
.date-wrapper-mini__date {
|
||||
display: flex;
|
||||
|
||||
|
||||
@@ -15,5 +15,6 @@
|
||||
<i class="umb-form-check__icon icon-check"></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="umb-form-check__text">{{vm.text}}</span>
|
||||
</label>
|
||||
|
||||
@@ -13,32 +13,30 @@
|
||||
<div class="umb-list-item"
|
||||
ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId">
|
||||
<ng-form name="publishVariantSelectorForm">
|
||||
<div class="flex" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
|
||||
<div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
|
||||
|
||||
<umb-checkbox input-id="{{variant.htmlId}}"
|
||||
name="publishVariantSelector"
|
||||
model="variant.publish"
|
||||
on-change="vm.changeSelection(variant)"
|
||||
disabled="(variant.canPublish === false)"
|
||||
server-validation-field="{{variant.htmlId}}" />
|
||||
server-validation-field="{{variant.htmlId}}"
|
||||
text="{{ variant.language.name }}"
|
||||
/>
|
||||
<div>
|
||||
<label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
|
||||
<span>{{ variant.language.name }}</span>
|
||||
<strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
|
||||
|
||||
<span class="db umb-list-item__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
<umb-variant-state variant="variant"></umb-variant-state>
|
||||
<span ng-if="variant.language.isMandatory"> - </span>
|
||||
<span ng-if="variant.language.isMandatory" ng-class="{'text-error': (variant.language.isMandatory && variant.willPublish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
|
||||
<span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
|
||||
<span class="db umb-list-item__description text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
|
||||
</span>
|
||||
|
||||
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,12 +6,11 @@
|
||||
</div>
|
||||
|
||||
<div class="flex mb3">
|
||||
|
||||
<umb-checkbox input-id="includeUnpublishedSelector" model="model.includeUnpublished" />
|
||||
|
||||
<label for="includeUnpublishedSelector">
|
||||
<localize key="content_includeUnpublished"></localize>
|
||||
</label>
|
||||
<umb-checkbox
|
||||
model="model.includeUnpublished"
|
||||
text="Include drafts: also publish unpublished content items."
|
||||
label-key="content_includeUnpublished"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -23,12 +22,11 @@
|
||||
</div>
|
||||
|
||||
<div class="flex mb3">
|
||||
|
||||
<umb-checkbox input-id="includeUnpublishedSelector" model="model.includeUnpublished" />
|
||||
|
||||
<label for="includeUnpublishedSelector">
|
||||
<localize key="content_includeUnpublished"></localize>
|
||||
</label>
|
||||
<umb-checkbox
|
||||
model="model.includeUnpublished"
|
||||
text="Include drafts: also publish unpublished content items."
|
||||
label-key="content_includeUnpublished"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="bold mb1">
|
||||
@@ -39,17 +37,17 @@
|
||||
|
||||
<div class="umb-list-item umb-list--condensed" ng-repeat="variant in vm.variants">
|
||||
<ng-form name="publishVariantSelectorForm">
|
||||
<div class="flex" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
|
||||
<div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
|
||||
|
||||
<umb-checkbox
|
||||
input-id="{{variant.htmlId}}"
|
||||
name="publishVariantSelector"
|
||||
model="variant.publish"
|
||||
on-change="vm.changeSelection(variant)"
|
||||
server-validation-field="{{variant.htmlId}}"/>
|
||||
server-validation-field="{{variant.htmlId}}"
|
||||
text="{{variant.language.name}}"/>
|
||||
|
||||
<div>
|
||||
<label for="{{variant.htmlId}}" class="mb0">
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
<span>{{variant.language.name}}</span>
|
||||
|
||||
<span class="db umb-list-item__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
@@ -58,12 +56,10 @@
|
||||
</span>
|
||||
|
||||
<span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
|
||||
<span class="db umb-list-item__description text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
|
||||
</span>
|
||||
|
||||
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -17,31 +17,29 @@
|
||||
<div class="umb-list-item"
|
||||
ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId">
|
||||
<ng-form name="saveVariantSelectorForm">
|
||||
<div class="flex" ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
|
||||
<div ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
|
||||
|
||||
<umb-checkbox
|
||||
input-id="{{variant.htmlId}}"
|
||||
name="saveVariantSelector"
|
||||
model="variant.save"
|
||||
on-change="vm.changeSelection(variant)"
|
||||
server-validation-field="{{variant.htmlId}}"/>
|
||||
server-validation-field="{{variant.htmlId}}"
|
||||
text="{{variant.language.name}}"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
|
||||
<span>{{ variant.language.name }}</span>
|
||||
<strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
|
||||
|
||||
<span class="db" ng-if="!saveVariantSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
<umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
|
||||
<umb-variant-state class="umb-list-item__description umb-list-item__description--checkbox" variant="variant"></umb-variant-state>
|
||||
</span>
|
||||
|
||||
<span class="db" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
|
||||
<span class="db umb-list-item__description text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
|
||||
</span>
|
||||
|
||||
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -86,27 +86,25 @@
|
||||
|
||||
<div class="umb-list-item" ng-repeat="variant in vm.variants">
|
||||
<ng-form name="scheduleSelectorForm" style="width:100%;">
|
||||
<div class="flex" ng-class="{'umb-list-item--error': scheduleSelectorForm.saveVariantReleaseDate.$invalid}">
|
||||
<div ng-class="{'umb-list-item--error': scheduleSelectorForm.saveVariantReleaseDate.$invalid}">
|
||||
|
||||
<umb-checkbox
|
||||
input-id="{{'saveVariantSelector_' + variant.language.culture}}"
|
||||
name="saveVariantSelector"
|
||||
model="variant.save"
|
||||
on-change="vm.changeSelection(variant)"/>
|
||||
on-change="vm.changeSelection(variant)"
|
||||
text="{{variant.language.name}}"
|
||||
/>
|
||||
|
||||
<div>
|
||||
|
||||
<label for="{{'saveVariantSelector_' + variant.language.culture}}" style="margin-bottom: 2px;">
|
||||
<span>{{ variant.language.name }}</span>
|
||||
|
||||
<span class="db umb-list-item__description"
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox"
|
||||
ng-if="!scheduleSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
<umb-variant-state variant="variant"></umb-variant-state>
|
||||
<span ng-show="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div class="date-wrapper-mini">
|
||||
<div class="date-wrapper-mini date-wrapper-mini--checkbox">
|
||||
<div class="date-wrapper-mini__date" ng-if="vm.dirtyVariantFilter(variant) && (variant.releaseDate || variant.save)">
|
||||
|
||||
<div style="font-size: 13px; margin-right: 5px;">Publish:<em ng-show="!variant.save"> {{variant.releaseDateFormatted}}</em></div>
|
||||
|
||||
@@ -12,31 +12,29 @@
|
||||
|
||||
<div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.modifiedVariantFilter">
|
||||
<ng-form name="publishVariantSelectorForm">
|
||||
<div class="flex" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
|
||||
<div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
|
||||
|
||||
<umb-checkbox
|
||||
input-id="{{variant.htmlId}}"
|
||||
name="publishVariantSelector"
|
||||
model="variant.save"
|
||||
on-change="vm.changeSelection(variant)"
|
||||
server-validation-field="{{variant.htmlId}}"/>
|
||||
server-validation-field="{{variant.htmlId}}"
|
||||
text="{{ variant.language.name }}"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
|
||||
<span>{{ variant.language.name }}</span>
|
||||
<strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
|
||||
<strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
|
||||
|
||||
<span class="db" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
<umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
|
||||
</span>
|
||||
<span class="db" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
|
||||
<umb-variant-state class="umb-list-item__description umb-list-item__description--checkbox" variant="variant"></umb-variant-state>
|
||||
</span>
|
||||
|
||||
<span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
|
||||
<span class="db umb-list-item__description text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
|
||||
</span>
|
||||
<span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
|
||||
</span>
|
||||
|
||||
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
|
||||
|
||||
</label>
|
||||
<umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.publishedVariantFilter">
|
||||
<ng-form name="unpublishVariantSelectorForm">
|
||||
<div class="flex">
|
||||
<div>
|
||||
|
||||
<umb-checkbox
|
||||
input-id="{{variant.htmlId}}"
|
||||
@@ -23,17 +23,15 @@
|
||||
model="variant.save"
|
||||
on-change="vm.changeSelection(variant)"
|
||||
disabled="variant.disabled"
|
||||
server-validation-field="{{variant.htmlId}}"/>
|
||||
server-validation-field="{{variant.htmlId}}"
|
||||
text="{{ variant.language.name }}"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
|
||||
<span>{{ variant.language.name }}</span>
|
||||
|
||||
<span class="db umb-list-item__description">
|
||||
<umb-variant-state variant="variant"></umb-variant-state>
|
||||
<span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="db umb-list-item__description umb-list-item__description--checkbox">
|
||||
<umb-variant-state variant="variant"></umb-variant-state>
|
||||
<span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -131,80 +131,64 @@
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
<label style="padding-left: 0;">
|
||||
<umb-checkbox model="vm.package.contentLoadChildNodes"
|
||||
disabled="!vm.package.contentNodeId"
|
||||
text="{{vm.labels.includeAllChildNodes}}" />
|
||||
</label>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@treeHeaders_documentTypes">
|
||||
<div ng-repeat="doctype in ::vm.documentTypes | orderBy:'name'">
|
||||
<label>
|
||||
<umb-checkbox model="doctype.selected"
|
||||
on-change="vm.selectDocumentType(doctype)"
|
||||
text="{{doctype.name}}" />
|
||||
</label>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@treeHeaders_templates">
|
||||
<div ng-repeat="template in ::vm.templates | orderBy:'name'">
|
||||
<label>
|
||||
<umb-checkbox model="template.selected"
|
||||
on-change="vm.selectTemplate(template)"
|
||||
text="{{template.name}}" />
|
||||
</label>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@treeHeaders_stylesheets">
|
||||
<div ng-repeat="stylesheet in ::vm.stylesheets | orderBy:'name'">
|
||||
<label>
|
||||
<umb-checkbox model="stylesheet.selected"
|
||||
on-change="vm.selectStyleSheet(stylesheet)"
|
||||
text="{{stylesheet.path}}" />
|
||||
</label>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@treeHeaders_macros">
|
||||
<div ng-repeat="macro in ::vm.macros | orderBy:'name'">
|
||||
<label>
|
||||
<umb-checkbox model="macro.selected"
|
||||
on-change="vm.selectMacro(macro)"
|
||||
text="{{macro.name}}" />
|
||||
</label>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@treeHeaders_languages">
|
||||
<div ng-repeat="language in ::vm.languages | orderBy:'name'">
|
||||
<label>
|
||||
<umb-checkbox model="language.selected"
|
||||
on-change="vm.selectLanguage(language)"
|
||||
text="{{language.name}}" />
|
||||
</label>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@treeHeaders_dictionary">
|
||||
<div ng-repeat="dictionaryItem in ::vm.dictionaryItems | orderBy:'name'">
|
||||
<label>
|
||||
<umb-checkbox model="dictionaryItem.selected"
|
||||
on-change="vm.selectDictionaryItem(dictionaryItem)"
|
||||
text="{{dictionaryItem.name}}" />
|
||||
</label>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@treeHeaders_dataTypes">
|
||||
<div ng-repeat="dataType in ::vm.dataTypes | orderBy:'name'">
|
||||
<label>
|
||||
<umb-checkbox model="dataType.selected"
|
||||
on-change="vm.selectDataType(dataType)"
|
||||
text="{{dataType.name}}" />
|
||||
</label>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
<div ng-if="!vm.languages">
|
||||
<p><localize key="prompt_confirmListViewPublish"></localize></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-if="vm.loading" style="min-height: 50px; position: relative;">
|
||||
<umb-load-indicator></umb-load-indicator>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Multiple languages -->
|
||||
<div ng-if="vm.languages.length > 1 && !vm.loading">
|
||||
|
||||
@@ -26,20 +26,17 @@
|
||||
<ng-form name="publishLanguageSelectorForm">
|
||||
<div class="flex">
|
||||
|
||||
<umb-checkbox input-id="publishLanguage_{{language.culture}}"
|
||||
name="publishLanguageSelector"
|
||||
<umb-checkbox name="publishLanguageSelector"
|
||||
model="language.publish"
|
||||
on-change="vm.changeSelection(language)" />
|
||||
on-change="vm.changeSelection(language)"
|
||||
text="{{language.name}}"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="publishLanguage_{{language.culture}}" class="mb0">
|
||||
<span>{{language.name}}</span>
|
||||
|
||||
<span class="db umb-list-item__description">
|
||||
<span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<span class="db umb-list-item__description">
|
||||
<span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -26,19 +26,16 @@
|
||||
<ng-form name="unpublishLanguageSelectorForm">
|
||||
<div class="flex">
|
||||
|
||||
<umb-checkbox input-id="unpublishLanguage_{{language.culture}}"
|
||||
name="unpublishLanguageSelector"
|
||||
<umb-checkbox name="unpublishLanguageSelector"
|
||||
model="language.unpublish"
|
||||
on-change="vm.changeSelection(language)" />
|
||||
on-change="vm.changeSelection(language)"
|
||||
text="{{language.name}}"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="unpublishLanguage_{{language.culture}}" class="mb0">
|
||||
<span>{{language.name}}</span>
|
||||
|
||||
<span class="db umb-list-item__description">
|
||||
<span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="db umb-list-item__description">
|
||||
<span ng-if="language.isMandatory"><localize key="languages_mandatoryLanguage"></localize></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user