Kdots header work

- Make active app icon slightly larger to indicate active instead of colored track
- Change framework header background to white
- App header background to application color
- define app colors in framework

kdots/assets/styles/framework.css

@@ -20,8 +20,10 @@ egw-framework#egw_fw_basecontainer::part(status-split) {
   --max: 32px;
 }
 egw-framework#egw_fw_basecontainer::part(header) {
-  background-color: var(--primary-background-color);
-  color: var(--sl-color-neutral-0);
+  --icon-size: 32px;
+  --tab-icon-size: var(--icon-size);
+  --tab-icon-size-active: 40px;
+  color: var(--primary-background-color);
   gap: var(--sl-spacing-medium);
   font-size: var(--icon-size);
 }
@@ -148,6 +150,77 @@ egw-app::part(content) {
 egw-app > div[id] > div {
   height: 100%;
 }
+/* Individual application colors, should go in each app's CSS */
+body,
+:root {
+  --addressbook-color: #003366;
+  --admin-color: #333333;
+  --bookmarks-color: #CC6633;
+  --calendar-color: #CC0033;
+  --filemanager-color: #ff9933;
+  --infolog-color: #660033;
+  --mail-color: #006699;
+  --projectmanager-color: #669999;
+  --resources-color: #003333;
+  --timesheet-color: #330066;
+  --tracker-color: #009966;
+  --wiki-color: #797979;
+  --ranking-color: #404040;
+  --default-color: #797979;
+  --kanban-color: #4663c8;
+}
+body egw-app[name="addressbook"],
+:root egw-app[name="addressbook"] {
+  --application-color: var(--addressbook-color);
+}
+body egw-app[name="admin"],
+:root egw-app[name="admin"] {
+  --application-color: var(--admin-color);
+}
+body egw-app[name="bookmarks"],
+:root egw-app[name="bookmarks"] {
+  --application-color: var(--bookmarks-color);
+}
+body egw-app[name="calendar"],
+:root egw-app[name="calendar"] {
+  --application-color: var(--calendar-color);
+}
+body egw-app[name="filemanager"],
+:root egw-app[name="filemanager"] {
+  --application-color: var(--filemanager-color);
+}
+body egw-app[name="infolog"],
+:root egw-app[name="infolog"] {
+  --application-color: var(--infolog-color);
+}
+body egw-app[name="mail"],
+:root egw-app[name="mail"] {
+  --application-color: var(--mail-color);
+}
+body egw-app[name="projectmanager"],
+:root egw-app[name="projectmanager"] {
+  --application-color: var(--projectmanager-color);
+}
+body egw-app[name="resources"],
+:root egw-app[name="resources"] {
+  --application-color: var(--resources-color);
+}
+body egw-app[name="timesheet"],
+:root egw-app[name="timesheet"] {
+  --application-color: var(--timesheet-color);
+}
+body egw-app[name="tracker"],
+:root egw-app[name="tracker"] {
+  --application-color: var(--tracker-color);
+}
+body egw-app[name="wiki"],
+:root egw-app[name="wiki"] {
+  --application-color: var(--wiki-color);
+}
+body egw-app[name="ranking"],
+:root egw-app[name="ranking"] {
+  --application-color: var(--ranking-color);
+}
 /*** END APPLICATION ***/
 /*** WIDGETS ***/
 /* This should mostly go away with webcomponents */

kdots/assets/styles/framework.less

@@ -23,12 +23,14 @@ egw-framework#egw_fw_basecontainer {
   }
 
   &::part(header) {
-	background-color: var(--primary-background-color);
-	color: var(--sl-color-neutral-0);
+	--icon-size: 32px;
+	--tab-icon-size: var(--icon-size);
+	--tab-icon-size-active: 40px;
+
+	color: var(--primary-background-color);
 	gap: var(--sl-spacing-medium);
 
 	font-size: var(--icon-size);
-
   }
 
   /* Content slotted inside */
@@ -184,6 +186,78 @@ egw-app {
   }
 }
 
