diff --git a/.vscode/settings.json b/.vscode/settings.json index 15492763ab..d94391ca3b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,9 +6,11 @@ "combobox", "Elementable", "invariantable", + "lucide", "Niels", "pickable", "Registrator", + "svgs", "templating", "tinymce", "umbraco", diff --git a/devops/icons/index.js b/devops/icons/index.js index e56c7a7679..29e84f3a96 100644 --- a/devops/icons/index.js +++ b/devops/icons/index.js @@ -7,20 +7,86 @@ const getDirName = path.dirname; const glob = globModule.default; const moduleDirectory = 'src/shared/icon-registry'; -const iconsSVGDirectory = `${moduleDirectory}/svgs`; const iconsOutputDirectory = `${moduleDirectory}/icons`; +const umbracoSvgDirectory = `${moduleDirectory}/svgs`; +const iconMapJson = `${moduleDirectory}/icon-dictionary.json`; + +const lucideSvgDirectory = 'node_modules/lucide-static/icons'; const run = async () => { - const icons = await collectIcons(); - outputIcons(icons); + var icons = await collectDictionaryIcons(); + icons = await collectDiskIcons(icons); + writeIconsToDisk(icons); generateJSON(icons); }; -const collectIcons = async () => { - const iconPaths = await glob(`${iconsSVGDirectory}/icon-*.svg`); +const collectDictionaryIcons = async () => { + + const rawData = readFileSync(iconMapJson); + const fileRaw = rawData.toString(); + const fileJSON = JSON.parse(fileRaw); let icons = []; + // Lucide: + fileJSON.lucide.forEach((iconDef) => { + if(iconDef.file && iconDef.name) { + const path = lucideSvgDirectory + "/" + iconDef.file; + + try { + const rawData = readFileSync(path); + // For Lucide icons specially we adjust the icons a bit for them to work in our case: + let svg = rawData.toString().replace(' width="24"\n', ''); + svg = svg.replace(' height="24"\n', ''); + svg = svg.replace('stroke-width="2"', 'stroke-width="1.75"'); + const iconFileName = iconDef.name; + + const icon = { + name: iconDef.name, + legacy: iconDef.legacy, + fileName: iconFileName, + svg, + output: `${iconsOutputDirectory}/${iconFileName}.js`, + }; + + icons.push(icon); + } catch(e) { + console.log(`Could not load file: '${path}'`); + } + } + }); + + // Umbraco: + fileJSON.umbraco.forEach((iconDef) => { + if(iconDef.file && iconDef.name) { + const path = umbracoSvgDirectory + "/" + iconDef.file; + + try { + const rawData = readFileSync(path); + const svg = rawData.toString() + const iconFileName = iconDef.name; + + const icon = { + name: iconDef.name, + legacy: iconDef.legacy, + fileName: iconFileName, + svg, + output: `${iconsOutputDirectory}/${iconFileName}.js`, + }; + + icons.push(icon); + } catch(e) { + console.log(`Could not load file: '${path}'`); + } + } + }); + + return icons; +}; + +const collectDiskIcons = async (icons) => { + const iconPaths = await glob(`${umbracoSvgDirectory}/icon-*.svg`); + iconPaths.forEach((path) => { const rawData = readFileSync(path); const svg = rawData.toString(); @@ -35,28 +101,31 @@ const collectIcons = async () => { const SVGFileName = match[1]; const iconFileName = SVGFileName.replace('.svg', ''); - const iconName = iconFileName.replace('icon-', '').replace('.svg', ''); - - const icon = { - src: path, - SVGFileName, - iconFileName, - name: iconName, - svg, - output: `${iconsOutputDirectory}/${iconFileName}.js`, - }; + const iconName = iconFileName; + + // Only append not already defined icons: + if(!icons.find(x => x.name === iconName)) { - icons.push(icon); + const icon = { + name: iconName, + legacy: true, + fileName: iconFileName, + svg, + output: `${iconsOutputDirectory}/${iconFileName}.js`, + }; + + icons.push(icon); + } }); return icons; }; -const outputIcons = (icons) => { +const writeIconsToDisk = (icons) => { icons.forEach((icon) => { const content = 'export default `' + icon.svg + '`;'; - writeFileWithDir(`${icon.output}`, content, (err) => { + writeFileWithDir(icon.output, content, (err) => { if (err) { // eslint-disable-next-line no-undef console.log(err); @@ -72,10 +141,10 @@ const generateJSON = (icons) => { const JSONPath = `${iconsOutputDirectory}/icons.json`; const iconDescriptors = icons.map((icon) => { - console.log(icon); return { - name: `umb:${icon.name}`, - path: `./icons/${icon.iconFileName}.js`, + name: icon.name, + legacy: icon.legacy, + path: `./icons/${icon.fileName}.js`, }; }); diff --git a/package-lock.json b/package-lock.json index 9e4eb0754d..5ccb8c8b0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,6 +60,7 @@ "eslint-plugin-local-rules": "^1.3.2", "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-wc": "^1.5.0", + "lucide-static": "^0.290.0", "msw": "^1.2.3", "openapi-typescript-codegen": "^0.25.0", "playwright-msw": "^2.2.1", @@ -15693,6 +15694,12 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-static": { + "version": "0.290.0", + "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.290.0.tgz", + "integrity": "sha512-g2JVS1v2xVypOyMRrWH5lFhJwAftBvAn732Ig4VqS60+4MtL1F+bsbI8wVG3MM6RFhL12gT1hs5vEZufr6XbKA==", + "dev": true + }, "node_modules/magic-string": { "version": "0.27.0", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz", diff --git a/package.json b/package.json index ee42099cc5..a6a59c16e8 100644 --- a/package.json +++ b/package.json @@ -177,6 +177,7 @@ "eslint-plugin-local-rules": "^1.3.2", "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-wc": "^1.5.0", + "lucide-static": "^0.290.0", "msw": "^1.2.3", "openapi-typescript-codegen": "^0.25.0", "playwright-msw": "^2.2.1", diff --git a/src/css/umb-css.css b/src/css/umb-css.css index ad39cee1dc..0e612b10b6 100644 --- a/src/css/umb-css.css +++ b/src/css/umb-css.css @@ -1,7 +1,4 @@ :root { - /* TODO: Consulidate with this green color suggestion, align UUI:*/ - --uui-color-positive: #1c874c; - --uui-color-positive-emphasis: #1a7f47; --umb-footer-layout-height: 54px; --umb-header-layout-height: 70px; --umb-section-sidebar-width: 300px; diff --git a/src/mocks/data/document-blueprint.data.ts b/src/mocks/data/document-blueprint.data.ts index db98035c80..47aa466b55 100644 --- a/src/mocks/data/document-blueprint.data.ts +++ b/src/mocks/data/document-blueprint.data.ts @@ -6,7 +6,7 @@ export const data: Array = [ name: 'Document Blueprint 1', type: 'document-blueprint', id: '3fa85f64-5717-4562-b3fc-2c963f66afa6', - icon: 'umb:blueprint', + icon: 'icon-blueprint', documentTypeKey: 'd81c7957-153c-4b5a-aa6f-b434a4964624', properties: [], data: [], @@ -15,7 +15,7 @@ export const data: Array = [ name: 'Document Blueprint 2', type: 'document-blueprint', id: '3fa85f64-5717-4562-b3qc-2c963f66afa6', - icon: 'umb:blueprint', + icon: 'icon-blueprint', documentTypeKey: 'a99e4018-3ffc-486b-aa76-eecea9593d17', properties: [], data: [], diff --git a/src/mocks/data/document-type.data.ts b/src/mocks/data/document-type.data.ts index ef912e8795..bad341ab93 100644 --- a/src/mocks/data/document-type.data.ts +++ b/src/mocks/data/document-type.data.ts @@ -14,7 +14,7 @@ export const data: Array = [ alias: 'blogPost', name: 'All property editors document type', description: null, - icon: 'umb:item-arrangement', + icon: 'icon-item-arrangement', allowedAsRoot: true, variesByCulture: true, variesBySegment: false, @@ -616,7 +616,7 @@ export const data: Array = [ alias: 'blogPost', name: 'Page Document Type', description: null, - icon: 'umb:document', + icon: 'icon-document', allowedAsRoot: true, variesByCulture: true, variesBySegment: false, @@ -777,7 +777,7 @@ export const data: Array = [ alias: 'masterPage', name: 'Master Page', description: null, - icon: 'umb:document', + icon: 'icon-document', allowedAsRoot: false, variesByCulture: false, variesBySegment: false, @@ -827,7 +827,7 @@ export const data: Array = [ alias: 'baseElementType', name: 'Base Element Type', description: null, - icon: 'umb:science', + icon: 'icon-science', allowedAsRoot: false, variesByCulture: false, variesBySegment: false, @@ -881,7 +881,7 @@ export const data: Array = [ alias: 'simpleDocumentType', name: 'Simple Document Type', description: null, - icon: 'umb:document', + icon: 'icon-document', allowedAsRoot: true, variesByCulture: false, variesBySegment: false, @@ -934,7 +934,7 @@ export const data: Array = [ alias: 'simpleDocumentType2', name: 'Simple Document Type 2', description: null, - icon: 'umb:document', + icon: 'icon-document', allowedAsRoot: true, variesByCulture: false, variesBySegment: false, @@ -1015,7 +1015,7 @@ export const treeData: Array = [ id: '29643452-cff9-47f2-98cd-7de4b6807681', isContainer: false, parentId: null, - icon: 'umb:document', + icon: 'icon-document', }, { name: 'Page Document Type Compositional', @@ -1024,7 +1024,7 @@ export const treeData: Array = [ id: '5035d7d9-0a63-415c-9e75-ee2cf931db92', isContainer: false, parentId: null, - icon: 'umb:document', + icon: 'icon-document', }, { name: 'Page Document Type Inherited', @@ -1033,7 +1033,7 @@ export const treeData: Array = [ id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d', isContainer: false, parentId: null, - icon: 'umb:document', + icon: 'icon-document', }, { name: 'Simple Document Type', @@ -1042,7 +1042,7 @@ export const treeData: Array = [ id: 'simple-document-type-key', isContainer: false, parentId: null, - icon: 'umb:document', + icon: 'icon-document', }, { name: 'Simple Document Type 2', @@ -1051,7 +1051,7 @@ export const treeData: Array = [ id: 'simple-document-type-2-key', isContainer: false, parentId: null, - icon: 'umb:document', + icon: 'icon-document', }, ]; diff --git a/src/mocks/data/media-type.data.ts b/src/mocks/data/media-type.data.ts index a63febb7de..8702ab276b 100644 --- a/src/mocks/data/media-type.data.ts +++ b/src/mocks/data/media-type.data.ts @@ -13,7 +13,7 @@ export const data: Array = [ id: 'c5159663-eb82-43ee-bd23-e42dc5e71db6', description: 'Media type 1 description', alias: 'mediaType1', - icon: 'umb:bug', + icon: 'icon-bug', properties: [], containers: [], }, diff --git a/src/mocks/data/user-group.data.ts b/src/mocks/data/user-group.data.ts index 1fd17caccf..2a1c6f2083 100644 --- a/src/mocks/data/user-group.data.ts +++ b/src/mocks/data/user-group.data.ts @@ -46,20 +46,20 @@ export const data: Array = [ { id: 'c630d49e-4e7b-42ea-b2bc-edc0edacb6b1', name: 'Administrators', - icon: 'umb:medal', + icon: 'icon-medal', documentStartNodeId: 'all-property-editors-document-id', permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_DELETE], }, { id: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12', name: 'User Group 1', - icon: 'umb:bell', + icon: 'icon-bell', permissions: [UMB_USER_PERMISSION_DOCUMENT_DELETE], }, { id: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa', name: 'User Group 2', - icon: 'umb:ball', + icon: 'icon-ball', permissions: [UMB_USER_PERMISSION_DOCUMENT_READ], }, ]; diff --git a/src/mocks/handlers/dictionary.handlers.ts b/src/mocks/handlers/dictionary.handlers.ts index 17bfb287f0..1dd033e9c9 100644 --- a/src/mocks/handlers/dictionary.handlers.ts +++ b/src/mocks/handlers/dictionary.handlers.ts @@ -80,7 +80,7 @@ export const handlers = [ if (!data) return; - data.icon = 'umb:book-alt'; + data.icon = 'icon-book-alt'; data.hasChildren = false; data.type = 'dictionary-item'; diff --git a/src/packages/core/collection/components/collection-toolbar.element.ts b/src/packages/core/collection/components/collection-toolbar.element.ts index 6cff22cf89..72a8994e24 100644 --- a/src/packages/core/collection/components/collection-toolbar.element.ts +++ b/src/packages/core/collection/components/collection-toolbar.element.ts @@ -11,14 +11,14 @@ export class UmbCollectionToolbarElement extends UmbLitElement { public actions: Array = [ { label: 'File', - icon: 'umb:document', + icon: 'icon-document', action: () => { console.log('Create file'); }, }, { label: 'Folder', - icon: 'umb:folder', + icon: 'icon-folder', action: () => { console.log('create folder'); }, diff --git a/src/packages/core/components/header-app/header-app.stories.ts b/src/packages/core/components/header-app/header-app.stories.ts index db52404cb5..2608e838fa 100644 --- a/src/packages/core/components/header-app/header-app.stories.ts +++ b/src/packages/core/components/header-app/header-app.stories.ts @@ -19,7 +19,7 @@ export const Overview: Story = { kind: 'button', meta: { label: 'Some Header', - icon: 'umb:home', + icon: 'icon-home', href: '/some/path', }, }, diff --git a/src/packages/core/components/input-markdown-editor/input-markdown.element.ts b/src/packages/core/components/input-markdown-editor/input-markdown.element.ts index e89ec0a208..076cef8051 100644 --- a/src/packages/core/components/input-markdown-editor/input-markdown.element.ts +++ b/src/packages/core/components/input-markdown-editor/input-markdown.element.ts @@ -441,7 +441,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) { label="Quote" title="Quote" @click=${() => this.#editor?.monacoEditor?.getAction('q')?.run()}> - + this.#editor?.monacoEditor?.getAction('ol')?.run()}> - + this.#editor?.monacoEditor?.getAction('ul')?.run()}> - +
@@ -467,7 +467,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) { label="Fenced Code" title="Fenced Code" @click=${() => this.#editor?.monacoEditor?.getAction('fenced-code')?.run()}> - + this.#editor?.monacoEditor?.getAction('line')?.run()}> - + this.#editor?.monacoEditor?.getAction('link')?.run()}> - + this.#editor?.monacoEditor?.getAction('image')?.run()}> - +
diff --git a/src/packages/core/components/input-multi-url/input-multi-url.element.ts b/src/packages/core/components/input-multi-url/input-multi-url.element.ts index 5b8f255c5e..cccf149e2e 100644 --- a/src/packages/core/components/input-multi-url/input-multi-url.element.ts +++ b/src/packages/core/components/input-multi-url/input-multi-url.element.ts @@ -205,7 +205,7 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) { .name="${link.name || ''}" .detail="${(link.url || '') + (link.queryString || '')}" @open="${() => this._temporary_onClick_editItem(index)}"> - + Edit Remove diff --git a/src/packages/core/components/input-upload-field/input-upload-field.element.ts b/src/packages/core/components/input-upload-field/input-upload-field.element.ts index 5debce3395..ec6f0d9c78 100644 --- a/src/packages/core/components/input-upload-field/input-upload-field.element.ts +++ b/src/packages/core/components/input-upload-field/input-upload-field.element.ts @@ -124,7 +124,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement) })}
- Remove file(s) + Remove file(s) `; } diff --git a/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts b/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts index 6f16aefbd0..fe73fd6d71 100644 --- a/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts +++ b/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts @@ -46,7 +46,7 @@ export const WithSlots: Story = {
- +
diff --git a/src/packages/core/components/table/table.stories.ts b/src/packages/core/components/table/table.stories.ts index e8a9d14e3b..bbd06ebb6c 100644 --- a/src/packages/core/components/table/table.stories.ts +++ b/src/packages/core/components/table/table.stories.ts @@ -27,7 +27,7 @@ const columns: Array = [ const items: Array = [ { id: UmbId.new(), - icon: 'umb:wand', + icon: 'icon-wand', data: [ { columnAlias: 'name', @@ -41,7 +41,7 @@ const items: Array = [ }, { id: UmbId.new(), - icon: 'umb:document', + icon: 'icon-document', data: [ { columnAlias: 'name', @@ -55,7 +55,7 @@ const items: Array = [ }, { id: UmbId.new(), - icon: 'umb:user', + icon: 'icon-user', data: [ { columnAlias: 'name', diff --git a/src/packages/core/components/tooltip-menu/tooltip-menu.stories.ts b/src/packages/core/components/tooltip-menu/tooltip-menu.stories.ts index 817bdbca88..034c74bb70 100644 --- a/src/packages/core/components/tooltip-menu/tooltip-menu.stories.ts +++ b/src/packages/core/components/tooltip-menu/tooltip-menu.stories.ts @@ -13,12 +13,12 @@ type Story = StoryObj; const items: Array = [ { label: 'Item 1', - icon: 'umb:document', + icon: 'icon-document', action: () => alert('Item 1 clicked'), }, { label: 'Item 2', - icon: 'umb:home', + icon: 'icon-home', action: () => alert('Item 2 clicked'), }, ]; diff --git a/src/packages/core/components/variant-selector/variant-selector.element.ts b/src/packages/core/components/variant-selector/variant-selector.element.ts index f25308712f..b626e9e899 100644 --- a/src/packages/core/components/variant-selector/variant-selector.element.ts +++ b/src/packages/core/components/variant-selector/variant-selector.element.ts @@ -204,7 +204,7 @@ export class UmbVariantSelectorElement extends UmbLitElement { ${this._isNotPublishedMode(variant.culture!, variant.state!) ? 'add-mode' : ''}" @click=${() => this._switchVariant(variant)}> ${this._isNotPublishedMode(variant.culture!, variant.state!) - ? html`` + ? html`` : nothing}
${variant.name} (${variant.culture}) ${variant.segment} diff --git a/src/packages/core/debug/debug.element.ts b/src/packages/core/debug/debug.element.ts index 95dd61e612..f85018243d 100644 --- a/src/packages/core/debug/debug.element.ts +++ b/src/packages/core/debug/debug.element.ts @@ -85,7 +85,7 @@ export class UmbDebugElement extends UmbLitElement { private _renderDialog() { return html`
- Debug + Debug
`; } @@ -93,7 +93,7 @@ export class UmbDebugElement extends UmbLitElement { private _renderPanel() { return html`
- + Debug diff --git a/src/packages/core/debug/modals/debug/debug-modal.element.ts b/src/packages/core/debug/modals/debug/debug-modal.element.ts index 5e96aca425..0c9fa75c14 100644 --- a/src/packages/core/debug/modals/debug/debug-modal.element.ts +++ b/src/packages/core/debug/modals/debug/debug-modal.element.ts @@ -11,7 +11,7 @@ export default class UmbContextDebuggerModalElement extends UmbModalBaseElement< render() { return html` - Debug: Contexts + Debug: Contexts ${this.data?.content} Close diff --git a/src/packages/core/extension-registry/models/collection-view.model.ts b/src/packages/core/extension-registry/models/collection-view.model.ts index 0bd51d80e7..eb30c86e59 100644 --- a/src/packages/core/extension-registry/models/collection-view.model.ts +++ b/src/packages/core/extension-registry/models/collection-view.model.ts @@ -15,8 +15,8 @@ export interface MetaCollectionView { * An icon to represent the collection view * * @examples [ - * "umb:box", - * "umb:grid" + * "icon-box", + * "icon-grid" * ] */ icon: string; diff --git a/src/packages/core/extension-registry/models/entity-action.model.ts b/src/packages/core/extension-registry/models/entity-action.model.ts index 52c93e30b9..3baddeaf1e 100644 --- a/src/packages/core/extension-registry/models/entity-action.model.ts +++ b/src/packages/core/extension-registry/models/entity-action.model.ts @@ -15,8 +15,8 @@ export interface MetaEntityAction { * An icon to represent the action to be performed * * @examples [ - * "umb:box", - * "umb:grid" + * "icon-box", + * "icon-grid" * ] */ icon?: string; diff --git a/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts index 221503c328..de5bccd8e4 100644 --- a/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts +++ b/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts @@ -1,7 +1,7 @@ import icons from '../../../../../shared/icon-registry/icons/icons.json' assert { type: 'json' }; import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, styleMap, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbIconPickerModalData, UmbIconPickerModalValue, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @@ -10,72 +10,69 @@ import { UmbIconPickerModalData, UmbIconPickerModalValue, UmbModalBaseElement } // TODO: to prevent element extension we need to move the Picker logic into a separate class we can reuse across all pickers @customElement('umb-icon-picker-modal') export class UmbIconPickerModalElement extends UmbModalBaseElement { - private _iconList = icons.map((icon) => icon.name); + + + private _iconList = icons.filter((icon) => !icon.legacy); @state() - private _iconListFiltered: Array = []; + private _iconListFiltered: Array<(typeof icons)[0]> = []; @state() private _colorList = [ - '#000000', - '#373737', - '#9e9e9e', - '#607d8b', - '#2196f3', - '#03a9f4', - '#3f51b5', - '#9c27b0', - '#673ab7', - '#00bcd4', - '#4caf50', - '#8bc34a', - '#cddc39', - '#ffeb3b', - '#ffc107', - '#ff9800', - '#ff5722', - '#f44336', - '#e91e63', - '#795548', + {alias:'text', varName:'--uui-color-text'}, + {alias:'yellow', varName:'--uui-palette-sunglow'}, + {alias:'pink', varName:'--uui-palette-spanish-pink'}, + {alias:'dark', varName:'--uui-palette-gunmetal'}, + {alias:'darkblue', varName:'--uui-palette-space-cadet'}, + {alias:'blue', varName:'--uui-palette-violet-blue'}, + {alias:'red', varName:'--uui-palette-maroon-flush'}, + {alias:'green', varName:'--uui-palette-jungle-green'}, + {alias:'brown', varName:'--uui-palette-chamoisee'}, ]; @state() - private _currentColor?: string; + _modalValue?:UmbIconPickerModalValue; @state() - private _currentIcon?: string; + _currentColorVarName = '--uui-color-text'; - private _changeIcon(e: { target: HTMLInputElement; type: any; key: unknown }) { + #changeIcon(e: { target: HTMLInputElement; type: any; key: unknown }) { if (e.type == 'click' || (e.type == 'keyup' && e.key == 'Enter')) { - this._currentIcon = e.target.id; + this.modalContext?.updateValue({icon: e.target.id}); } } - private _filterIcons(e: { target: HTMLInputElement }) { + #filterIcons(e: { target: HTMLInputElement }) { if (e.target.value) { - this._iconListFiltered = this._iconList.filter((icon) => icon.includes(e.target.value)); + this._iconListFiltered = this._iconList.filter((icon) => icon.name.includes(e.target.value)); } else { this._iconListFiltered = this._iconList; } } - private _close() { + #close() { this.modalContext?.reject(); } - private _submit() { - this.modalContext?.submit({ color: this._currentColor, icon: this._currentIcon }); + #submit() { + // TODO: Shouldnt we stop sending the value here, instead let the modal context send of its value. and then its up to any one using it to make sure Modal Context value is up to date. + this.modalContext?.submit(this._modalValue); } - private _onColorChange(e: UUIColorSwatchesEvent) { - this._currentColor = e.target.value; + #onColorChange(e: UUIColorSwatchesEvent) { + this.modalContext?.updateValue({icon: e.target.value}); } connectedCallback() { super.connectedCallback(); - this._currentColor = this.data?.color ?? this._colorList[0]; - this._currentIcon = this.data?.icon ?? this._iconList[0]; this._iconListFiltered = this._iconList; + + if(this.modalContext) { + this.observe(this.modalContext?.value, (newValue) => { + this._modalValue = newValue; + this._currentColorVarName = this._colorList.find(x => x.alias === newValue?.color)?.alias ?? this._colorList[0].varName; + }, '_observeModalContextValue'); + } } render() { @@ -85,20 +82,22 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement - ${this._colorList.map( + @change="${this.#onColorChange}"> + ${ + // TODO: Missing translation for the color aliases. + this._colorList.map( (color) => html` - + `, )}
${this.renderIconSelection()}
- Close - + Close + Submit @@ -107,7 +106,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement @@ -116,21 +115,22 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement { - return html` + return repeat(this._iconListFiltered, + (icon) => icon.name, + (icon) => html` + style="color: var(${this._currentColorVarName})" + class="icon ${icon.name === this._modalValue?.icon ? 'selected' : ''}" + title="${icon.name}" + name="${icon.name}" + label="${icon.name}" + id="${icon.name}" + @click="${this.#changeIcon}" + @keyup="${this.#changeIcon}"> - `; - })}`; + ` + ); } static styles = [ diff --git a/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts b/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts index 5ea7e4ef54..d6f6fb08a8 100644 --- a/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts +++ b/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts @@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/web-components'; import type { UmbIconPickerModalElement } from './icon-picker-modal.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; -import { UmbIconPickerModalData } from '@umbraco-cms/backoffice/modal'; +import { UmbIconPickerModalData, UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal'; export default { title: 'API/Modals/Layouts/Icon Picker', @@ -14,6 +14,9 @@ export default { } as Meta; const data: UmbIconPickerModalData = { +}; + +const value: UmbIconPickerModalValue = { color: undefined, icon: undefined, }; @@ -22,5 +25,5 @@ export const Overview: Story = () => html` - + `; diff --git a/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts index 8d36478ba5..d8740a345d 100644 --- a/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts +++ b/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts @@ -227,7 +227,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< ?disabled=${this._aliasLocked}>
''} id="alias-lock" slot="prepend"> - +
import('./property-editor-ui-eye-dropper.element.js'), meta: { label: 'Eye Dropper Color Picker', - icon: 'umb:colorpicker', + icon: 'icon-colorpicker', group: 'pickers', propertyEditorSchemaAlias: 'Umbraco.ColorPicker.EyeDropper', settings: { diff --git a/src/packages/core/property-editor/uis/icon-picker/manifests.ts b/src/packages/core/property-editor/uis/icon-picker/manifests.ts index 0fb821fb38..31590a83cc 100644 --- a/src/packages/core/property-editor/uis/icon-picker/manifests.ts +++ b/src/packages/core/property-editor/uis/icon-picker/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Icon Picker', propertyEditorSchemaAlias: 'Umbraco.IconPicker', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }; diff --git a/src/packages/core/property-editor/uis/image-cropper/manifests.ts b/src/packages/core/property-editor/uis/image-cropper/manifests.ts index fa139e153d..fd615a5f62 100644 --- a/src/packages/core/property-editor/uis/image-cropper/manifests.ts +++ b/src/packages/core/property-editor/uis/image-cropper/manifests.ts @@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = { loader: () => import('./property-editor-ui-image-cropper.element.js'), meta: { label: 'Image Cropper', - icon: 'umb:colorpicker', + icon: 'icon-colorpicker', group: 'pickers', propertyEditorSchemaAlias: 'Umbraco.ImageCropper', }, diff --git a/src/packages/core/property-editor/uis/image-crops-configuration/manifests.ts b/src/packages/core/property-editor/uis/image-crops-configuration/manifests.ts index 3d98974bf1..e54c89a0f8 100644 --- a/src/packages/core/property-editor/uis/image-crops-configuration/manifests.ts +++ b/src/packages/core/property-editor/uis/image-crops-configuration/manifests.ts @@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = { loader: () => import('./property-editor-ui-image-crops-configuration.element.js'), meta: { label: 'Image Crops Configuration', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', propertyEditorSchemaAlias: 'Umbraco.ImageCropper.Configuration', }, diff --git a/src/packages/core/property-editor/uis/label/manifests.ts b/src/packages/core/property-editor/uis/label/manifests.ts index 112bf5bf55..89eb715670 100644 --- a/src/packages/core/property-editor/uis/label/manifests.ts +++ b/src/packages/core/property-editor/uis/label/manifests.ts @@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = { loader: () => import('./property-editor-ui-label.element.js'), meta: { label: 'Label', - icon: 'umb:readonly', + icon: 'icon-readonly', group: 'pickers', propertyEditorSchemaAlias: 'Umbraco.Label', }, diff --git a/src/packages/core/property-editor/uis/manifests.ts b/src/packages/core/property-editor/uis/manifests.ts index bc9e65ecd1..23c901afe7 100644 --- a/src/packages/core/property-editor/uis/manifests.ts +++ b/src/packages/core/property-editor/uis/manifests.ts @@ -72,7 +72,7 @@ export const manifests: Array = [ loader: () => import('./number/property-editor-ui-number.element.js'), meta: { label: 'Number', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', propertyEditorSchemaAlias: 'Umbraco.Integer', }, diff --git a/src/packages/core/property-editor/uis/markdown-editor/manifests.ts b/src/packages/core/property-editor/uis/markdown-editor/manifests.ts index 64217e33dc..39edd94f12 100644 --- a/src/packages/core/property-editor/uis/markdown-editor/manifests.ts +++ b/src/packages/core/property-editor/uis/markdown-editor/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Markdown Editor', propertyEditorSchemaAlias: 'Umbraco.MarkdownEditor', - icon: 'umb:code', + icon: 'icon-code', group: 'pickers', settings: { properties: [ diff --git a/src/packages/core/property-editor/uis/media-picker/manifests.ts b/src/packages/core/property-editor/uis/media-picker/manifests.ts index 3bf6b01f36..716e7f1c47 100644 --- a/src/packages/core/property-editor/uis/media-picker/manifests.ts +++ b/src/packages/core/property-editor/uis/media-picker/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Media Picker', propertyEditorSchemaAlias: 'Umbraco.MediaPicker3', - icon: 'umb:picture', + icon: 'icon-picture', group: 'pickers', }, }; diff --git a/src/packages/core/property-editor/uis/member-group-picker/manifests.ts b/src/packages/core/property-editor/uis/member-group-picker/manifests.ts index f52da3c85f..0788efba6b 100644 --- a/src/packages/core/property-editor/uis/member-group-picker/manifests.ts +++ b/src/packages/core/property-editor/uis/member-group-picker/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Member Group Picker', propertyEditorSchemaAlias: 'Umbraco.MemberGroupPicker', - icon: 'umb:users-alt', + icon: 'icon-users-alt', group: 'people', }, }; diff --git a/src/packages/core/property-editor/uis/member-picker/manifests.ts b/src/packages/core/property-editor/uis/member-picker/manifests.ts index 7b35f57061..079e333aff 100644 --- a/src/packages/core/property-editor/uis/member-picker/manifests.ts +++ b/src/packages/core/property-editor/uis/member-picker/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Member Picker', propertyEditorSchemaAlias: 'Umbraco.MemberPicker', - icon: 'umb:user', + icon: 'icon-user', group: 'people', }, }; diff --git a/src/packages/core/property-editor/uis/multi-url-picker/manifests.ts b/src/packages/core/property-editor/uis/multi-url-picker/manifests.ts index d06b22fc77..246b61451d 100644 --- a/src/packages/core/property-editor/uis/multi-url-picker/manifests.ts +++ b/src/packages/core/property-editor/uis/multi-url-picker/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Multi URL Picker', propertyEditorSchemaAlias: 'Umbraco.MultiUrlPicker', - icon: 'umb:link', + icon: 'icon-link', group: 'pickers', settings: { properties: [ diff --git a/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts index 48a69ec19b..9fa8e1ed8f 100644 --- a/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts +++ b/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts @@ -92,7 +92,7 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL render() { return html` - ${this.disabled || this.readonly ? nothing : html``} + ${this.disabled || this.readonly ? nothing : html``} - + `} `; } diff --git a/src/packages/core/property-editor/uis/multiple-text-string/manifests.ts b/src/packages/core/property-editor/uis/multiple-text-string/manifests.ts index 0f8f900a83..96285b9b16 100644 --- a/src/packages/core/property-editor/uis/multiple-text-string/manifests.ts +++ b/src/packages/core/property-editor/uis/multiple-text-string/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Multiple Text String', propertyEditorSchemaAlias: 'Umbraco.MultipleTextString', - icon: 'umb:ordered-list', + icon: 'icon-ordered-list', group: '', supportsReadOnly: true, }, diff --git a/src/packages/core/property-editor/uis/number-range/manifests.ts b/src/packages/core/property-editor/uis/number-range/manifests.ts index 42f4419e19..d8a7741082 100644 --- a/src/packages/core/property-editor/uis/number-range/manifests.ts +++ b/src/packages/core/property-editor/uis/number-range/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Number Range', propertyEditorSchemaAlias: '', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }; diff --git a/src/packages/core/property-editor/uis/number/manifests.ts b/src/packages/core/property-editor/uis/number/manifests.ts index 1bc94f246a..f1ea28e1d6 100644 --- a/src/packages/core/property-editor/uis/number/manifests.ts +++ b/src/packages/core/property-editor/uis/number/manifests.ts @@ -16,7 +16,7 @@ export const manifests: Array = [ meta: { label: 'Integer', propertyEditorSchemaAlias: 'Umbraco.Integer', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', settings: { properties: [allowDecimalsConfig], @@ -37,7 +37,7 @@ export const manifests: Array = [ meta: { label: 'Decimal', propertyEditorSchemaAlias: 'Umbraco.Decimal', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', settings: { properties: [allowDecimalsConfig], diff --git a/src/packages/core/property-editor/uis/order-direction/manifests.ts b/src/packages/core/property-editor/uis/order-direction/manifests.ts index 315121c8e5..73a017f20c 100644 --- a/src/packages/core/property-editor/uis/order-direction/manifests.ts +++ b/src/packages/core/property-editor/uis/order-direction/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Order Direction', propertyEditorSchemaAlias: '', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }; diff --git a/src/packages/core/property-editor/uis/overlay-size/manifests.ts b/src/packages/core/property-editor/uis/overlay-size/manifests.ts index 5e85579e45..b238cd9645 100644 --- a/src/packages/core/property-editor/uis/overlay-size/manifests.ts +++ b/src/packages/core/property-editor/uis/overlay-size/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Overlay Size', propertyEditorSchemaAlias: '', - icon: 'umb:document', + icon: 'icon-document', group: '', }, }; diff --git a/src/packages/core/property-editor/uis/radio-button-list/manifests.ts b/src/packages/core/property-editor/uis/radio-button-list/manifests.ts index 459d5c9695..353e21d338 100644 --- a/src/packages/core/property-editor/uis/radio-button-list/manifests.ts +++ b/src/packages/core/property-editor/uis/radio-button-list/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Radio Button List', propertyEditorSchemaAlias: 'Umbraco.RadioButtonList', - icon: 'umb:target', + icon: 'icon-target', group: 'lists', settings: { properties: [ diff --git a/src/packages/core/property-editor/uis/slider/manifests.ts b/src/packages/core/property-editor/uis/slider/manifests.ts index c5b4a66f93..0f67cba70d 100644 --- a/src/packages/core/property-editor/uis/slider/manifests.ts +++ b/src/packages/core/property-editor/uis/slider/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Slider', propertyEditorSchemaAlias: 'Umbraco.Slider', - icon: 'umb:navigation-horizontal', + icon: 'icon-navigation-horizontal', group: 'common', settings: { properties: [ diff --git a/src/packages/core/property-editor/uis/text-box/manifests.ts b/src/packages/core/property-editor/uis/text-box/manifests.ts index 6084d0bb9c..1a70870708 100644 --- a/src/packages/core/property-editor/uis/text-box/manifests.ts +++ b/src/packages/core/property-editor/uis/text-box/manifests.ts @@ -17,7 +17,7 @@ export const manifests: Array = [ meta: { label: 'Text Box', propertyEditorSchemaAlias: 'Umbraco.TextBox', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', settings: { properties: [inputTypeConfig], @@ -38,7 +38,7 @@ export const manifests: Array = [ meta: { label: 'Email', propertyEditorSchemaAlias: 'Umbraco.EmailAddress', - icon: 'umb:message', + icon: 'icon-message', group: 'common', settings: { properties: [inputTypeConfig], diff --git a/src/packages/core/property-editor/uis/textarea/manifests.ts b/src/packages/core/property-editor/uis/textarea/manifests.ts index bcf042cccf..eac2bf8605 100644 --- a/src/packages/core/property-editor/uis/textarea/manifests.ts +++ b/src/packages/core/property-editor/uis/textarea/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Text Area', propertyEditorSchemaAlias: 'Umbraco.TextArea', - icon: 'umb:edit', + icon: 'icon-edit', group: 'common', settings: { properties: [ diff --git a/src/packages/core/property-editor/uis/tiny-mce/config/manifests.ts b/src/packages/core/property-editor/uis/tiny-mce/config/manifests.ts index c20dd8fe4b..987898d117 100644 --- a/src/packages/core/property-editor/uis/tiny-mce/config/manifests.ts +++ b/src/packages/core/property-editor/uis/tiny-mce/config/manifests.ts @@ -9,7 +9,7 @@ const configurationManifests: Array = [ meta: { label: 'TinyMCE Toolbar Configuration', propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }, @@ -21,7 +21,7 @@ const configurationManifests: Array = [ meta: { label: 'TinyMCE Stylesheets Configuration', propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }, @@ -33,7 +33,7 @@ const configurationManifests: Array = [ meta: { label: 'TinyMCE Dimensions Configuration', propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }, @@ -45,7 +45,7 @@ const configurationManifests: Array = [ meta: { label: 'TinyMCE Max Image Size Configuration', propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }, diff --git a/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts b/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts index 639dfe20fd..2cc4f793b7 100644 --- a/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts +++ b/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts @@ -87,7 +87,7 @@ export class UmbPropertyEditorUITinyMceToolbarConfigurationElement this._toolbarConfig.push({ alias: t.alias, label: t.label, - icon: t.icon ?? 'umb:autofill', + icon: t.icon ?? 'icon-autofill', selected: this.value.includes(t.alias), }); }); diff --git a/src/packages/core/property-editor/uis/tiny-mce/manifests.ts b/src/packages/core/property-editor/uis/tiny-mce/manifests.ts index 492c4a604b..78a2d8aa38 100644 --- a/src/packages/core/property-editor/uis/tiny-mce/manifests.ts +++ b/src/packages/core/property-editor/uis/tiny-mce/manifests.ts @@ -9,7 +9,7 @@ const manifest: ManifestPropertyEditorUi = { meta: { label: 'Rich Text Editor', propertyEditorSchemaAlias: 'Umbraco.RichText', - icon: 'umb:browser-window', + icon: 'icon-browser-window', group: 'richText', settings: { properties: [ diff --git a/src/packages/core/property-editor/uis/toggle/manifests.ts b/src/packages/core/property-editor/uis/toggle/manifests.ts index b7dc5d0b42..2f440b2102 100644 --- a/src/packages/core/property-editor/uis/toggle/manifests.ts +++ b/src/packages/core/property-editor/uis/toggle/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Toggle', propertyEditorSchemaAlias: 'Umbraco.TrueFalse', - icon: 'umb:checkbox', + icon: 'icon-checkbox', group: 'common', settings: { properties: [ diff --git a/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts b/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts index 291f884edf..910db83801 100644 --- a/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts +++ b/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts @@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = { loader: () => import('./property-editor-ui-tree-picker-start-node.element.js'), meta: { label: 'Tree Picker Start Node', - icon: 'umb:page-add', + icon: 'icon-page-add', group: 'pickers', propertyEditorSchemaAlias: '', }, diff --git a/src/packages/core/property-editor/uis/tree-picker/manifests.ts b/src/packages/core/property-editor/uis/tree-picker/manifests.ts index 0553ae2034..5bc4c2e589 100644 --- a/src/packages/core/property-editor/uis/tree-picker/manifests.ts +++ b/src/packages/core/property-editor/uis/tree-picker/manifests.ts @@ -8,7 +8,7 @@ const manifest: ManifestPropertyEditorUi = { loader: () => import('./property-editor-ui-tree-picker.element.js'), meta: { label: 'Tree Picker', - icon: 'umb:page-add', + icon: 'icon-page-add', group: 'pickers', propertyEditorSchemaAlias: 'Umbraco.MultiNodeTreePicker', settings: { diff --git a/src/packages/core/property-editor/uis/upload-field/manifests.ts b/src/packages/core/property-editor/uis/upload-field/manifests.ts index fcbc5f574b..ee3504e95a 100644 --- a/src/packages/core/property-editor/uis/upload-field/manifests.ts +++ b/src/packages/core/property-editor/uis/upload-field/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'Upload Field', propertyEditorSchemaAlias: 'Umbraco.UploadField', - icon: 'umb:download-alt', + icon: 'icon-download-alt', group: 'common', }, }; diff --git a/src/packages/core/property-editor/uis/user-picker/manifests.ts b/src/packages/core/property-editor/uis/user-picker/manifests.ts index 2e1cc22dff..f80baede7f 100644 --- a/src/packages/core/property-editor/uis/user-picker/manifests.ts +++ b/src/packages/core/property-editor/uis/user-picker/manifests.ts @@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = { meta: { label: 'User Picker', propertyEditorSchemaAlias: 'Umbraco.UserPicker', - icon: 'umb:user', + icon: 'icon-user', group: 'people', }, }; diff --git a/src/packages/core/property-editor/uis/value-type/manifests.ts b/src/packages/core/property-editor/uis/value-type/manifests.ts index 22ca907c60..d6c8ec6ea9 100644 --- a/src/packages/core/property-editor/uis/value-type/manifests.ts +++ b/src/packages/core/property-editor/uis/value-type/manifests.ts @@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = { loader: () => import('./property-editor-ui-value-type.element.js'), meta: { label: 'Value Type', - icon: 'umb:autofill', + icon: 'icon-autofill', group: 'common', }, }; diff --git a/src/packages/core/sorter/stories/test-sorter-controller.element.ts b/src/packages/core/sorter/stories/test-sorter-controller.element.ts index 6ad3b41ad1..968dec1b9b 100644 --- a/src/packages/core/sorter/stories/test-sorter-controller.element.ts +++ b/src/packages/core/sorter/stories/test-sorter-controller.element.ts @@ -64,7 +64,7 @@ export default class UmbTestSorterControllerElement extends UmbLitElement { ${model.map( (entry) => html`
  • - ${entry.value} + ${entry.value}
    • `, )} diff --git a/src/packages/dictionary/dictionary/entity-actions/manifests.ts b/src/packages/dictionary/dictionary/entity-actions/manifests.ts index 5ac4232005..8cb6b7a040 100644 --- a/src/packages/dictionary/dictionary/entity-actions/manifests.ts +++ b/src/packages/dictionary/dictionary/entity-actions/manifests.ts @@ -17,7 +17,7 @@ const entityActions: Array = [ weight: 600, api: UmbCreateDictionaryEntityAction, meta: { - icon: 'umb:add', + icon: 'icon-add', label: 'Create', repositoryAlias, entityTypes: [entityType], @@ -30,7 +30,7 @@ const entityActions: Array = [ weight: 500, api: UmbMoveEntityAction, meta: { - icon: 'umb:enter', + icon: 'icon-enter', label: 'Move', repositoryAlias, entityTypes: [entityType], @@ -43,7 +43,7 @@ const entityActions: Array = [ weight: 400, api: UmbExportDictionaryEntityAction, meta: { - icon: 'umb:download-alt', + icon: 'icon-download-alt', label: 'Export', repositoryAlias, entityTypes: [entityType], @@ -56,7 +56,7 @@ const entityActions: Array = [ weight: 300, api: UmbImportDictionaryEntityAction, meta: { - icon: 'umb:page-up', + icon: 'icon-page-up', label: 'Import', repositoryAlias, entityTypes: [entityType], @@ -69,7 +69,7 @@ const entityActions: Array = [ weight: 200, api: UmbReloadDictionaryEntityAction, meta: { - icon: 'umb:refresh', + icon: 'icon-refresh', label: 'Reload', repositoryAlias, entityTypes: [entityType], @@ -82,7 +82,7 @@ const entityActions: Array = [ weight: 100, api: UmbDeleteEntityAction, meta: { - icon: 'umb:trash', + icon: 'icon-trash', label: 'Delete', repositoryAlias, entityTypes: [entityType], diff --git a/src/packages/dictionary/dictionary/menu-item/manifests.ts b/src/packages/dictionary/dictionary/menu-item/manifests.ts index 44a411f53f..6d15c07043 100644 --- a/src/packages/dictionary/dictionary/menu-item/manifests.ts +++ b/src/packages/dictionary/dictionary/menu-item/manifests.ts @@ -8,7 +8,7 @@ const menuItem: ManifestMenuItem = { loader: () => import('./dictionary-menu-item.element.js'), meta: { label: 'Dictionary', - icon: 'umb:book-alt', + icon: 'icon-book-alt', entityType: 'dictionary-item', menus: ['Umb.Menu.Dictionary'], }, diff --git a/src/packages/dictionary/dictionary/repository/dictionary.repository.ts b/src/packages/dictionary/dictionary/repository/dictionary.repository.ts index 892ef11790..ba1f019f4d 100644 --- a/src/packages/dictionary/dictionary/repository/dictionary.repository.ts +++ b/src/packages/dictionary/dictionary/repository/dictionary.repository.ts @@ -66,7 +66,7 @@ export class UmbDictionaryRepository id: null, type: 'dictionary-root', name: 'Dictionary', - icon: 'umb:folder', + icon: 'icon-folder', hasChildren: true, }; diff --git a/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts b/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts index e26480f629..f5beeac3db 100644 --- a/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts +++ b/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts @@ -39,7 +39,7 @@ export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement {