From 60be075617381e4c1898aff08b06b382b27664ac Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 23 Aug 2021 22:06:45 +0200 Subject: [PATCH 1/5] Support color in similar to --- .../components/umbprogressbar.directive.js | 5 +++-- .../src/less/components/umb-progress-bar.less | 22 ++++++++++++++++++- .../views/components/umb-progress-bar.html | 2 +- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js index 59f51fca3ffb..4d127597e0dd 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js @@ -17,7 +17,7 @@ Use this directive to generate a progress bar. @param {number} percentage (attribute): The progress in percentage. @param {string} size (attribute): The size (s, m). - +@param {string} color (attribute): The color of the highlight (primary, secondary, success, warning, danger). Success by default. **/ (function() { @@ -31,7 +31,8 @@ Use this directive to generate a progress bar. templateUrl: 'views/components/umb-progress-bar.html', scope: { percentage: "@", - size: "@?" + size: "@?", + color: "@?" } }; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less index 8c15084d55f0..c8fb742f5e19 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less @@ -17,6 +17,26 @@ bottom: 0; width: 100%; border-radius: 10px; + + &--primary { + background: @blue; + } + + &--secondary { + background: @purple; + } + + &--success { + background: @green; + } + + &--warning { + background: @yellow; + } + + &--danger { + background: @red; + } } .umb-progress-bar--s { @@ -27,4 +47,4 @@ .umb-progress-bar--m { height: 10px; border-radius: 10px; -} \ No newline at end of file +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html index 719a53e36187..46b06455c6e8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html @@ -1,3 +1,3 @@ - + From f19f9ec5a1151f73c35b5a373d11205190ccecf3 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 23 Aug 2021 22:14:33 +0200 Subject: [PATCH 2/5] Revert "Support color in similar to " This reverts commit 60be075617381e4c1898aff08b06b382b27664ac. --- .../components/umbprogressbar.directive.js | 5 ++--- .../src/less/components/umb-progress-bar.less | 22 +------------------ .../views/components/umb-progress-bar.html | 2 +- 3 files changed, 4 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js index 4d127597e0dd..59f51fca3ffb 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js @@ -17,7 +17,7 @@ Use this directive to generate a progress bar. @param {number} percentage (attribute): The progress in percentage. @param {string} size (attribute): The size (s, m). -@param {string} color (attribute): The color of the highlight (primary, secondary, success, warning, danger). Success by default. + **/ (function() { @@ -31,8 +31,7 @@ Use this directive to generate a progress bar. templateUrl: 'views/components/umb-progress-bar.html', scope: { percentage: "@", - size: "@?", - color: "@?" + size: "@?" } }; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less index c8fb742f5e19..8c15084d55f0 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less @@ -17,26 +17,6 @@ bottom: 0; width: 100%; border-radius: 10px; - - &--primary { - background: @blue; - } - - &--secondary { - background: @purple; - } - - &--success { - background: @green; - } - - &--warning { - background: @yellow; - } - - &--danger { - background: @red; - } } .umb-progress-bar--s { @@ -47,4 +27,4 @@ .umb-progress-bar--m { height: 10px; border-radius: 10px; -} +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html index 46b06455c6e8..719a53e36187 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html @@ -1,3 +1,3 @@ - + From 5e2b8b67105b90e7871cdb74604dbc50fe183d1f Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 23 Aug 2021 22:23:01 +0200 Subject: [PATCH 3/5] Add support for label and labelKey --- .../property/umbpropertyactions.component.js | 15 +++++++++++++++ .../components/property/umb-property-actions.html | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js index 41dbd9f54741..b5ec6925c9c7 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js @@ -71,6 +71,21 @@ vm.labels.openText = values[0]; vm.labels.closeText = values[1]; }); + + // Map action icons using legacy icon font or svg icons. + Utilities.forEach(vm.actions, action => { + + if (action.labelKey) { + if (action.labelKey) { + localizationService.localize(action.labelKey, action.labelTokens || []).then(data => { + action.label = data; + }); + } + } + + action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon; + }); + } } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html index fea619f437fc..bd0511a2c0ff 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html @@ -12,7 +12,7 @@ From 4e7054573ab3b67fb3a8d6924fffb8ebcbdd8faf Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 23 Aug 2021 23:11:21 +0200 Subject: [PATCH 4/5] Map action icon and label --- .../property/umbpropertyactions.component.js | 28 ++++++++++++------- .../property/umb-property-actions.html | 2 +- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js index b5ec6925c9c7..952bd7dcf7c6 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js @@ -22,6 +22,7 @@ vm.$onDestroy = onDestroy; vm.$onInit = onInit; + vm.$onChanges = onChanges; function initDropDown() { keyboardService.bind("esc", vm.close); @@ -71,21 +72,28 @@ vm.labels.openText = values[0]; vm.labels.closeText = values[1]; }); + } + + function onChanges(simpleChanges) { + if (simpleChanges.actions) { + + let actions = simpleChanges.actions.currentValue || []; - // Map action icons using legacy icon font or svg icons. - Utilities.forEach(vm.actions, action => { + // Map action icons using legacy icon font or svg icons. + Utilities.forEach(actions, action => { - if (action.labelKey) { if (action.labelKey) { - localizationService.localize(action.labelKey, action.labelTokens || []).then(data => { - action.label = data; - }); + if (action.labelKey) { + localizationService.localize(action.labelKey, (action.labelTokens || []), action.label).then(data => { + action.label = data; + }); + } } - } - - action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon; - }); + action.useLegacyIcon = action.useLegacyIcon === false ? false : true; + action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon; + }); + } } } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html index bd0511a2c0ff..d6c798e5c37d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html @@ -11,7 +11,7 @@
    From c35579c4f871a1bec5fc8a29318ab39572827066 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 24 Aug 2021 00:03:10 +0200 Subject: [PATCH 5/5] Remove double condition --- .../components/property/umbpropertyactions.component.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js index 952bd7dcf7c6..b3a46ba2b1b6 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js @@ -83,11 +83,9 @@ Utilities.forEach(actions, action => { if (action.labelKey) { - if (action.labelKey) { - localizationService.localize(action.labelKey, (action.labelTokens || []), action.label).then(data => { - action.label = data; - }); - } + localizationService.localize(action.labelKey, (action.labelTokens || []), action.label).then(data => { + action.label = data; + }); } action.useLegacyIcon = action.useLegacyIcon === false ? false : true;