mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-21 15:33:23 +01:00
Let toolbar use Et2SwitchIcon if icons are provided, style / sizing improvements
This commit is contained in:
parent
b03754363f
commit
ce06aa5038
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user