V8 - umb-box-header shows values for non-localized and localized title and description (#6689)

* Fix displaying of title and description and also the localized values for title-key and description-key on the umb-box-header directive

* Handle invalide localization keys by setting a fall back value
This commit is contained in:
Dave Woestenborghs
2019-10-18 13:39:26 +02:00
committed by Sebastiaan Janssen
parent b199a54038
commit 3260fec444
2 changed files with 27 additions and 9 deletions

View File

@@ -45,7 +45,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
(function(){
'use strict';
function BoxHeaderDirective() {
function BoxHeaderDirective(localizationService) {
var directive = {
restrict: 'E',
@@ -57,6 +57,26 @@ Use this directive to construct a title. Recommended to use it inside an {@link
title: "@?",
descriptionKey: "@?",
description: "@?"
},
link: function (scope) {
scope.titleLabel = scope.title;
if (scope.titleKey) {
localizationService.localize(scope.titleKey, [], scope.title).then((data) => {
scope.titleLabel = data;
});
}
scope.descriptionLabel = scope.description;
if (scope.descriptionKey) {
localizationService.localize(scope.descriptionKey, [], scope.description).then((data) => {
scope.descriptionLabel = data;
});
}
}
};
@@ -66,4 +86,4 @@ Use this directive to construct a title. Recommended to use it inside an {@link
angular.module('umbraco.directives').directive('umbBoxHeader', BoxHeaderDirective);
})();
})();

View File

@@ -1,13 +1,11 @@
<div class="umb-box-header">
<div>
<div class="umb-box-header-title" ng-if="title || titleKey">
<localize ng-if="titleKey" key="{{titleKey}}"></localize>
<span ng-if="title">{{title}}</span>
<div class="umb-box-header-title" ng-if="titleLabel">
{{titleLabel}}
</div>
<div class="umb-box-header-description" ng-if="description || descriptionKey">
<localize ng-if="descriptionKey" key="{{descriptionKey}}"></localize>
<span ng-if="description">{{description}}</span>
<div class="umb-box-header-description" ng-if="descriptionLabel">
{{descriptionLabel}}
</div>
</div>
<ng-transclude></ng-transclude>
</div>
</div>