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

move icon picker into folder

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-30 15:33:28 +02:00
parent c0d82eb210
commit be12bf474c
7 changed files with 105 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,48 @@
import { html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../core/context';
import type { UmbModalService } from '../../../core/services/modal';
/**
* @element umb-property-editor-ui-icon-picker
*/
@customElement('umb-property-editor-ui-icon-picker')
export class UmbPropertyEditorUIIconPickerElement extends UmbContextConsumerMixin(LitElement) {
static styles = [UUITextStyles];
@property()
value = '';
@property({ type: Array, attribute: false })
public config = [];
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`
<uui-button label="open-icon-picker" look="secondary" @click=${this._openModal} style="margin-right: 9px;">
Pick an icon
</uui-button>
`;
}
}
export default UmbPropertyEditorUIIconPickerElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-icon-picker': UmbPropertyEditorUIIconPickerElement;
}
}

15
src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element';
import './property-editor-ui-icon-picker.element';
export default {
title: 'Property Editor UIs/Icon Picker',
component: 'umb-property-editor-ui-icon-picker',
id: 'umb-property-editor-ui-icon-picker',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIIconPickerElement> = () =>
html`<umb-property-editor-ui-icon-picker></umb-property-editor-ui-icon-picker>`;
AAAOverview.storyName = 'Overview';

21
src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts Normal file
View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { defaultA11yConfig } from '../../../core/helpers/chai';
import { UmbPropertyEditorUIIconPickerElement } from './umb-property-editor-ui-icon-picker.element';
describe('UmbPropertyEditorUIIconPickerElement', () => {
let element: UmbPropertyEditorUIIconPickerElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-icon-picker></umb-property-editor-ui-icon-picker> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUIIconPickerElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

41
src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts
View File

@@ -1,41 +0,0 @@
import { html, LitElement } from 'lit';
import { customElement } 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`
<uui-button label="open-icon-picker" look="secondary" @click=${this._openModal} style="margin-right: 9px;">
Pick an icon
</uui-button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-icon-picker': UmbPropertyEditorIconPicker;
}
}

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

@@ -2,6 +2,7 @@
import './layouts/confirm/modal-layout-confirm.element';
import './layouts/content-picker/modal-layout-content-picker.element';
import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
import './layouts/icon-picker/modal-layout-icon-picker.element';
import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
import { BehaviorSubject, Observable } from 'rxjs';

8
src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
View File

@@ -325,6 +325,14 @@ export const data: Array<PropertyEditor> = [
icon: 'umb:autofill',
alias: 'Umbraco.Custom',
},
{
isSystem: false,
group: 'Custom',
hasConfig: true,
name: 'Icon Picker',
icon: 'umb:autofill',
alias: 'Umbraco.IconPicker',
},
];
// Temp mocked database

12
src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
View File

@@ -95,4 +95,16 @@ export const manifests: Array<ManifestTypes & { loader: () => Promise<object | H
group: 'Common',
},
},
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.IconPicker',
name: 'Icon Picker Property Editor UI',
loader: () => import('../backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element'),
meta: {
label: 'Icon Picker',
propertyEditor: 'Umbraco.IconPicker',
icon: 'umb:document',
group: 'Common',
},
},
];