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

move content picker into documents

Browse Source
This commit is contained in:
Mads Rasmussen
2023-03-07 19:48:56 +01:00
parent 2694b964d3
commit ac76b12e22
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/Umbraco.Web.UI.Client/libs/modal/layouts/content-picker/modal-layout-content-picker.element.ts
View File

@@ -1,103 +0,0 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { UmbModalLayoutElement } from '../modal-layout.element';
export interface UmbModalContentPickerData {
multiple?: boolean;
selection?: Array<string>;
}
import { UmbTreeElement } from '../../../../src/backoffice/shared/components/tree/tree.element';
// TODO: make use of UmbPickerLayoutBase
@customElement('umb-modal-layout-content-picker')
export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<UmbModalContentPickerData> {
static styles = [
UUITextStyles,
css`
h3 {
margin-left: var(--uui-size-space-5);
margin-right: var(--uui-size-space-5);
}
uui-input {
width: 100%;
}
hr {
border: none;
border-bottom: 1px solid var(--uui-color-divider);
margin: 16px 0;
}
#content-list {
display: flex;
flex-direction: column;
gap: var(--uui-size-space-3);
}
.content-item {
cursor: pointer;
}
.content-item.selected {
background-color: var(--uui-color-selected);
color: var(--uui-color-selected-contrast);
}
`,
];
@state()
_selection: Array<string> = [];
@state()
_multiple = true;
connectedCallback() {
super.connectedCallback();
this._selection = this.data?.selection ?? [];
this._multiple = this.data?.multiple ?? true;
}
private _handleSelectionChange(e: CustomEvent) {
e.stopPropagation();
const element = e.target as UmbTreeElement;
//TODO: Should multiple property be implemented here or be passed down into umb-tree?
this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]];
}
private _submit() {
this.modalHandler?.close({ selection: this._selection });
}
private _close() {
this.modalHandler?.close();
}
render() {
return html`
<umb-workspace-layout headline="Select Content">
<uui-box>
<uui-input></uui-input>
<hr />
<umb-tree
alias="Umb.Tree.Documents"
@selected=${this._handleSelectionChange}
.selection=${this._selection}
selectable></umb-tree>
</uui-box>
<div slot="actions">
<uui-button label="Close" @click=${this._close}></uui-button>
<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
</div>
</umb-workspace-layout>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-modal-layout-content-picker': UmbModalLayoutContentPickerElement;
}
}

28
src/Umbraco.Web.UI.Client/libs/modal/layouts/content-picker/modal-layout-content-picker.stories.ts
View File

@@ -1,28 +0,0 @@
import '../../../../src/backoffice/shared/components/body-layout/body-layout.element';
import './modal-layout-content-picker.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import type {
UmbModalLayoutContentPickerElement,
UmbModalContentPickerData,
} from './modal-layout-content-picker.element';
export default {
title: 'API/Modals/Layouts/Content Picker',
component: 'umb-modal-layout-content-picker',
id: 'modal-layout-content-picker',
} as Meta;
const data: UmbModalContentPickerData = {
multiple: true,
selection: [],
};
export const Overview: Story<UmbModalLayoutContentPickerElement> = () => 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-content-picker .data=${data as any}></umb-modal-layout-content-picker>
`;

4
src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
View File

@@ -1,6 +1,6 @@
// TODO: lazy load
import './layouts/confirm/modal-layout-confirm.element';
import './layouts/content-picker/modal-layout-content-picker.element';
import '../../src/backoffice/documents/documents/modals/content-picker/modal-layout-content-picker.element';
import './layouts/media-picker/modal-layout-media-picker.element';
import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
import './layouts/modal-layout-current-user.element';
@@ -16,7 +16,7 @@ import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog';
import { UmbModalChangePasswordData } from './layouts/modal-layout-change-password.element';
import type { UmbModalIconPickerData } from './layouts/icon-picker/modal-layout-icon-picker.element';
import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm.element';
import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element';
import type { UmbModalContentPickerData } from '../../src/backoffice/documents/documents/modals/content-picker/modal-layout-content-picker.element';
import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element';
import type { UmbModalLinkPickerData } from './layouts/link-picker/modal-layout-link-picker.element';