From 5038d060fef5c38b762f5c741a92b7dda616aa65 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 19 Jul 2022 16:50:02 +0200
Subject: [PATCH] Use et2-select webcomponent for quick add button

---
 api/js/jsapi/egw_links.js                | 25 +++++++++++++-------
 pixelegg/css/pixelegg.css                |  9 +++++--
 pixelegg/js/slider.js                    | 30 +++++++-----------------
 pixelegg/less/layout_raster_buttons.less |  9 +++++--
 4 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/api/js/jsapi/egw_links.js b/api/js/jsapi/egw_links.js
index fb76af314e..e32e041c71 100644
--- a/api/js/jsapi/egw_links.js
+++ b/api/js/jsapi/egw_links.js
@@ -484,18 +484,17 @@ egw.extend('links', egw.MODULE_GLOBAL, function()
 			// check if quick-add selectbox is alread there, only create it again if not
 			if (document.getElementById('quick_add_selectbox')) return;
 
-			const select = jQuery(document.createElement('select')).attr('id', 'quick_add_selectbox');
-			jQuery(typeof _parent === 'string' ? '#'+_parent : _parent).append(select);
-
+			const select = document.createElement('et2-select');
+			select.setAttribute('id', 'quick_add_selectbox');
+			document.getElementById(_parent).append(select);
 			const self = this;
 			// bind change handler
-			select.change(function(){
+			select.addEventListener('change', function(){
 				if (this.value) self.open('', this.value, 'add', {}, undefined, this.value, true);
-				this.value = '';
 			});
 			// need to load common translations for app-names
 			this.langRequire(window, [{app: 'common', lang: this.preference('lang')}], function(){
-				select.append(jQuery(document.createElement('option')).attr('value', '').text(self.lang('Add')+' ...'));
+				let options = [];
 				const apps = self.link_app_list('add');
 				for(let app in apps)
 				{
@@ -503,10 +502,18 @@ egw.extend('links', egw.MODULE_GLOBAL, function()
 					{
 						continue;
 					}
-					const option = jQuery(document.createElement('option')).attr('value', app)
-						.text(self.lang(self.link_get_registry(app,'entry') || apps[app]));
-					select.append(option);
+					options.push({
+						value:app,
+						label:self.lang(self.link_get_registry(app,'entry') || apps[app]),
+						icon: `${egw.webserverUrl}/${app}/templates/pixelegg/images/navbar.svg`
+					});
 				}
+				select.select_options = options;
+				select.updateComplete.then(function(){
+					select.dropdown.trigger.style.visibility = 'hidden';
+					select.dropdown.trigger.style.height = '0px';
+				});
+
 			});
 		}
 	};
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index b71f2ff725..3189f0a3c2 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -5580,8 +5580,13 @@ span.overlayContainer img.overlay {
 #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results {
   max-height: none;
 }
-#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
-  visibility: hidden;
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
+  height: 0px;
+  float: left;
+  display: inline-block;
+}
+#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) {
+  border: none !important;
 }
 #egw_fw_topmenu_info_items img#topmenu_info_error {
   width: 16px;
diff --git a/pixelegg/js/slider.js b/pixelegg/js/slider.js
index c2a03a3aab..d2ae0f3285 100644
--- a/pixelegg/js/slider.js
+++ b/pixelegg/js/slider.js
@@ -17,33 +17,19 @@ egw_ready.then(function()
 	jQuery('#quick_add').on({
 		mouseover: function(ev){
 			// do NOT react on bubbeling events from contained selectbox
-			var $select = jQuery('#quick_add_selectbox');
-			if (!$select.children()[0]['value']) $select.children()[0].text = '';
-			var $chosen_div = $select.next();
-			if ($chosen_div.hasClass('chzn-container'))
-			{
-				$chosen_div.show();
-			}
-			else
-			{
-				$select.chosen({
-					disable_search: true,
-					display_selected_options: false
-				});
-				 $chosen_div = $select.next();
-			}
-			$select.trigger('liszt:open');
-			$select.on('liszt:hiding_dropdown', function(e){
-				$chosen_div.hide();
-			});
+			var select = document.getElementById('quick_add_selectbox');
+			select.dropdown.open = true;
 			ev.stopPropagation();
+
 		},
 		mouseout: function(ev){
+			var select = document.getElementById('quick_add_selectbox');
+
 			// do NOT react on bubbeling events from contained selectbox
-			if (ev.target && ev.relatedTarget && ev.target.id != 'quick_add_selectbox'
-					&& !jQuery(ev.relatedTarget).hasClass('chzn-container'))
+			if (ev.target && ev.relatedTarget && ev.currentTarget.id != "quick_add" && ev.currentTarget.nodeName != 'ET2-SELECT')
 			{
-				 jQuery('#quick_add_selectbox').next().hide();
+
+
 			}
 			ev.stopPropagation();
 		}
diff --git a/pixelegg/less/layout_raster_buttons.less b/pixelegg/less/layout_raster_buttons.less
index e8e17be4c5..565ffe28a6 100644
--- a/pixelegg/less/layout_raster_buttons.less
+++ b/pixelegg/less/layout_raster_buttons.less
@@ -292,8 +292,13 @@
 				max-height: none;
 			}
 		}
-		select#quick_add_selectbox {
-			visibility: hidden;
+		#quick_add_selectbox {
+			height: 0px;
+			float: left;
+			display: inline-block;
+		}
+		#quick_add_selectbox::part(form-control-input) {
+			border: none !important;
 		}
     }