WIP converting toolbar subwidgets to use wc widgets

api/js/etemplate/et2_widget_toolbar.ts

@@ -27,6 +27,7 @@ import {Et2DropdownButton} from "./Et2DropdownButton/Et2DropdownButton";
 import {loadWebComponent} from "./Et2Widget/Et2Widget";
 import interact from "@interactjs/interactjs";
 import Sortable from "sortablejs/modular/sortable.complete.esm.js";
+import {Et2Button} from "./Et2Button/Et2Button";
 
 /**
  * This toolbar gets its contents from its actions
@@ -600,12 +601,15 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 	{
 		let button_options = {
 		};
-		let button = jQuery(document.createElement('button'))
-			.addClass(`et2_toolbar_draggable${this.id} et2_button et2_button_text et2_button_with_image`)
-			.attr('id', this.id+'-'+action.id)
-			.attr('type', 'button')
-			.appendTo(this.preference[action.id]?this.actionbox.children()[1]:jQuery('[data-group='+action.group+']',this.actionlist));
 
+		let button = <Et2Button>loadWebComponent("et2-button", {
+			label: action.caption,
+			id: `${this.id}-${action.id}`,
+			image: action.iconUrl || '',
+			slot: "buttons",
+			class: `et2_toolbar_draggable${this.id}`,
+		}, this);
+		jQuery(button.getDOMNode()).appendTo(this.preference[action.id]?this.actionbox.children()[1]:jQuery('[data-group='+action.group+']',this.actionlist));
 		if (action && action.checkbox)
 		{
 			if (action.data.toggle_on || action.data.toggle_off)
@@ -627,52 +631,38 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 			}
 			else
 			{
-				if (this.checkbox(action.id)) button.addClass('toolbar_toggled'+ (typeof action.toggledClass != 'undefined'?" "+action.toggledClass:''));
+				if (this.checkbox(action.id)) button.classList.add('toolbar_toggled'+ (typeof action.toggledClass != 'undefined'?" "+action.toggledClass:''));
 			}
 		}
 		this.egw().tooltipBind(button, action.hint ? action.hint : action.caption) + (action.shortcut ? ' ('+action.shortcut.caption+')' : '');
 
-		if ( action.iconUrl)
-		{
-			button.attr('style','background-image:url(' + action.iconUrl + ')');
-		}
 		if (action.caption)
 		{
-			if ((this.countActions <= parseInt(this.options.view_range) ||
+			if ((this.countActions <= parseInt(this.view_range) ||
 				this.preference[action.id] || !action.iconUrl)	&&
-				typeof button[0] !== 'undefined' &&
+				button &&
 				!(action.checkbox && action.data && (action.data.toggle_on || action.data.toggle_off))) // no caption for slideswitch checkboxes
 			{
-				button.addClass(action.iconUrl?'et2_toolbar_hasCaption':'et2_toolbar_onlyCaption');
+				button.classList.add(action.iconUrl?'et2_toolbar_hasCaption':'et2_toolbar_onlyCaption');
-				button[0].textContent = action.caption;
 			}
 		}
-		if(action.icon)
-		{
-			button_options['icon'] = action.icon;
-		}
-		if (!jQuery.isEmptyObject(button_options))
-		{
-			button.button(button_options);
-		}
 		let self = this;
 		// Set up the click action
-		let click = function(e)
+		button.onclick = function(action, e)
 		{
-			let action = this._actionManager.getActionById(e.data);
+			let actionObj = this._actionManager.getActionById(action.id);
-			if(action)
+			if(actionObj)
 			{
-				if (action.checkbox)
+				if (actionObj.checkbox)
 				{
-					self.checkbox(action.id, !action.checked);
+					self.checkbox(actionObj.id, !actionObj.checked);
 				}
-				this.value = action.id;
+				this.value = actionObj.id;
-				action.data.event = e;
+				actionObj.data.event = e;
-				action.execute([]);
+				actionObj.execute([]);
 			}
-		};
+		}.bind(this, action);
 
-		button.click(action.id, jQuery.proxy(click, this));
 	}
 
 	/**
@@ -732,7 +722,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		if (action_event && typeof _value !='undefined')
 		{
 			action_event.set_checked(_value);
-			var btn = jQuery('#'+this.id+'-'+_action);
+			var btn = jQuery('#'+this.dom_id+'-'+_action);
 			if(action_event.data && action_event.data.widget)
 			{
 				action_event.data.widget.set_value(_value);

api/templates/default/etemplate2.css

@@ -3021,7 +3021,7 @@ et2-button.transparent-button::part(container) {
     padding-left: 5px;
 }
 
-.et2_toolbar button.toolbar_toggled, .et2_searchbox button.et2_button.toolbar_toggled {
+.et2_toolbar et2-button.toolbar_toggled::part(base), .et2_searchbox button.et2_button.toolbar_toggled {
     background-color: lightgray;
     box-shadow: inset 1px 1px 1px 1px gray !important;
 }
@@ -3033,13 +3033,10 @@ et2-button.transparent-button::part(container) {
 
 .et2_toolbar-dropdown {
     display: inline-block;
-    direction: ltr;
     height: 24px;
-    top: -2px;
     text-align: left;
     font-weight: normal !important;
     font-size: 9pt !important;
-    vertical-align: bottom !important;
 }
 
 
@@ -3113,7 +3110,7 @@ et2-button.transparent-button::part(container) {
     width: 100%;
 }
 
-div.ui-toolbar-menulist {
+.ui-toolbar-menulist {
     position: absolute;
     height: inherit;
     z-index: 999 !important;
@@ -3130,9 +3127,26 @@ div.ui-toolbar-menulist {
     -webkit-box-shadow: 2px 3px 13px #666;
     -khtml-box-shadow: 2px 3px 13px #666;
     -moz-user-select: none;
+    background: white;
+    right: 0;
 }
-div.ui-toolbar-menulist > * {
+.ui-toolbar-menulist > * {
     border: none !important;
+    display: block;
+}
+.et2_toolbar_actionlist et2-button {
+    width: 1em;
+    overflow: hidden;
+}
+.et2_toolbar_actionlist et2-button::part(prefix) {
+    width: 1.1em;
+}
+.et2_toolbar_actionlist et2-button.et2_toolbar_hasCaption {
+    width:auto;
+}
+.ui-toolbar-menulist et2-button::part(base) {
+    border: none;
+    margin: 0.3em;
 }
 .ui-toolbar-menulist > button {
     margin: 0 !important;
@@ -3147,12 +3161,9 @@ div.ui-toolbar-menulist > * {
     font-size: xx-small;
     height: 100%;
     margin-top: 1px;
-    direction: ltr;
 }
 
 .et2_toolbar_more {
-    float: right;
-    direction: rtl;
     padding-bottom: 3px;
 }
 
@@ -3176,6 +3187,7 @@ div.et2_toolbar_more h.ui-accordion-header {
     height: 24px;
     white-space: nowrap;
     min-width: 50px;
+    display: flex;
 }
 
 .et2_dropZone {

pixelegg/css/mobile.css

@@ -5934,7 +5934,6 @@ button.image_button {
   /*padding: 0;*/
 }
 .egwGridView_grid > tbody > tr.th > td {
-  border-bottom: 1px solid darkgray;
   font-weight: normal;
   padding: 0 2px 2px 0;
   background-image: none;
@@ -7879,3 +7878,4 @@ img.et2_button_icon[src*="svg"]:hover {
     top: 140px;
   }
 }
