v8: Extend the umb-checkbox component to handle localization (#5635)

This commit is contained in:
Jan Skovgaard
2019-10-17 17:32:19 +02:00
committed by Sebastiaan Janssen
parent 4c86756640
commit 20fd5acae6
13 changed files with 97 additions and 110 deletions

View File

@@ -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: "<",

View File

@@ -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;

View File

@@ -48,6 +48,10 @@
flex-direction: row;
}
.date-wrapper-mini--checkbox{
margin: 0 0 0 26px;
}
.date-wrapper-mini__date {
display: flex;

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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">&nbsp;&nbsp;{{variant.releaseDateFormatted}}</em></div>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>