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..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 @@ -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 { @@ -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,95 @@ export class UmbVariantSelectorElement extends UmbLitElement { #variant-close { white-space: nowrap; } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + } + + li { + position: relative; + margin-bottom: 1px; + } + + li:nth-last-of-type(1) { + margin-bottom: 0; + } + + 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 { + display: flex; + align-items: center; + 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-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; + right: 0; + bottom: 1px; + } + + .variant-selector-state { + color: var(--uui-palette-malibu-dimmed); + font-size: 12px; + font-weight: normal; + } `, ]; @@ -56,6 +147,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 +251,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 +283,19 @@ 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); + } + + private _isNotPublishedMode(culture: string, state: ContentStateModel) { + return state !== ContentStateModel.PUBLISHED && !this._isVariantActive(culture!); + } + render() { return html` @@ -223,20 +328,37 @@ export class UmbVariantSelectorElement extends UmbLitElement {
- ${this._variants.map( - (variant) => - html`
    -
  • - - this._switchVariant(variant)}> - ${variant.name} ${variant.culture} ${variant.segment} - +
      + ${this._variants.map( + (variant) => + html` +
    • + - - this._openSplitView(variant)}> Split view -
      • -
    ` - )} + ${this._isVariantActive(variant.culture!) + ? 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', + }, +}; 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 f239f430f7..429f0712bf 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', + }, ], }, {