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

@ -88,4 +88,16 @@
border: @scaled-one-px-value solid @input-border;
.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;
}
}

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

@ -2641,50 +2641,39 @@ define([
var me = this,
shapesStore = this.getApplication().getCollection('ShapeGroups');
var onShowAfter = function(menu) {
for (var i = 0; i < shapesStore.length; i++) {
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el),
store: shapesStore.at(i).get('groupStore'),
parentMenu: menu.items[i].menu,
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>')
});
shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
if (record) {
me._addAutoshape(true, record.get('data').shapeType);
me._isAddingShape = true;
}
var menuitem = new Common.UI.MenuItem({
template: _.template('<div id="id-toolbar-menu-insertshape" class="menu-insertshape"></div>')
});
me.toolbar.btnInsertShape.menu.addItem(menuitem);
if (me.toolbar.btnInsertText.pressed) {
me.toolbar.btnInsertText.toggle(false, true);
}
var recents = Common.localStorage.getItem('de-recent-shapes');
if (e.type !== 'click')
me.toolbar.btnInsertShape.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape);
Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
}
});
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) {
if (me.api) {
if (record) {
me._addAutoshape(true, record.get('data').shapeType);
me._isAddingShape = true;
}
if (me.toolbar.btnInsertText.pressed) {
me.toolbar.btnInsertText.toggle(false, true);
}
if (e.type !== 'click')
me.toolbar.btnInsertShape.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape);
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() {
@ -3670,7 +3659,8 @@ define([
textInsert: 'Insert',
textTabForms: 'Forms',
textGroup: 'Group',
textEmptyMMergeUrl: 'You need to specify URL.'
textEmptyMMergeUrl: 'You need to specify URL.',
textRecentlyUsed: 'Recently Used'
}, DE.Controllers.Toolbar || {}));
});

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

@ -1611,7 +1611,7 @@ define([
iconCls: 'btn-change-shape',
menu : new Common.UI.Menu({
menuAlign: 'tr-br',
cls: 'menu-shapes',
cls: 'menu-shapes menu-change-shape',
items: []
}),
dataHint: '1',
@ -1786,46 +1786,33 @@ define([
fillAutoShapes: function() {
var me = this,
shapesStore = this.application.getCollection('ShapeGroups'),
count = shapesStore.length;
recents = Common.localStorage.getItem('de-recent-shapes');
var onShowAfter = function(menu) {
for (var i=-1; i<count-1 && count>0; i++) {
var store = shapesStore.at(i > -1 ? i : 0).get('groupStore');
if (i<0) {
store = store.clone();
store.shift();
}
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el),
store: store,
parentMenu: menu.items[i+1].menu,
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>')
});
shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
me.api.ChangeShapeType(record.get('data').shapeType);
me.fireEvent('editcomplete', me);
}
if (e.type !== 'click')
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>')}
]
})
for (var i = 0; i < 2; i++) {
var menuitem = new Common.UI.MenuItem({
template: _.template('<div id="id-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'),
index: i
});
me.btnChangeShape.menu.addItem(menuitem);
var shapePicker = new Common.UI.DataViewShape({
el: $('#id-change-shape-menu-' + i),
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.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) {
if (me.api) {
me.api.ChangeShapeType(record.get('data').shapeType);
me.fireEvent('editcomplete', me);
}
if (e.type !== 'click')
me.btnChangeShape.menu.hide();
});
me.btnChangeShape.menu.addItem(menuItem);
}
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
@ -2093,6 +2080,7 @@ define([
textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
textAngle: 'Angle',
textRecentlyUsed: 'Recently Used'
}, DE.Views.ShapeSettings || {}));
});

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

