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

Merge pull request #1860 from umbraco/bugfix/lower-document-tree-item-opacity-on-drafts

Browse Source 
Bugfix: lower document tree item opacity on drafts
This commit is contained in:
Mads Rasmussen
2024-05-22 13:53:05 +02:00
committed by GitHub
parent 13d438c0d3 33ae097dbc
commit cf8816343d
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
View File

@@ -1,5 +1,5 @@
import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js'; import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { css, html, nothing, customElement, state, classMap } from '@umbraco-cms/backoffice/external/lit';
import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language'; import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language'; import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -60,9 +60,17 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
return this._variant?.name ?? `(${fallbackName})`; return this._variant?.name ?? `(${fallbackName})`;
} }
#isDraft() {
if (this.#isInvariant()) {
return this._item?.variants[0].state === 'Draft';
}
return this._variant?.state === 'Draft';
}
renderIconContainer() { renderIconContainer() {
return html` return html`
<span id="icon-container" slot="icon"> <span id="icon-container" slot="icon" class=${classMap({ draft: this.#isDraft() })}>
${this.item?.documentType.icon ${this.item?.documentType.icon
? html` ? html`
<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon> <umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
@@ -76,9 +84,10 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
`; `;
} }
// TODO: lower opacity if item is not published
renderLabel() { renderLabel() {
return html`<span id="label" slot="label">${this.#getLabel()}</span> `; return html`<span id="label" slot="label" class=${classMap({ draft: this.#isDraft() })}
>${this.#getLabel()}</span
> `;
} }
static styles = [ static styles = [
@@ -103,6 +112,10 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
right: 0; right: 0;
border-radius: 100%; border-radius: 100%;
} }
.draft {
opacity: 0.6;
}
`, `,
]; ];
} }