yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correct variant selector look

Browse Source
This commit is contained in:
Niels Lyngsø
2024-11-05 11:13:57 +01:00
parent 7230f48ae5
commit 1b7a13977b
1 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
View File

@@ -290,9 +290,10 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
: ''} ${this.#isReadOnly(variantOption.culture) ? 'readonly-mode' : ''}"
@click=${() => this.#switchVariant(variantOption)}>
${this.#isCreateMode(variantOption) ? html`<uui-icon class="add-icon" name="icon-add"></uui-icon>` : nothing}
<div>
<div class="variant-info">
<div class="variant-name">
${variantOption.language.name} ${this.#renderReadOnlyTag(variantOption.culture)}
${variantOption.variant?.name ?? variantOption.language.name}
${this.#renderReadOnlyTag(variantOption.culture)}
</div>
<div class="variant-details">
<span>${this._renderVariantDetails(variantOption)}</span>
@@ -303,6 +304,7 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
>
</div>
</div>
<div class="specs-info">${variantOption.language.name}</div>
</button>
${this.#renderSplitViewButton(variantOption)}
</li>
@@ -332,10 +334,11 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
? nothing
: html`
<uui-button
style="background-color: var(--uui-color-surface)"
label="Open Split view for ${variant.language.name}"
class="variant-selector-split-view"
@click=${() => this.#openSplitView(variant)}>
Split view
Open in Split view
</uui-button>
`}
`;
@@ -423,6 +426,32 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
background: var(--uui-palette-sand);
color: var(--uui-palette-space-cadet-light);
}
.variant-selector-switch-button .variant-info {
flex-grow: 1;
}
.variant-selector-switch-button .variant-details {
color: var(--uui-color-text-alt);
font-size: 12px;
font-weight: normal;
}
.variant-selector-switch-button .variant-details {
color: var(--uui-color-text-alt);
font-size: 12px;
font-weight: normal;
}
.variant-selector-switch-button.add-mode .variant-details {
color: var(--uui-palette-dusty-grey-dark);
}
.variant-selector-switch-button .specs-info {
color: var(--uui-color-text-alt);
font-size: 12px;
font-weight: normal;
}
.variant-selector-switch-button.add-mode .specs-info {
color: var(--uui-palette-dusty-grey-dark);
}
.variant-selector-switch-button i {
font-weight: normal;
@@ -466,12 +495,6 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
bottom: 1px;
display: none;
}
.variant-details {
color: var(--uui-palette-malibu-dimmed);
font-size: 12px;
font-weight: normal;
}
`,
];
}