Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE SSE] Change shape menu (bug 43485)

Browse source
This commit is contained in:
JuliaSvinareva 2021-09-16 20:47:48 +03:00
parent cb100a3c4b
commit c8691ad743
10 changed files with 136 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/common/main/resources/less/dataview.less
View file

@ -89,3 +89,15 @@
.border-radius(@border-radius-small); .border-radius(@border-radius-small);
} }
} }
.menu-insert-shape, .menu-change-shape {
width: 362px;
padding: 10px 5px 10px 10px;
.group-description {
padding: 3px 0 3px 4px;
}
.dataview .grouped-data .group-items-container .item {
box-shadow: none;
margin: 2px 2px 2px;
}
}

44
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -2641,13 +2641,21 @@ define([
var me = this, var me = this,
shapesStore = this.getApplication().getCollection('ShapeGroups'); shapesStore = this.getApplication().getCollection('ShapeGroups');
var onShowAfter = function(menu) { var menuitem = new Common.UI.MenuItem({
for (var i = 0; i < shapesStore.length; i++) { template: _.template('<div id="id-toolbar-menu-insertshape" class="menu-insertshape"></div>')
var shapePicker = new Common.UI.DataViewSimple({ });
el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el), me.toolbar.btnInsertShape.menu.addItem(menuitem);
store: shapesStore.at(i).get('groupStore'),
parentMenu: menu.items[i].menu, var recents = Common.localStorage.getItem('de-recent-shapes');
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
var shapePicker = new Common.UI.DataViewShape({
el: $('#id-toolbar-menu-insertshape'),
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
groups: shapesStore.toJSON(),
parentMenu: me.toolbar.btnInsertShape.menu,
restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null
}); });
shapePicker.on('item:click', function(picker, item, record, e) { shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) { if (me.api) {
@ -2666,25 +2674,6 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Add Shape'); Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
} }
}); });
}
menu.off('show:after', onShowAfter);
};
me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
for (var i = 0; i < shapesStore.length; i++) {
var shapeGroup = shapesStore.at(i);
var menuItem = new Common.UI.MenuItem({
caption: shapeGroup.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
]
})
});
me.toolbar.btnInsertShape.menu.addItem(menuItem);
}
}, },
fillEquations: function() { fillEquations: function() {
@ -3670,7 +3659,8 @@ define([
textInsert: 'Insert', textInsert: 'Insert',
textTabForms: 'Forms', textTabForms: 'Forms',
textGroup: 'Group', textGroup: 'Group',
textEmptyMMergeUrl: 'You need to specify URL.' textEmptyMMergeUrl: 'You need to specify URL.',
textRecentlyUsed: 'Recently Used'
}, DE.Controllers.Toolbar || {})); }, DE.Controllers.Toolbar || {}));
}); });

52
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -1611,7 +1611,7 @@ define([
iconCls: 'btn-change-shape', iconCls: 'btn-change-shape',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
menuAlign: 'tr-br', menuAlign: 'tr-br',
cls: 'menu-shapes', cls: 'menu-shapes menu-change-shape',
items: [] items: []
}), }),
dataHint: '1', dataHint: '1',
@ -1786,20 +1786,24 @@ define([
fillAutoShapes: function() { fillAutoShapes: function() {
var me = this, var me = this,
shapesStore = this.application.getCollection('ShapeGroups'), shapesStore = this.application.getCollection('ShapeGroups'),
count = shapesStore.length; recents = Common.localStorage.getItem('de-recent-shapes');
var onShowAfter = function(menu) { for (var i = 0; i < 2; i++) {
for (var i=-1; i<count-1 && count>0; i++) { var menuitem = new Common.UI.MenuItem({
var store = shapesStore.at(i > -1 ? i : 0).get('groupStore'); template: _.template('<div id="id-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'),
if (i<0) { index: i
store = store.clone(); });
store.shift(); me.btnChangeShape.menu.addItem(menuitem);
}
var shapePicker = new Common.UI.DataViewSimple({ var shapePicker = new Common.UI.DataViewShape({
el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el), el: $('#id-change-shape-menu-' + i),
store: store, itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
parentMenu: menu.items[i+1].menu, groups: shapesStore.toJSON(),
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>') parentMenu: me.btnChangeShape.menu,
restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null,
isFromImage: i === 0
}); });
shapePicker.on('item:click', function(picker, item, record, e) { shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) { if (me.api) {
@ -1810,23 +1814,6 @@ define([
me.btnChangeShape.menu.hide(); me.btnChangeShape.menu.hide();
}); });
} }
menu.off('show:after', onShowAfter);
};
me.btnChangeShape.menu.on('show:after', onShowAfter);
for (var i=-1; i<count-1 && count>0; i++) {
var shapeGroup = shapesStore.at(i > -1 ? i : i + 1);
var menuItem = new Common.UI.MenuItem({
caption: shapeGroup.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tr-tl',
items: [
{template: _.template('<div id="id-shape-menu-shapegroup' + (i + 1) + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
]
})
});
me.btnChangeShape.menu.addItem(menuItem);
}
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage); me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage); me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
}, },
@ -2093,6 +2080,7 @@ define([
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point', tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle' textAngle: 'Angle',
textRecentlyUsed: 'Recently Used'
}, DE.Views.ShapeSettings || {})); }, DE.Views.ShapeSettings || {}));
}); });

