render temp status symbol on document tree items

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts

@@ -14,9 +14,9 @@ const tree: ManifestTree = {
 
 const treeItem: ManifestTreeItem = {
 	type: 'treeItem',
-	kind: 'entity',
 	alias: 'Umb.TreeItem.Document',
 	name: 'Document Tree Item',
+	loader: () => import('./tree-item/document-tree-item.element'),
 	conditions: {
 		entityType: 'document',
 	},

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.context.ts

@@ -0,0 +1,10 @@
+import { UmbTreeItemContextBase } from '../../../../shared/components/tree/tree-item-base/tree-item-base.context';
+import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+// TODO get unique method from an document repository static method
+export class UmbDocumentTreeItemContext extends UmbTreeItemContextBase<DocumentTreeItemResponseModel> {
+	constructor(host: UmbControllerHostInterface, treeItem: DocumentTreeItemResponseModel) {
+		super(host, treeItem, (x: DocumentTreeItemResponseModel) => x.key);
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts

@@ -1,6 +1,7 @@
 import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
+import { UmbDocumentTreeItemContext } from './document-tree-item.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
@@ -9,18 +10,23 @@ export class UmbDocumentTreeItemElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			#label {
-				display: flex;
-				align-items: center;
+			#icon-container {
+				position: relative;
+			}
+
+			#icon {
+				vertical-align: middle;
 			}
 
 			#status-symbol {
-				width: 6px;
-				height: 6px;
+				width: 8px;
+				height: 8px;
 				background-color: blue;
 				display: block;
-				border-radius: 3px;
-				margin-right: 10px;
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				border-radius: 100%;
 			}
 		`,
 	];
@@ -30,12 +36,16 @@ export class UmbDocumentTreeItemElement extends UmbLitElement {
 
 	render() {
 		if (!this.item) return nothing;
+		new UmbDocumentTreeItemContext(this, this.item);
 		return html`
 			<umb-tree-item-base .item=${this.item}>
 				<!-- TODO: implement correct status symbol -->
-				<div id="label" slot="label">
-					<span id="status-symbol"></span>
-					<span>${this.item?.name}</span>
+				<div id="icon-container" slot="icon">
+					${this.item?.icon
+						? html`
+								<uui-icon id="icon" slot="icon" name="${this.item.icon}"></uui-icon> <span id="status-symbol"></span>
+						  `
+						: nothing}
 				</div>
 			</umb-tree-item-base>
 		`;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts

@@ -43,6 +43,9 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 	@state()
 	private _hasChildren = false;
 
+	@state()
+	private _iconSlotHasChildren = false;
+
 	#treeItemContext?: UmbTreeItemContextBase;
 
 	constructor() {
@@ -108,14 +111,32 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 				.hasChildren=${this._hasChildren}
 				label="${ifDefined(this.item?.name)}"
 				href="${ifDefined(this._href)}">
-				${this.#renderIcon()} ${this.#renderActions()} ${this.#renderChildItems()}
+				${this.#renderIcon()} ${this.#renderLabel()} ${this.#renderActions()} ${this.#renderChildItems()}
 				<slot></slot>
 			</uui-menu-item>
 		`;
 	}
 
+	#hasNodes = (e: Event) => {
+		return (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
+	};
+
 	#renderIcon() {
-		return html` ${this.item?.icon ? html` <uui-icon slot="icon" name="${this.item.icon}"></uui-icon> ` : nothing} `;
+		return html`
+			<slot
+				name="icon"
+				slot="icon"
+				@slotchange=${(e: Event) => {
+					this._iconSlotHasChildren = this.#hasNodes(e);
+				}}></slot>
+			${this.item?.icon && !this._iconSlotHasChildren
+				? html` <uui-icon slot="icon" name="${this.item.icon}"></uui-icon> `
+				: nothing}
+		`;
+	}
+
+	#renderLabel() {
+		return html`<slot name="label" slot="label"></slot>`;
 	}
 
 	#renderActions() {