From 50efb4158480842147eb3f0db88ab01acdf840af Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 22 Mar 2023 10:31:06 +0100 Subject: [PATCH] workspaces --- ...-view-document-type-permissions.element.ts | 3 +- ...ce-view-document-type-templates.element.ts | 29 ++- .../document-type-picker-modal.element.ts | 103 +++++++++ .../document-type-picker-modal.stories.ts | 26 +++ .../modals/document-type-picker/index.ts | 18 ++ .../documents/documents/modals/manifests.ts | 6 + .../src/backoffice/shared/components/index.ts | 5 +- .../input-document-type-picker.element.ts | 92 +++----- .../input-template-picker.element.ts | 211 ++++++++++++++++++ .../template-card-list.element.ts | 1 + .../template-card.element.ts | 15 +- .../template-card.stories.ts | 0 12 files changed, 432 insertions(+), 77 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-template-picker/input-template-picker.element.ts rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/{template-cards => template-card}/template-card-list.element.ts (99%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/{template-cards => template-card}/template-card.element.ts (90%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/{template-cards => template-card}/template-card.stories.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/permissions/workspace-view-document-type-permissions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/permissions/workspace-view-document-type-permissions.element.ts index c01cf2038d..f15ede2561 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/permissions/workspace-view-document-type-permissions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/permissions/workspace-view-document-type-permissions.element.ts @@ -61,7 +61,8 @@ export class UmbWorkspaceViewDocumentTypePermissionsElement extends UmbLitElemen Allow content of the specified types to be created underneath content of this type.
- +
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/templates/workspace-view-document-type-templates.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/templates/workspace-view-document-type-templates.element.ts index 56e6a2cf47..361d8a7ecb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/templates/workspace-view-document-type-templates.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/templates/workspace-view-document-type-templates.element.ts @@ -1,8 +1,8 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, query, state } from 'lit/decorators.js'; -import { repeat } from 'lit/directives/repeat.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { UmbWorkspaceDocumentTypeContext } from '../../document-type-workspace.context'; +import { UmbTemplateCardListElement } from '../../../../../shared/components/template-card/template-card-list.element'; import { UmbLitElement } from '@umbraco-cms/element'; import type { DocumentTypeModel } from '@umbraco-cms/backend-api'; import '../../../../../shared/property-creator/property-creator.element.ts'; @@ -37,9 +37,18 @@ export class UmbWorkspaceViewDocumentTypeTemplatesElement extends UmbLitElement `, ]; + @property() + defaultTemplateKey?: string = '123'; + @state() _documentType?: DocumentTypeModel; + @state() + _templates = [ + { key: '123', name: 'Blog Post Page' }, + { key: '456', name: 'Blog Entry Page' }, + ]; + private _workspaceContext?: UmbWorkspaceDocumentTypeContext; constructor() { @@ -60,17 +69,21 @@ export class UmbWorkspaceViewDocumentTypeTemplatesElement extends UmbLitElement }); } + #changeDefaultTemplate(e: CustomEvent) { + this.defaultTemplateKey = (e.target as UmbTemplateCardListElement).value as string; + console.log('default template key', this.defaultTemplateKey); + } + + #removeTemplate(key: string) { + console.log('remove template', key); + } + render() { return html`
Choose which templates editors are allowed to use on content of this type
- - - - - -
+ `; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts new file mode 100644 index 0000000000..1854ccf003 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts @@ -0,0 +1,103 @@ +import { css, html } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, state } from 'lit/decorators.js'; +import type { UmbTreeElement } from '../../../../shared/components/tree/tree.element'; +import { UmbDocumentTypePickerModalData, UmbDocumentTypePickerModalResult } from '.'; +import { UmbModalBaseElement } from '@umbraco-cms/modal'; + +// TODO: make use of UmbPickerLayoutBase +@customElement('umb-document-type-picker-modal') +export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement< + UmbDocumentTypePickerModalData, + UmbDocumentTypePickerModalResult +> { + 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 = []; + + @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?.submit({ selection: this._selection }); + } + + private _close() { + this.modalHandler?.reject(); + } + + render() { + return html` + + + +
+ + +
+ + +
+ + `; + } +} + +export default UmbDocumentTypePickerModalElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-type-picker-modal': UmbDocumentTypePickerModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts new file mode 100644 index 0000000000..fead1b4ac9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts @@ -0,0 +1,26 @@ +import '../../../../shared/components/body-layout/body-layout.element'; +import './document-type-picker-modal.element'; + +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit'; + +import type { UmbDocumentTypePickerModalElement } from './document-type-picker-modal.element'; +import type { UmbDocumentTypePickerModalData } from './index'; + +export default { + title: 'API/Modals/Layouts/Content Picker', + component: 'umb-document-picker-modal', + id: 'umb-document-picker-modal', +} as Meta; + +const data: UmbDocumentTypePickerModalData = { + multiple: true, + selection: [], +}; + +export const Overview: Story = () => html` + + +`; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/index.ts new file mode 100644 index 0000000000..c7e6efe767 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/index.ts @@ -0,0 +1,18 @@ +import { UmbModalToken } from '@umbraco-cms/modal'; + +export interface UmbDocumentTypePickerModalData { + multiple?: boolean; + selection?: Array; +} + +export interface UmbDocumentTypePickerModalResult { + selection: Array; +} + +export const UMB_DOCUMENT_TYPE_PICKER_MODAL_TOKEN = new UmbModalToken< + UmbDocumentTypePickerModalData, + UmbDocumentTypePickerModalResult +>('Umb.Modal.DocumentTypePicker', { + type: 'sidebar', + size: 'small', +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts index dcaf83f082..693b20895f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts @@ -7,6 +7,12 @@ const modals: Array = [ name: 'Document Picker Modal', loader: () => import('./document-picker/document-picker-modal.element'), }, + { + type: 'modal', + alias: 'Umb.Modal.DocumentTypePicker', + name: 'Document Type Picker Modal', + loader: () => import('./document-type-picker/document-type-picker-modal.element'), + }, ]; export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts index c7b94c2d90..1eb453e684 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts @@ -28,6 +28,7 @@ import './input-media-picker/input-media-picker.element'; import './input-multi-url-picker/input-multi-url-picker.element'; import './input-slider/input-slider.element'; import './input-toggle/input-toggle.element'; +import './input-template-picker/input-template-picker.element'; import './property-type-based-property/property-type-based-property.element'; import './ref-property-editor-ui/ref-property-editor-ui.element'; import './section/section-main/section-main.element'; @@ -47,7 +48,7 @@ import './workspace/workspace-layout/workspace-layout.element'; import './workspace/workspace-footer-layout/workspace-footer-layout.element'; -import './template-cards/template-card.element'; -import './template-cards/template-card-list.element'; +import './template-card/template-card.element'; +import './template-card/template-card-list.element'; export const manifests = [...debugManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts index 96dd248079..029db1e806 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts @@ -3,13 +3,15 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; -import { UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from '../../../documents/documents/repository/document.tree.store'; -import { UmbDocumentTypeTreeStore } from '../../../documents/document-types/repository/document-type.tree.store'; +import { + UmbDocumentTypeTreeStore, + UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT_TOKEN, +} from '../../../documents/document-types/repository/document-type.tree.store'; import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm'; -import { UMB_DOCUMENT_PICKER_MODAL_TOKEN } from '../../../documents/documents/modals/document-picker'; +import { UMB_DOCUMENT_TYPE_PICKER_MODAL_TOKEN } from '../../../documents/documents/modals/document-type-picker'; import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; import { UmbLitElement } from '@umbraco-cms/element'; -import type { DocumentTypeTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api'; +import type { DocumentTypeModel, DocumentTypeTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api'; import type { UmbObserverController } from '@umbraco-cms/observable-api'; @customElement('umb-input-document-type-picker') @@ -20,43 +22,16 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl #add-button { width: 100%; } + + #current-node { + background-color: var(--uui-color-surface-alt); + } + + #wrapper-nodes { + margin-left: var(--uui-size-space-6); + } `, ]; - /** - * This is a minimum amount of selected items in this input. - * @type {number} - * @attr - * @default undefined - */ - @property({ type: Number }) - min?: number; - - /** - * Min validation message. - * @type {boolean} - * @attr - * @default - */ - @property({ type: String, attribute: 'min-message' }) - minMessage = 'This field need more items'; - - /** - * This is a maximum amount of selected items in this input. - * @type {number} - * @attr - * @default undefined - */ - @property({ type: Number }) - max?: number; - - /** - * Max validation message. - * @type {boolean} - * @attr - * @default - */ - @property({ type: String, attribute: 'min-message' }) - maxMessage = 'This field exceeds the allowed amount of items'; // TODO: do we need both selectedKeys and value? If we just use value we follow the same pattern as native form controls. private _selectedKeys: Array = []; @@ -76,29 +51,20 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl } } + @property() + currentDocumentType?: DocumentTypeModel; + @state() private _items?: Array; private _modalContext?: UmbModalContext; - private _documentStore?: UmbDocumentTypeTreeStore; + private _documentTypeStore?: UmbDocumentTypeTreeStore; private _pickedItemsObserver?: UmbObserverController; constructor() { super(); - - this.addValidator( - 'rangeUnderflow', - () => this.minMessage, - () => !!this.min && this._selectedKeys.length < this.min - ); - this.addValidator( - 'rangeOverflow', - () => this.maxMessage, - () => !!this.max && this._selectedKeys.length > this.max - ); - - this.consumeContext(UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN, (instance) => { - this._documentStore = instance; + this.consumeContext(UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT_TOKEN, (instance) => { + this._documentTypeStore = instance; this._observePickedDocuments(); }); this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { @@ -113,18 +79,18 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl private _observePickedDocuments() { this._pickedItemsObserver?.destroy(); - if (!this._documentStore) return; + if (!this._documentTypeStore) return; // TODO: consider changing this to the list data endpoint when it is available - this._pickedItemsObserver = this.observe(this._documentStore.items(this._selectedKeys), (items) => { + this._pickedItemsObserver = this.observe(this._documentTypeStore.items(this._selectedKeys), (items) => { this._items = items; }); } private _openPicker() { // We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data: - const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL_TOKEN, { - multiple: this.max === 1 ? false : true, + const modalHandler = this._modalContext?.open(UMB_DOCUMENT_TYPE_PICKER_MODAL_TOKEN, { + multiple: true, selection: [...this._selectedKeys], }); @@ -153,8 +119,13 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl render() { return html` - ${this._items?.map((item) => this._renderItem(item))} - Add + + + +
+ ${this._items?.map((item) => this._renderItem(item))} + Add +
`; } @@ -164,6 +135,7 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl return html` + ${tempItem.isTrashed ? html` Trashed ` : nothing} this._removeItem(item)} label="Remove document ${item.name}">Remove diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-template-picker/input-template-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-template-picker/input-template-picker.element.ts new file mode 100644 index 0000000000..f73d13ff09 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-template-picker/input-template-picker.element.ts @@ -0,0 +1,211 @@ +import { css, html } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property, queryAll, state } from 'lit/decorators.js'; +import { repeat } from 'lit/directives/repeat.js'; +import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; +import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm'; +import { UmbTemplateCardElement } from '../template-card/template-card.element'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbLitElement } from '@umbraco-cms/element'; +import { TemplateModel, TemplateResource } from '@umbraco-cms/backend-api'; +import { tryExecuteAndNotify } from '@umbraco-cms/resources'; + +type DocTypTemplateModel = TemplateModel & { default: boolean }; + +@customElement('umb-input-template-picker') +export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElement) { + static styles = [ + UUITextStyles, + css` + #add-button { + width: 100%; + } + :host { + box-sizing: border-box; + display: flex; + gap: var(--uui-size-space-4); + flex-wrap: wrap; + } + + :host > * { + max-width: 180px; + min-width: 180px; + min-height: 150px; + } + + .fade-in { + animation: fadeIn 1s; + } + + @keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + `, + ]; + /** + * This is a minimum amount of selected items in this input. + * @type {number} + * @attr + * @default undefined + */ + @property({ type: Number }) + min?: number; + + /** + * Min validation message. + * @type {boolean} + * @attr + * @default + */ + @property({ type: String, attribute: 'min-message' }) + minMessage = 'This field need more items'; + + /** + * This is a maximum amount of selected items in this input. + * @type {number} + * @attr + * @default undefined + */ + @property({ type: Number }) + max?: number; + + /** + * Max validation message. + * @type {boolean} + * @attr + * @default + */ + @property({ type: String, attribute: 'min-message' }) + maxMessage = 'This field exceeds the allowed amount of items'; + + private _templates: Array = []; + public get templates(): Array { + return this._templates; + } + public set templates(newTemplates: Array) { + const keys = newTemplates.map((template) => template.key); + super.value = keys.join(','); + this._templates = newTemplates; + } + + @state() + private _items: Array = [ + { key: '2bf464b6-3aca-4388-b043-4eb439cc2643', name: 'Doc 1', default: false }, + { key: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71', name: 'Test', default: true }, + ]; + + private _modalContext?: UmbModalContext; + //private _documentStore?: UmbDocumentTreeStore; + //private _pickedItemsObserver?: UmbObserverController; + + @queryAll('.template-card') + private _templateCardElements?: NodeListOf; + + constructor() { + super(); + + this.addValidator( + 'rangeUnderflow', + () => this.minMessage, + () => !!this.min && this._templates.length < this.min + ); + this.addValidator( + 'rangeOverflow', + () => this.maxMessage, + () => !!this.max && this._templates.length > this.max + ); + + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + } + + connectedCallback(): void { + super.connectedCallback(); + this._items = this._items.sort((a, b) => b.default - a.default); + this.#setup(); + } + + async #setup() { + const templates = await tryExecuteAndNotify(this, TemplateResource.getTreeTemplateRoot({ skip: 0, take: 9999 })); + console.log(templates); + } + + protected getFormElement() { + return undefined; + } + + #openTemplatePickerModal() { + console.log('template picker modal'); + } + + #changeSelected() { + console.log('selected'); + } + + /** Clicking the template card buttons */ + + #changeDefault(e: CustomEvent) { + const key = (e.target as UmbTemplateCardElement).value; + + const oldDefault = this._items.find((x) => x.default === true); + const newDefault = this._items.find((x) => x.key === key); + + const items = this._items.map((item) => { + if (item.default === true) return { ...newDefault, default: true }; + if (item.key === key) return { ...oldDefault, default: false }; + return item; + }); + + this._items = items; + } + + #openTemplate(e: CustomEvent) { + const key = (e.target as UmbTemplateCardElement).value; + console.log('open', key); + } + + #removeTemplate(key: string) { + console.log('remove', key); + } + + render() { + return html` + ${repeat( + this._items, + (template) => template.default, + (template, index) => html`
+ + + + + +
` + )} + Add + `; + } +} + +export default UmbInputTemplatePickerElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-input-template-picker': UmbInputTemplatePickerElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card-list.element.ts similarity index 99% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card-list.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card-list.element.ts index 784586eefb..a886ac8012 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card-list.element.ts @@ -57,6 +57,7 @@ export class UmbTemplateCardListElement extends FormControlMixin(UmbLitElement) el.selected = false; } }); + this.value = newValue; this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card.element.ts similarity index 90% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card.element.ts index 7015da267f..cbe43a0648 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card.element.ts @@ -41,13 +41,16 @@ export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) { border-radius: var(--uui-border-radius); border: 1px solid var(--uui-color-divider-emphasis); background-color: var(--uui-color-background); - padding: var(--uui-size-space-4); + padding: var(--uui-size-4); } - :host([selected]) #card { + :host([default]) #card { border: 1px solid var(--uui-color-selected); outline: 1px solid var(--uui-color-selected); } + #card:has(uui-button:hover) { + border: 1px solid var(--uui-color-selected); + } #bottom { margin-top: auto; @@ -117,7 +120,7 @@ export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) { name = ''; @property({ type: Boolean, reflect: true }) - selected = false; + default = false; _key = ''; @property({ type: String }) @@ -137,7 +140,7 @@ export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) { e.preventDefault(); e.stopPropagation(); //this.selected = true; - this.dispatchEvent(new CustomEvent('selected', { bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('default-change', { bubbles: true, composed: true })); } #openTemplate(e: KeyboardEvent) { e.preventDefault(); @@ -152,8 +155,8 @@ export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) { ${this.name.length ? this.name : 'Untitled template'} - - ${this.selected ? '(Default template)' : 'Set default'} + + ${this.default ? '(Default template)' : 'Set default'} `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-cards/template-card.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card.stories.ts