Merge pull request #604 from mlukasz7/feature/541-variant-selector

2023-03-20 15:01:25 +01:00
parent d6e5e74297 66094d3caa
commit 6b1b4ff1f4
3 changed files with 165 additions and 23 deletions
--- 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<ActiveVariant> = [];

+	@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`
 			<uui-input id="name-input" .value=${this._name} @input="${this._handleInput}">
@@ -223,20 +328,37 @@ export class UmbVariantSelectorElement extends UmbLitElement {
 							<uui-popover id="variant-selector-popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
 								<div id="variant-selector-dropdown" slot="popover">
 									<uui-scroll-container>
-										${this._variants.map(
-											(variant) =>
-												html`<ul>
-													<li>
-														<!-- TODO: style this better, most likely not use ul and li -->
-														<uui-button @click=${() => this._switchVariant(variant)}>
-															${variant.name} ${variant.culture} ${variant.segment}
-														</uui-button>
+										<ul>
+											${this._variants.map(
+												(variant) =>
+													html`
+														<li class="${this._isVariantActive(variant.culture!) ? 'selected' : ''}">
+															<button
+																class="variant-selector-switch-button 
+																${this._isNotPublishedMode(variant.culture!, variant.state!) ? 'add-mode' : ''}"
+																@click=${() => this._switchVariant(variant)}>
+																${this._isNotPublishedMode(variant.culture!, variant.state!)
+																	? html`<uui-icon class="add-icon" name="umb:add"></uui-icon>`
+																	: nothing}
+																<div>
+																	${variant.name} <i>(${variant.culture})</i> ${variant.segment}
+																	<div class="variant-selector-state">${variant.state}</div>
+																</div>
+															</button>

-														<!-- TODO: only make this available if not already open -->
-														<uui-button @click=${() => this._openSplitView(variant)}> Split view </uui-button>
-													</li>
-												</ul>`
-										)}
+															${this._isVariantActive(variant.culture!)
+																? nothing
+																: html`
+																		<uui-button
+																			class="variant-selector-split-view"
+																			@click=${() => this._openSplitView(variant)}>
+																			Split view
+																		</uui-button>
+																  `}
+														</li>
+													`
+											)}
+										</ul>
 									</uui-scroll-container>
 								</div>
 							</uui-popover>
--- 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<UmbVariantSelectorElement> = {
-    title: 'Components/Variant Selector',
-    component: 'umb-variant-selector',
+	title: 'Components/Variant Selector',
+	component: 'umb-variant-selector',
 };
-  
+
 export default meta;
 type Story = StoryObj<UmbVariantSelectorElement>;

 export const Overview: Story = {
-    args: {
-        alias: 'myAlias'   
-    }
-};
+	args: {
+		alias: 'myAlias',
+	},
+};
--- 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<DocumentResponseModel> = [
 				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',
+			},
 		],
 	},
 	{