extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-18 11:21:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use et2-select & et2-textbox in Et2DateDuration for consistent styling

Browse Source
This commit is contained in:
nathan 2022-07-21 13:32:06 -06:00
parent 379ceeb3e5
commit 68849a2b79
1 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
api/js/etemplate/Et2Date/Et2DateDuration.ts
View File

@ -13,7 +13,6 @@ import {css, html, LitElement} from "@lion/core";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import {sprintf} from "../../egw_action/egw_action_common"; import {sprintf} from "../../egw_action/egw_action_common";
import {dateStyles} from "./DateStyles"; import {dateStyles} from "./DateStyles";
import {cssImage} from "../Et2Widget/Et2Widget";
import {FormControlMixin} from "@lion/form-core"; import {FormControlMixin} from "@lion/form-core";
export interface formatOptions export interface formatOptions
@ -121,31 +120,25 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
css` css`
.form-field__group-two { .form-field__group-two {
width: 100%; width: 100%;
}
select {
color: var(--input-text-color);
border: 1px solid var(--input-border-color); border: 1px solid var(--input-border-color);
flex: 2 1 auto; border-radius: var(--sl-input-border-radius-medium, 3px);
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: #fff no-repeat center right;
background-image: ${cssImage('arrow_down')};
background-size: 8px auto;
background-position-x: calc(100% - 8px);
text-indent: 5px;
} }
input { et2-select {
color: var(--input-text-color); color: var(--input-text-color);
padding-top: 4px; border-left: 1px solid var(--input-border-color);
padding-bottom: 4px; flex: 2 1 auto;
border: 1px solid var(--input-border-color); }
border-right: none; et2-select::part(form-control-input) {
border: none;
}
et2-textbox {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 4.5em; max-width: 4.5em;
} }
input:last-child { et2-textbox::part(base) {
border: none;
}
et2-textbox:not(:last-of-type) {
border-right: 1px solid var(--input-border-color); border-right: 1px solid var(--input-border-color);
} }
@ -533,8 +526,10 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
inputs.push(input); inputs.push(input);
} }
return html`${inputs.map((input : any) => return html`${inputs.map((input : any) =>
html`<input type="number" name=${input.name} min=${input.min} max=${input.max} title=${input.title} html`
value=${input.value}/>` <et2-textbox part="duration__${input.name}" type="number" class="duration__input" name=${input.name}
min=${input.min} max=${input.max} title=${input.title}
value=${input.value}></et2-textbox>`
)} )}
`; `;
} }
@ -562,14 +557,14 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
}; };
// It would be nice to use an et2-select here, but something goes weird with the styling // It would be nice to use an et2-select here, but something goes weird with the styling
return html` return html`
<select> <et2-select value="${this._display.unit}">
${[...this.displayFormat].map((format : string) => ${[...this.displayFormat].map((format : string) =>
html` html`
<option value=${format} ?selected=${this._display.unit === format}> <sl-menu-item value=${format} ?checked=${this._display.unit === format}>
${this.time_formats[format]} ${this.time_formats[format]}
</option>` </sl-menu-item>`
)} )}
</select> </et2-select>
`; `;
} }