diff --git a/api/js/egw_action/EgwMenuShoelace.ts b/api/js/egw_action/EgwMenuShoelace.ts index 9c7c6b6684..e420659e94 100644 --- a/api/js/egw_action/EgwMenuShoelace.ts +++ b/api/js/egw_action/EgwMenuShoelace.ts @@ -4,7 +4,7 @@ import {egwMenuItem} from "./egw_menu"; import {customElement} from "lit/decorators/custom-element.js"; import {repeat} from "lit/directives/repeat.js"; import {classMap} from "lit/directives/class-map.js"; -import {state} from "lit/decorators/state.js"; +import bootstrapIcons from "../etemplate/Styles/bootstrap-icons"; @customElement("egw-menu-shoelace") export class EgwMenuShoelace extends LitElement @@ -12,6 +12,7 @@ export class EgwMenuShoelace extends LitElement static get styles() { return [ + bootstrapIcons, css` :host { display: block; @@ -93,23 +94,6 @@ export class EgwMenuShoelace extends LitElement } } - protected updated(_changedProperties : PropertyValues) - { - super.updated(_changedProperties); - - // Checkbox indicators - this.shadowRoot.querySelectorAll("sl-menu-item[type=checkbox]").forEach(async(item : SlMenuItem) => - { - await item.updateComplete; - const icon : SlIcon = item.shadowRoot.querySelector("[part=\"checked-icon\"] sl-icon"); - if(!icon) - { - return; - } - icon.name = item.checked ? "check-square" : "square"; - icon.library = "default"; - }) - } public showAt(_x, _y, _onHide) { @@ -180,7 +164,7 @@ export class EgwMenuShoelace extends LitElement // Update image of a checkbox item to be toggle on or off // this happens by requesting an update because item.checked has changed - this.requestUpdate("structure") + event.detail.item.querySelector('et2-image').src = item.checked ? "toggle-on" : "toggle-off"; return; } if(typeof item.onClick == "function") diff --git a/api/js/etemplate/Et2Image/Et2Image.ts b/api/js/etemplate/Et2Image/Et2Image.ts index be6ebd1eb0..32cba05fe0 100644 --- a/api/js/etemplate/Et2Image/Et2Image.ts +++ b/api/js/etemplate/Et2Image/Et2Image.ts @@ -50,8 +50,31 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM * Displayed image */ @property({type: String}) - src = ""; - + set src(_src) + { + this.__src = _src; + let url = this.parse_href(_src) || this.parse_href(this.defaultSrc); + if(!url) + { + // Hide if no valid image + if (this._img) this._img.src = ''; + this.className = ''; + return; + } + const bootstrap = url.match(/\/node_modules\/bootstrap-icons\/icons\/([^.]+)\.svg/); + if (bootstrap && !this._img) + { + this.className = 'bi-'+bootstrap[1]; + return; + } + // change between bootstrap and regular img + this.requestUpdate(); + } + get src() + { + return this.__src; + } + private __src: string; /** * Default image * Image to use if src is not found @@ -87,7 +110,17 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM * - even CSS functions like e.g. "calc(1rem + 2px)" */ @property({type: String}) - width; + set width(_width : string) + { + if (this.style) + { + this.style.width = isNaN(_width) ? _width : _width+'px'; + } + } + get width() + { + return this.style?.width; + } /** * Height of image: @@ -96,7 +129,15 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM * - even CSS functions like e.g. "calc(1rem + 2px)" */ @property({type: String}) - height; + set height(_height) + { + if (this.style) + this.style.height = isNaN(_height) ? _height : _height+'px'; + } + get height() + { + return this.style.height; + } constructor() { @@ -112,23 +153,24 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM render() { - let src = this.parse_href(this.src) || this.parse_href(this.defaultSrc); - if(!src) + let url = this.parse_href(this.src) || this.parse_href(this.defaultSrc); + if(!url) { // Hide if no valid image return html``; } - const bootstrap = src.match(/\/node_modules\/bootstrap-icons\/icons\/([^.]+)\.svg/); + const bootstrap = url.match(/\/node_modules\/bootstrap-icons\/icons\/([^.]+)\.svg/); if (bootstrap) { - this.classList.add('bi-'+bootstrap[1]); + this.className = 'bi-'+bootstrap[1]; return html``; } + this.className = ''; return html`