' +
- '
style="height: 100%;" <% } %>>' +
- '
' +
- '' +
- '
' +
- '' +
- '' +
- '
' +
+ '' +
+ '
' +
+ '
',
- ' style="height: 100%;" <% } %>>' +
+ '
' +
'' +
+ '' +
+ '' +
'
' +
- '' +
+ '' +
+ '' +
' style="display: none;" <% } %> >
' +
- ' style="display: none;" <% } %> >' +
- '
'+
'',
@@ -83,7 +94,7 @@ define([], function () {
help: true,
width: Math.min(800, innerWidth),
height: Math.min(512, innerHeight),
- minwidth: 600,
+ minwidth: 650,
minheight: 350,
resizable: true,
cls: 'modal-dlg invisible-borders',
@@ -94,15 +105,16 @@ define([], function () {
}, options || {});
this.api = options.api;
- this.CurrentElementModeType = {
+ this.ItemTypes = {
CustomFunction : 0,
Macros : 1
};
this._state = {
isFunctionsSupport: !!window.SSE,
- macrosItemMenuOpen: null,
- functionItemMenuOpen: null,
- currentElementMode: this.CurrentElementModeType.Macros,
+ selectedItem: {
+ record: null,
+ type: null
+ },
currentValue: '',
currentPos: {row: 3, column: 0}
};
@@ -131,7 +143,7 @@ define([], function () {
$window = this.getChild();
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
- me.aceContainer = $window.find('#code-editor');
+ me.aceContainer = $window.find('#macros-code-editor');
// this.loadMask = new Common.UI.LoadMask({owner: this.$window.find('.body')[0]});
// this.loadMask.setTitle(this.textLoading);
@@ -142,23 +154,66 @@ define([], function () {
},
renderAfterAceLoaded: function() {
- var me = this;
- this.btnMacrosRun = new Common.UI.Button({
- parentEl: $('#btn-macros-run'),
- cls: 'btn-toolbar borders--small',
- iconCls: 'icon toolbar__icon btn-run',
- hint: this.tipMacrosRun
+ this.btnUndo = new Common.UI.Button({
+ parentEl : $('#btn-macros-undo'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-undo icon-rtl',
+ hint : this.tipUndo
+ }).on('click', _.bind(this.onUndo, this));
+
+ this.btnRedo = new Common.UI.Button({
+ parentEl : $('#btn-macros-redo'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-redo icon-rtl',
+ hint : this.tipRedo
+ }).on('click', _.bind(this.onRedo, this));
+
+ this.btnRun = new Common.UI.Button({
+ parentEl : $('#btn-macros-run'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-run',
+ caption : this.textRun,
+ hint : this.tipMacrosRun
}).on('click', _.bind(this.onRunMacros, this));
+ this.btnCopy = new Common.UI.Button({
+ parentEl : $('#btn-macros-copy'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-copy',
+ caption : this.textCopy,
+ hint : this.tipCopy
+ }).on('click', _.bind(this.onCopyItem, this));
+
+ this.btnRename = new Common.UI.Button({
+ parentEl : $('#btn-macros-rename'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-rename',
+ caption : this.textRename,
+ hint : this.tipRename
+ }).on('click', _.bind(this.onRenameItem, this));
+
+ this.btnDelete = new Common.UI.Button({
+ parentEl : $('#btn-macros-delete'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-delete',
+ caption : this.textDelete,
+ hint : this.tipDelete
+ }).on('click', _.bind(this.onDeleteItem, this));
+
+ this.chAutostart = new Common.UI.CheckBox({
+ el: $('#ch-macros-autostart'),
+ labelText: this.textAutostart
+ }).on('change', _.bind(this.onChangeAutostart, this));
+
this.btnMacrosAdd = new Common.UI.Button({
parentEl: $('#btn-macros-add'),
- cls: 'btn-toolbar borders--small',
- iconCls: 'icon toolbar__icon btn-zoomup',
+ cls: 'btn-toolbar',
+ iconCls: 'toolbar__icon btn-zoomup',
hint: this.tipMacrosAdd
}).on('click', _.bind(this.onCreateMacros, this));
this.listMacros = new Common.UI.ListView({
- el: $('#list-macros', this.$window),
+ el: $('#macros-list', this.$window),
store: new Common.UI.DataViewStore(),
simpleAddMode: true,
itemTemplate: _.template([
@@ -167,88 +222,34 @@ define([], function () {
'(A)',
'<% } %>',
'' +
- '' +
+ '
' +
'' +
- '' +
+ ' style="display: none;" <% } %> >' +
+ '
' +
'' +
+ '' +
'' +
'
' +
- '' +
+ '' +
+ '' +
'' +
+ '
' +
'' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ '<%= Common.Utils.String.htmlEncode(name) %>
',
- ''
+ '<%= Common.Utils.String.htmlEncode(name) %>
'
].join(''))
});
this.listMacros.on('item:add', _.bind(this.onAddListItem, this));
- this.listMacros.on('item:click', _.bind(this.onClickListMacrosItem, this));
- this.listMacros.on('item:contextmenu', _.bind(this.onContextMenuListMacrosItem, this));
this.listMacros.on('item:select', _.bind(this.onSelectListMacrosItem, this));
this.setListMacros();
- this.ctxMenuMacros = new Common.UI.Menu({
- cls: 'shifted-right',
- additionalAlign: this.menuAddAlign,
- items: [
- new Common.UI.MenuItem({
- caption : this.textRun
- }).on('click', _.bind(this.onRunMacros, this)),
- new Common.UI.MenuItem({
- caption : this.textMakeAutostart
- }).on('click', _.bind(this.onMakeAutostartMacros, this)),
- new Common.UI.MenuItem({
- caption : this.textUnMakeAutostart
- }).on('click', _.bind(this.onUnMakeAutostartMacros, this)),
- new Common.UI.MenuItem({
- caption : this.textRename
- }).on('click', _.bind(this.onRenameMacros, this)),
- new Common.UI.MenuItem({
- caption : this.textDelete
- }).on('click', _.bind(this.onDeleteMacros, this)),
- new Common.UI.MenuItem({
- caption : this.textCopy
- }).on('click', _.bind(this.onCopyMacros, this)),
- ]
- });
- this.ctxMenuMacros.on('hide:after', function() {
- me.listMacros.$el.find('.listitem-icon').removeClass('active');
- });
-
if(this._state.isFunctionsSupport) {
this.btnFunctionAdd = new Common.UI.Button({
parentEl: $('#btn-function-add'),
- cls: 'btn-toolbar borders--small',
- iconCls: 'icon toolbar__icon btn-zoomup',
+ cls: 'btn-toolbar',
+ iconCls: 'toolbar__icon btn-zoomup',
hint: this.tipFunctionAdd
}).on('click', _.bind(this.onCreateFunction, this));
this.listFunctions = new Common.UI.ListView({
- el: $('#list-functions', this.$window),
+ el: $('#functions-list', this.$window),
store: new Common.UI.DataViewStore(),
tabindex: 1,
cls: 'dbl-clickable',
itemTemplate: _.template([
'',
- '<%= Common.Utils.String.htmlEncode(name) %>
',
- ''
+ '<%= Common.Utils.String.htmlEncode(name) %>
'
].join(''))
});
this.listFunctions.on('item:add', _.bind(this.onAddListItem, this));
- this.listFunctions.on('item:click', _.bind(this.onClickListFunctionItem, this));
- this.listFunctions.on('item:contextmenu', _.bind(this.onContextMenuListFunctionItem, this));
this.listFunctions.on('item:select', _.bind(this.onSelectListFunctionItem, this));
- this.setListFunctions();
-
- this.ctxMenuFunction = new Common.UI.Menu({
- cls: 'shifted-right',
- additionalAlign: this.menuAddAlign,
- items: [
- new Common.UI.MenuItem({
- caption : this.textRename
- }).on('click', _.bind(this.onRenameFunction, this)),
- new Common.UI.MenuItem({
- caption : this.textDelete
- }).on('click', _.bind(this.onDeleteFunction, this)),
- new Common.UI.MenuItem({
- caption : this.textCopy
- }).on('click', _.bind(this.onCopyFunction, this)),
- ]
- });
- this.ctxMenuFunction.on('hide:after', function() {
- me.listFunctions.$el.find('.listitem-icon').removeClass('active');
- });
-
+ this.setListFunctions();
}
this.makeDragable();
@@ -257,7 +258,7 @@ define([], function () {
createCodeEditor: function() {
var me = this;
- this.codeEditor = new Common.UI.MonacoEditor({parentEl: '#code-editor'});
+ this.codeEditor = new Common.UI.MonacoEditor({parentEl: '#macros-code-editor'});
this.codeEditor.on('ready', function() {
me.codeEditor.updateTheme();
me.codeEditor.setValue(me._state.currentValue, me._state.currentPos);
@@ -267,14 +268,11 @@ define([], function () {
// me.loadMask.hide();
});
this.codeEditor.on('change', function(value, pos) {
- var selectedItem = me._state.currentElementMode === me.CurrentElementModeType.Macros
- ? me.listMacros.getSelectedRec()
- : me.listFunctions.getSelectedRec();
- if(selectedItem) {
+ if(me._state.selectedItem.record) {
me._state.currentValue = value;
me._state.currentPos = pos;
- selectedItem.set('value', value);
- selectedItem.set('currentPos', pos);
+ me._state.selectedItem.record.set('value', value);
+ me._state.selectedItem.record.set('currentPos', pos);
}
});
},
@@ -330,113 +328,14 @@ define([], function () {
var macrosList = data.macrosArray;
this.listFunctions.store.reset(macrosList);
},
- openContextMenu: function(elementMode, item, event) {
- var itemMenuOpen, ctxMenu, modeName;
- if(elementMode === this.CurrentElementModeType.Macros) {
- itemMenuOpen = this._state.macrosItemMenuOpen;
- ctxMenu = this.ctxMenuMacros;
- modeName = 'macros';
- } else if(elementMode === this.CurrentElementModeType.CustomFunction){
- itemMenuOpen = this._state.functionItemMenuOpen;
- ctxMenu = this.ctxMenuFunction;
- modeName = 'functions';
- } else {
- return false;
- }
-
- if (itemMenuOpen === item && ctxMenu.isVisible()) {
- ctxMenu.hide();
- return false;
- }
-
- var currentTarget = $(event.currentTarget),
- parent = elementMode === this.CurrentElementModeType.Macros ? $('#menu_macros') : $('#menu_functions'),
- containerId = 'macros-dialog-ctx-' + modeName + '-container',
- menuContainer = parent.find('#' + containerId);
-
- if (!ctxMenu.rendered) {
- if (menuContainer.length < 1) {
- menuContainer = $('', ctxMenu.id);
- parent.append(menuContainer);
- }
- ctxMenu.render(menuContainer);
- ctxMenu.cmpEl.attr({tabindex: "-1"});
-
- ctxMenu.on('show:after', function(cmp) {
- if (cmp && cmp.menuAlignEl)
- cmp.menuAlignEl.toggleClass('over', true);
- }).on('hide:after', function(cmp) {
- if (cmp && cmp.menuAlignEl)
- cmp.menuAlignEl.toggleClass('over', false);
- });
- }
-
- var menuContainerRect = Common.Utils.getBoundingClientRect(menuContainer[0]);
-
- ctxMenu.menuAlignEl = currentTarget;
- ctxMenu.setOffset(event.clientX - menuContainerRect.x, -currentTarget.height()/2 - 3);
- ctxMenu.show();
- _.delay(function() {
- ctxMenu.cmpEl.focus();
- }, 10);
- event.stopPropagation();
- event.preventDefault();
-
- return true;
- },
- openContextMenuMacros: function(macrosItem, event) {
- var isOpen = this.openContextMenu(this.CurrentElementModeType.Macros, macrosItem, event);
- if(isOpen) {
- this._state.macrosItemMenuOpen = macrosItem;
- this.ctxMenuMacros.items[1].setVisible(!macrosItem.get('autostart'));
- this.ctxMenuMacros.items[2].setVisible(macrosItem.get('autostart'));
- }
- },
- openContextMenuFunction: function(functionItem, event) {
- var isOpen = this.openContextMenu(this.CurrentElementModeType.CustomFunction, functionItem, event);
- if(isOpen) {
- this._state.functionItemMenuOpen = functionItem;
- }
- },
- openWindowRename: function() {
- var me = this;
- var windowSize = {
- width: 300,
- height: 90
- };
- var macrosWindowRect = Common.Utils.getBoundingClientRect(this.$window[0]);
- var selectedItem = me._state.currentElementMode === me.CurrentElementModeType.Macros
- ? me.listMacros.getSelectedRec()
- : me.listFunctions.getSelectedRec();
-
- (new Common.Views.TextInputDialog({
- value: selectedItem.get('name'),
- width: windowSize.width,
- height: windowSize.height,
- inputConfig: {
- allowBlank : false,
- validation: function(value) {
- return value.trim().length > 0 ? true : '';
- }
- },
- handler: function(result, value) {
- if (result == 'ok') {
- selectedItem.set('name', value.trim());
- }
- }
- })).show(
- macrosWindowRect.left + (macrosWindowRect.width - windowSize.width) / 2,
- macrosWindowRect.top + (macrosWindowRect.height - windowSize.height) / 2
- );
- },
makeDragable: function() {
var me = this;
var currentElement;
var currentIndex = 0;
var insertIndex;
- var macrosList = document.getElementById("list-macros");
- var functionList = document.getElementById("menu_functions");
+ var macrosList = document.getElementById("macros-list");
+ var functionList = document.getElementById("functions-list");
function getInsertIndex(cursorPosition, currentElement, elements) {
// cursorPosition = cursorPosition * ((1 + (1 - zoom)).toFixed(1));
@@ -480,10 +379,10 @@ define([], function () {
currentIndex = 0;
}
- function handleDragover(list, elementModeType, e) {
+ function handleDragover(list, type, e) {
e.preventDefault();
currentElement = e.target;
- let bDragAllowed = me._state.currentElementMode === elementModeType;
+ let bDragAllowed = me._state.selectedItem.type === type;
e.dataTransfer.dropEffect = bDragAllowed ? "move" : "none";
const isMoveable = currentElement.classList.contains('draggable');
if (!isMoveable || !bDragAllowed)
@@ -527,10 +426,10 @@ define([], function () {
});
macrosList.addEventListener('dragover', function(e) {
- handleDragover(macrosList, me.CurrentElementModeType.Macros, e)
+ handleDragover(macrosList, me.ItemTypes.Macros, e)
});
functionList.addEventListener('dragover', function(e) {
- handleDragover(functionList, me.CurrentElementModeType.CustomFunction, e)
+ handleDragover(functionList, me.ItemTypes.CustomFunction, e)
});
macrosList.addEventListener('dragleave', function(e) {
@@ -541,6 +440,36 @@ define([], function () {
});
},
+ selectItem: function(record, type) {
+ this._state.selectedItem.record = record;
+ this._state.selectedItem.type = type;
+ this.codeEditor.setValue(record.get('value'), record.get('currentPos')!==undefined ? record.get('currentPos') : {row: 3, column: 0});
+ this.codeEditor.revealPositionInCenter();
+ this._state.currentValue = record.get('value');
+ this._state.currentPos = record.get('currentPos');
+
+ this.chAutostart.setValue(record.get('autostart'));
+ this.getChild().find('.lock-for-function').toggleClass('hidden', type == this.ItemTypes.CustomFunction);
+
+ if(type == this.ItemTypes.Macros && this.listFunctions) {
+ this.listFunctions.deselectAll();
+ }
+ if(type == this.ItemTypes.CustomFunction && this.listMacros) {
+ this.listMacros.deselectAll();
+ }
+ this.setDisableButtons(false);
+ },
+
+ setDisableButtons: function(value) {
+ this.btnUndo.setDisabled(value);
+ this.btnRedo.setDisabled(value);
+ this.btnRun.setDisabled(value);
+ this.btnCopy.setDisabled(value);
+ this.btnRename.setDisabled(value);
+ this.btnDelete.setDisabled(value);
+ this.chAutostart.setDisabled(value);
+ },
+
parseDataFromApi: function(data) {
var result = {
macrosArray : [],
@@ -612,6 +541,54 @@ define([], function () {
itemView.$el.attr('draggable', true);
itemView.$el.addClass('draggable');
},
+
+ onCopyItem: function() {
+ if(!this._state.selectedItem.record) return;
+ let list = (this._state.selectedItem.type == this.ItemTypes.Macros
+ ? this.listMacros
+ : this.listFunctions);
+ let item = this._state.selectedItem.record;
+
+ list.store.add({
+ guid: this.createGuid(),
+ name: item.get('name') + '_copy',
+ value: item.get('value'),
+ autostart: item.get('autostart')
+ });
+ list.selectRecord(list.store.at(-1));
+ },
+
+ onRenameItem: function() {
+ if(!this._state.selectedItem.record) return;
+
+ var me = this;
+ var windowSize = {
+ width: 300,
+ height: 90
+ };
+ var macrosWindowRect = Common.Utils.getBoundingClientRect(this.$window[0]);
+
+ (new Common.Views.TextInputDialog({
+ value: me._state.selectedItem.record.get('name'),
+ width: windowSize.width,
+ height: windowSize.height,
+ inputConfig: {
+ allowBlank : false,
+ validation: function(value) {
+ return value.trim().length > 0 ? true : '';
+ }
+ },
+ handler: function(result, value) {
+ if (result == 'ok') {
+ me._state.selectedItem.record.set('name', value.trim());
+ }
+ }
+ })).show(
+ macrosWindowRect.left + (macrosWindowRect.width - windowSize.width) / 2,
+ macrosWindowRect.top + (macrosWindowRect.height - windowSize.height) / 2
+ );
+ },
+
onCreateMacros: function() {
var indexMax = 0;
var macrosTextEn = 'Macros';
@@ -641,58 +618,35 @@ define([], function () {
});
this.listMacros.selectRecord(this.listMacros.store.at(-1));
},
- onClickListMacrosItem: function(listView, itemView, record, event) {
- if(!event) return;
- var btn = $(event.target);
- if (btn && btn.hasClass('listitem-icon')) {
- itemView.$el.find('.listitem-icon').addClass('active');
- this.openContextMenuMacros(record, event);
- }
- },
- onContextMenuListMacrosItem: function(listView, itemView, record, event) {
- var me = this;
- this.listMacros.selectRecord(record);
- _.delay(function() {
- me.openContextMenuMacros(record, event);
- }, 10);
- },
onSelectListMacrosItem: function(listView, itemView, record) {
- this._state.currentElementMode = this.CurrentElementModeType.Macros;
- this.codeEditor.setValue(record.get('value'), record.get('currentPos')!==undefined ? record.get('currentPos') : {row: 3, column: 0});
- this._state.currentValue = record.get('value');
- this._state.currentPos = record.get('currentPos');
-
- this.btnMacrosRun.setDisabled(false);
- this.listFunctions && this.listFunctions.deselectAll();
+ this.selectItem(record, this.ItemTypes.Macros);
},
+
+ onUndo: function() {
+ this.codeEditor.undo();
+ },
+
+ onRedo: function() {
+ this.codeEditor.redo();
+ },
+
onRunMacros: function() {
this.api.callCommand(this._state.currentValue);
},
- onMakeAutostartMacros: function() {
- if(!this._state.macrosItemMenuOpen) return;
- this._state.macrosItemMenuOpen.set('autostart', true);
- },
- onUnMakeAutostartMacros: function() {
- if(!this._state.macrosItemMenuOpen) return;
+ onChangeAutostart: function(field, newValue) {
+ if(!this._state.selectedItem.record) return;
- this._state.macrosItemMenuOpen.set('autostart', false);
+ this._state.selectedItem.record.set('autostart', newValue == 'checked');
},
- onRenameMacros: function() {
- if(!this._state.macrosItemMenuOpen) return;
-
- this.openWindowRename();
- },
- onRenameFunction: function() {
- if(!this._state.functionItemMenuOpen) return;
-
- this.openWindowRename();
- },
-
- onDeleteItem: function(list, item) {
- if(!item) return;
+ onDeleteItem: function() {
+ if(!this._state.selectedItem.record) return;
+ let list = (this._state.selectedItem.type == this.ItemTypes.Macros
+ ? this.listMacros
+ : this.listFunctions);
+ let item = this._state.selectedItem.record;
var deletedIndex = list.store.indexOf(item);
list.store.remove(item);
@@ -702,33 +656,10 @@ define([], function () {
: list.store.length - 1;
list.selectByIndex(selectedIndex);
} else {
- this.codeEditor.setValue('');
- this.btnMacrosRun.setDisabled(true);
+ this.codeEditor.setValue('', {row: 0, column: 0}, true);
+ this.setDisableButtons(true);
}
},
- onDeleteMacros: function() {
- this.onDeleteItem(this.listMacros, this._state.macrosItemMenuOpen);
- },
- onDeleteFunction: function() {
- this.onDeleteItem(this.listFunctions, this._state.functionItemMenuOpen);
- },
-
- onCopyItem: function(list, item) {
- list.store.add({
- guid: this.createGuid(),
- name: item.get('name') + '_copy',
- value: item.get('value'),
- autostart: item.get('autostart')
- });
- list.selectRecord(list.store.at(-1));
- },
- onCopyMacros: function() {
- this.onCopyItem(this.listMacros, this._state.macrosItemMenuOpen);
- },
- onCopyFunction: function() {
- this.onCopyItem(this.listFunctions, this._state.functionItemMenuOpen);
- },
-
onCreateFunction: function() {
var indexMax = 0;
@@ -758,29 +689,9 @@ define([], function () {
});
this.listFunctions.selectRecord(this.listFunctions.store.at(-1));
},
- onClickListFunctionItem: function(listView, itemView, record, event) {
- if(!event) return;
- var btn = $(event.target);
- if (btn && btn.hasClass('listitem-icon')) {
- itemView.$el.find('.listitem-icon').addClass('active');
- this.openContextMenuFunction(record, event);
- }
- },
- onContextMenuListFunctionItem: function(listView, itemView, record, event) {
- var me = this;
- this.listFunctions.selectRecord(record);
- _.delay(function() {
- me.openContextMenuFunction(record, event);
- }, 10);
- },
onSelectListFunctionItem: function(listView, itemView, record) {
- this._state.currentElementMode = this.CurrentElementModeType.CustomFunction;
- this.codeEditor.setValue(record.get('value'), record.get('currentPos')!==undefined ? record.get('currentPos') : {row: 3, column: 0});
-
- this.btnMacrosRun.setDisabled(true);
-
- this.listMacros && this.listMacros.deselectAll();
+ this.selectItem(record, this.ItemTypes.CustomFunction);
},
onHelp: function() {
@@ -799,13 +710,17 @@ define([], function () {
textSave : 'Save',
textMacros : 'Macros',
textRun : 'Run',
- textUnMakeAutostart : 'Unmake autostart',
- textMakeAutostart : 'Make autostart',
+ textAutostart : 'Autostart',
textRename : 'Rename',
textDelete : 'Delete',
textCopy : 'Copy',
textCustomFunction : 'Custom function',
textLoading : 'Loading...',
+ tipUndo : 'Undo',
+ tipRedo : 'Redo',
+ tipRename : 'Rename',
+ tipDelete : 'Delete',
+ tipCopy : 'Copy',
tipMacrosRun : 'Run',
tipMacrosAdd : 'Add macros',
tipFunctionAdd : 'Add custom function',
diff --git a/apps/common/main/resources/less/macros-dialog.less b/apps/common/main/resources/less/macros-dialog.less
index 94e02ffd28..08614e6ee8 100644
--- a/apps/common/main/resources/less/macros-dialog.less
+++ b/apps/common/main/resources/less/macros-dialog.less
@@ -1,127 +1,148 @@
#macros-dialog {
- .body {
- overflow: hidden;
- width: 100%;
- padding-top: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ .body {
+ overflow: hidden;
+ width: 100%;
+ padding-top: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
- .content {
- display: flex;
- flex: 1;
- height: calc(100% - 37px); // 37px - footer height
+ #macros-dialog-content {
+ display: flex;
+ flex: 1;
+ height: calc(100% - 37px); // 37px - footer height
- .common_menu {
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 30%;
- overflow: hidden;
+ .menu-header {
+ display: flex;
+ align-items: center;
- #menu_macros {
- height: 50%;
- }
+ & > label {
+ line-height: 20px;
+ font-weight: 700;
+ }
+ }
- #menu_functions {
- height: 50%;
- }
+ #macros-dialog-left {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 30%;
+ overflow: hidden;
- .menu_header {
- height: 26px;
- margin: 16px 12px 16px 12px;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ .menu-header {
+ padding: 7px 12px;
+ justify-content: space-between;
+ }
- label {
- font-weight: 700;
- }
+ #macros-menu, #functions-menu {
+ height: 50%;
+ }
+ }
+ #macros-list, #functions-list {
+ height: calc(100% - 34px);
+ padding: 2px 4px 4px 4px;
- .div_buttons {
- display: flex;
- justify-content: center;
- }
- }
- }
- #list-macros, #list-functions {
- height: calc(100% - 58px);
- padding: 2px 4px 4px 4px;
+ .listview {
+ border: none;
+ .item {
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px 8px 6px 0px;
+ border: none;
+ cursor: default;
+ margin-top: 2px;
- .listview {
- border: none;
- .item {
- display: flex;
- position: relative;
- align-items: center;
- justify-content: space-between;
- padding: 4px 8px 4px 0px;
- margin: 2px 0;
- border: none;
- cursor: default;
- &:not(:hover):not(.selected) {
- background-color: @background-toolbar-ie;
- background-color: @background-toolbar;
- }
- &.dragged {
- opacity: 0.6;
- }
- &.dragHovered:after {
- content: "";
- position: absolute;
- width: 100%;
- height: 2px;
- background-color: @highlight-button-pressed-ie !important;
- background-color: @highlight-button-pressed !important;
- left: 0;
- }
- &.dragHovered.last:after {
- bottom: -2px;
- }
- &.dragHovered:not(.last):after {
- top: -2px;
- }
+ &:not(:hover):not(.selected) {
+ background-color: @background-toolbar-ie;
+ background-color: @background-toolbar;
+ }
+ &.dragged {
+ opacity: 0.6;
+ }
+ &.dragHovered:after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: @highlight-button-pressed-ie !important;
+ background-color: @highlight-button-pressed !important;
+ left: 0;
+ }
+ &.dragHovered.last:after {
+ bottom: -2px;
+ }
+ &.dragHovered:not(.last):after {
+ top: -2px;
+ }
- .listitem-autostart {
- font-size: 9px;
- width: 16px;
- text-align: center;
- }
+ .listitem-autostart {
+ font-size: 9px;
+ width: 16px;
+ text-align: center;
+ }
- .list-item {
- flex: 1;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ .list-item {
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
- .listitem-icon {
- cursor: pointer;
- margin-left: 10px;
- height: 20px;
- width: 20px;
- line-height: 20px;
- border-radius: 2px;
+ .listitem-icon {
+ cursor: pointer;
+ margin-left: 10px;
+ height: 20px;
+ width: 20px;
+ line-height: 20px;
+ border-radius: 2px;
- &.active {
- background-color: @highlight-button-pressed-hover;
- }
- }
- &.selected {
- .listitem-icon {
- background-position-x: @button-small-active-icon-offset-x;
- }
+ &.active {
+ background-color: @highlight-button-pressed-hover;
+ }
+ }
+ &.selected {
+ .listitem-icon {
+ background-position-x: @button-small-active-icon-offset-x;
+ }
+ }
+ }
+ }
+ }
+ #macros-dialog-right {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
- }
- }
- }
- }
+ .menu-header {
+ padding: 7px 12px 7px 0px;
+ .rtl & {
+ padding: 7px 0px 7px 12px;
+ }
- #code-editor {
- width: 100%;
- flex: 1;
- }
- }
- }
+ & > * {
+ .margin-left-12();
+ }
+ }
+
+ #ch-macros-autostart {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+
+ .rtl & {
+ margin-left: 0;
+ margin-right: auto;
+ }
+ }
+
+ #macros-code-editor {
+ width: 100%;
+ flex: 1;
+ }
+ }
+ }
+ }
}