From 493a2432fa309f6cf69a3f2eb0d16069f9d42d5d Mon Sep 17 00:00:00 2001 From: nathan Date: Tue, 30 Apr 2024 10:18:09 -0600 Subject: [PATCH] Framework WIP: - Rename EgwApp to EgwFrameworkApp to avoid confusion with api/js/jsapi/EgwApp - Continued work on narrow screen styles --- kdots/assets/styles/framework.less | 1 + kdots/js/EgwFramework.styles.ts | 13 +++++- ...pp.styles.ts => EgwFrameworkApp.styles.ts} | 43 ++++++++++++++++--- kdots/js/{EgwApp.ts => EgwFrameworkApp.ts} | 15 ++++--- kdots/js/app.ts | 2 +- 5 files changed, 60 insertions(+), 14 deletions(-) rename kdots/js/{EgwApp.styles.ts => EgwFrameworkApp.styles.ts} (66%) rename kdots/js/{EgwApp.ts => EgwFrameworkApp.ts} (93%) diff --git a/kdots/assets/styles/framework.less b/kdots/assets/styles/framework.less index 50c82deec1..653448dc69 100644 --- a/kdots/assets/styles/framework.less +++ b/kdots/assets/styles/framework.less @@ -73,6 +73,7 @@ egw-app { &::part(name) { display: flex; align-items: center; + text-wrap: nowrap; } } diff --git a/kdots/js/EgwFramework.styles.ts b/kdots/js/EgwFramework.styles.ts index bf9b2929b2..b9fa926d71 100644 --- a/kdots/js/EgwFramework.styles.ts +++ b/kdots/js/EgwFramework.styles.ts @@ -40,6 +40,7 @@ export default css` /* To use the sl-split-panel, we need it to have its own space & nest stuff inside */ .egw_fw__layout-default .egw_fw__divider { + max-width: 100vw; grid-column-start: start; grid-column-end: status-start; grid-row-start: main-header; @@ -71,12 +72,22 @@ export default css` } - @media (min-width: 500px) { + @media (min-width: 600px) { .egw_fw__layout-default { grid-template-columns: [start banner-start header-start footer-start main-start] 1fr [main-end header-end banner-end end]; grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [main-header] fit-content(2em) [main] 1fr [footer bottom] fit-content(2em); } } + @media (max-width: 599px) { + .egw_fw__layout-default { + grid-template-columns: [start banner-start header-start footer-start main-start] 1fr [main-end header-end banner-end end]; + grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [main-header] fit-content(2em) [main] 1fr [footer bottom] fit-content(2em); + } + + ::slotted([slot="logo"]) { + display: none; + } + } /* Actual styles */ diff --git a/kdots/js/EgwApp.styles.ts b/kdots/js/EgwFrameworkApp.styles.ts similarity index 66% rename from kdots/js/EgwApp.styles.ts rename to kdots/js/EgwFrameworkApp.styles.ts index 6bb02a38d3..586e9ebf8f 100644 --- a/kdots/js/EgwApp.styles.ts +++ b/kdots/js/EgwFrameworkApp.styles.ts @@ -84,7 +84,7 @@ export default css` grid-row: footer / end; } - @media (min-width: 500px) { + @media (min-width: 600px) { .egw_fw_app__main { grid-template-columns: [start left] fit-content(20%) [main] 1fr [right] fit-content(50%) [end]; grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end]; @@ -94,13 +94,42 @@ export default css` height: 100%; } } - @media (max-width: 500px) { + @media (max-width: 599px) { .egw_fw_app__main { - grid-template-areas: - "header" - "main" - "left right" - "footer" + grid-template-columns: [start left main-start] fit-content(50%) [right] auto [main-end end]; + grid-template-rows: + [start sub-header] fit-content(2em) + [main] auto + [aside-header] fit-content(2em) + [aside] min-content + [aside-footer] fit-content(4em) + [footer] fit-content(4em) + [end]; + } + + .egw_fw_app__main_content { + grid-row: main / aside-header; + grid-column: start / end; + } + + .egw_fw_app__aside { + grid-row: aside-header / footer; + } + + .egw_fw_app__aside_header { + grid-row: aside-header / aside; + } + + .egw_fw_app__aside_content { + grid-row: aside / aside-footer; + } + + .egw_fw_app__aside_footer { + grid-row: aside-footer / footer; + } + + .egw_fw_app__footer { + grid-column: start / end; } } ` \ No newline at end of file diff --git a/kdots/js/EgwApp.ts b/kdots/js/EgwFrameworkApp.ts similarity index 93% rename from kdots/js/EgwApp.ts rename to kdots/js/EgwFrameworkApp.ts index 2391bbc8c4..339a33df41 100644 --- a/kdots/js/EgwApp.ts +++ b/kdots/js/EgwFrameworkApp.ts @@ -1,10 +1,10 @@ import {css, html, LitElement} from "lit"; import {customElement} from "lit/decorators/custom-element.js"; -import "@shoelace-style/shoelace/dist/components/split-panel/split-panel.js"; import {property} from "lit/decorators/property.js"; - -import styles from "./EgwApp.styles"; import {state} from "lit/decorators/state.js"; +import {classMap} from "lit/directives/class-map.js"; + +import styles from "./EgwFrameworkApp.styles"; /** * @summary Application component inside EgwFramework @@ -33,7 +33,7 @@ import {state} from "lit/decorators/state.js"; */ @customElement('egw-app') //@ts-ignore -export class EgwApp extends LitElement +export class EgwFrameworkApp extends LitElement { static get styles() { @@ -89,6 +89,11 @@ export class EgwApp extends LitElement render() { + const leftClassMap = classMap({ + "egw_fw_app__aside": true, + "egw_fw_app__left": true, + "egw_fw_app__aside-collapsed": this.leftCollapsed + }); return html`
@@ -104,7 +109,7 @@ export class EgwApp extends LitElement
-