extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-02 04:43:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

EgwMenuShoelace on checkboxes use a toggle icon to indicate checked state instead of an icon

Browse Source 
(cherry picked from commit 85137fd4d7)
This commit is contained in:
milan 2024-08-09 14:28:14 +02:00
parent 60c310ffeb
commit ca571c45c9
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
api/js/egw_action/EgwMenuShoelace.ts
View File

@ -4,6 +4,7 @@ import {egwMenuItem} from "./egw_menu";
import {customElement} from "lit/decorators/custom-element.js"; import {customElement} from "lit/decorators/custom-element.js";
import {repeat} from "lit/directives/repeat.js"; import {repeat} from "lit/directives/repeat.js";
import {classMap} from "lit/directives/class-map.js"; import {classMap} from "lit/directives/class-map.js";
import {state} from "lit/decorators/state.js";
@customElement("egw-menu-shoelace") @customElement("egw-menu-shoelace")
export class EgwMenuShoelace extends LitElement export class EgwMenuShoelace extends LitElement
@ -38,7 +39,7 @@ export class EgwMenuShoelace extends LitElement
/* Customise checkbox menuitem */ /* Customise checkbox menuitem */
sl-menu-item[type="checkbox"]::part(checked-icon) { sl-menu-item[type="checkbox"]::part(checked-icon) {
visibility: visible; visibility: hidden;
} }
sl-menu-item[type="checkbox"]:not([checked])::part(checked-icon) { sl-menu-item[type="checkbox"]:not([checked])::part(checked-icon) {
@ -179,9 +180,9 @@ export class EgwMenuShoelace extends LitElement
// Update our internal data // Update our internal data
item.data.checked = item.checked = event.detail.item.checked; item.data.checked = item.checked = event.detail.item.checked;
// Update icon since updated won't fire // Update image of a checkbox item to be toggle on or off
const icon : SlIcon = event.detail.item.shadowRoot.querySelector("[part=\"checked-icon\"] sl-icon"); // this happens by requesting an update because item.checked has changed
icon.name = item.checked ? "check-square" : "square"; this.requestUpdate("structure")
return; return;
} }
if(typeof item.onClick == "function") if(typeof item.onClick == "function")
@ -239,6 +240,12 @@ export class EgwMenuShoelace extends LitElement
<sl-divider></sl-divider>`; <sl-divider></sl-divider>`;
} }
//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` return html`
<sl-menu-item <sl-menu-item
class=${classMap({ class=${classMap({