Kdots: Get quick add working

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

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;

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

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
 			(<SlDropdown>this.querySelector("#topmenu_info_user_avatar"))?.popup?.dispatchEvent(new Event("slotchange"));
 		});
 	}