Fix up dropdown in toolbar

api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts

@@ -60,6 +60,12 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button)
             :host(:active), :host([active]) {
             	background-color: initial;
             }
+            sl-button-group {
+            	display: initial;
+            }
+            #main {
+            	flex: 1 1 auto;
+            }
             `,
 		];
 	}

api/js/etemplate/et2_widget_toolbar.ts

@@ -394,9 +394,9 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 					id: this.id + "-" + action.id,
 					label: action.caption,
 					class: this.preference[action.id] ? 'et2_toolbar-dropdown et2_toolbar-dropdown-menulist' : 'et2_toolbar-dropdown',
-					onchange: function(selected, dropdown)
+					onchange: function(ev)
 					{
-						let action = that._actionManager.getActionById(selected.attr('data-id'));
+						let action = that._actionManager.getActionById(dropdown.value);
 						dropdown.set_label(action.caption);
 						if(action)
 						{
@@ -484,7 +484,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		toolbox.children().droppable({
 			accept:toolbar,
 			drop:function (event, ui) {
-				that.set_prefered(ui.draggable.attr('id').replace(that.id+'-',''),true);
+				that.set_prefered(ui.draggable[0].id.replace(that.id + '-', ''), true);
 				ui.draggable.appendTo(menulist);
 				if (that.actionlist.find(".ui-draggable").length == 0)
 				{
@@ -499,8 +499,18 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 			const details = <HTMLDetailsElement>e.target;
 			if (details.open)
 			{
-				jQuery('html').on('click.outsideOfMenu', function(e){
+				jQuery('html').on('click.outsideOfMenu', function(e)
-					if (e.target != details &&  e.target != details.firstChild) details.open = false;
+				{
+					// Clicking on dropdown button should not close the details, we'd like to see the dropdown
+					if(e.target instanceof Et2DropdownButton)
+					{
+						return;
+					}
+					if(e.target != details && e.target != details.firstChild)
+					{
+						details.open = false;
+					}
+
 					jQuery('html').unbind('click.outsideOfMenu');
 				});
 			}
@@ -509,7 +519,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		this.actionlist.droppable({
 			tolerance:"pointer",
 			drop:function (event,ui) {
-				that.set_prefered(ui.draggable.attr('id').replace(that.id+'-',''),false);
+				that.set_prefered(ui.draggable[0].id.replace(that.id + '-', ''), false);
 				ui.draggable.appendTo(that.actionlist);
 				that._build_menu(actions);
 			}

api/templates/default/etemplate2.css

@@ -2978,29 +2978,22 @@ et2-button.transparent-button::part(container) {
     box-shadow: inset 1px 1px 1px 1px gray !important;
 }
 
+.et2_toolbar_more .et2_toolbar-dropdown {
+    max-width: initial;
+    width: 100%;
+}
+
 .et2_toolbar-dropdown {
-    margin: 1px;
     display: inline-block;
     direction: ltr;
-    background: #E0E0E0 !important;
+    height: 24px;
-    background-color: #E0E0E0 !important;
+    top: -2px;
-    border: 1px solid silver;
     text-align: left;
     font-weight: normal !important;
     font-size: 9pt !important;
     vertical-align: bottom !important;
-    padding: 1px !important;
 }
 
-.et2_toolbar-dropdown > div {
-    direction: ltr;
-    display: inline;
-    background: #E0E0E0 !important;
-    background-color: #E0E0E0 !important;
-    vertical-align: bottom !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
 
 .et2_toolbar-dropdown img {
     padding-left: 7px;

mail/templates/pixelegg/app.css

@@ -1427,11 +1427,6 @@ div.ui-toolbar-menulist {
   border: 1px solid rgba(0, 0, 0, 0.15);
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  padding: 3px !important;
-  background: #fafafa !important;
   background-color: #fafafa !important;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_dropdown {
@@ -1442,13 +1437,9 @@ div.ui-toolbar-menulist {
   height: 24px !important;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_dropdown button {
-  margin: 0px;
-  padding-top: -3px !important;
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
-  background: #fafafa !important;
-  background-color: #fafafa !important;
   min-height: auto;
 }
 .et2_toolbar_actionlist .et2_toolbar-dropdown .et2_dropdown button img {

mail/templates/pixelegg/app.less

@@ -533,9 +533,6 @@ div.ui-toolbar-menulist {
 .et2_toolbar_actionlist {
 	// zusammengesetzte Buttons
 	.et2_toolbar-dropdown {
-		.rounded(3px);
-		padding: 3px !important;
-		background: #fafafa !important;
 		background-color: #fafafa !important;
 		.et2_dropdown {
 			.box_shadow_none;
@@ -543,11 +540,7 @@ div.ui-toolbar-menulist {
 			height: 24px !important;
 
 			button {
-				margin: 0px;
-				padding-top: -3px !important;
 				.box_shadow_none;
-				background: #fafafa !important;
-				background-color: #fafafa !important;
 				img {
 					.dimension_width_height_s;
 					vertical-align: text-bottom;