2
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -619,7 +619,7 @@ define([
iconCls: 'toolbar__icon btn-insertshape', iconCls: 'toolbar__icon btn-insertshape',
caption: me.capBtnInsShape, caption: me.capBtnInsShape,
enableToggle: true, enableToggle: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}), menu: new Common.UI.Menu({cls: 'menu-shapes menu-insert-shape'}),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'small' dataHintOffset: 'small'

2
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -1655,7 +1655,7 @@ define([
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'), itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
groups: shapesStore.toJSON(), groups: shapesStore.toJSON(),
parentMenu: me.btnChangeShape.menu, parentMenu: me.btnChangeShape.menu,
restoreHeight: 604, restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed, textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null, recentShapes: recents ? JSON.parse(recents) : null,
isFromImage: i === 0 isFromImage: i === 0

2
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1703,7 +1703,7 @@ define([
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'), itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
groups: collection.toJSON(), groups: collection.toJSON(),
parentMenu: menuShape, parentMenu: menuShape,
restoreHeight: 604, restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed, textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null recentShapes: recents ? JSON.parse(recents) : null
}); });

12
apps/presentationeditor/main/resources/less/app.less
View file

@ -256,15 +256,3 @@
} }
} }
} }
.menu-insert-shape, .menu-change-shape {
width: 362px;
padding: 10px 5px 10px 10px;
.group-description {
padding: 3px 0 3px 4px;
}
.dataview .grouped-data .group-items-container .item {
box-shadow: none;
margin: 2px 2px 2px;
}
}

45
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -3157,13 +3157,21 @@ define([
var me = this, var me = this,
shapesStore = this.getApplication().getCollection('ShapeGroups'); shapesStore = this.getApplication().getCollection('ShapeGroups');
var onShowAfter = function(menu) { var menuitem = new Common.UI.MenuItem({
for (var i = 0; i < shapesStore.length; i++) { template: _.template('<div id="id-toolbar-menu-insertshape" class="menu-insertshape"></div>')
var shapePicker = new Common.UI.DataViewSimple({ });
el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el), me.toolbar.btnInsertShape.menu.addItem(menuitem);
store: shapesStore.at(i).get('groupStore'),
parentMenu: menu.items[i].menu, var recents = Common.localStorage.getItem('sse-recent-shapes');
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="21" height="21" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
var shapePicker = new Common.UI.DataViewShape({
el: $('#id-toolbar-menu-insertshape'),
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
groups: shapesStore.toJSON(),
parentMenu: me.toolbar.btnInsertShape.menu,
restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null
}); });
shapePicker.on('item:click', function(picker, item, record, e) { shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) { if (me.api) {
@ -3181,26 +3189,6 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Add Shape'); Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
} }
}); });
}
menu.off('show:after', onShowAfter);
};
me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
for (var i = 0; i < shapesStore.length; i++) {
var shapeGroup = shapesStore.at(i);
var menuItem = new Common.UI.MenuItem({
caption: shapeGroup.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
]
})
});
me.toolbar.btnInsertShape.menu.addItem(menuItem);
}
}, },
fillEquations: function() { fillEquations: function() {
@ -4440,7 +4428,8 @@ define([
textShapes: 'Shapes', textShapes: 'Shapes',
textIndicator: 'Indicators', textIndicator: 'Indicators',
textRating: 'Ratings', textRating: 'Ratings',
txtLockSort: 'Data is found next to your selection, but you do not have sufficient permissions to change those cells.<br>Do you wish to continue with the current selection?' txtLockSort: 'Data is found next to your selection, but you do not have sufficient permissions to change those cells.<br>Do you wish to continue with the current selection?',
textRecentlyUsed: 'Recently Used'
}, SSE.Controllers.Toolbar || {})); }, SSE.Controllers.Toolbar || {}));
}); });

