From 85137fd4d769a3c93862862667cde8606438b74e Mon Sep 17 00:00:00 2001 From: milan Date: Fri, 9 Aug 2024 14:28:14 +0200 Subject: [PATCH] EgwMenuShoelace on checkboxes use a toggle icon to indicate checked state instead of an icon --- api/js/egw_action/EgwMenuShoelace.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/api/js/egw_action/EgwMenuShoelace.ts b/api/js/egw_action/EgwMenuShoelace.ts index aadd2cbe93..d3a1aaf2da 100644 --- a/api/js/egw_action/EgwMenuShoelace.ts +++ b/api/js/egw_action/EgwMenuShoelace.ts @@ -4,6 +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"; @customElement("egw-menu-shoelace") export class EgwMenuShoelace extends LitElement @@ -38,7 +39,7 @@ export class EgwMenuShoelace extends LitElement /* Customise checkbox menuitem */ sl-menu-item[type="checkbox"]::part(checked-icon) { - visibility: visible; + visibility: hidden; } sl-menu-item[type="checkbox"]:not([checked])::part(checked-icon) { @@ -179,9 +180,9 @@ export class EgwMenuShoelace extends LitElement // Update our internal data item.data.checked = item.checked = event.detail.item.checked; - // Update icon since updated won't fire - const icon : SlIcon = event.detail.item.shadowRoot.querySelector("[part=\"checked-icon\"] sl-icon"); - icon.name = item.checked ? "check-square" : "square"; + // 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") return; } if(typeof item.onClick == "function") @@ -239,6 +240,12 @@ export class EgwMenuShoelace extends LitElement `; } + //if we have a checkbox, change the icon to be a toggle slider. Either on or off + if (item.checkbox) + { + item.iconUrl = item.checked ? "toggle-on" : "toggle-off"; + } + return html`