From c46f9c54400845ccf06594565efd14891258abd3 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 18 May 2022 14:39:25 -0600 Subject: [PATCH] Fix up dropdown in toolbar --- .../Et2DropdownButton/Et2DropdownButton.ts | 6 +++++ api/js/etemplate/et2_widget_toolbar.ts | 22 ++++++++++++++----- api/templates/default/etemplate2.css | 21 ++++++------------ mail/templates/pixelegg/app.css | 9 -------- mail/templates/pixelegg/app.less | 7 ------ 5 files changed, 29 insertions(+), 36 deletions(-) diff --git a/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts b/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts index 660ebed04b..093e42fa27 100644 --- a/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts +++ b/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; + } `, ]; } diff --git a/api/js/etemplate/et2_widget_toolbar.ts b/api/js/etemplate/et2_widget_toolbar.ts index f2bf5a2abb..34a85aab25 100644 --- a/api/js/etemplate/et2_widget_toolbar.ts +++ b/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 = e.target; if (details.open) { - jQuery('html').on('click.outsideOfMenu', function(e){ - if (e.target != details && e.target != details.firstChild) details.open = false; + jQuery('html').on('click.outsideOfMenu', function(e) + { + // 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); } diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index f2b56a3fd6..1b5d16c9d2 100644 --- a/api/templates/default/etemplate2.css +++ b/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; - background-color: #E0E0E0 !important; - border: 1px solid silver; + height: 24px; + top: -2px; 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; diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css index 93e41bc993..75650e2ce7 100755 --- a/mail/templates/pixelegg/app.css +++ b/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 { diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less index 67635898db..964b0a3fc2 100755 --- a/mail/templates/pixelegg/app.less +++ b/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;