From 29c8baaa831a39fc55861ed9271c67ae526ce042 Mon Sep 17 00:00:00 2001 From: nathan Date: Mon, 29 Apr 2024 15:04:56 -0600 Subject: [PATCH] Framework WIP: App slots & positioning for default view --- kdots/assets/styles/framework.less | 1 + kdots/head.tpl | 2 +- kdots/js/EgwApp.styles.ts | 97 +++++++++++++++++-------- kdots/js/EgwApp.ts | 110 ++++++++++++++++++++++------- 4 files changed, 152 insertions(+), 58 deletions(-) diff --git a/kdots/assets/styles/framework.less b/kdots/assets/styles/framework.less index 9476b081b0..50c82deec1 100644 --- a/kdots/assets/styles/framework.less +++ b/kdots/assets/styles/framework.less @@ -71,6 +71,7 @@ egw-framework#egw_fw_basecontainer { egw-app { &::part(name) { + display: flex; align-items: center; } } diff --git a/kdots/head.tpl b/kdots/head.tpl index a3168eca97..d903d53d22 100644 --- a/kdots/head.tpl +++ b/kdots/head.tpl @@ -50,7 +50,7 @@ -
Something inside the app - main
+
Something inside the app - main
 diff --git a/kdots/js/EgwApp.styles.ts b/kdots/js/EgwApp.styles.ts index 28d00fb4cc..6bb02a38d3 100644 --- a/kdots/js/EgwApp.styles.ts +++ b/kdots/js/EgwApp.styles.ts @@ -9,7 +9,8 @@ export default css` width: 100%; height: 100%; - display: grid; + display: flex; + flex-direction: column; } :host > * { @@ -17,53 +18,89 @@ export default css` display: flex; } - .egw_fw_app__left { - grid-area: left; - overflow-x: hidden; - overflow-y: auto; - } - - .egw_fw_app__right { - grid-area: right; - overflow-x: hidden; - overflow-y: auto; - } - - .egw_fw_app__main { - grid-area: main; - overflow: hidden; - overflow-x: auto; + .egw_fw_app__name { + max-width: 20vw; + flex: 1 1 20vw; } .egw_fw_app__header { - grid-area: header; + justify-content: flex-start; + align-items: center; + justify-items: stretch; + flex: 1 0 2em; + max-height: 3em; + } + + .egw_fw_app__aside { + overflow-x: hidden; + overflow-y: auto; + display: grid; + grid-template-rows: subgrid; + grid-row: start / end; } + .egw_fw_app__aside_header { + grid-row: sub-header / main; + } + + .egw_fw_app__aside_content { + height: 100%; + grid-row: main / footer; + } + + .egw_fw_app__aside_footer { + grid-row: footer / end; + } + + .egw_fw_app__left { + grid-column: left / left; + } + + .egw_fw_app__right { + grid-column: right / right; + } + + .egw_fw_app__main { + flex: 1 1 100%; + display: grid; + align-items: stretch; + justify-content: stretch; + overflow: hidden; + overflow-x: auto; + } + .egw_fw_app__header { + grid-row: sub-header / main; + grid-column: main / main; + } + + .egw_fw_app__main_content { + grid-row: main / footer; + grid-column: main / main; + } + .egw_fw_app__footer { - grid-area: footer; + grid-column: main / right; + grid-row: footer / end; } @media (min-width: 500px) { - :host { + .egw_fw_app__main { grid-template-columns: [start left] fit-content(20%) [main] 1fr [right] fit-content(50%) [end]; - grid-template-rows: [header] fit-content(2em) [main] 1fr [footer bottom] fit-content(2em) [end]; - grid-template-areas: - "left-header header right-header" - "left main right" - "left-footer footer right-footer" + grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end]; + } + + ::slotted(*) { + height: 100%; } } @media (max-width: 500px) { - :host { + .egw_fw_app__main { grid-template-areas: "header" "main" "left right" - } - - [slot="footer"] { - display: none; + "footer" } } ` \ No newline at end of file diff --git a/kdots/js/EgwApp.ts b/kdots/js/EgwApp.ts index 65784a4128..2391bbc8c4 100644 --- a/kdots/js/EgwApp.ts +++ b/kdots/js/EgwApp.ts @@ -6,6 +6,31 @@ import {property} from "lit/decorators/property.js"; import styles from "./EgwApp.styles"; import {state} from "lit/decorators/state.js"; +/** + * @summary Application component inside EgwFramework + * + * @dependency sl-icon-button + * + * @slot - Main application content. Other slots are normally hidden if they have no content + * @slot header - Top of app, contains logo, app icons. + * @slot footer - Very bottom of the main content. + * @slot left - Optional content to the left. Use for application navigation. + * @slot left-header - Top of left side + * @slot left-footer - bottom of left side + * @slot right - Optional content to the right. Use for application context details. + * @slot right-header - Top of right side + * @slot right-footer - bottom of right side + * + * @csspart name - Top left, holds the application name. + * @csspart header - Top main application header, optional application toolbar goes here. + * @csspart content-header - Top of center, optional. + * @csspart main - Main application content. + * @csspart left - Left optional content. + * @csspart right - Right optional content. + * @csspart footer - Very bottom of the main content. + * + * @cssproperty [--icon-size=32] - Height of icons used in the framework + */ @customElement('egw-app') //@ts-ignore export class EgwApp extends LitElement @@ -17,27 +42,34 @@ export class EgwApp extends LitElement // TEMP STUFF css` - :host { + :host .placeholder { + display: none; + } + + :host(.placeholder) .placeholder { + display: block; --placeholder-background-color: #e97234; } - .placeholder { width: 100%; - display: block; font-size: 200%; text-align: center; - background-color: var(--placeholder-background-color, silver); + background-color: var(--placeholder-background-color); } - .placeholder:after { - content: " (placeholder)"; + .placeholder:after, .placeholder:before { + content: " ⌖ "; } - [class*="left"] .placeholder, [class*="right"] .placeholder { - background-color: color-mix(in lch, var(--placeholder-background-color), rgba(1, 1, 1, .5)); + :host(.placeholder) [class*="left"] .placeholder { + background-color: color-mix(in lch, var(--placeholder-background-color), rgba(.5, .5, 1, .1)); } - [class*="footer"] .placeholder { + :host(.placeholder) [class*="right"] .placeholder { + background-color: color-mix(in lch, var(--placeholder-background-color), rgba(.5, 1, .5, .1)); + } + + :host(.placeholder) [class*="footer"] .placeholder { background-color: color-mix(in lch, var(--placeholder-background-color), rgba(1, 1, 1, .05)); } ` @@ -58,29 +90,53 @@ export class EgwApp extends LitElement render() { return html` -
- {this.leftCollapsed = !this.leftCollapsed}} - > -

${this.egw?.lang(this.name) ?? this.name}

+
+
+ {this.leftCollapsed = !this.leftCollapsed}} + > +

${this.egw?.lang(this.name) ?? this.name}

+
+
+ ${this.name} main-header +
- - -
- ${this.name} main-header -
+ + +
+ header +
+
main +
+
+ main-footer +
- `; } } \ No newline at end of file