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 { 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 { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -60,9 +60,17 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
return this._variant?.name ?? `(${fallbackName})`;
}
#isDraft() {
if (this.#isInvariant()) {
return this._item?.variants[0].state === 'Draft';
}
return this._variant?.state === 'Draft';
}
renderIconContainer() {
return html`
<span id="icon-container" slot="icon">
<span id="icon-container" slot="icon" class=${classMap({ draft: this.#isDraft() })}>
${this.item?.documentType.icon
? html`
<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() {
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 = [
@@ -103,6 +112,10 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
right: 0;
border-radius: 100%;
}
.draft {
opacity: 0.6;
}
`,
];
}