From 7044fffdd7dd06f64104230860e0a1cc666fc9d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Aug 2024 14:59:59 +0200 Subject: [PATCH 1/3] icons examples --- .../examples/icons/README.md | 7 ++++ .../examples/icons/files/icon-bomb.ts | 1 + .../examples/icons/files/icon-bones.ts | 14 ++++++++ .../examples/icons/icons-dashboard.ts | 34 +++++++++++++++++++ .../examples/icons/icons-dictionary.ts | 10 ++++++ .../examples/icons/index.ts | 21 ++++++++++++ .../icon-registry/icon-registry.context.ts | 4 +-- 7 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/examples/icons/README.md create mode 100644 src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/icons/files/icon-bones.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/icons/index.ts diff --git a/src/Umbraco.Web.UI.Client/examples/icons/README.md b/src/Umbraco.Web.UI.Client/examples/icons/README.md new file mode 100644 index 0000000000..42c0147752 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/icons/README.md @@ -0,0 +1,7 @@ +# Icons Example + +This example demonstrates how to registerer your own icons. + +Currently they have to be made as JavaScript files that exports an SVG string. + +Declared as part of a Icon Dictionary in a JavaScript file. diff --git a/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts new file mode 100644 index 0000000000..fe1e2907ac --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts @@ -0,0 +1 @@ +export default ``; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bones.ts b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bones.ts new file mode 100644 index 0000000000..1b37bf8a17 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bones.ts @@ -0,0 +1,14 @@ +export default ` + + + +`; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts new file mode 100644 index 0000000000..5917503b48 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts @@ -0,0 +1,34 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; + +@customElement('example-icons-dashboard') +export class ExampleIconsDashboard extends UmbElementMixin(LitElement) { + override render() { + return html` + +

Custom icons:

+ + + + `; + } + + static override styles = [ + UmbTextStyles, + css` + :host { + display: block; + padding: var(--uui-size-layout-1); + } + `, + ]; +} + +export default ExampleIconsDashboard; + +declare global { + interface HTMLElementTagNameMap { + 'example-icons-dashboard': ExampleIconsDashboard; + } +} diff --git a/src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts b/src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts new file mode 100644 index 0000000000..2472d6bf5d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts @@ -0,0 +1,10 @@ +export default [ + { + name: 'my-icon-bomb', + path: () => import('./files/icon-bomb.js'), + }, + { + name: 'my-icon-bones', + path: () => import('./files/icon-bones.js'), + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/icons/index.ts b/src/Umbraco.Web.UI.Client/examples/icons/index.ts new file mode 100644 index 0000000000..b53fa46a80 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/icons/index.ts @@ -0,0 +1,21 @@ +import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'icons', + name: 'Example Dataset Dashboard', + alias: 'example.dashboard.dataset', + js: () => import('./icons-dictionary.js'), + }, + { + type: 'dashboard', + name: 'Example Icons Dashboard', + alias: 'example.dashboard.icons', + element: () => import('./icons-dashboard.js'), + weight: 900, + meta: { + label: 'Icons example', + pathname: 'icons-example', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-registry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-registry.context.ts index 2dfbcca3bf..d479851c79 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-registry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-registry.context.ts @@ -30,12 +30,12 @@ export class UmbIconRegistryContext extends UmbContextBase(manifest.js); if (!js || !js.default || !Array.isArray(js.default)) { From c2cc8b26e2c21c349313ff02b6c6b0d04dfeb198 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Aug 2024 15:02:46 +0200 Subject: [PATCH 2/3] note on colors --- .../examples/dashboard-with-property-dataset/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md index 4a1b15255a..557c5709cc 100644 --- a/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md +++ b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md @@ -3,3 +3,8 @@ This example demonstrates the essence of the Property Dataset. This dashboard implements such, to display a few selected Property Editors and bind the data back to the Dashboard. + + +## SVG code of Icons + +Make sure to use currentColor for fill or stroke color, as that will make the icon adapt to the font color of where its begin used. From d43ed82652e9065da416addf7b386d61503f899d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 19 Aug 2024 10:19:11 +0200 Subject: [PATCH 3/3] change icons --- .../examples/icons/files/icon-bomb.ts | 1 - .../files/{icon-bones.ts => icon-heart.ts} | 6 +++--- .../examples/icons/files/icon-wand.ts | 19 +++++++++++++++++++ .../examples/icons/icons-dashboard.ts | 6 ++++-- .../examples/icons/icons-dictionary.ts | 8 ++++---- 5 files changed, 30 insertions(+), 10 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts rename src/Umbraco.Web.UI.Client/examples/icons/files/{icon-bones.ts => icon-heart.ts} (50%) create mode 100644 src/Umbraco.Web.UI.Client/examples/icons/files/icon-wand.ts diff --git a/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts deleted file mode 100644 index fe1e2907ac..0000000000 --- a/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bomb.ts +++ /dev/null @@ -1 +0,0 @@ -export default ``; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bones.ts b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-heart.ts similarity index 50% rename from src/Umbraco.Web.UI.Client/examples/icons/files/icon-bones.ts rename to src/Umbraco.Web.UI.Client/examples/icons/files/icon-heart.ts index 1b37bf8a17..d8dd6c2be4 100644 --- a/src/Umbraco.Web.UI.Client/examples/icons/files/icon-bones.ts +++ b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-heart.ts @@ -1,6 +1,6 @@ export default ` stroke-linecap="round" stroke-linejoin="round" > - + -`; \ No newline at end of file +`; diff --git a/src/Umbraco.Web.UI.Client/examples/icons/files/icon-wand.ts b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-wand.ts new file mode 100644 index 0000000000..c9425fbae4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/icons/files/icon-wand.ts @@ -0,0 +1,19 @@ +export default ` + + + + + + + + +`; diff --git a/src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts index 5917503b48..5307bde407 100644 --- a/src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts +++ b/src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts @@ -2,14 +2,16 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name @customElement('example-icons-dashboard') +// eslint-disable-next-line local-rules/umb-class-prefix export class ExampleIconsDashboard extends UmbElementMixin(LitElement) { override render() { return html`

Custom icons:

- - + + `; } diff --git a/src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts b/src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts index 2472d6bf5d..b91cd341ba 100644 --- a/src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts +++ b/src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts @@ -1,10 +1,10 @@ export default [ { - name: 'my-icon-bomb', - path: () => import('./files/icon-bomb.js'), + name: 'my-icon-wand', + path: () => import('./files/icon-wand.js'), }, { - name: 'my-icon-bones', - path: () => import('./files/icon-bones.js'), + name: 'my-icon-heart', + path: () => import('./files/icon-heart.js'), }, ];