yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

open icon picker in storybook

Browse Source
This commit is contained in:
Mads Rasmussen
2022-10-07 19:08:19 +02:00
parent d404970f04
commit 3a1ca953ca
7 changed files with 104 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/.storybook/preview.js
View File

@@ -1,6 +1,11 @@
import '../src/core/context/context-provider.element';
import '../src/css/custom-properties.css';
import '../src/backoffice/components/backoffice-modal-container.element';
import '@umbraco-ui/uui';
import '@umbraco-ui/uui-modal';
import '@umbraco-ui/uui-modal-container';
import '@umbraco-ui/uui-modal-dialog';
import '@umbraco-ui/uui-modal-sidebar';
import { html } from 'lit-html';
import { initialize, mswDecorator } from 'msw-storybook-addon';
@@ -18,6 +23,7 @@ import { onUnhandledRequest } from '../src/mocks/browser';
import { handlers } from '../src/mocks/browser-handlers';
import { internalManifests } from '../src/temp-internal-manifests';
import { LitElement } from 'lit';
import { UmbModalService } from '../src/core/services/modal';
const extensionRegistry = new UmbExtensionRegistry();
internalManifests.forEach((manifest) => extensionRegistry.register(manifest));
@@ -69,6 +75,13 @@ const propertyEditorConfigStoreProvider = (story) => html`
>
`;
const modalServiceProvider = (story) => html`
<umb-context-provider style="display: block; padding: 32px;" key="umbModalService" .value=${new UmbModalService()}>
${story()}
<umb-backoffice-modal-container></umb-backoffice-modal-container>
</umb-context-provider>
`;
// Initialize MSW
initialize({ onUnhandledRequest });
@@ -82,6 +95,7 @@ export const decorators = [
documentTypeStoreProvider,
propertyEditorStoreProvider,
propertyEditorConfigStoreProvider,
modalServiceProvider,
];
export const parameters = {

2
src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
View File

@@ -27,7 +27,7 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbContextConsumerMixi
}
private _openModal() {
this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' });
this._modalService?.iconPicker();
}
render() {

80
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
View File

@@ -3,10 +3,15 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbModalLayoutElement } from '../modal-layout.element';
import '../../../../../backoffice/editors/shared/editor-entity/editor-entity.element';
import '../../../../../backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element';
export interface UmbModalIconPickerData {
multiple: boolean;
selection: string[];
}
@customElement('umb-modal-layout-icon-picker')
class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbModalIconPickerData> {
static styles = [
UUITextStyles,
css`
@@ -108,38 +113,38 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
@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',
'umb:add',
'umb:alert',
'umb:attachment',
'umb:calendar',
'umb:check',
'umb:clipboard',
'umb:code',
'umb:colorpicker',
'umb:copy',
'umb:delete',
'umb:document',
'umb:download',
'umb:edit',
'umb:favorite',
'umb:folder',
'umb:forbidden',
'umb:info',
'umb:link',
'umb:lock',
'umb:pause',
'umb:picture',
'umb:play',
'umb:remove',
'umb:search',
'umb:see',
'umb:settings',
'umb:subtract',
'umb:sync',
'umb:unlock',
'umb:unsee',
'umb:wand',
'umb:wrong',
];
@property({ type: Array })
@@ -229,8 +234,7 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
render() {
return html`
<umb-editor-entity>
<h4 slot="name">Select icon</h4>
<umb-editor-entity-layout headline="Select Icon">
<div id="container">
${this.renderSearchbar()}
<hr />
@@ -244,7 +248,7 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
<uui-button slot="actions" color="positive" look="primary" @click="${this._save}" label="save">
Save
</uui-button>
</umb-editor-entity>
</umb-editor-entity-layout>
`;
}
@@ -297,6 +301,8 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
}
}
export default UmbModalLayoutIconPickerElement;
declare global {
interface HTMLElementTagNameMap {
'umb-modal-layout-icon-picker': UmbModalLayoutIconPickerElement;

25
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts Normal file
View File

@@ -0,0 +1,25 @@
import '../../../../../backoffice/editors/shared/editor-layout/editor-layout.element';
import './modal-layout-icon-picker.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import type { UmbModalLayoutIconPickerElement, UmbModalIconPickerData } from './modal-layout-icon-picker.element';
export default {
title: 'API/Modals/Layouts/Icon Picker',
component: 'umb-modal-layout-icon-picker',
id: 'modal-layout-icon-picker',
} as Meta;
const data: UmbModalIconPickerData = {
multiple: true,
selection: [],
};
export const Overview: Story<UmbModalLayoutIconPickerElement> = () => html`
<!-- TODO: figure out if generics are allowed for properties:
https://github.com/runem/lit-analyzer/issues/149
https://github.com/runem/lit-analyzer/issues/163 -->
<umb-modal-layout-icon-picker .data=${data as any}></umb-modal-layout-icon-picker>
`;

12
src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
View File

@@ -11,6 +11,7 @@ import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm
import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element';
import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
import { UmbModalHandler } from './';
import { UmbModalIconPickerData } from './layouts/icon-picker/modal-layout-icon-picker.element';
export type UmbModelType = 'dialog' | 'sidebar';
@@ -57,6 +58,17 @@ export class UmbModalService {
return this.open('umb-modal-layout-property-editor-ui-picker', { data, type: 'sidebar', size: 'small' });
}
/**
* Opens an Icon Picker sidebar modal
* @public
* @param {UmbModalIconPickerData} [data]
* @return {*} {UmbModalHandler}
* @memberof UmbModalService
*/
public iconPicker(data?: UmbModalIconPickerData): UmbModalHandler {
return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' });
}
/**
* Opens a modal or sidebar modal
* @public

34
src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
View File

@@ -1,12 +1,3 @@
import '../../../backoffice/components/backoffice-modal-container.element';
import '../../../backoffice/editors/shared/editor-layout/editor-layout.element';
import '../../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element';
import '../../context/context-provider.element';
import '@umbraco-ui/uui-modal';
import '@umbraco-ui/uui-modal-container';
import '@umbraco-ui/uui-modal-dialog';
import '@umbraco-ui/uui-modal-sidebar';
import { Meta, Story } from '@storybook/web-components';
import { LitElement } from 'lit';
import { html } from 'lit-html';
@@ -17,19 +8,12 @@ import { UmbModalService } from './';
export default {
title: 'API/Modals',
component: 'umb-installer',
decorators: [
(story) =>
html`<umb-context-provider
style="display: block; padding: 32px;"
key="umbModalService"
.value=${new UmbModalService()}>
${story()}
</umb-context-provider>`,
],
id: 'installer-page',
id: 'umb-modal-service',
argTypes: {
modalLayout: { control: 'select', options: ['Confirm', 'Content Picker', 'Property Editor UI Picker'] },
modalLayout: {
control: 'select',
options: ['Confirm', 'Content Picker', 'Property Editor UI Picker', 'Icon Picker'],
},
},
} as Meta;
@@ -58,6 +42,9 @@ export class StoryModalServiceExampleElement extends UmbContextConsumerMixin(Lit
case 'Property Editor UI Picker':
this._modalService?.propertyEditorUIPicker();
break;
case 'Icon Picker':
this._modalService?.iconPicker();
break;
default:
this._modalService?.confirm({
headline: 'Headline',
@@ -77,10 +64,7 @@ export class StoryModalServiceExampleElement extends UmbContextConsumerMixin(Lit
}
const Template: Story = (props) => {
return html`
<umb-backoffice-modal-container></umb-backoffice-modal-container>
<story-modal-service-example .modalLayout=${props.modalLayout}></story-modal-service-example>
`;
return html` <story-modal-service-example .modalLayout=${props.modalLayout}></story-modal-service-example> `;
};
export const Overview = Template.bind({});

40
src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
View File

@@ -1,40 +0,0 @@
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/property-editor-uis/icon-picker/property-editor-ui-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';
import '@umbraco-ui/uui-modal-sidebar';
import '@umbraco-ui/uui-modal-dialog';
import { Meta } from '@storybook/web-components';
import { html } from 'lit-html';
import { UmbModalService } from '../core/services/modal';
export default {
title: 'Editors/Icon Picker',
component: 'umb-property-editor-icon-picker',
id: 'icon-picker',
decorators: [
(story) =>
html`
<uui-icon-registry-essential>
<umb-context-provider
style="display: block; padding: 32px;"
key="umbModalService"
.value=${new UmbModalService()}>
${story()}
</umb-context-provider>
</uui-icon-registry-essential>
`,
],
} as Meta;
export const IconPickerEditor = () => html`<umb-backoffice-modal-container></umb-backoffice-modal-container>
<umb-property-editor-icon-picker></umb-property-editor-icon-picker>`;
export const IconPickerModalLayout = () => html`<umb-modal-layout-icon-picker></umb-modal-layout-icon-picker>`;