mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-27 09:09:04 +01:00
WIP converting toolbar subwidgets to use wc widgets
This commit is contained in:
Hadi Nategh
parent
66394b3e29
commit
ea11a28868
@ -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);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 */
|
||||
@ -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;
|
||||
|
||||
@ -928,7 +928,6 @@ div.ui-toolbar-menulist{
|
||||
}
|
||||
.et2_toolbar_more{
|
||||
float:right;
|
||||
direction: rtl;
|
||||
}
|
||||
.et2_toolbar_actionlist{
|
||||
float:left;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 */
|
||||
Loading…
Reference in New Issue
Block a user