From aaaa15337ba3bcef0aeedc1ace4a7a055333a911 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz?= Date: Fri, 17 Mar 2023 13:58:18 +0100 Subject: [PATCH 1/3] Variant selector - styling --- .../variant-selector.element.ts | 104 ++++++++++++++++-- .../variant-selector.stories.ts | 16 +-- 2 files changed, 101 insertions(+), 19 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts index 9d8d713690..643520d3d2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts @@ -24,9 +24,11 @@ export class UmbVariantSelectorElement extends UmbLitElement { #variant-selector-toggle { white-space: nowrap; } + #variant-selector-popover { display: block; } + #variant-selector-dropdown { overflow: hidden; z-index: -1; @@ -42,6 +44,65 @@ export class UmbVariantSelectorElement extends UmbLitElement { #variant-close { white-space: nowrap; } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + } + + li { + position: relative; + } + + li.selected:before { + background-color: var(--uui-color-current); + border-radius: 0 4px 4px 0; + bottom: 8px; + content: ''; + left: 0; + pointer-events: none; + position: absolute; + top: 8px; + width: 4px; + z-index: 1; + } + + .variant-selector-switch-button { + border: none; + background: transparent; + color: var(--uui-color-current-contrast); + padding: 6px 20px; + font-weight: bold; + width: 100%; + text-align: left; + font-size: 14px; + cursor: pointer; + border-bottom: 1px solid var(--uui-color-divider-standalone); + font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; + } + + .variant-selector-switch-button:hover { + background: var(--uui-palette-sand); + color: var(--uui-palette-space-cadet-light); + } + + .variant-selector-switch-button i { + font-weight: normal; + } + + .variant-selector-split-view { + position: absolute; + top: 0; + right: 0; + bottom: 1px; + } + + .variant-selector-state { + color: var(--uui-palette-malibu-dimmed); + font-size: 12px; + font-weight: normal; + } `, ]; @@ -56,6 +117,11 @@ export class UmbVariantSelectorElement extends UmbLitElement { @state() _activeVariants: Array = []; + @property() + public get _activeVariantsCultures(): string[] { + return this._activeVariants.map((el) => el.culture ?? '') ?? []; + } + private _variantContext?: UmbWorkspaceVariantContext; @state() @@ -155,7 +221,7 @@ export class UmbVariantSelectorElement extends UmbLitElement { (this._culture ? this._cultureNames.of(this._culture) : '') + (this._segment ? ' — ' + this._segment : ''); } - // TODO. find a way where we don't have to do this for all workspaces. + // TODO: find a way where we don't have to do this for all workspaces. private _handleInput(event: UUIInputEvent) { if (event instanceof UUIInputEvent) { const target = event.composedPath()[0] as UUIInputElement; @@ -187,10 +253,15 @@ export class UmbVariantSelectorElement extends UmbLitElement { this._variantContext?.openSplitView(variant); this._close(); } + private _closeSplitView() { this._variantContext?.closeSplitView(); } + private _isVariantActive(culture: string) { + return this._activeVariantsCultures.includes(culture); + } + render() { return html` @@ -225,17 +296,28 @@ export class UmbVariantSelectorElement extends UmbLitElement { ${this._variants.map( (variant) => - html`
    -
  • - - this._switchVariant(variant)}> - ${variant.name} ${variant.culture} ${variant.segment} - + html` +
      +
    • + - - this._openSplitView(variant)}> Split view -
      • -
    ` + ${this._isVariantActive(variant.culture as string) + ? nothing + : html` + this._openSplitView(variant)}> + Split view + + `} +
    • +
