From 3d97e19e2c7c69cde80f181513634cbc147ff40f Mon Sep 17 00:00:00 2001 From: nathan Date: Tue, 19 Nov 2024 14:24:45 -0700 Subject: [PATCH] Et2Details + Et2Groupbox: Stop using
tag so we can control layout --- .../etemplate/Layout/Et2Details/Et2Details.ts | 187 ++++++++++++------ .../Layout/Et2Groupbox/Et2Groupbox.ts | 30 ++- 2 files changed, 136 insertions(+), 81 deletions(-) diff --git a/api/js/etemplate/Layout/Et2Details/Et2Details.ts b/api/js/etemplate/Layout/Et2Details/Et2Details.ts index 648dd6eb3c..d3d9c7d930 100644 --- a/api/js/etemplate/Layout/Et2Details/Et2Details.ts +++ b/api/js/etemplate/Layout/Et2Details/Et2Details.ts @@ -8,11 +8,12 @@ */ import {Et2Widget} from "../../Et2Widget/Et2Widget"; -import {css} from "lit"; +import {css, html} from "lit"; import {SlDetails} from "@shoelace-style/shoelace"; import shoelace from "../../Styles/shoelace"; import {property} from "lit/decorators/property.js"; import {customElement} from "lit/decorators/custom-element.js"; +import {classMap} from "lit/directives/class-map.js"; @customElement("et2-details") export class Et2Details extends Et2Widget(SlDetails) @@ -23,61 +24,83 @@ export class Et2Details extends Et2Widget(SlDetails) ...super.styles, shoelace, css` - :host { - display: block; - } - - :host([align="right"]) > div { - justify-content: flex-end; - } - :host([align="left"]) > div { - justify-content: flex-start; - } - /* CSS for child elements */ - ::slotted(*) { - flex: 1 1 auto; - } - ::slotted(img),::slotted(et2-image) { - /* Stop images from growing. In general we want them to stay */ - flex-grow: 0; - } - ::slotted([align="left"]) { - margin-right: auto; - order: -1; - } - ::slotted([align="right"]) { - margin-left: auto; - order: 1; - } + :host { + display: block; + } + + :host([align="right"]) > div { + justify-content: flex-end; + } + + :host([align="left"]) > div { + justify-content: flex-start; + } + + /* CSS for child elements */ + + ::slotted(*) { + flex: 1 1 auto; + } + + ::slotted(img), ::slotted(et2-image) { + /* Stop images from growing. In general we want them to stay */ + flex-grow: 0; + } + + ::slotted([align="left"]) { + margin-right: auto; + order: -1; + } + + ::slotted([align="right"]) { + margin-left: auto; + order: 1; + } .details { border: var(--sl-panel-border-width) solid var(--sl-panel-border-color); margin: 0px; + overflow: hidden; + } + + .details.hoist { + position: relative; + } + + .details__body { + display: none; + } + + .details--open .details__body { + display: block; } - .details.hoist { - position: relative; - } .details.hoist .details__body { - position: absolute; - z-index: var(--sl-z-index-drawer); - background: var(--sl-color-neutral-0); - box-shadow: var(--sl-shadow-large); - width: 100%; - min-width: fit-content; - border-radius: var(--sl-border-radius-small); - border: var(--sl-panel-border-width) solid var(--sl-panel-border-color); - max-height: 15em; - overflow-y: auto; - } - .details.hoist .details__body.overlaySummaryLeftAligned { - top: 0; - left: 2em; - width: calc(100% - 2em); - } - .details.hoist .details__body.overlaySummaryRightAligned { - top: 0; - } + position: absolute; + z-index: var(--sl-z-index-drawer); + background: var(--sl-color-neutral-0); + box-shadow: var(--sl-shadow-large); + width: 100%; + min-width: fit-content; + border-radius: var(--sl-border-radius-small); + border: var(--sl-panel-border-width) solid var(--sl-panel-border-color); + max-height: 15em; + overflow-y: auto; + } + + .details.hoist .details__body.overlaySummaryLeftAligned { + top: 0; + left: 2em; + width: calc(100% - 2em); + } + + .details.hoist .details__body.overlaySummaryRightAligned { + top: 0; + } + + .details__summary-icon--left-aligned { + order: -1; + } `, ]; } @@ -128,19 +151,6 @@ export class Et2Details extends Et2Widget(SlDetails) this.addEventListener("mouseover", this.show); window.document.addEventListener('mouseout', this._mouseOutEvent.bind(this)); } - if (this.hoist) - { - this.shadowRoot.querySelector('.details').classList.add('hoist'); - } - if (this.toggleAlign === 'left') - { - this.shadowRoot.querySelector('.details__summary-icon').style.order = -1; - } - if (this.overlaySummaryOnOpen) - { - this.shadowRoot.querySelector('.details__body').classList.add(this.toggleAlign === 'left' ? - 'overlaySummaryLeftAligend' : 'overlaySummaryRightAligned'); - } }); } @@ -158,4 +168,57 @@ export class Et2Details extends Et2Widget(SlDetails) { if (!this.getDOMNode().contains(event.relatedTarget)) this.hide(); } + + render() + { + const isRtl = this.matches(':dir(rtl)'); + + return html` +
+ + ${this.summary} + + + + + + + + + + +
+ +
+
+ `; + } + } \ No newline at end of file diff --git a/api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts b/api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts index 653c312100..86a1b616e1 100644 --- a/api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts +++ b/api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts @@ -39,18 +39,15 @@ export class Et2Groupbox extends Et2Details display: none; } - details { + .details { height: 100%; position: relative; - margin: 2px; + display: flex; + flex-direction: column; } - /* work around details not respecting flex - height is 100% - header - border radius - */ - .details__body { - height: calc(100% - 2em - var(--sl-border-radius-medium)) !important; + flex: 1 1 auto; position: relative; } @@ -62,21 +59,15 @@ export class Et2Groupbox extends Et2Details .details__content { overflow: hidden; overflow-y: auto; - height: calc(100% - 2 * var(--sl-spacing-medium)); + height: 100%; } - /* end workaround */ - summary { + flex: 0 0 auto; pointer-events: none; } - /*.details { - border-color: var(--sl-color-neutral-500); - border-width: 2px; - }*/ - - details.summaryOnTop > summary { + .details.summaryOnTop > summary { position: absolute; pointer-events: none; width: fit-content; @@ -86,10 +77,11 @@ export class Et2Groupbox extends Et2Details background: var(--sl-color-neutral-0); } - details.summaryOnTop { + .details.summaryOnTop { padding-top: .5rem; margin-top: .5rem; height: auto; + overflow: visible; } `, ]; @@ -106,7 +98,7 @@ export class Et2Groupbox extends Et2Details { super.firstUpdated(changedProperties); - this.shadowRoot.querySelector('details').classList.toggle('summaryOnTop', !this.summaryInside); + this.shadowRoot.querySelector('.details').classList.toggle('summaryOnTop', !this.summaryInside); } /** @@ -121,7 +113,7 @@ export class Et2Groupbox extends Et2Details if (changedProperties.has('summaryInside')) { - this.shadowRoot.querySelector('details').classList.toggle('summaryOnTop', !this.summaryInside); + this.shadowRoot.querySelector('.details').classList.toggle('summaryOnTop', !this.summaryInside); } } } \ No newline at end of file