From bc5a3815fdd64069e1c8e7d9a5537bc00870e13d Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 18 Aug 2021 17:03:41 +0200 Subject: [PATCH 1/4] Inherit text color from parent element --- src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less index e89ed96e7956..48471b1df2e7 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less @@ -32,6 +32,8 @@ } &__inner { + color: inherit !important; + // Clear pseudo classes &::before, &::after { From ee908a1bcd511b90c204c4fbbc7de1299dea5c82 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 18 Aug 2021 17:37:25 +0200 Subject: [PATCH 2/4] Update block card icon and avoid use of !important --- .../src/less/components/umb-icon.less | 2 -- .../components/blockcard/umb-block-card.html | 4 ++-- .../blockcard/umbBlockCard.component.js | 17 ++++++++++------- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less index 48471b1df2e7..e89ed96e7956 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less @@ -32,8 +32,6 @@ } &__inner { - color: inherit !important; - // Clear pseudo classes &::before, &::after { diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html index bb7a52a74fc1..37b0e528e7ff 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html @@ -3,8 +3,8 @@ ng-class="{'--error':vm.elementTypeModel === null}" ng-style="{'background-color': vm.blockConfigModel ? vm.blockConfigModel.backgroundColor : '', 'background-image': vm.styleBackgroundImage}">
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js index 0c75bfbee311..15a984e5a9d7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js @@ -16,23 +16,26 @@ function BlockCardController($scope, umbRequestHelper) { - var vm = this; + const vm = this; vm.styleBackgroundImage = "none"; var unwatch = $scope.$watch("vm.blockConfigModel.thumbnail", (newValue, oldValue) => { - if(newValue !== oldValue) { + if (newValue !== oldValue) { vm.updateThumbnail(); } }); vm.$onInit = function () { - vm.updateThumbnail(); + }; + + vm.$onChanges = function () { + vm.icon = vm.elementTypeModel ? vm.elementTypeModel.icon.split(" ")[0] : 'icon-block'; + }; - } vm.$onDestroy = function () { unwatch(); - } + }; vm.updateThumbnail = function () { if (vm.blockConfigModel == null || vm.blockConfigModel.thumbnail == null || vm.blockConfigModel.thumbnail === "") { @@ -44,8 +47,8 @@ if (path.toLowerCase().endsWith(".svg") === false) { path += "?upscale=false&width=400"; } - vm.styleBackgroundImage = 'url(\''+path+'\')'; - } + vm.styleBackgroundImage = 'url(\'' + path + '\')'; + }; } From 7b63e5cec1aec90e8fd471bcf6a72ab0786021cf Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 18 Aug 2021 17:39:18 +0200 Subject: [PATCH 3/4] Wrap card in div --- .../src/views/components/blockcard/umb-block-card.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html index 37b0e528e7ff..d4c979d51168 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html @@ -1,7 +1,7 @@ - +
+ ng-class="{'--error':vm.elementTypeModel === null}" + ng-style="{'background-color': vm.blockConfigModel ? vm.blockConfigModel.backgroundColor : '', 'background-image': vm.styleBackgroundImage}">
- +
From 48a3a739f57c39ca4b3c9dec6941371ccaa388e7 Mon Sep 17 00:00:00 2001 From: Nathan Woulfe Date: Thu, 19 Aug 2021 09:05:20 +1000 Subject: [PATCH 4/4] interpolate background image path value, to remove string escaping which can be confusing --- .../src/views/components/blockcard/umbBlockCard.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js index 15a984e5a9d7..6585caebb176 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js @@ -47,7 +47,7 @@ if (path.toLowerCase().endsWith(".svg") === false) { path += "?upscale=false&width=400"; } - vm.styleBackgroundImage = 'url(\'' + path + '\')'; + vm.styleBackgroundImage = `url('${path}')`; }; }