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
This commit is contained in:
nathan 2024-07-04 16:03:51 -06:00
parent 7fabdc50f6
commit 63722dcd9c
6 changed files with 181 additions and 10 deletions

View File

@ -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 */

View File

@ -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 ***/

View File

@ -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 {

View File

@ -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

View File

@ -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 {

View File

@ -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