From 971a27e23f9f41331189823b40829724425e003b Mon Sep 17 00:00:00 2001 From: nathan Date: Fri, 5 Jul 2024 13:30:49 -0600 Subject: [PATCH] Kdots: Get quick add working --- kdots/assets/styles/framework.css | 52 ++++++++++++++++++++- kdots/assets/styles/framework.less | 60 ++++++++++++++++++++++++- kdots/inc/class.kdots_framework.inc.php | 5 +++ kdots/js/EgwFramework.ts | 6 ++- 4 files changed, 118 insertions(+), 5 deletions(-) diff --git a/kdots/assets/styles/framework.css b/kdots/assets/styles/framework.css index 0d0373f4d7..8c4191a2c6 100644 --- a/kdots/assets/styles/framework.css +++ b/kdots/assets/styles/framework.css @@ -69,7 +69,6 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header { #egw_fw_topmenu_info_items { display: flex; flex-direction: row-reverse; - background-color: #fbfbfb; } #egw_fw_topmenu_info_items > * { border: none; @@ -84,7 +83,6 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header { #egw_fw_topmenu_info_items .topmenu_info_item { height: var(--icon-size); width: var(--icon-size); - border-left: 1px solid #bfc0bf; display: inline-block; padding-left: 0px; background-size: 20px; @@ -122,6 +120,56 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header { background-position: center center; filter: opacity(0.3); } +#egw_fw_topmenu_info_items #topmenu_info_quick_add { + position: relative; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add { + display: block; + background-image: url(../../../api/templates/default/images/add.svg); + background-repeat: no-repeat; + background-size: 24px; + background-position: center; + width: 100%; + height: 100%; + padding-right: 3px; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:before { + content: " "; + font-size: 2em; + line-height: 0.6em; + background-color: white; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox { + height: 0px; + display: inline-block; + text-align: initial; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox sl-option { + white-space: nowrap; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(emptyLabel) { + /* do NOT show empty label, required for clearing value */ + display: none; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input), +#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(form-control-input) { + border: none !important; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control), +#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(form-control) { + margin-left: -3em; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(listbox), +#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(menu) { + max-height: 60vh; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox { + height: 0px; + overflow: hidden; +} +#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(combobox) { + visibility: hidden; +} #egw_fw_topmenu_info_items #topmenu_info_user_avatar sl-menu-item et2-image { width: 1em; } diff --git a/kdots/assets/styles/framework.less b/kdots/assets/styles/framework.less index 4f475b5608..ffdbe18b27 100644 --- a/kdots/assets/styles/framework.less +++ b/kdots/assets/styles/framework.less @@ -85,7 +85,6 @@ egw-framework#egw_fw_basecontainer { #egw_fw_topmenu_info_items { display: flex; flex-direction: row-reverse; - background-color: #fbfbfb; & > * { border: none; @@ -102,7 +101,6 @@ egw-framework#egw_fw_basecontainer { .topmenu_info_item { height: var(--icon-size); width: var(--icon-size); - border-left: 1px solid #bfc0bf; display: inline-block; padding-left: 0px; background-size: 20px; @@ -146,6 +144,64 @@ egw-framework#egw_fw_basecontainer { } } + #topmenu_info_quick_add { + position: relative; + + span#quick_add { + display: block; + background-image: url(../../../api/templates/default/images/add.svg); + background-repeat: no-repeat; + background-size: 24px; + background-position: center; + width: 100%; + height: 100%; + padding-right: 3px; + + &:before { + content: " "; + font-size: 2em; + line-height: 0.6em; + background-color: white; + } + } + + #quick_add_selectbox { + height: 0px; + display: inline-block; + text-align: initial; + + sl-option { + white-space: nowrap; + } + } + + #quick_add_selectbox::part(emptyLabel) { + /* do NOT show empty label, required for clearing value */ + display: none; + } + + #quick_add_selectbox::part(form-control-input), #timer_selectbox::part(form-control-input) { + border: none !important; + } + + #quick_add_selectbox::part(form-control), #timer_selectbox::part(form-control) { + margin-left: -3em; + } + + #quick_add_selectbox::part(listbox), #timer_selectbox::part(menu) { + max-height: 60vh; + } + + #quick_add_selectbox { + height: 0px; + overflow: hidden; + } + + #quick_add_selectbox::part(combobox) { + visibility: hidden; + } + } + #topmenu_info_user_avatar { sl-menu-item et2-image { width: 1em; diff --git a/kdots/inc/class.kdots_framework.inc.php b/kdots/inc/class.kdots_framework.inc.php index 5ded64cacc..581d5720ae 100644 --- a/kdots/inc/class.kdots_framework.inc.php +++ b/kdots/inc/class.kdots_framework.inc.php @@ -97,6 +97,11 @@ class kdots_framework extends Api\Framework\Ajax */ function _add_topmenu_info_item($content, $id = null) { + if(in_array($id, ['print_title'])) + { + return; + } + if(strpos($content, 'menuaction=admin.admin_accesslog.sessions') !== false) { $content = preg_replace('/href="([^"]+)"/', "href=\"javascript:egw_link_handler('\\1','admin')\"", $content); diff --git a/kdots/js/EgwFramework.ts b/kdots/js/EgwFramework.ts index 79979fd66f..256f2ec6a6 100644 --- a/kdots/js/EgwFramework.ts +++ b/kdots/js/EgwFramework.ts @@ -137,9 +137,13 @@ export class EgwFramework extends LitElement // Init timer this.egw.add_timer('topmenu_info_timer'); - // Deal with bug where avatar menu does not position correctly + // These need egw fully loaded this.getEgwComplete().then(() => { + // Quick add + this.egw.link_quick_add('topmenu_info_quick_add'); + + // Deal with bug where avatar menu does not position correctly (this.querySelector("#topmenu_info_user_avatar"))?.popup?.dispatchEvent(new Event("slotchange")); }); }