+/*# sourceMappingURL=mobile.css.map */

pixelegg/css/pixelegg.css

@@ -1070,7 +1070,6 @@
   }
   .et2_toolbar_more {
     float: right;
-    direction: rtl;
   }
   .et2_toolbar_actionlist {
     float: left;
@@ -5924,7 +5923,6 @@ button.image_button {
   /*padding: 0;*/
 }
 .egwGridView_grid > tbody > tr.th > td {
-  border-bottom: 1px solid darkgray;
   font-weight: normal;
   padding: 0 2px 2px 0;
   background-image: none;

pixelegg/less/etemplate2.less

@@ -928,7 +928,6 @@ div.ui-toolbar-menulist{
 }
 .et2_toolbar_more{
 	float:right;
-	direction: rtl;
 }
 .et2_toolbar_actionlist{
 	float:left;

pixelegg/less/layout_table.less

@@ -45,7 +45,6 @@ table.et2_grid {
 
 .egwGridView_grid > tbody > tr.th > td /*legacy*/
 {
-	border-bottom: 1px solid darkgray;
 	font-weight: normal;
     padding: 0 2px 2px 0;
     background-image: none;

pixelegg/mobile/fw_mobile.css

@@ -5945,7 +5945,6 @@ button.image_button {
   /*padding: 0;*/
 }
 .egwGridView_grid > tbody > tr.th > td {
-  border-bottom: 1px solid darkgray;
   font-weight: normal;
   padding: 0 2px 2px 0;
   background-image: none;
@@ -9504,3 +9503,4 @@ table.egwGridView_grid img.et2_appicon {
     border-radius: 0;
   }
 }
+/*# sourceMappingURL=fw_mobile.css.map */