diff --git a/kdots/head.tpl b/kdots/head.tpl index 09dc273c55..a3168eca97 100644 --- a/kdots/head.tpl +++ b/kdots/head.tpl @@ -34,21 +34,22 @@ {include_wz_tooltip} - Site logo
{topmenu_info_items} - +
+
+ Placeholders
- +
Something inside the app - main
 diff --git a/kdots/js/EgwFramework.styles.ts b/kdots/js/EgwFramework.styles.ts index a4e3d206b4..bf9b2929b2 100644 --- a/kdots/js/EgwFramework.styles.ts +++ b/kdots/js/EgwFramework.styles.ts @@ -12,8 +12,6 @@ export default css` .egw_fw__layout-default { display: grid; - gap: 0.5em 0.1em; - border: 1px dotted; width: 100%; height: 100%; @@ -35,10 +33,14 @@ export default css` align-items: center; } + .egw_fw__layout-default .egw_fw__header > * { + flex: 1 1 auto; + } + /* To use the sl-split-panel, we need it to have its own space & nest stuff inside */ .egw_fw__layout-default .egw_fw__divider { - grid-column-start: sidemenu-start; + grid-column-start: start; grid-column-end: status-start; grid-row-start: main-header; grid-row-end: footer; @@ -64,36 +66,6 @@ export default css` overflow-y: auto; } - .egw_fw__layout-default .egw_fw__main-wrapper { - width: 100%; - display: grid; - grid-template-columns: [start] 1fr [end]; - grid-template-rows: [top main-header] fit-content(2em) [main] 1fr [main-footer] fit-content(0px) [ bottom] - } - - .egw_fw__layout-default .egw_fw__main { - grid-column-start: start; - grid-column-end: end; - grid-row-start: main; - grid-row-end: main; - overflow: hidden; - overflow-x: auto; - } - - .egw_fw__layout-default .egw_fw__main-header { - grid-column-start: start; - grid-column-end: end; - grid-row-start: main-header; - grid-row-end: main-header - } - - .egw_fw__layout-default .egw_fw__main-footer { - grid-column-start: start; - grid-column-end: end; - grid-row-start: main-footer; - grid-row-end: main-footer - } - .egw_fw__layout-default .egw_fw__footer { grid-area: footer; } @@ -101,8 +73,8 @@ export default css` @media (min-width: 500px) { .egw_fw__layout-default { - grid-template-columns: [start sidemenu-start banner-start header-start footer-start] 200px [sidemenu-end main-start] 1fr [main-end] fit-content(2em) [header-end banner-end end]; - grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [ main-header] fit-content(2em) [main] 1fr [main-footer] fit-content(2em) [footer bottom] fit-content(2em); + 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); } } @@ -112,6 +84,9 @@ export default css` color: inherit; } + .egw_fw__header .egw_fw__app_list { + flex: none; + } .egw_fw__app_list::part(panel) { display: grid; grid-template-columns: repeat(5, 1fr); @@ -121,7 +96,10 @@ export default css` .egw_fw__open_applications et2-image { height: var(--icon-size); - width: var(--icon-size); + + /* Allow some shrinking with limited size */ + min-width: calc(var(--icon-size) / 2); + min-height: calc(var(--icon-size) / 2); } .egw_fw__open_applications sl-tab::part(base) { @@ -139,7 +117,7 @@ export default css` padding: var(--sl-spacing-small) var(--sl-spacing-3x-small); } - .egw_fw__open_applications sl-tab:hover::part(close-button) { + .egw_fw__open_applications sl-tab:hover::part(close-button), .egw_fw__open_applications sl-tab[active]::part(close-button) { visibility: visible; } ` \ No newline at end of file diff --git a/kdots/js/EgwFramework.ts b/kdots/js/EgwFramework.ts index e49d91d442..0e3439f732 100644 --- a/kdots/js/EgwFramework.ts +++ b/kdots/js/EgwFramework.ts @@ -41,7 +41,11 @@ export class EgwFramework extends LitElement // TEMP STUFF css` - .placeholder { + :host .placeholder { + display: none; + } + + :host(.placeholder) .placeholder { width: 100%; display: block; font-size: 200%; @@ -57,25 +61,21 @@ export class EgwFramework extends LitElement --placeholder-background-color: #75bd20; } - .egw_fw__footer .placeholder { - background-color: hsl(182, 58%, 62%); - } - - .egw_fw__main-wrapper { - --placeholder-background-color: #e97234; - } - .egw_fw__status .placeholder { writing-mode: vertical-rl; text-orientation: mixed; height: 100%; } - [class*="left"] .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, .5)); } - [class*="footer"] .placeholder { + :host(.placeholder) [class*="right"] .placeholder { + background-color: color-mix(in lch, var(--placeholder-background-color), rgba(.5, 1, .5, .5)); + } + + :host(.placeholder) [class*="footer"] .placeholder { background-color: color-mix(in lch, var(--placeholder-background-color), rgba(1, 1, 1, .05)); } @@ -176,7 +176,7 @@ export class EgwFramework extends LitElement snap="150px ${iconSize} 0px" snap-threshold="${Math.min(40, parseInt(iconSize) - 5)}" aria-label="Side menu resize"> -
+
diff --git a/kdots/js/app.ts b/kdots/js/app.ts index 72f3afbed7..c0e540e39f 100644 --- a/kdots/js/app.ts +++ b/kdots/js/app.ts @@ -14,4 +14,12 @@ document.addEventListener('DOMContentLoaded', () => { window.egw.open_link(e.detail.item.value); }); + + /* Listener on placeholder checkbox */ + // TODO: Remove this & the switch + document.querySelector("#placeholders").addEventListener("sl-change", (e) => + { + document.querySelector("egw-framework").classList.toggle("placeholder", e.target.checked); + document.querySelector("egw-app").classList.toggle("placeholder", e.target.checked); + }); }); \ No newline at end of file