From 447ff8e34efd6aa719f46fb4adaee894a684a665 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 7 Feb 2023 16:04:17 +0100 Subject: [PATCH] use uui-icon-swatches in icon picker --- src/Umbraco.Web.UI.Client/src/app.ts | 3 -- .../modal-layout-icon-picker.element.ts | 43 ++++++++++-------- .../umbraco-ui-uui-color-swatch-0.0.0.tgz | Bin 3182 -> 0 bytes .../umbraco-ui-uui-color-swatches-2.0.0.tgz | Bin 2852 -> 0 bytes 4 files changed, 23 insertions(+), 23 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/umbraco-ui-uui-color-swatch-0.0.0.tgz delete mode 100644 src/Umbraco.Web.UI.Client/umbraco-ui-uui-color-swatches-2.0.0.tgz diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts index 4d2cd611e0..198e31a6c5 100644 --- a/src/Umbraco.Web.UI.Client/src/app.ts +++ b/src/Umbraco.Web.UI.Client/src/app.ts @@ -2,8 +2,6 @@ import '@umbraco-ui/uui-css/dist/uui-css.css'; import '@umbraco-cms/css'; // TODO: remove these imports when they are part of UUI -import '@umbraco-ui/uui-color-swatch'; -import '@umbraco-ui/uui-color-swatches'; import '@umbraco-ui/uui-modal'; import '@umbraco-ui/uui-modal-container'; import '@umbraco-ui/uui-modal-dialog'; @@ -17,7 +15,6 @@ import { UUIIconRegistryEssential } from '@umbraco-ui/uui'; import { css, html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; - import { UmbLitElement } from '@umbraco-cms/element'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; import { OpenAPI, RuntimeLevel, ServerResource } from '@umbraco-cms/backend-api'; diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts index fb85c037e8..f355a041c4 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts @@ -1,15 +1,13 @@ -import type { UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches'; +import type { UUIColorSwatchesEvent } from '@umbraco-ui/uui'; import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; +import { styleMap } from 'lit/directives/style-map.js'; import { UmbModalLayoutElement } from '../modal-layout.element'; import icons from '../../../../../public-assets/icons/icons.json'; -import '@umbraco-ui/uui-color-swatch'; -import '@umbraco-ui/uui-color-swatches'; - export interface UmbModalIconPickerData { multiple: boolean; selection: string[]; @@ -56,6 +54,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement icon.name); @property({ type: Array }) - iconlistFiltered: Array; + iconlistFiltered: Array = []; @property({ type: Array }) colorlist = [ @@ -118,10 +117,13 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement + .value="${this._currentColor || ''}" + label="Color switcher for icons" + @change="${this._onColorChange}"> + ${this.colorlist.map( + (color) => + html` ` + )} +
${this.renderIconSelection()} @@ -199,8 +201,9 @@ export class UmbModalLayoutIconPickerElement extends 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 UHqYkSJYVzkUjpMQdjLcL0AlVNRsaA1 diff --git a/src/Umbraco.Web.UI.Client/umbraco-ui-uui-color-swatches-2.0.0.tgz b/src/Umbraco.Web.UI.Client/umbraco-ui-uui-color-swatches-2.0.0.tgz deleted file mode 100644 index f741e8b847140725f23788e9922b5db7d5dadd15..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2852 zcmV+<3)}P`iwFP!00002|Lq%VbK5pDpZP0rOxsWyiK6_Rk!&Za<6b?Jq?tOtesDcD zL_!i`h~yEZY{%7qzr}+jC{nW1x}Hl%oV1dF#lEmFfa@6hS9naij1Idr49Jc9nLm5v z$Md|Mtu53v?s>hQw+nNd+dJ@eXUBu@@MUXv2R@%Y!ISY6C&0=h2ni1=KEIKNPU9#^ z(H-(RZ=-iKJz``^!nBPh>6D>48YR&by_?r9cC(Cj zhL|hEO30YCh%E4!<-8ohY^dClWUy%6T%f5a+8uU-~}yo zXU(lfQ1|fXHy{3eg!Yl`PjEOUHlUv21YKN!sy~8cF!jsuGjQoD-G9{54m8-9q`zE; zV)QNHehFQU3urNy&=~YFD9}p$vEvJcBx-S8H7uGuh_TJkcyiw<_5 zGc8eWF^ABf)N_HMRh3C9UVMf4ge12`?9jo)ukYlfeqK!f9BEY_8HqC{6hgGd6^yKs9-| z4fBSAaS%v5dk4iG2_e_iODXr{=-tubr=z#+TCVt7Os5~}xXM_eu{Bhbas%4P76qIy ze59k2oLv|I_}hJoXa=bm+ccVyM^eWFkv%{oLcF?@XwjAjqq(e4;5e8px`H?rTxuiR z3+POhCHuD0Y)t(tl3ZNmWrTfD#Gdc&Dg}l+#j)e4UzHGV(%D7$;z z4ci7~dp@rf+ebqd`B#hC#BElXfxlQkPH0eO2=S|vk}1rkM97^@L*56q#RR7g&eEte zqKviCl!jA$<0!t`s5eSltpzk=9QTo@8P8`vgY(eQZHEF8Ku^ z!j*yKF<#rMr&7r-f5KH z#!xoe7kQf9Xf@-@kLk`G!fBe&A?UBK5*>K#L&+2Y=0SwSqCPqSYT@`Rh~%R5{x%9` z@YSL$KL9qdP`QY4YB>%Rw2BuXXOWxoMx+U*z2tHOBIvXA^UXi8zW?=Q$^`y~96;6(Hh`Jk7LzF+bC@}kX(G>p zc8I4$z&Avkb`ArF*olB~)xB*E($&`HrpBToDU?J_!WH5=K$}y6zTwp3sIoR1q2f*< zl5=i#l?cZI9I~B^;EOm%IAf^*_}%{fcm1Dj7cleoYCfxBeg(U4peVwDsPI*#3-v@^ z2a2zJ5?w>pPD*Jc)FTU{znz!+sPY_r$d;(;xtXEElapWNZRgqfQl8GjjIr~FtF~r! z6^cp&tH^x?sRnB+jP;*kjTLdeO`|QYH_om3I=eqS|Lf03&HE3{{~Not_rKfQ8|(c4 zWcfdj42$nO8xp%&D{Q!)>#0#jeG+nsaeJ7_;_L3~ z>2@jSnTcwOX;@Zcd9R0(dm059Bg65R3cE&{tK9R$$W$eZgF>uw=B_3k0wyfeXDVOEZWJGs*%1 z7{*hSWFf*KX18C6ctxCYA9Xqs0zOAk;>+PAVl0bM$JgJ)#ruekO=%gya{H(08Xi-lJ#8b>lc?|;9s+52&0XX~eyW#ySz9ut=)W7o2tKS#$QYz#yn*b+ zYKkugiso+<5+W8wSK>$mXCX$Qd;)iqTwE@>alJ$$E$MzA4FBZqGGvjU3&oD;laft9 zq6$NCmWUn*-bMi^HCn~;(i`5T?QYF7!9JXFkU^3Wuj#BN?d>&SIFJa|G57y5{#OgT zr;PtzZ_}%t|8_Ul_rFi_=+{3lbqH`*T+>1Ts6jWr8xo;n?OETR|F5{A|4TvPp89WB z^!iu*f5+SK*8cyb{r^Toakc3mPLLLOJbJBdp{Zb$^TwqM40Q8g5fG?klDwW-R)Z|* zYgYXS)K>+g=xUJsIyUfTw_M|mf@)`o6FS2wL1q_W&Sf9vuLIP$6ihrX(b9|g9N@Jq z!S3?g>3K0OuFQ)c`kET$7t^2w*=tj_SLQru&T74s`FyL!;-9=_e-r`CR{>QC3Vqj` zBg@IA2Fof$Llfo9XgV&aG89 zUNqF}{bkOU_kfCP5;OicC-c8v5Z+V&ZEf`y