Merge branch 'temp8-4427-3' into v8/dev

Nuklon · Apr 1, 2019 · c185672 · c185672
2 parents b0c7a7b + 58efda6
commit c185672
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 72 deletions.
diff --git a/...Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js b/...Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js
@@ -32,16 +32,27 @@ angular.module("umbraco.directives")
             restrict: 'E',
             scope:{
                 key: '@',
-                tokens: '='
+                tokens: '=',
+                watchTokens: '@'
             },
             replace: true,
 
             link: function (scope, element, attrs) {
                 var key = scope.key;
-                var tokens = scope.tokens ? scope.tokens : null;
-                localizationService.localize(key, tokens).then(function(value){
-                    element.html(value);
+                scope.text = "";
+
+                // A render function to be able to update tokens as values update.
+                function render() {
+                    element.html(localizationService.tokenReplace(scope.text, scope.tokens || null));
+                }
+
+                localizationService.localize(key).then(function(value){
+                    scope.text = value;
+                    render();
                 });
+                if (scope.watchTokens === 'true') {
+                    scope.$watch("tokens", render, true);
+                }
             }
         };
     })

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/localization.service.js b/src/Umbraco.Web.UI.Client/src/common/services/localization.service.js
@@ -43,16 +43,11 @@ angular.module('umbraco.services')
 
         var entry = dictionary[value];
         if (entry) {
-            if (tokens) {
-                for (var i = 0; i < tokens.length; i++) {
-                    entry = entry.replace("%" + i + "%", tokens[i]);
-                }
-            }
-            return entry;
+            return service.tokenReplace(entry, tokens);
         }
         return "[" + value + "]";
     }
-
+    
     var service = {
         // array to hold the localized resource string entries
         dictionary: [],
@@ -127,7 +122,29 @@ angular.module('umbraco.services')
             }
             return value;
         },
-
+
+
+        /**
+         * @ngdoc method
+         * @name umbraco.services.localizationService#tokenReplace
+         * @methodOf umbraco.services.localizationService
+         *
+         * @description
+         * Helper to replace tokens
+         * @param {String} value the text-string to manipulate
+         * @param {Array} tekens An array of tokens values 
+         * @returns {String} Replaced test-string
+         */
+        tokenReplace: function (text, tokens) {
+            if (tokens) {
+                for (var i = 0; i < tokens.length; i++) {
+                    text = text.replace("%" + i + "%", tokens[i]);
+                }
+            }
+            return text;
+        },
+
+
         /**
          * @ngdoc method
          * @name umbraco.services.localizationService#localize
@@ -146,8 +163,7 @@ angular.module('umbraco.services')
          */
         localize: function (value, tokens) {
             return service.initLocalizedResources().then(function (dic) {
-                var val = _lookup(value, tokens, dic);
-                return val;
+                return _lookup(value, tokens, dic);
             });
         },
 

diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -112,7 +112,7 @@
 @blueExtraDark:         #1b264f;// added 2019
 @blueLight:             #ADD8E6;
 @blueNight:             #162335;// added 2019
-@orange:                #f79c37;// updated 2019
+//@orange:              #f79c37;// updated 2019
 @pink:                  #D93F4C;// #C3325F;// update 2019
 @pinkLight:             #f5c1bc;// added 2019
 @pinkRedLight:          #ff8a89;// added 2019
@@ -199,6 +199,16 @@
 .turquoise{color: @turquoise;}
 .turquoise-d1{color: @turquoise-d1;}
 