@ -619,7 +619,7 @@ define([
iconCls: 'toolbar__icon btn-insertshape',
caption: me.capBtnInsShape,
enableToggle: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}),
menu: new Common.UI.Menu({cls: 'menu-shapes menu-insert-shape'}),
dataHint: '1',
dataHintDirection: 'bottom',
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>'),
groups: shapesStore.toJSON(),
parentMenu: me.btnChangeShape.menu,
restoreHeight: 604,
restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null,
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>'),
groups: collection.toJSON(),
parentMenu: menuShape,
restoreHeight: 604,
restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null
});

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

@ -255,16 +255,4 @@
}
}
}
}
.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;
}
}

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

@ -3157,50 +3157,38 @@ define([
var me = this,
shapesStore = this.getApplication().getCollection('ShapeGroups');
var onShowAfter = function(menu) {
for (var i = 0; i < shapesStore.length; i++) {
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el),
store: shapesStore.at(i).get('groupStore'),
parentMenu: menu.items[i].menu,
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>')
});
shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
if (record) {
me._addAutoshape(true, record.get('data').shapeType);
me._isAddingShape = true;
}
var menuitem = new Common.UI.MenuItem({
template: _.template('<div id="id-toolbar-menu-insertshape" class="menu-insertshape"></div>')
});
me.toolbar.btnInsertShape.menu.addItem(menuitem);
if (me.toolbar.btnInsertText.pressed) {
me.toolbar.btnInsertText.toggle(false, true);
}
if (e.type !== 'click')
me.toolbar.btnInsertShape.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape);
Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
}
});
var recents = Common.localStorage.getItem('sse-recent-shapes');
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) {
if (me.api) {
if (record) {
me._addAutoshape(true, record.get('data').shapeType);
me._isAddingShape = true;
}
if (me.toolbar.btnInsertText.pressed) {
me.toolbar.btnInsertText.toggle(false, true);
}
if (e.type !== 'click')
me.toolbar.btnInsertShape.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape);
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() {
@ -4440,7 +4428,8 @@ define([
textShapes: 'Shapes',
textIndicator: 'Indicators',
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 || {}));
});

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

@ -1463,7 +1463,7 @@ define([
iconCls: 'btn-change-shape',
menu : new Common.UI.Menu({
menuAlign: 'tr-br',
cls: 'menu-shapes',
cls: 'menu-shapes menu-change-shape',
items: []
}),
dataHint: '1',
@ -1659,46 +1659,33 @@ define([
fillAutoShapes: function() {
var me = this,
shapesStore = this.application.getCollection('ShapeGroups'),
count = shapesStore.length;
recents = Common.localStorage.getItem('sse-recent-shapes');
var onShowAfter = function(menu) {
for (var i=-1; i<count-1 && count>0; i++) {
var store = shapesStore.at(i > -1 ? i : 0).get('groupStore');
if (i<0) {
store = store.clone();
store.shift();
}
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el),
store: store,
parentMenu: menu.items[i+1].menu,
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>')
});
shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
me.api.asc_changeShapeType(record.get('data').shapeType);
Common.NotificationCenter.trigger('edit:complete', me);
}
if (e.type !== 'click')
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>') }
]
})
for (var i = 0; i < 2; i++) {
var menuitem = new Common.UI.MenuItem({
template: _.template('<div id="id-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'),
index: i
});
me.btnChangeShape.menu.addItem(menuitem);
var shapePicker = new Common.UI.DataViewShape({
el: $('#id-change-shape-menu-' + i),
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.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) {
if (me.api) {
me.api.asc_changeShapeType(record.get('data').shapeType);
Common.NotificationCenter.trigger('edit:complete', me);
}
if (e.type !== 'click')
me.btnChangeShape.menu.hide();
});
me.btnChangeShape.menu.addItem(menuItem);
}
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
@ -1986,6 +1973,7 @@ define([
textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point',
textAngle: 'Angle'
textAngle: 'Angle',
textRecentlyUsed: 'Recently Used'
}, SSE.Views.ShapeSettings || {}));
});

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

@ -803,7 +803,7 @@ define([
enableToggle: true,
caption : me.capInsertShape,
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',
dataHintDirection: 'bottom',
dataHintOffset: 'small'