Framework WIP:

Polish on app framework position & styles

kdots/head.tpl

@@ -34,21 +34,22 @@
 {include_wz_tooltip}
 <!-- END head -->
 <!-- BEGIN framework -->
-<egw-framework id="egw_fw_basecontainer" class="sl-theme-light"
+<egw-framework id="egw_fw_basecontainer" class="sl-theme-light "
 			   application-list="{application-list}"
 >
 	<a slot="logo" href="{logo_url}" target="_blank"><img src="{logo_header}" title="{logo_title}" alt="Site logo"/></a>
 	<div slot="header-right" id="egw_fw_topmenu_info_items">
         {topmenu_info_items}
-		<script>
+	</div>
-		</script>
+	<div slot="header">
+		<sl-switch slot="header" id="placeholders" checked>Placeholders</sl-switch>
 	</div>
 
 	<!-- status app is looking for this -->
 	<div slot="aside" id="egw_fw_sidebar_r"></div>
 
 	<!-- Fake app -->
-	<egw-app name="fake app">
+	<egw-app name="fake app" class="placeholder">
 		<div slot="banner">Something inside the app - main</div>
 	</egw-app>
 </egw-framework>

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-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 [main-footer] fit-content(2em) [footer bottom] fit-content(2em);
+			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;
 	}
 `

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 {
+				:host(.placeholder) [class*="left"] .placeholder {
-					background-color: color-mix(in lch, var(--placeholder-background-color), rgba(1, 1, 1, .5));
+					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">
-                        <main slot="start" part="main">
+                        <main slot="start" part="main" class="egw_fw__main">
                             <slot></slot>
                         </main>
                         <sl-icon slot="divider" name="grip-vertical"></sl-icon>

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);
+	});
 });