+.text-warning {
+    color: @orange;
+}
+.text-error {
+    color: @red;
+}
+.text-success {
+    color: @green;
+}
+
 
 //icon colors for tree icons
 .color-red, .color-red i{color: @red-d1 !important;}

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js
@@ -13,25 +13,11 @@ function textAreaController($scope) {
     $scope.model.maxlength = false;
     if ($scope.model.config && $scope.model.config.maxChars) {
         $scope.model.maxlength = true;
-        if($scope.model.value == undefined) {
-            $scope.model.count = ($scope.model.config.maxChars * 1);
-        } else {
-            $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-        }
     }
-
-    $scope.model.change = function() {
-        if ($scope.model.config && $scope.model.config.maxChars) {
-            if($scope.model.value == undefined) {
-                $scope.model.count = ($scope.model.config.maxChars * 1);
-            } else {
-                $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-            }
-            if($scope.model.count < 0) {
-                $scope.model.value = $scope.model.value.substring(0, ($scope.model.config.maxChars * 1));
-                $scope.model.count = 0;
-            }
-        }
+
+    $scope.model.change = function () {
+        $scope.model.count = $scope.model.value.length;
     }
+    $scope.model.change();
 }
-angular.module('umbraco').controller("Umbraco.PropertyEditors.textAreaController", textAreaController);
+angular.module('umbraco').controller("Umbraco.PropertyEditors.textAreaController", textAreaController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
@@ -7,9 +7,12 @@
             <span class="help-inline" ng-message="valServer">{{textareaFieldForm.textarea.errorMsg}}</span>
         </span>
 
-        <div class="help" ng-if="model.maxlength">
-            <strong>{{model.count}}</strong>
-            <localize key="textbox_characters_left">characters left</localize>
+        <div class="help" ng-if="model.maxlength === true && model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize>
         </div>
+        <div class="help text-error" ng-if="model.maxlength === true && model.count > model.config.maxChars">
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
+        </div>
+
     </ng-form>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
@@ -4,39 +4,18 @@ function textboxController($scope) {
     if (!$scope.model.config) {
         $scope.model.config = {};
     }
-
-    $scope.model.maxlength = false;
-    if ($scope.model.config && $scope.model.config.maxChars) {
-        $scope.model.maxlength = true;
-    }
-
+
     if (!$scope.model.config.maxChars) {
         // 500 is the maximum number that can be stored
         // in the database, so set it to the max, even
         // if no max is specified in the config
         $scope.model.config.maxChars = 500;
     }
-
-    if ($scope.model.maxlength) {
-        if ($scope.model.value === undefined) {
-            $scope.model.count = ($scope.model.config.maxChars * 1);
-        } else {
-            $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-        }
-    }
-
+
     $scope.model.change = function () {
-        if ($scope.model.config && $scope.model.config.maxChars) {
-            if ($scope.model.value === undefined) {
-                $scope.model.count = ($scope.model.config.maxChars * 1);
-            } else {
-                $scope.model.count = ($scope.model.config.maxChars * 1) - $scope.model.value.length;
-            }
-            if ($scope.model.count < 0) {
-                $scope.model.value = $scope.model.value.substring(0, ($scope.model.config.maxChars * 1));
-                $scope.model.count = 0;
-            }
-        }
+        $scope.model.count = $scope.model.value.length;
     }
+    $scope.model.change();
+
 }
 angular.module('umbraco').controller("Umbraco.PropertyEditors.textboxController", textboxController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
@@ -12,9 +12,12 @@
             <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
         </span>
 
-        <div class="help" ng-if="model.maxlength">
-            <strong>{{model.count}}</strong>
-            <localize key="textbox_characters_left">characters left</localize>
+        <div class="help" ng-if="model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
+            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize>
         </div>
+        <div class="help text-error" ng-if="model.count > model.config.maxChars">
+            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
+        </div>
+
     </ng-form>
 </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1568,8 +1568,9 @@ Mange hilsner fra Umbraco robotten
   <area alias="emptyStates">
     <key alias="emptyDictionaryTree">Ingen ordbog elementer at vælge imellem</key>
   </area>
-  <area alias="textbox">
-    <key alias="characters_left">Karakterer tilbage</key>
+  <area alias="textbox">
+    <key alias="characters_left"><![CDATA[<strong>%0%</strong> tegn tilbage.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maksimum %0% tegn, <strong>%1%</strong> for mange.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Slettet indhold med Id: {0} Relateret til original "parent" med id: {1}</key>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2078,8 +2078,9 @@ To manage your website, simply open the Umbraco back office and start adding con
   <area alias="emptyStates">
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
-  <area alias="textbox">
-    <key alias="characters_left">characters left</key>
+  <area alias="textbox">
+    <key alias="characters_left"><![CDATA[<strong>%0%</strong> characters left.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maximum %0% characters, <strong>%1%</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Trashed content with Id: {0} related to original parent content with Id: {1}</key>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2090,8 +2090,9 @@ To manage your website, simply open the Umbraco back office and start adding con
   <area alias="emptyStates">
     <key alias="emptyDictionaryTree">No Dictionary items to choose from</key>
   </area>
-  <area alias="textbox">
-    <key alias="characters_left">characters left</key>
+  <area alias="textbox">
+    <key alias="characters_left"><![CDATA[<strong>%0%</strong> characters left.]]></key>
+    <key alias="characters_exceed"><![CDATA[Maximum %0% characters, <strong>%1%</strong> too many.]]></key>
   </area>
   <area alias="recycleBin">
     <key alias="contentTrashed">Trashed content with Id: {0} related to original parent content with Id: {1}</key>