extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 01:13:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Let toolbar use Et2SwitchIcon if icons are provided, style / sizing improvements

Browse Source
This commit is contained in:
nathan 2024-10-17 14:46:08 -06:00
parent b03754363f
commit ce06aa5038
3 changed files with 53 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
api/js/etemplate/Et2Switch/Et2SwitchIcon.ts
View File

@ -19,6 +19,7 @@ import {SlSwitch} from "@shoelace-style/shoelace";
*
* @csspart form-control-label The label's wrapper
* @csspart control The control's wrapper
* @csspart switch-label The internal control's wrapper (sometimes needed for positioning)
*/
@customElement("et2-switch-icon")
export class Et2SwitchIcon extends Et2InputWidget(LitElement)
@ -30,10 +31,12 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
css`
:host {
--indicator-color: var(--sl-color-primary-600);
display: flex;
}
sl-switch {
--sl-toggle-size-medium: 2em;
font-size: 1em;
--height: 1em;
}
::part(control) {
@ -65,6 +68,10 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
color: var(--indicator-color, inherit);
}
sl-switch::part(label) {
margin-inline-start: 0px;
}
.label:hover {
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-300);
@ -142,12 +149,18 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
{
return html`
<sl-switch
exportparts="base:switch-label"
.label=${this.label}
.value=${live(this.value)}
.checked=${live(this.checked)}
.disabled=${live(this.disabled)}
.required=${this.required}
.helpText=${this.helpText}
@sl-change=${async(e) =>
{
await this.updateComplete;
this.dispatchEvent(new Event("change", {bubbles: true}));
}}
>
${this.labelTemplate()}
</sl-switch>

20
api/js/etemplate/et2_widget_toolbar.ts
View File

@ -605,7 +605,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
let self = this;
const isCheckbox = action && action.checkbox;
const isToggleSwitch = action.data?.toggle_on || action.data?.toggle_off;
const isToggleSwitch = action.data?.toggle_on || action.data?.toggle_off || action.data?.onIcon || action.data?.offIcon;
const actionHandler = function(action, e)
{
@ -626,13 +626,27 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
if (isToggleSwitch)
{
widget = <Et2Checkbox>loadWebComponent('et2-switch', {
let component = "et2-switch";
let attrs = {
id: `${this.id}-${action.id}`,
label: action.caption,
toggleOn: action.data.toggle_on,
toggleOff: action.data.toggle_off,
class: `et2_toolbar_draggable${this.id}`,
}, this);
};
if(action.data.onIcon || action.data.offIcon)
{
component = "et2-switch-icon";
if(action.data.onIcon)
{
attrs["onIcon"] = action.data.onIcon;
}
if(action.data.offIcon)
{
attrs["offIcon"] = action.data.offIcon;
}
}
widget = <Et2Checkbox>loadWebComponent(component, attrs, this);
widget.style.backgroundImage = `url(${action.iconUrl})`;
widget.value = action.checked;
action.data.widget = widget;

22
api/templates/default/etemplate2.css
View File

@ -2617,6 +2617,28 @@ table.egwGridView_outer thead tr th.noResize:hover {
top: 100%;
}
.et2_toolbar et2-switch-icon {
font-size: 2.4em;
height: 1em;
}
.et2_toolbar et2-switch-icon::part(form-control-label) {
position: absolute;
top: 100%;
visibility: hidden;
}
.et2_toolbar et2-switch-icon::part(switch-label) {
top: calc(-1.1 * var(--sl-spacing-medium));
}
et2-switch-icon:hover:not([disabled])::part(control) {
background-color: var(--sl-color-gray-150);
border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover);
}
.et2_toolbar et2-button:not(.et2_toolbar_hasCaption)::part(prefix) {
padding: 0;
}