extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-10 07:58:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

size internal details to size of et2-groupbox and add summaryInside property to show summary inside and not on top border

Browse Source
This commit is contained in:
ralf 2024-08-15 20:25:25 +02:00
parent 80b19980bc
commit ac86b58457
1 changed files with 63 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts
View File

@ -8,7 +8,7 @@
*/ */
import {Et2Details} from "../Et2Details/Et2Details"; import {Et2Details} from "../Et2Details/Et2Details";
import {css} from "lit"; import {css, PropertyValues, html} from "lit";
import shoelace from "../../Styles/shoelace"; import shoelace from "../../Styles/shoelace";
import {property} from "lit/decorators/property.js"; import {property} from "lit/decorators/property.js";
import {customElement} from "lit/decorators/custom-element.js"; import {customElement} from "lit/decorators/custom-element.js";
@ -19,34 +19,51 @@ import {customElement} from "lit/decorators/custom-element.js";
@customElement("et2-groupbox") @customElement("et2-groupbox")
export class Et2Groupbox extends Et2Details export class Et2Groupbox extends Et2Details
{ {
/**
* Where to show the summary: false (default) summary is shown on top border, true: summary is shown inside
*/
@property({type: Boolean})
summaryInside = false;
static get styles() static get styles()
{ {
return [ return [
...super.styles, ...super.styles,
shoelace, shoelace,
css` css`
slot[name="collapse-icon"], slot[name="expand-icon"] { slot[name="collapse-icon"], slot[name="expand-icon"] {
display: none; display: none;
} }
details {
position: relative; details {
padding-top: .5rem; position: relative;
margin: 2px; margin: 2px;
margin-top: .5rem; height: calc(100% - .5rem);
} }
summary {
position: absolute; summary {
pointer-events: none; pointer-events: none;
width: fit-content; }
line-height: 0;
top: -.5rem; /*.details {
left: .5rem; border-color: var(--sl-color-neutral-500);
background: var(--sl-color-neutral-0); border-width: 2px;
} }*/
.details {
border-color: var(--sl-color-neutral-500); details.summaryOnTop > summary {
border-width: 2px; position: absolute;
} pointer-events: none;
width: fit-content;
line-height: 0;
top: -.5rem;
left: .5rem;
background: var(--sl-color-neutral-0);
}
details.summaryOnTop {
padding-top: .5rem;
margin-top: .5rem;
}
`, `,
]; ];
} }
@ -57,4 +74,27 @@ export class Et2Groupbox extends Et2Details
// groupbox is always open // groupbox is always open
this.open = true; this.open = true;
} }
firstUpdated(changedProperties: PropertyValues)
{
super.firstUpdated(changedProperties);
this.shadowRoot.querySelector('details').classList.toggle('summaryOnTop', !this.summaryInside);
}
/**
* A property has changed, and we want to make adjustments to other things
* based on that
*
* @param changedProperties
*/
updated(changedProperties: PropertyValues)
{
super.updated(changedProperties);
if (changedProperties.has('summaryInside'))
{
this.shadowRoot.querySelector('details').classList.toggle('summaryOnTop', !this.summaryInside);
}
}
} }