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

render collection icon for document tree items

Browse Source
This commit is contained in:
Mads Rasmussen
2024-07-01 15:10:43 +02:00
parent d09e856edf
commit 333f6afb3b
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
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';
import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree';
import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
@customElement('umb-document-tree-item')
export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocumentTreeItemModel> {
@@ -74,11 +74,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
${this.item?.documentType.icon
? html`
<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
${this.item.isProtected ? this.#renderIsProtectedIcon() : nothing}
<!--
// TODO: implement correct status symbol
<span id="status-symbol"></span>
-->
${this.#renderStateIcon()}
`
: nothing}
</span>
@@ -91,8 +87,24 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
> `;
}
#renderStateIcon() {
if (this.item?.isProtected) {
return this.#renderIsProtectedIcon();
}
if (this.item?.documentType.collection) {
return this.#renderIsCollectionIcon();
}
return nothing;
}
#renderIsCollectionIcon() {
return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
}
#renderIsProtectedIcon() {
return html`<umb-icon id="icon-lock" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
return html`<umb-icon id="state-icon" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
}
static override styles = [
@@ -106,19 +118,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
vertical-align: middle;
}
#status-symbol {
width: 5px;
height: 5px;
border: 1px solid white;
background-color: blue;
display: block;
position: absolute;
bottom: 0;
right: 0;
border-radius: 100%;
}
#icon-lock {
#state-icon {
position: absolute;
bottom: -5px;
right: -5px;
@@ -136,30 +136,30 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
text-overflow: ellipsis;
}
:hover #icon-lock {
:hover #state-icon {
background: var(--uui-color-surface-emphasis);
}
/** Active */
[active] #icon-lock {
[active] #state-icon {
background: var(--uui-color-current);
}
[active]:hover #icon-lock {
[active]:hover #state-icon {
background: var(--uui-color-current-emphasis);
}
/** Selected */
[selected] #icon-lock {
[selected] #state-icon {
background-color: var(--uui-color-selected);
}
[selected]:hover #icon-lock {
[selected]:hover #state-icon {
background-color: var(--uui-color-selected-emphasis);
}
/** Disabled */
[disabled] #icon-lock {
[disabled] #state-icon {
background-color: var(--uui-color-disabled);
}