extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 23:43:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix up dropdown in toolbar

Browse Source
This commit is contained in:
nathan 2022-05-18 14:39:25 -06:00
parent 7300250dfb
commit c46f9c5440
5 changed files with 29 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts
View File

@ -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;
}
`,
];
}

22
api/js/etemplate/et2_widget_toolbar.ts
View File

@ -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){
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);
}

21
api/templates/default/etemplate2.css
View File

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

9
mail/templates/pixelegg/app.css
View File

@ -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 {

7
mail/templates/pixelegg/app.less
View File

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