From 1a632dc61a08b2f8174926cb31575ab1eaa91fff Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 15 Apr 2024 17:27:02 +0100 Subject: [PATCH 1/6] Bugfix: Date Picker story --- .../input-date/input-date.stories.ts | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.stories.ts index 5708eb8908..983c1741e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.stories.ts @@ -1,6 +1,5 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import type { UmbInputDateElement } from './input-date.element.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; import './input-date.element.js'; const meta: Meta = { @@ -15,7 +14,6 @@ export const Overview: Story = { args: { type: 'datetime-local', value: '2023-04-01T10:00:00Z', - offsetTime: true, }, }; @@ -23,7 +21,6 @@ export const Date: Story = { args: { type: 'date', value: '2023-04-01', - offsetTime: false, }, }; @@ -31,36 +28,13 @@ export const Time: Story = { args: { type: 'time', value: '10:00', - offsetTime: false, }, }; -export const DatetimelocalOffset: Story = { - args: { - type: 'datetime-local', - value: '2023-04-01T10:00:00', - offsetTime: true, - displayValue: '', - }, - render: (args) => - html``, -}; - export const Datetimelocal: Story = { args: { type: 'datetime-local', value: '2023-04-01T10:00:00', - offsetTime: false, displayValue: '', }, - render: (args) => - html``, }; From fb7b99d7de6fe9f11279b08e1041cec35e63e036 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 16 Apr 2024 09:22:36 +0100 Subject: [PATCH 2/6] Localizes the sidebar context menu headline --- .../section-sidebar-context-menu.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts index 574a0e7085..d2f2ee17cc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts @@ -85,7 +85,7 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { #renderModal() { return this._isOpen && this._unique !== undefined && this._entityType ? html`
-

${this._headline}

+

${this.localize.string(this._headline ?? '')}

