diff --git a/api/js/etemplate/Et2Switch/Et2Switch.ts b/api/js/etemplate/Et2Switch/Et2Switch.ts index df3a0a26ee..bd93c87108 100644 --- a/api/js/etemplate/Et2Switch/Et2Switch.ts +++ b/api/js/etemplate/Et2Switch/Et2Switch.ts @@ -15,6 +15,12 @@ import '../Et2Image/Et2Image'; import {SlSwitch} from "@shoelace-style/shoelace"; import shoelace from "../Styles/shoelace"; +/** + * Switch to turn on or off. Like a checkbox, but different UI. + * + * Add "et2SlideSwitch" class to use an alternate UI with images. Use CSS to set the images: + * + */ export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch)) { static get styles() @@ -23,37 +29,67 @@ export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch)) ...shoelace, ...super.styles, css` - :host { + :host { /* Make it line up with the middle of surroundings */ margin: auto 0px; vertical-align: -webkit-baseline-middle; - } - .switch { + } + + .switch { position: relative; - } - .toggle__label { - position: absolute; - left: 0px; - border-radius: 50%; - flex: 0 0 auto; - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--width); - height: var(--height); - margin: 0px; - } - .switch__thumb { + } + + .toggle__label { + position: absolute; + left: 0px; + border-radius: 50%; + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--width); + height: var(--height); + margin: 0px; + } + + .switch__thumb { z-index: var(--sl-z-index-tooltip); - } - ::slotted(span.label) - { + } + + ::slotted(span.label) { width: var(--width); display: inline-flex; align-items: center; height: var(--height); - } - `, + } + + /* + Use two images instead of normal switch by adding et2_image_switch class + see etemplate.css for the rest (slotted label) + */ + + :host(.et2SlideSwitch) .switch { + min-width: 60px; + --height: var(--sl-input-height-medium); + border-color: var(--sl-input-border-color); + border-width: var(--sl-input-border-width); + border-radius: var(--sl-border-radius-medium); + border-style: solid; + } + + :host(.et2SlideSwitch) .switch__control { + visibility: hidden; + } + + :host(.et2SlideSwitch) .switch__label { + width: 100%; + height: 100%; + } + + :host(.et2SlideSwitch) ::slotted(.label) { + flex: 1 1 auto; + } + `, ]; } diff --git a/api/js/etemplate/et2_extension_nextmatch.ts b/api/js/etemplate/et2_extension_nextmatch.ts index 67cadd1970..6201fa6b00 100644 --- a/api/js/etemplate/et2_extension_nextmatch.ts +++ b/api/js/etemplate/et2_extension_nextmatch.ts @@ -2941,13 +2941,14 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2 return; } + const orientation = value.orientation ? "landscape" : "portrait"; // Set CSS for orientation - this.div.addClass(value.orientation); - this.egw().set_preference(app, pref + '_orientation', value.orientation); + this.div.addClass(orientation); + this.egw().set_preference(app, pref + '_orientation', orientation); // Try to tell browser about orientation - const css = '@page { size: ' + value.orientation + '; }', + const css = '@page { size: ' + orientation + '; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); @@ -3107,7 +3108,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2 content: { row_count: Math.min(100, total), columns: this.egw().preference(pref, app) || columns_selected, - orientation: this.egw().preference(pref + '_orientation', app) + orientation: this.egw().preference(pref + '_orientation', app) == "landscape" }, modifications: { autoRefresh: { diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index a393815f3c..66b83d0a01 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -833,14 +833,12 @@ which caused click on free space infront of a tag stops nm row selection*/ /* Nextmatch print dialog */ -#nm_print_dialog-xet .slideSwitch_container .on { - background-image: url('images/portrait.svg'); - background-position: 5px 0px; +#nm_print_dialog et2-switch#_orientation .label .on { + background-image: url('images/portrait.svg'); } -#nm_print_dialog-xet .slideSwitch_container .off { - background-image: url('images/landscape.svg'); - background-position: 5px -2px; +#nm_print_dialog et2-switch#_orientation .label .off { + background-image: url('images/landscape.svg'); } /* @@ -3281,25 +3279,40 @@ span.et2_checkbox_slideSwitch > span.slideSwitch_container a { } span.et2_checkbox_slideSwitch > input { - opacity: 0; - position: absolute; - z-index: 7; - width: 100%; - height: 100%; - cursor: pointer; + opacity: 0; + position: absolute; + z-index: 7; + width: 100%; + height: 100%; + cursor: pointer; } span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container a { - right: 50%; + right: 50%; +} + +.et2SlideSwitch .label > * { + background-size: contain; + height: 75%; + width: 50%; + background-repeat: no-repeat; + background-position: center; + height: 28px; + top: 0; + color: transparent; +} + +.et2SlideSwitch[checked] .label .on, .et2SlideSwitch:not([checked]) .label .off { + filter: invert(1); } /* Slide switch in a toolbar */ .et2_toolbar_actionlist span.et2_checkbox_slideSwitch { - vertical-align: bottom; - margin: 1px; - margin-right: 3px; - border-radius: 3px; - cursor: pointer; + vertical-align: bottom; + margin: 1px; + margin-right: 3px; + border-radius: 3px; + cursor: pointer; } .et2_toolbar_more span.et2_checkbox_slideSwitch { diff --git a/api/templates/default/nm_print_dialog.xet b/api/templates/default/nm_print_dialog.xet index 29ca5c255e..2f201c3a1a 100644 --- a/api/templates/default/nm_print_dialog.xet +++ b/api/templates/default/nm_print_dialog.xet @@ -2,11 +2,15 @@ + + + + + + + + + + \ No newline at end of file