forked from extern/egroupware
Fix nm print dialog missing print orientation
This commit is contained in:
nathan
parent
c3348c8230
commit
84bdea4193
@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -2,11 +2,15 @@
|
||||
<!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2.0//EN" "https://www.egroupware.org/etemplate2.0.dtd">
|
||||
<overlay>
|
||||
<template id="nm_print_dialog" template="" lang="" group="0" version="16.1">
|
||||
<et2-vbox>
|
||||
<et2-description value="Columns to print"></et2-description>
|
||||
<et2-nextmatch-columnselection id="columns"></et2-nextmatch-columnselection>
|
||||
<et2-number id="row_count" label="How many rows to print" precision="0"></et2-number>
|
||||
<et2-checkbox id="orientation" toggleOn="Portrait" toggleOff="Landscape" selectedValue="portrait" unselectedValue="landscape"></et2-checkbox>
|
||||
</et2-vbox>
|
||||
</template>
|
||||
<et2-vbox>
|
||||
<et2-description value="Columns to print"></et2-description>
|
||||
<et2-nextmatch-columnselection id="columns"></et2-nextmatch-columnselection>
|
||||
<et2-number id="row_count" label="How many rows to print" precision="0"></et2-number>
|
||||
<et2-hbox>
|
||||
<et2-description value="Print orientation"/>
|
||||
<et2-switch id="orientation" label="Print orientation" toggleOn="Portrait" toggleOff="Landscape"
|
||||
class="et2SlideSwitch"></et2-switch>
|
||||
</et2-hbox>
|
||||
</et2-vbox>
|
||||
</template>
|
||||
</overlay>
|
||||
Loading…
Reference in New Issue
Block a user