do not set icon color if item is active

This commit is contained in:
Mads Rasmussen
2024-12-02 19:14:33 +01:00
committed by Jacob Overgaard
parent 594036c3d9
commit 9f9aaa6f16
3 changed files with 14 additions and 7 deletions

View File

@@ -20,7 +20,7 @@ export abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeIt
hideActions: boolean = false;
@state()
private _isActive = false;
protected _isActive = false;
@state()
private _childItems?: TreeItemModelType[];
@@ -150,9 +150,10 @@ export abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeIt
#renderIcon() {
const icon = this._item?.icon;
const isFolder = this._item?.isFolder;
const iconWithoutColor = icon?.split(' ')[0];
if (icon) {
return html`<umb-icon slot="icon" name="${icon}"></umb-icon>`;
if (icon && iconWithoutColor) {
return html`<umb-icon slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>`;
}
if (isFolder) {

View File

@@ -76,11 +76,14 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
}
override renderIconContainer() {
const icon = this.item?.documentType.icon;
const iconWithoutColor = icon?.split(' ')[0];
return html`
<span id="icon-container" slot="icon" class=${classMap({ draft: this.#isDraft() })}>
${this.item?.documentType.icon
${icon && iconWithoutColor
? html`
<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
<umb-icon id="icon" slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>
${this.#renderStateIcon()}
`
: nothing}

View File

@@ -7,11 +7,14 @@ const elementName = 'umb-media-tree-item';
@customElement(elementName)
export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTreeItemModel> {
override renderIconContainer() {
const icon = this.item?.mediaType.icon;
const iconWithoutColor = icon?.split(' ')[0];
return html`
<span id="icon-container" slot="icon">
${this.item?.mediaType.icon
${icon && iconWithoutColor
? html`
<umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon>
<umb-icon id="icon" slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>
${this.#renderStateIcon()}
`
: nothing}