extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix gap between label & control, better solution for date-duration

Browse Source
This commit is contained in:
nathan 2022-11-04 09:41:45 -06:00
parent 6a93275d93
commit d35eacb8a2
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,11 +9,12 @@
*/ */
import {css, html, LitElement} from "@lion/core"; import {classMap, 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 {FormControlMixin} from "@lion/form-core"; import {FormControlMixin} from "@lion/form-core";
import shoelace from "../Styles/shoelace";
export interface formatOptions export interface formatOptions
{ {
@ -116,6 +117,7 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
{ {
return [ return [
...super.styles, ...super.styles,
shoelace,
...dateStyles, ...dateStyles,
css` css`
.form-field__group-two { .form-field__group-two {
@ -126,7 +128,9 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: baseline; align-items: baseline;
gap: 1ex; }
.input-group__after {
margin-inline-start: var(--sl-input-spacing-medium);
} }
et2-select { et2-select {
color: var(--input-text-color); color: var(--input-text-color);
@ -368,8 +372,13 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
render() render()
{ {
return html` return html`
<div part="form-control" class="form-control"> <div part="form-control" class=${classMap({
<div class="form-field__group-one" part="form-control-label">${this._groupOneTemplate()}</div> 'form-control': true,
'form-control--has-label': this.label.split("%")[0] || false
})}>
<div class="form-field__group-one form-control__label" part="form-control-label">
${this._groupOneTemplate()}
</div>
<div class="form-field__group-two" part="form-control-input">${this._groupTwoTemplate()}</div> <div class="form-field__group-two" part="form-control-input">${this._groupTwoTemplate()}</div>
</div> </div>
`; `;

5
api/js/etemplate/Styles/shoelace.ts
View File

@ -59,4 +59,9 @@ export default [sl_css, css`
.tab-group--top .tab-group__tabs { .tab-group--top .tab-group__tabs {
--track-width: 3px; --track-width: 3px;
} }
.form-control--has-label .form-control__label {
display: inline-block;
color: var(--sl-input-label-color);
margin-right: var(--sl-spacing-medium);
}
`]; `];

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

@ -77,11 +77,11 @@
.hide { .hide {
display: none; display: none;
} }
/* Put widget label to the left of the widget, with fixed width */ /* Put widget label to the left of the widget, with fixed width */
::part(form-control) { ::part(form-control) {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1em;
flex-wrap: wrap; flex-wrap: wrap;
} }