Date: Tue, 16 Apr 2024 10:17:03 +0200 Subject: [PATCH 3/6] Bugfix: Fix media uploads that had wrong file extensions --- .../input-upload-field.element.ts | 18 ++++++++---------- .../property-editor-ui-upload-field.element.ts | 4 +--- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts index 8b2f912c00..7ed6e02802 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts @@ -45,7 +45,12 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen * @default undefined */ @property({ type: Array }) - fileExtensions?: Array; + set fileExtensions(value: Array) { + this.#setExtensions(value); + } + get fileExtensions(): Array | undefined { + return this.extensions; + } /** * @description Allows the user to upload multiple files. @@ -104,11 +109,6 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen }); } - connectedCallback(): void { - super.connectedCallback(); - this.#setExtensions(); - } - async #setFilePaths() { await this.#serverUrlPromise; @@ -123,11 +123,9 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen }); } - #setExtensions() { - if (!this.fileExtensions?.length) return; - + #setExtensions(value: Array) { // TODO: The dropzone uui component does not support file extensions without a dot. Remove this when it does. - this.extensions = this.fileExtensions.map((extension) => { + this.extensions = value.map((extension) => { return `.${extension}`; }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.element.ts index ede87ac120..c93f11a438 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.element.ts @@ -15,9 +15,7 @@ export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement impleme public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - this._fileExtensions = config - .getValueByAlias<{ id: number; value: string }[]>('fileExtensions') - ?.map((ext) => ext.value); + this._fileExtensions = config.getValueByAlias>('fileExtensions'); this._multiple = config.getValueByAlias('multiple'); } From c1c9f17c9f0b87bf0e82afd34b55732292ea43e5 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 16 Apr 2024 09:39:37 +0100 Subject: [PATCH 4/6] Checks if headline is empty --- .../section-sidebar-context-menu.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts index d2f2ee17cc..b17d9635c8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts @@ -85,7 +85,7 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { #renderModal() { return this._isOpen && this._unique !== undefined && this._entityType ? html`
-

${this.localize.string(this._headline ?? '')}

+ ${this._headline ? html`

${this.localize.string(this._headline)}

` : nothing} Date: Tue, 16 Apr 2024 11:17:24 +0200 Subject: [PATCH 5/6] bugfix: add missing user group icon picker --- .../user-group-workspace-editor.element.ts | 101 +++++++++++++++--- 1 file changed, 86 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts index b939981bb6..1677018db2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts @@ -3,13 +3,14 @@ import { UMB_USER_GROUP_ENTITY_TYPE } from '../index.js'; import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from './user-group-workspace.context-token.js'; import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, nothing, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document'; import type { UmbInputSectionElement } from '@umbraco-cms/backoffice/section'; import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media'; +import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import './components/user-group-entity-user-permission-list.element.js'; import './components/user-group-granular-permission-list.element.js'; @@ -17,7 +18,22 @@ import './components/user-group-granular-permission-list.element.js'; @customElement('umb-user-group-workspace-editor') export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { @state() - private _userGroup?: UmbUserGroupDetailModel; + private _unique?: UmbUserGroupDetailModel['unique']; + + @state() + private _name?: UmbUserGroupDetailModel['name']; + + @state() + private _icon: UmbUserGroupDetailModel['icon'] = null; + + @state() + private _sections: UmbUserGroupDetailModel['sections'] = []; + + @state() + private _documentStartNode?: UmbUserGroupDetailModel['documentStartNode']; + + @state() + private _mediaStartNode?: UmbUserGroupDetailModel['mediaStartNode']; #workspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE; @@ -26,10 +42,28 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance; - this.observe(this.#workspaceContext.data, (userGroup) => (this._userGroup = userGroup), 'umbUserGroupObserver'); + this.#observeUserGroup(); }); } + #observeUserGroup() { + if (!this.#workspaceContext) return; + this.observe(this.#workspaceContext.unique, (value) => (this._unique = value), '_observeUnique'); + this.observe(this.#workspaceContext.name, (value) => (this._name = value), '_observeName'); + this.observe(this.#workspaceContext.icon, (value) => (this._icon = value), '_observeIcon'); + this.observe(this.#workspaceContext.sections, (value) => (this._sections = value), '_observeSections'); + this.observe( + this.#workspaceContext.documentStartNode, + (value) => (this._documentStartNode = value), + '_observeDocumentStartNode', + ); + this.observe( + this.#workspaceContext.mediaStartNode, + (value) => (this._mediaStartNode = value), + '_observeDocumentStartNode', + ); + } + #onSectionsChange(event: UmbChangeEvent) { event.stopPropagation(); const target = event.target as UmbInputSectionElement; @@ -59,7 +93,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { } render() { - if (!this._userGroup) return nothing; + if (!this._unique) return nothing; return html` @@ -72,16 +106,40 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { `; } + async #onIconClick() { + const [alias, color] = this._icon?.replace('color-', '')?.split(' ') ?? []; + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + const modalContext = modalManager.open(this, UMB_ICON_PICKER_MODAL, { + value: { + icon: alias, + color: color, + }, + }); + + modalContext?.onSubmit().then((saved) => { + if (saved.icon && saved.color) { + this.#workspaceContext?.updateProperty('icon', `${saved.icon} color-${saved.color}`); + } else if (saved.icon) { + this.#workspaceContext?.updateProperty('icon', saved.icon); + } + }); + } + #renderHeader() { return html` @@ -89,7 +147,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { } #renderLeftColumn() { - if (!this._userGroup) return nothing; + if (!this._unique) return nothing; return html` @@ -99,7 +157,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { description=${this.localize.term('user_sectionsHelp')}> @@ -139,9 +197,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { #renderRightColumn() { return html` - `; } @@ -152,28 +208,43 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { display: block; height: 100%; } + #header { - width: 100%; - display: grid; - grid-template-columns: var(--uui-size-layout-1) 1fr; + display: flex; + flex: 1 1 auto; + gap: var(--uui-size-space-3); } + + #icon { + font-size: calc(var(--uui-size-layout-3) / 2); + } + + #name { + width: 100%; + flex: 1 1 auto; + align-items: center; + } + #main { display: grid; grid-template-columns: 1fr 350px; gap: var(--uui-size-layout-1); padding: var(--uui-size-layout-1); } + #left-column, #right-column { display: flex; flex-direction: column; gap: var(--uui-size-space-4); } + #right-column > uui-box > div { display: flex; flex-direction: column; gap: var(--uui-size-space-2); } + uui-input { width: 100%; } From 95944cd8a7fbf0f646b1a8e8d5ef44981c500ef5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 16 Apr 2024 11:43:50 +0200 Subject: [PATCH 6/6] add default icon to user groups --- .../repository/detail/user-group-detail.server.data-source.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/repository/detail/user-group-detail.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/repository/detail/user-group-detail.server.data-source.ts index 15cc4b51a2..ec1fbf77d8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/repository/detail/user-group-detail.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/repository/detail/user-group-detail.server.data-source.ts @@ -40,7 +40,7 @@ export class UmbUserGroupServerDataSource implements UmbDetailDataSource