diff --git a/kdots/assets/styles/framework.less b/kdots/assets/styles/framework.less index 653448dc69..682d46f70f 100644 --- a/kdots/assets/styles/framework.less +++ b/kdots/assets/styles/framework.less @@ -79,9 +79,8 @@ egw-app { /*** HEADER ***/ #egw_fw_topmenu_info_items { - display: flex !important; + display: flex; flex-direction: row-reverse; - height: var(--icon-size); background-color: #fbfbfb; & > * { @@ -91,6 +90,9 @@ egw-app { et2-avatar { --size: var(--icon-size); + &::part(base) { + vertical-align: initial; + } } .topmenu_info_item { @@ -112,13 +114,13 @@ egw-app { #topmenu_info_timer { order: 1; position: relative; + display: flex; + align-items: center; + padding: 0px; #topmenu_timer { - position: relative; - top: 10px !important; display: block; - height: 45px; - width: 45px; + width: 100%; } &:hover { @@ -140,52 +142,14 @@ egw-app { } } - ul a#topmenu_cats { - background-image: url(../../../api/templates/default/images/topmenu_items/category.svg); + #topmenu_info_user_avatar { + sl-menu-item et2-image { + width: 1em; + } } - - ul a#topmenu_password { - background-image: url(../../../api/templates/default/images/topmenu_items/password.svg); - } - - ul a#topmenu_search { + button#topmenu_info_search { background-image: url(../../../api/templates/default/images/topmenu_items/search.svg); } - - ul a#topmenu_prefs { - background-image: url(../../../api/templates/default/images/topmenu_items/setup.svg); - } - - ul a#topmenu_home { - background-image: url(../../../api/templates/default/images/topmenu_items/home.svg); - } - - ul a#topmenu_acl { - background-image: url(../../../api/templates/default/images/topmenu_items/access.svg); - } - - ul a#topmenu_useraccount { - background-image: url(../../../api/templates/default/images/accounts.svg); - background-repeat: no-repeat; - background-size: 18px; - background-position-x: -2px; - } - - ul a#topmenu_calls { - background-image: url(../../../api/templates/default/images/phone.svg); - background-repeat: no-repeat; - background-position-x: -2px; - } -} - -#topmenu_info_logout { - background-image: url(../../../api/templates/default/images/logout.svg); - - a { - width: 45px; - height: 45px; - display: inline-block; - } } #topmenu_info_print_title { diff --git a/kdots/head.tpl b/kdots/head.tpl index 094dd9dffe..2ca30f4b83 100644 --- a/kdots/head.tpl +++ b/kdots/head.tpl @@ -53,6 +53,8 @@
Something inside the app - main
Left content
right content
+
+
diff --git a/kdots/inc/class.kdots_framework.inc.php b/kdots/inc/class.kdots_framework.inc.php index 5fb0eff7e4..472007c2cb 100644 --- a/kdots/inc/class.kdots_framework.inc.php +++ b/kdots/inc/class.kdots_framework.inc.php @@ -114,6 +114,9 @@ class kdots_framework extends Api\Framework\Ajax } $id = $app_data['id'] ? $app_data['id'] : ($app_data['name'] ? $app_data['name'] : $app_data['title']); $title = htmlspecialchars($alt_label ? $alt_label : $app_data['title']); - $this->topmenu_items[] = '' . $title . ''; + $this->topmenu_items[] = '' . + "" . + $title . + ''; } } diff --git a/kdots/js/EgwFramework.styles.ts b/kdots/js/EgwFramework.styles.ts index b9fa926d71..2f7babde8f 100644 --- a/kdots/js/EgwFramework.styles.ts +++ b/kdots/js/EgwFramework.styles.ts @@ -125,7 +125,7 @@ export default css` } .egw_fw__open_applications sl-tab et2-image { - padding: var(--sl-spacing-small) var(--sl-spacing-3x-small); + padding: var(--sl-spacing-2x-small) var(--sl-spacing-3x-small); } .egw_fw__open_applications sl-tab:hover::part(close-button), .egw_fw__open_applications sl-tab[active]::part(close-button) { diff --git a/kdots/js/EgwFramework.ts b/kdots/js/EgwFramework.ts index 3b78b0d968..80c5b85f12 100644 --- a/kdots/js/EgwFramework.ts +++ b/kdots/js/EgwFramework.ts @@ -5,6 +5,7 @@ import {classMap} from "lit/directives/class-map.js"; import "@shoelace-style/shoelace/dist/components/split-panel/split-panel.js"; import styles from "./EgwFramework.styles"; import {repeat} from "lit/directives/repeat.js"; +import {Function} from "estree"; /** * @summary Accessable, webComponent-based EGroupware framework @@ -96,8 +97,10 @@ export class EgwFramework extends LitElement get egw() { return window.egw ?? { + // Dummy egw so we don't get failures from missing methods lang: (t) => t, - preference: (n, app) => "" + preference: (n, app, promise? : Function | boolean | undefined) => Promise.resolve(""), + set_preference(_app : string, _name : string, _val : any, _callback? : Function) {} }; } diff --git a/kdots/js/EgwFrameworkApp.ts b/kdots/js/EgwFrameworkApp.ts index 88990558e3..976e5a80c3 100644 --- a/kdots/js/EgwFrameworkApp.ts +++ b/kdots/js/EgwFrameworkApp.ts @@ -7,10 +7,14 @@ import {classMap} from "lit/directives/class-map.js"; import styles from "./EgwFrameworkApp.styles"; import {SlSplitPanel} from "@shoelace-style/shoelace"; import {HasSlotController} from "../../api/js/etemplate/Et2Widget/slot"; +import type {EgwFramework} from "./EgwFramework"; /** * @summary Application component inside EgwFramework * + * Contain an EGroupware application inside the main framework. It consists of left, main and right areas. Each area + * has a header, content and footer. Side content areas are not shown when there is no content. + * * @dependency sl-split-panel * * @slot - Main application content. Other slots are normally hidden if they have no content @@ -121,13 +125,13 @@ export class EgwFrameworkApp extends LitElement connectedCallback() { super.connectedCallback(); - this.egw.preference(this.leftPanelInfo.preference, this.name, true).then((width) => + (>this.egw.preference(this.leftPanelInfo.preference, this.name, true)).then((width) => { - this.leftPanelInfo.preferenceWidth = parseInt(width ?? this.leftPanelInfo.defaultWidth); + this.leftPanelInfo.preferenceWidth = parseInt(width) ?? this.leftPanelInfo.defaultWidth; }); - this.egw.preference(this.rightPanelInfo.preference, this.name, true).then((width) => + (>this.egw.preference(this.rightPanelInfo.preference, this.name, true)).then((width) => { - this.rightPanelInfo.preferenceWidth = parseInt(width ?? this.rightPanelInfo.defaultWidth); + this.rightPanelInfo.preferenceWidth = parseInt(width) ?? this.rightPanelInfo.defaultWidth; }); } @@ -167,7 +171,7 @@ export class EgwFrameworkApp extends LitElement get egw() { - return window.egw ?? this.parentElement.egw ?? null; + return window.egw ?? (this.parentElement).egw ?? null; } /** @@ -243,6 +247,14 @@ export class EgwFrameworkApp extends LitElement
${this.name} main-header
+ + + + +