+/* Individual application colors, should go in each app's CSS */
+body, :root {
+  // Color code for applications - not used by framework
+  --addressbook-color: #003366;
+  --admin-color: #333333;
+  --bookmarks-color: #CC6633;
+  --calendar-color: #CC0033;
+  --filemanager-color: #ff9933;
+  --infolog-color: #660033;
+  --mail-color: #006699;
+  --projectmanager-color: #669999;
+  --resources-color: #003333;
+  --timesheet-color: #330066;
+  --tracker-color: #009966;
+  --wiki-color: #797979;
+  --ranking-color: #404040;
+  --default-color: #797979;
+  --kanban-color: #4663c8;
+
+  egw-app[name="addressbook"] {
+	--application-color: var(--addressbook-color);
+  }
+
+  egw-app[name="admin"] {
+	--application-color: var(--admin-color);
+  }
+
+  egw-app[name="bookmarks"] {
+	--application-color: var(--bookmarks-color);
+  }
+
+  egw-app[name="calendar"] {
+	--application-color: var(--calendar-color);
+  }
+
+  egw-app[name="filemanager"] {
+	--application-color: var(--filemanager-color);
+  }
+
+  egw-app[name="infolog"] {
+	--application-color: var(--infolog-color);
+  }
+
+  egw-app[name="mail"] {
+	--application-color: var(--mail-color);
+  }
+
+  egw-app[name="projectmanager"] {
+	--application-color: var(--projectmanager-color);
+  }
+
+  egw-app[name="resources"] {
+	--application-color: var(--resources-color);
+  }
+
+  egw-app[name="timesheet"] {
+	--application-color: var(--timesheet-color);
+  }
+
+  egw-app[name="tracker"] {
+	--application-color: var(--tracker-color);
+  }
+
+  egw-app[name="wiki"] {
+	--application-color: var(--wiki-color);
+  }
+
+  egw-app[name="ranking"] {
+	--application-color: var(--ranking-color);
+  }
+}
+
 /*** END APPLICATION ***/
 
 /*** WIDGETS ***/

kdots/js/EgwFramework.styles.ts

@@ -108,23 +108,41 @@ export default css`
 		font-size: var(--icon-size);
 	}
 
+	.egw_fw__open_applications {
+		--track-width: 0px;
+	}
+
+	.egw_fw__open_applications::part(tabs) {
+		align-items: baseline;
+	}
 	.egw_fw__open_applications et2-image {
-		height: var(--icon-size);
+		height: var(--tab-icon-size, 32px);
 
 		/* Allow some shrinking with limited size */
-		min-width: calc(var(--icon-size) / 2);
-		min-height: calc(var(--icon-size) / 2);
+		min-width: calc(var(--tab-icon-size, 32px) / 2);
+		min-height: calc(var(--tab-icon-size) / 2);
+	}
+
+	.egw_fw__open_applications sl-tab[active] et2-image {
+		width: var(--tab-icon-size-active, --tab-icon-size);
+	}
+
+	.egw_fw__open_applications sl-tab[active] et2-image img {
+		position: absolute;
+		height: var(--tab-icon-size-active, --tab-icon-size);
+		min-width: var(--tab-icon-size-active, --tab-icon-size);
+		min-height: var(--tab-icon-size-active, --tab-icon-size);
 	}
 
 	.egw_fw__open_applications sl-tab::part(base) {
 		padding: 0px;
-		font-size: var(--icon-size);
+		font-size: var(--tab-icon-size);
 	}
 
 	.egw_fw__open_applications sl-tab::part(close-button) {
 		visibility: hidden;
 		margin-inline-start: var(--sl-spacing-2x-small);
-		color: var(--sl-color-neutral-100);
+		color: var(--sl-color-neutral-900);
 	}
 
 	.egw_fw__open_applications sl-tab et2-image {

kdots/js/EgwFramework.ts

@@ -33,6 +33,8 @@ import {until} from "lit/directives/until.js";
  * @csspart footer
  *
  * @cssproperty [--icon-size=32] - Height of icons used in the framework
+ * @cssproperty [--tab-icon-size=32] - Height of application icons in header bar
+ * @cssproperty [--tab-icon-size-active=40] - Height of active application icon
  */
 @customElement('egw-framework')
 //@ts-ignore

kdots/js/EgwFrameworkApp.styles.ts

@@ -35,6 +35,9 @@ export default css`
 		justify-items: stretch;
 		flex: 1 0 2em;
 		max-height: 3em;
+
+		background-color: var(--application-color, --primary-background-color);
+		color: var(--application-header-text-color, white);
 	}
 
 	.egw_fw_app__outerSplit {

kdots/js/EgwFrameworkApp.ts

@@ -42,6 +42,7 @@ import {Favorite} from "../../api/js/etemplate/Et2Favorites/Favorite";
  * @csspart footer - Very bottom of the main content.
  *
  * @cssproperty [--application-color=--primary-background-color] - Color to use for this application
+ * @cssproperty [--application-header-text-color=white] - Text color in the application header
  * @cssproperty [--left-min=0] - Minimum width of the left content
  * @cssproperty [--left-max=20%] - Maximum width of the left content
  * @cssproperty [--right-min=0] - Minimum width of the right content