+ ` )} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.stories.ts index c5f645add3..7aac088b20 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.stories.ts @@ -1,17 +1,17 @@ import { Meta, StoryObj } from '@storybook/web-components'; import './variant-selector.element'; -import type { UmbVariantSelectorElement } from './variant-selector.element' +import type { UmbVariantSelectorElement } from './variant-selector.element'; const meta: Meta = { - title: 'Components/Variant Selector', - component: 'umb-variant-selector', + title: 'Components/Variant Selector', + component: 'umb-variant-selector', }; - + export default meta; type Story = StoryObj; export const Overview: Story = { - args: { - alias: 'myAlias' - } -}; \ No newline at end of file + args: { + alias: 'myAlias', + }, +}; From 36e8d0c799d725c103810aa3bd489cb5bbe38a48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz?= Date: Fri, 17 Mar 2023 15:43:33 +0100 Subject: [PATCH 2/3] Variant selector - not Published style indication --- .../variant-selector.element.ts | 59 +++++++++++++++---- .../src/core/mocks/data/document.data.ts | 20 +++++++ 2 files changed, 68 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts index 643520d3d2..4b35cb9621 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts @@ -9,7 +9,7 @@ import { } from '../workspace/workspace-variant/workspace-variant.context'; import { ActiveVariant } from '../workspace/workspace-context/workspace-split-view-manager.class'; import { UmbLitElement } from '@umbraco-cms/element'; -import type { DocumentVariantResponseModel } from '@umbraco-cms/backend-api'; +import { DocumentVariantResponseModel, ContentStateModel } from '@umbraco-cms/backend-api'; @customElement('umb-variant-selector') export class UmbVariantSelectorElement extends UmbLitElement { @@ -53,6 +53,11 @@ export class UmbVariantSelectorElement extends UmbLitElement { li { position: relative; + margin-bottom: 1px; + } + + li:nth-last-of-type(1) { + margin-bottom: 0; } li.selected:before { @@ -69,6 +74,8 @@ export class UmbVariantSelectorElement extends UmbLitElement { } .variant-selector-switch-button { + display: flex; + align-items: center; border: none; background: transparent; color: var(--uui-color-current-contrast); @@ -91,6 +98,29 @@ export class UmbVariantSelectorElement extends UmbLitElement { font-weight: normal; } + .variant-selector-switch-button.add-mode { + position: relative; + color: var(--uui-palette-dusty-grey-dark); + } + + .variant-selector-switch-button.add-mode:after { + border: 2px dashed var(--uui-color-divider-standalone); + bottom: 0; + content: ''; + left: 0; + margin: 2px; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + z-index: 1; + } + + .add-icon { + font-size: 12px; + margin-right: 12px; + } + .variant-selector-split-view { position: absolute; top: 0; @@ -294,16 +324,23 @@ export class UmbVariantSelectorElement extends UmbLitElement {
- ${this._variants.map( - (variant) => - html` -
    +
      + ${this._variants.map( + (variant) => + html`
    • ${this._isVariantActive(variant.culture as string) @@ -316,9 +353,9 @@ export class UmbVariantSelectorElement extends UmbLitElement { `}
      • -
    - ` - )} + ` + )} +
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index 72ed53ea61..2ad8e04e30 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -384,6 +384,26 @@ export const data: Array = [ createDate: '2023-02-06T15:31:46.876902', updateDate: '2023-02-06T15:31:51.354764', }, + { + $type: '', + state: ContentStateModel.PUBLISHED_PENDING_CHANGES, + publishDate: '2023-02-06T15:31:51.354764', + culture: 'es-es', + segment: null, + name: 'Articulo en ingles', + createDate: '2023-02-06T15:31:46.876902', + updateDate: '2023-02-06T15:31:51.354764', + }, + { + $type: '', + state: ContentStateModel.NOT_CREATED, + publishDate: '2023-02-06T15:31:51.354764', + culture: 'pl-pl', + segment: null, + name: 'Artykuł w języku polskim', + createDate: '2023-02-06T15:31:46.876902', + updateDate: '2023-02-06T15:31:51.354764', + }, ], }, { From 66094d3caaca7d69d56e817fd01727c07d8eb0af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz?= Date: Fri, 17 Mar 2023 16:16:42 +0100 Subject: [PATCH 3/3] Variant selector - notpublished helper functon --- .../variant-selector/variant-selector.element.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts index 4b35cb9621..16b1c12ef9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts @@ -292,6 +292,10 @@ export class UmbVariantSelectorElement extends UmbLitElement { return this._activeVariantsCultures.includes(culture); } + private _isNotPublishedMode(culture: string, state: ContentStateModel) { + return state !== ContentStateModel.PUBLISHED && !this._isVariantActive(culture!); + } + render() { return html` @@ -328,13 +332,12 @@ export class UmbVariantSelectorElement extends UmbLitElement { ${this._variants.map( (variant) => html` -
  • +
  • - ${this._isVariantActive(variant.culture as string) + ${this._isVariantActive(variant.culture!) ? nothing : html`