WIP converting toolbar subwidgets to use wc widgets

This commit is contained in:
Hadi Nategh 2022-08-01 17:59:40 +02:00
parent 66394b3e29
commit ea11a28868
7 changed files with 47 additions and 49 deletions

View File

@ -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[0].textContent = action.caption;
button.classList.add(action.iconUrl?'et2_toolbar_hasCaption':'et2_toolbar_onlyCaption');
}
}
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);
if(action)
let actionObj = this._actionManager.getActionById(action.id);
if(actionObj)
{
if (action.checkbox)
if (actionObj.checkbox)
{
self.checkbox(action.id, !action.checked);
self.checkbox(actionObj.id, !actionObj.checked);
}
this.value = action.id;
action.data.event = e;
action.execute([]);
this.value = actionObj.id;
actionObj.data.event = e;
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);

View File

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

View File

@ -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 */

View File

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

View File

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

View File

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

View File

@ -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 */