From 6aea221f301a701157fc164efd510d4860ddb5f0 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 23 Aug 2022 10:46:51 +0200 Subject: [PATCH 1/9] init --- .../components/icon-selector.element.ts | 566 ++++++++++++++++++ .../src/stories/icon-selector.stories.ts | 68 +++ 2 files changed, 634 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts new file mode 100644 index 0000000000..4783f02d1b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts @@ -0,0 +1,566 @@ +import { css, html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property, state } from 'lit/decorators.js'; +import { UmbModalService } from '../../core/services/modal'; +import { UmbModalLayoutElement } from '../../core/services/modal/layouts/modal-layout.element'; +import { UmbModalContentPickerData } from '../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element'; + +@customElement('umb-icon-selector') +class UmbIconSelector extends UmbModalLayoutElement { + static styles = [ + UUITextStyles, + css` + :host { + position: relative; + max-height: 100%; + height: 100vh; + box-sizing: border-box; + display: flex; + overflow-y: scroll; + } + + #box { + margin: 10px 10px; + } + + #box .header-icon { + font-size: 20px; + height: 1.3em; + } + + #box hr { + height: 1px; + border: none; + background-color: #ccc; + margin: 20px 0; + } + + #searchbar { + width: 100%; + } + #searchbar_icon { + padding-left: 6px; + } + + input[type='radio'] { + display: none; + position: absolute; + } + + #palette { + display: flex; + flex-wrap: wrap; + } + + #palette .colorspot { + box-sizing: border-box; + line-height: 0; + padding: 4px; + margin: 5px 5px 5px 0; + height: 25px; + width: 25px; + display: inline-block; + border-radius: 5px; + } + + #palette .checkmark { + height: 100%; + width: 100%; + display: none; + color: white; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 100%; + } + #palette input[type='radio']:checked ~ .checkmark { + display: block; + } + + #icon-selection { + line-height: 0; + position: relative; + max-height: 80%; + font-size: 20px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + #icon-selection .icon { + margin: 1px; + display: inline-block; + border: 1px solid transparent; + border-radius: 2px; + padding: 10px; + } + + #icon-selection .icon-container { + display: inline-block; + } + + /*#icon-selection input[type='radio']:checked ~ .icon { + background-color: rgba(0, 0, 0, 0.1); + border: 1px solid #ffeeee; + }*/ + + #icon-selection .icon:focus, + #icon-selection .icon:hover { + background-color: rgba(0, 0, 0, 0.05); + } + `, + ]; + + @property({ type: Array }) + iconlist = [ + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + /* Duplicates */ + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + 'add', + 'alert', + 'attachment', + 'calendar', + 'check', + 'clipboard', + 'code', + 'colorpicker', + 'copy', + 'delete', + 'document', + 'download', + 'edit', + 'favorite', + 'folder', + 'forbidden', + 'info', + 'link', + 'lock', + 'pause', + 'picture', + 'play', + 'remove', + 'search', + 'see', + 'settings', + 'subtract', + 'sync', + 'unlock', + 'unsee', + 'wand', + 'wrong', + ]; + + @property({ type: Array }) + iconlistFiltered: Array; + + @property({ type: Array }) + colorlist = [ + '#000000', + '#f79c37', + '#fad634', + '#f5c1bc', + '#162335', + '#000001', + '#f79c38', + '#fad633', + '#f5c1bb', + '#162336', + '#000002', + '#f79c36', + '#fad632', + '#f5c1bf', + '#162330', + ]; + + @state() + private _currentColor: string; + + @state() + private _currentIcon: string; + + private _changeIconColor(e: { target: HTMLInputElement; type: any; key: unknown }) { + if (e.type == 'click') { + this._currentColor = e.target.id; + } else if (e.type == 'keyup' && e.key == 'Enter') { + e.target.children[0].setAttribute('checked', 'true'); + this._currentColor = e.target.children[0].id; + } + } + + private _changeIcon(e: { target: HTMLInputElement; type: any; key: unknown }) { + if (e.type == 'click' || (e.type == 'keyup' && e.key == 'Enter')) { + this._currentIcon = e.target.id; + } + } + + private _filterIcons(e: { target: HTMLInputElement }) { + if (e.target.value) { + this.iconlistFiltered = this.iconlist.filter((icon) => icon.includes(e.target.value)); + } else { + this.iconlistFiltered = this.iconlist; + } + } + + private _setBackground(color: string) { + return 'background-color: ' + color; + } + private _setColor(color: string) { + return 'color: ' + color; + } + + private _close() { + this.modalHandler?.close(); + } + + private _save() { + this.modalHandler?.close({ color: this._currentColor, icon: this._currentIcon }); + } + + constructor() { + super(); + this._currentColor = ''; + this._currentIcon = ''; + this.iconlistFiltered = []; + } + + connectedCallback(): void { + super.connectedCallback(); + this._currentColor = this.colorlist[0]; + this._currentIcon = this.iconlist[0]; + this.iconlistFiltered = this.iconlist; + } + + render() { + return html` + + + ${this.renderSearchbar()} +
+
${this.renderPalette()}
+
+ ${this.renderIconSelection()} +
+ Close + Save + + `; + } + + renderSearchbar() { + return html` + + `; + } + + renderPalette() { + return html`${this.colorlist.map((color, index) => { + if (index === 0) { + return html``; + } else { + return html``; + } + })}`; + } + + renderIconSelection() { + return html`${this.iconlistFiltered.map((icon) => { + return html` + + `; + })}`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-icon-selector': UmbIconSelector; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts new file mode 100644 index 0000000000..374cc78eff --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts @@ -0,0 +1,68 @@ +import '../backoffice/components/backoffice-modal-container.element'; +import '../core/services/modal/layouts/content-picker/modal-layout-content-picker.element'; +import '../core/context/context-provider.element'; +import '../backoffice/editors/shared/editor-layout/editor-layout.element'; +import '../backoffice/components/icon-selector.element'; + +import '@umbraco-ui/uui-modal'; +import '@umbraco-ui/uui-modal-container'; +import '@umbraco-ui/uui-modal-sidebar'; +import '@umbraco-ui/uui-modal-dialog'; + +import { Meta, Story } from '@storybook/web-components'; +import { customElement, property, state } from 'lit/decorators.js'; +import { LitElement } from 'lit'; +import { html } from 'lit-html'; +import { UmbModalService } from '../core/services/modal'; +import { UmbContextConsumerMixin } from '../core/context'; + +export default { + title: 'Icon Selector', + component: 'umb-icon-selector', + id: 'icon-selector', + decorators: [ + (story) => + html` + ${story()} + `, + ], +} as Meta; + +@customElement('story-modal-icon-selector') +class StoryModalIconSelector extends UmbContextConsumerMixin(LitElement) { + @state() + value = ''; + + private _modalService?: UmbModalService; + + constructor() { + super(); + this.consumeContext('umbModalService', (modalService: UmbModalService) => { + this._modalService = modalService; + }); + } + + private _openModal() { + this._modalService?.open('umb-icon-selector', { type: 'sidebar', size: 'small' }); + } + + render() { + return html` + this._openModal()} style="margin-right: 9px;" + >Pick an icon + `; + } +} + +const Template: Story = () => { + return html` + `; +}; + +export const IconSelectorModal = Template.bind({}); + +export const IconSelector = () => html``; From f1c3e68fcad2bdeaac57a892a97d76e9d25bae75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 23 Aug 2022 12:22:00 +0200 Subject: [PATCH 2/9] now uses css grid --- .../components/icon-selector.element.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts index 4783f02d1b..da60e3ac90 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts @@ -77,20 +77,17 @@ class UmbIconSelector extends UmbModalLayoutElement { #icon-selection { line-height: 0; - position: relative; - max-height: 80%; - font-size: 20px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(40px, auto)); } #icon-selection .icon { - margin: 1px; display: inline-block; - border: 1px solid transparent; border-radius: 2px; - padding: 10px; + width: 100%; + height: 100%; + padding: 8px; + box-sizing: border-box; } #icon-selection .icon-container { From 21154d908e73e9f2e19a8d2f7de9c3f7f5128fdb Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 23 Aug 2022 16:00:11 +0200 Subject: [PATCH 3/9] preselect with if statements --- .../components/icon-selector.element.ts | 66 +++++++++---------- 1 file changed, 31 insertions(+), 35 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts index da60e3ac90..93d0b97bfa 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts @@ -12,15 +12,11 @@ class UmbIconSelector extends UmbModalLayoutElement { css` :host { position: relative; - max-height: 100%; - height: 100vh; - box-sizing: border-box; - display: flex; - overflow-y: scroll; } #box { - margin: 10px 10px; + overflow-y: auto; + max-height: 100vh; } #box .header-icon { @@ -79,6 +75,9 @@ class UmbIconSelector extends UmbModalLayoutElement { line-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, auto)); + overflow-y: scroll; + max-height: 100%; + min-height: 0; } #icon-selection .icon { @@ -100,8 +99,9 @@ class UmbIconSelector extends UmbModalLayoutElement { }*/ #icon-selection .icon:focus, - #icon-selection .icon:hover { - background-color: rgba(0, 0, 0, 0.05); + #icon-selection .icon:hover, + #icon-selection .icon.selected { + background-color: rgba(0, 0, 0, 0.1); } `, ]; @@ -487,12 +487,16 @@ class UmbIconSelector extends UmbModalLayoutElement { slot="headline" .name="${this._currentIcon}" .style="${this._setColor(this._currentColor)}"> + ${this.renderSearchbar()}
+
${this.renderPalette()}
+
${this.renderIconSelection()}
+ Close Save @@ -510,32 +514,24 @@ class UmbIconSelector extends UmbModalLayoutElement { } renderPalette() { - return html`${this.colorlist.map((color, index) => { - if (index === 0) { - return html``; - } else { - return html``; - } + return html`${this.colorlist.map((color) => { + return html``; })}`; } @@ -545,7 +541,7 @@ class UmbIconSelector extends UmbModalLayoutElement { Date: Wed, 24 Aug 2022 12:04:45 +0200 Subject: [PATCH 4/9] fix scroll --- .../components/icon-selector.element.ts | 59 +++++++++---------- .../src/stories/icon-selector.stories.ts | 16 +++-- 2 files changed, 39 insertions(+), 36 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts index 93d0b97bfa..acbd91b3d8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts @@ -5,6 +5,8 @@ import { UmbModalService } from '../../core/services/modal'; import { UmbModalLayoutElement } from '../../core/services/modal/layouts/modal-layout.element'; import { UmbModalContentPickerData } from '../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element'; +import '../editors/shared/editor-entity/editor-entity.element'; + @customElement('umb-icon-selector') class UmbIconSelector extends UmbModalLayoutElement { static styles = [ @@ -14,20 +16,20 @@ class UmbIconSelector extends UmbModalLayoutElement { position: relative; } - #box { - overflow-y: auto; - max-height: 100vh; + #container { + display: flex; + flex-direction: column; + height: 100%; + background-color: white; + box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)); + border-radius: var(--uui-border-radius); + padding: var(--uui-size-space-5); + box-sizing: border-box; } - - #box .header-icon { - font-size: 20px; - height: 1.3em; - } - - #box hr { + #container hr { height: 1px; border: none; - background-color: #ccc; + background-color: var(--uui-color-divider); margin: 20px 0; } @@ -480,27 +482,24 @@ class UmbIconSelector extends UmbModalLayoutElement { } render() { - return html` - - + return html` + +

Select icon

+
+ ${this.renderSearchbar()} +
- ${this.renderSearchbar()} -
+
${this.renderPalette()}
-
${this.renderPalette()}
- -
- ${this.renderIconSelection()} -
- - Close - Save - - `; +
+ ${this.renderIconSelection()} +
+ Close + + Save + + + `; } renderSearchbar() { diff --git a/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts index 374cc78eff..91d3296eb5 100644 --- a/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts @@ -22,12 +22,16 @@ export default { id: 'icon-selector', decorators: [ (story) => - html` - ${story()} - `, + html` + + + ${story()} + + + `, ], } as Meta; From ac21dfc91872e07de3ce3a58601de32f990e3ab3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 6 Sep 2022 10:47:57 +0200 Subject: [PATCH 5/9] added backoffice colors and removed duplicate icons --- .../components/icon-selector.element.ts | 290 ++---------------- 1 file changed, 19 insertions(+), 271 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts index acbd91b3d8..4f04d7a9f8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts @@ -142,263 +142,6 @@ class UmbIconSelector extends UmbModalLayoutElement { 'unsee', 'wand', 'wrong', - /* Duplicates */ - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', - 'add', - 'alert', - 'attachment', - 'calendar', - 'check', - 'clipboard', - 'code', - 'colorpicker', - 'copy', - 'delete', - 'document', - 'download', - 'edit', - 'favorite', - 'folder', - 'forbidden', - 'info', - 'link', - 'lock', - 'pause', - 'picture', - 'play', - 'remove', - 'search', - 'see', - 'settings', - 'subtract', - 'sync', - 'unlock', - 'unsee', - 'wand', - 'wrong', ]; @property({ type: Array }) @@ -407,20 +150,25 @@ class UmbIconSelector extends UmbModalLayoutElement { @property({ type: Array }) colorlist = [ '#000000', - '#f79c37', - '#fad634', - '#f5c1bc', - '#162335', - '#000001', - '#f79c38', - '#fad633', - '#f5c1bb', - '#162336', - '#000002', - '#f79c36', - '#fad632', - '#f5c1bf', - '#162330', + '#373737', + '#9e9e9e', + '#607d8b', + '#2196f3', + '#03a9f4', + '#3f51b5', + '#9c27b0', + '#673ab7', + '#00bcd4', + '#4caf50', + '#8bc34a', + '#cddc39', + '#ffeb3b', + '#ffc107', + '#ff9800', + '#ff5722', + '#f44336', + '#e91e63', + '#795548', ]; @state() From f2992a1e8ae2463dbbf4c92ff2134ad3ef5786d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 6 Sep 2022 11:04:10 +0200 Subject: [PATCH 6/9] added file for icon picker property editor --- .../property-editor-icon-picker.element.ts | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts new file mode 100644 index 0000000000..b4f7d70a05 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts @@ -0,0 +1,41 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; + +import { UmbContextConsumerMixin } from '../../core/context'; +import { UmbModalService } from '../../core/services/modal'; + +// TODO: remove these imports when they are part of UUI +import '@umbraco-ui/uui-modal'; +import '@umbraco-ui/uui-modal-sidebar'; +import '@umbraco-ui/uui-modal-container'; +import '@umbraco-ui/uui-modal-dialog'; + +@customElement('umb-property-editor-icon-picker') +class UmbPropertyEditorIconPicker extends UmbContextConsumerMixin(LitElement) { + private _modalService?: UmbModalService; + + constructor() { + super(); + this.consumeContext('umbModalService', (modalService: UmbModalService) => { + this._modalService = modalService; + }); + } + + private _openModal() { + this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' }); + } + + render() { + return html` + + Pick an icon + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-property-editor-icon-picker': UmbPropertyEditorIconPicker; + } +} From 7d6a31e1a7ce1f09257da27ab59efd8badcff05c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 6 Sep 2022 11:04:23 +0200 Subject: [PATCH 7/9] moved and renamed icon picker files --- .../modal-layout-icon-picker.element.ts} | 14 +++---- ...ctor.stories.ts => icon-picker.stories.ts} | 41 ++++--------------- 2 files changed, 15 insertions(+), 40 deletions(-) rename src/Umbraco.Web.UI.Client/src/{backoffice/components/icon-selector.element.ts => core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts} (92%) rename src/Umbraco.Web.UI.Client/src/stories/{icon-selector.stories.ts => icon-picker.stories.ts} (57%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts similarity index 92% rename from src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts rename to src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts index 4f04d7a9f8..e6ec60bd29 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/icon-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts @@ -1,14 +1,14 @@ import { css, html, LitElement } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; -import { UmbModalService } from '../../core/services/modal'; -import { UmbModalLayoutElement } from '../../core/services/modal/layouts/modal-layout.element'; -import { UmbModalContentPickerData } from '../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element'; +import { UmbModalService } from '../..'; +import { UmbModalLayoutElement } from '../modal-layout.element'; +import { UmbModalContentPickerData } from '../content-picker/modal-layout-content-picker.element'; -import '../editors/shared/editor-entity/editor-entity.element'; +import '../../../../../backoffice/editors/shared/editor-entity/editor-entity.element'; -@customElement('umb-icon-selector') -class UmbIconSelector extends UmbModalLayoutElement { +@customElement('umb-modal-layout-icon-picker') +class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement { static styles = [ UUITextStyles, css` @@ -301,6 +301,6 @@ class UmbIconSelector extends UmbModalLayoutElement { declare global { interface HTMLElementTagNameMap { - 'umb-icon-selector': UmbIconSelector; + 'umb-modal-layout-icon-picker': UmbModalLayoutIconPickerElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts similarity index 57% rename from src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts rename to src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts index 91d3296eb5..5d1f9a85d9 100644 --- a/src/Umbraco.Web.UI.Client/src/stories/icon-selector.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts @@ -2,7 +2,9 @@ import '../backoffice/components/backoffice-modal-container.element'; import '../core/services/modal/layouts/content-picker/modal-layout-content-picker.element'; import '../core/context/context-provider.element'; import '../backoffice/editors/shared/editor-layout/editor-layout.element'; -import '../backoffice/components/icon-selector.element'; + +import '../backoffice/property-editors/property-editor-icon-picker.element'; +import '../core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element'; import '@umbraco-ui/uui-modal'; import '@umbraco-ui/uui-modal-container'; @@ -17,9 +19,9 @@ import { UmbModalService } from '../core/services/modal'; import { UmbContextConsumerMixin } from '../core/context'; export default { - title: 'Icon Selector', - component: 'umb-icon-selector', - id: 'icon-selector', + title: 'Icon Picker', + component: 'umb-property-editor-icon-picker', + id: 'icon-picker', decorators: [ (story) => html` @@ -35,38 +37,11 @@ export default { ], } as Meta; -@customElement('story-modal-icon-selector') -class StoryModalIconSelector extends UmbContextConsumerMixin(LitElement) { - @state() - value = ''; - - private _modalService?: UmbModalService; - - constructor() { - super(); - this.consumeContext('umbModalService', (modalService: UmbModalService) => { - this._modalService = modalService; - }); - } - - private _openModal() { - this._modalService?.open('umb-icon-selector', { type: 'sidebar', size: 'small' }); - } - - render() { - return html` - this._openModal()} style="margin-right: 9px;" - >Pick an icon - `; - } -} - const Template: Story = () => { return html` - `; + `; }; export const IconSelectorModal = Template.bind({}); -export const IconSelector = () => html``; +export const IconSelector = () => html``; From 524875067b73138d5e1ef0878e464144b0bb45fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 6 Sep 2022 11:07:53 +0200 Subject: [PATCH 8/9] story cleanup --- .../src/stories/icon-picker.stories.ts | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts index 5d1f9a85d9..5aa329fb1a 100644 --- a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts @@ -11,15 +11,12 @@ import '@umbraco-ui/uui-modal-container'; import '@umbraco-ui/uui-modal-sidebar'; import '@umbraco-ui/uui-modal-dialog'; -import { Meta, Story } from '@storybook/web-components'; -import { customElement, property, state } from 'lit/decorators.js'; -import { LitElement } from 'lit'; +import { Meta } from '@storybook/web-components'; import { html } from 'lit-html'; import { UmbModalService } from '../core/services/modal'; -import { UmbContextConsumerMixin } from '../core/context'; export default { - title: 'Icon Picker', + title: 'Editors/Icon Picker', component: 'umb-property-editor-icon-picker', id: 'icon-picker', decorators: [ @@ -37,11 +34,7 @@ export default { ], } as Meta; -const Template: Story = () => { - return html` - `; -}; +export const IconPickerEditor = () => html` + `; -export const IconSelectorModal = Template.bind({}); - -export const IconSelector = () => html``; +export const IconPickerModalLayout = () => html``; From 80b0128d26b6eed407c2d1e97f1f90792d1713ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 6 Sep 2022 11:09:12 +0200 Subject: [PATCH 9/9] cleanup --- .../property-editors/property-editor-icon-picker.element.ts | 4 ++-- .../layouts/icon-picker/modal-layout-icon-picker.element.ts | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts index b4f7d70a05..9b3cbc3b92 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts @@ -1,5 +1,5 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; import { UmbContextConsumerMixin } from '../../core/context'; import { UmbModalService } from '../../core/services/modal'; diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts index e6ec60bd29..dd94ddf65d 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts @@ -1,9 +1,7 @@ -import { css, html, LitElement } from 'lit'; +import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; -import { UmbModalService } from '../..'; import { UmbModalLayoutElement } from '../modal-layout.element'; -import { UmbModalContentPickerData } from '../content-picker/modal-layout-content-picker.element'; import '../../../../../backoffice/editors/shared/editor-entity/editor-entity.element';