52
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -1463,7 +1463,7 @@ define([
iconCls: 'btn-change-shape', iconCls: 'btn-change-shape',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
menuAlign: 'tr-br', menuAlign: 'tr-br',
cls: 'menu-shapes', cls: 'menu-shapes menu-change-shape',
items: [] items: []
}), }),
dataHint: '1', dataHint: '1',
@ -1659,20 +1659,24 @@ define([
fillAutoShapes: function() { fillAutoShapes: function() {
var me = this, var me = this,
shapesStore = this.application.getCollection('ShapeGroups'), shapesStore = this.application.getCollection('ShapeGroups'),
count = shapesStore.length; recents = Common.localStorage.getItem('sse-recent-shapes');
var onShowAfter = function(menu) { for (var i = 0; i < 2; i++) {
for (var i=-1; i<count-1 && count>0; i++) { var menuitem = new Common.UI.MenuItem({
var store = shapesStore.at(i > -1 ? i : 0).get('groupStore'); template: _.template('<div id="id-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'),
if (i<0) { index: i
store = store.clone(); });
store.shift(); me.btnChangeShape.menu.addItem(menuitem);
}
var shapePicker = new Common.UI.DataViewSimple({ var shapePicker = new Common.UI.DataViewShape({
el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el), el: $('#id-change-shape-menu-' + i),
store: store, itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
parentMenu: menu.items[i+1].menu, groups: shapesStore.toJSON(),
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>') parentMenu: me.btnChangeShape.menu,
restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null,
isFromImage: i === 0
}); });
shapePicker.on('item:click', function(picker, item, record, e) { shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) { if (me.api) {
@ -1683,23 +1687,6 @@ define([
me.btnChangeShape.menu.hide(); me.btnChangeShape.menu.hide();
}); });
} }
menu.off('show:after', onShowAfter);
};
me.btnChangeShape.menu.on('show:after', onShowAfter);
for (var i=-1; i<count-1 && count>0; i++) {
var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
var menuItem = new Common.UI.MenuItem({
caption: shapeGroup.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tr-tl',
items: [
{ template: _.template('<div id="id-shape-menu-shapegroup' + (i+1) + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
]
})
});
me.btnChangeShape.menu.addItem(menuItem);
}
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage); me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage); me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
}, },
@ -1986,6 +1973,7 @@ define([
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point', tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle' textAngle: 'Angle',
textRecentlyUsed: 'Recently Used'
}, SSE.Views.ShapeSettings || {})); }, SSE.Views.ShapeSettings || {}));
}); });

2
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -803,7 +803,7 @@ define([
enableToggle: true, enableToggle: true,
caption : me.capInsertShape, caption : me.capInsertShape,
lock : [_set.editCell, _set.lostConnect, _set.coAuth, _set['Objects']], lock : [_set.editCell, _set.lostConnect, _set.coAuth, _set['Objects']],
menu : new Common.UI.Menu({cls: 'menu-shapes'}), menu : new Common.UI.Menu({cls: 'menu-shapes menu-insert-shape'}),
dataHint : '1', dataHint : '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'small' dataHintOffset: 'small'