extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 06:30:59 +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 {css} from "lit";
import {css, PropertyValues, html} from "lit";
import shoelace from "../../Styles/shoelace";
import {property} from "lit/decorators/property.js";
import {customElement} from "lit/decorators/custom-element.js";
@ -19,34 +19,51 @@ import {customElement} from "lit/decorators/custom-element.js";
@customElement("et2-groupbox")
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()
{
return [
...super.styles,
shoelace,
css`
slot[name="collapse-icon"], slot[name="expand-icon"] {
display: none;
}
details {
position: relative;
padding-top: .5rem;
margin: 2px;
margin-top: .5rem;
}
summary {
position: absolute;
pointer-events: none;
width: fit-content;
line-height: 0;
top: -.5rem;
left: .5rem;
background: var(--sl-color-neutral-0);
}
.details {
border-color: var(--sl-color-neutral-500);
border-width: 2px;
}
slot[name="collapse-icon"], slot[name="expand-icon"] {
display: none;
}
details {
position: relative;
margin: 2px;
height: calc(100% - .5rem);
}
summary {
pointer-events: none;
}
/*.details {
border-color: var(--sl-color-neutral-500);
border-width: 2px;
}*/
details.summaryOnTop > summary {
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
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);
}
}
}