Merge pull request #1880 from Basher03/feature/cell-style-groups

Groups for cell styles and table templates in spreadsheeteditor
This commit is contained in:
Julia Radzhabova 2022-07-29 16:47:14 +03:00 committed by GitHub
commit d1dfb29cc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 283 additions and 20 deletions

View file

@ -2102,6 +2102,7 @@ define([
el: element,
parentMenu : menu,
restoreHeight: 300,
groups: new Common.UI.DataViewGroupStore(),
style: 'max-height: 300px;',
store: me.getCollection('TableTemplates'),
itemTemplate: _.template('<div class="item-template"><img src="<%= imageUrl %>" id="<%= id %>" style="width:60px;height:44px;"></div>'),
@ -2158,30 +2159,66 @@ define([
onApiInitTableTemplates: function(images) {
var me = this;
var store = this.getCollection('TableTemplates');
this.fillTableTemplates();
if (store) {
var templates = [];
var groups = [
{id: 'menu-table-group-custom', caption: me.txtGroupTable_Custom, templates: []},
{id: 'menu-table-group-light', caption: me.txtGroupTable_Light, templates: []},
{id: 'menu-table-group-medium', caption: me.txtGroupTable_Medium, templates: []},
{id: 'menu-table-group-dark', caption: me.txtGroupTable_Dark, templates: []},
{id: 'menu-table-group-no-name', caption: '&nbsp', templates: []},
];
_.each(images, function(item) {
var tip = item.asc_getDisplayName();
var groupItem = '';
if (item.asc_getType()==0) {
var arr = tip.split(' '),
last = arr.pop();
if(tip == 'None'){
groupItem = 'menu-table-group-light';
}
else {
if(arr.length > 0){
groupItem = 'menu-table-group-' + arr[arr.length - 1].toLowerCase();
}
if(groups.some(function(item) {return item.id === groupItem;}) == false) {
groupItem = 'menu-table-group-no-name';
}
}
arr = 'txtTable_' + arr.join('');
tip = me[arr] ? me[arr] + ' ' + last : tip;
}
templates.push({
else {
groupItem = 'menu-table-group-custom'
}
groups.filter(function(item){ return item.id == groupItem; })[0].templates.push({
name : item.asc_getName(),
caption : item.asc_getDisplayName(),
type : item.asc_getType(),
imageUrl : item.asc_getImage(),
group : groupItem,
allowSelected : true,
selected : false,
tip : tip
});
});
groups = groups.filter(function(item, index){
return item.templates.length > 0
});
groups.forEach(function(item){
templates = templates.concat(item.templates);
delete item.templates;
});
me.toolbar.mnuTableTemplatePicker.groups.reset(groups);
store.reset(templates);
}
this.fillTableTemplates();
},
onApiInitEditorStyles: function(styles){
@ -2198,6 +2235,13 @@ define([
var mainController = this.getApplication().getController('Main');
var count = listStyles.menuPicker.store.length;
var rec = listStyles.menuPicker.getSelectedRec();
var groups = [];
for (var i = 0; i < 4; i++) { groups.push('menu-style-group-color'); }
for (var i = 0; i < 8; i++) { groups.push('menu-style-group-model'); }
for (var i = 0; i < 6; i++) { groups.push('menu-style-group-title'); }
for (var i = 0; i < 24; i++) { groups.push('menu-style-group-themed'); }
for (var i = 0; i < 5; i++) { groups.push('menu-style-group-number'); }
if (count>0 && count==styles.length) {
var data = listStyles.menuPicker.dataViewItems;
data && _.each(styles, function(style, index){
@ -2211,14 +2255,49 @@ define([
});
} else {
var arr = [];
_.each(styles, function(style){
var countCustomStyles = 0;
var hasNoNameGroup = false;
_.each(styles, function(style, index){
var styleGroup;
if(style.asc_getType() == 0) {
if(index - countCustomStyles < groups.length){
styleGroup = groups[index - countCustomStyles];
}
else {
styleGroup = 'menu-style-group-no-name';
hasNoNameGroup = true;
}
}
else {
styleGroup = 'menu-style-group-custom';
}
arr.push({
imageUrl: style.asc_getImage(),
name : style.asc_getName(),
group : styleGroup,
tip : mainController.translationTable[style.get_Name()] || style.get_Name(),
uid : Common.UI.getId()
});
if(style.asc_getType() == 1){
countCustomStyles += 1;
}
});
if(countCustomStyles == 0){
listStyles.groups.models.forEach(function(style) {
if(style.id === 'menu-style-group-custom'){
listStyles.groups.remove(style);
}
});
}
if(hasNoNameGroup === false){
listStyles.groups.models.forEach(function(style) {
if(style.id === 'menu-style-group-no-name'){
listStyles.groups.remove(style);
}
});
}
listStyles.menuPicker.store.reset(arr);
}
if (listStyles.menuPicker.store.length > 0 && listStyles.rendered) {
@ -5063,6 +5142,10 @@ define([
txtTable_TableStyleMedium: 'Table Style Medium',
txtTable_TableStyleDark: 'Table Style Dark',
txtTable_TableStyleLight: 'Table Style Light',
txtGroupTable_Custom: 'Custom',
txtGroupTable_Light: 'Light',
txtGroupTable_Medium: 'Medium',
txtGroupTable_Dark: 'Dark',
textInsert: 'Insert',
txtInsertCells: 'Insert Cells',
txtDeleteCells: 'Delete Cells',

View file

@ -560,21 +560,64 @@ define([
data[index].model.set('imageUrl', img, {silent: true});
$(data[index].el).find('img').attr('src', img);
});
} else {
var arr = [];
_.each(Templates, function(template){
arr.push({
} else {
var templates = [];
var groups = [
{id: 'menu-table-group-custom', caption: self.txtGroupTable_Custom, templates: []},
{id: 'menu-table-group-light', caption: self.txtGroupTable_Light, templates: []},
{id: 'menu-table-group-medium', caption: self.txtGroupTable_Medium, templates: []},
{id: 'menu-table-group-dark', caption: self.txtGroupTable_Dark, templates: []},
{id: 'menu-table-group-no-name', caption: '&nbsp', templates: []},
];
_.each(Templates, function(item){
var tip = item.asc_getDisplayName();
var groupItem = '';
if (item.asc_getType()==0) {
var arr = tip.split(' '),
last = arr.pop();
if(tip == 'None'){
groupItem = 'menu-table-group-light';
}
else {
if(arr.length > 0){
groupItem = 'menu-table-group-' + arr[arr.length - 1].toLowerCase();
}
if(groups.some(function(item) {return item.id === groupItem;}) == false) {
groupItem = 'menu-table-group-no-name';
}
}
arr = 'txtTable_' + arr.join('');
tip = self[arr] ? self[arr] + ' ' + last : tip;
}
else {
groupItem = 'menu-table-group-custom'
}
groups.filter(function(item){ return item.id == groupItem; })[0].templates.push({
id : Common.UI.getId(),
name : template.asc_getName(),
caption : template.asc_getDisplayName(),
type : template.asc_getType(),
imageUrl : template.asc_getImage(),
name : item.asc_getName(),
caption : item.asc_getDisplayName(),
type : item.asc_getType(),
imageUrl : item.asc_getImage(),
group : groupItem,
allowSelected : true,
selected : false,
tip : template.asc_getDisplayName()
tip : tip
});
});
self.mnuTableTemplatePicker.store.reset(arr);
groups = groups.filter(function(item, index){
return item.templates.length > 0
});
groups.forEach(function(item){
templates = templates.concat(item.templates);
delete item.templates;
});
self.mnuTableTemplatePicker.groups.reset(groups);
self.mnuTableTemplatePicker.store.reset(templates);
}
},
@ -700,7 +743,15 @@ define([
textRemDuplicates: 'Remove duplicates',
textSlicer: 'Insert slicer',
textPivot: 'Insert pivot table',
textActions: 'Table actions'
textActions: 'Table actions',
txtTable_TableStyleMedium: 'Table Style Medium',
txtTable_TableStyleDark: 'Table Style Dark',
txtTable_TableStyleLight: 'Table Style Light',
txtGroupTable_Custom: 'Custom',
txtGroupTable_Light: 'Light',
txtGroupTable_Medium: 'Medium',
txtGroupTable_Dark: 'Dark',
}, SSE.Views.TableSettings || {}));
});

View file

@ -1285,7 +1285,16 @@ define([
itemWidth : 112,
itemHeight : 40,
style: 'min-width:158px;',
menuMaxHeight : 226,
groups: new Common.UI.DataViewGroupStore([
{id: 'menu-style-group-custom', caption: this.textCustom },
{id: 'menu-style-group-color', caption: this.textGoodBadAndNeutral },
{id: 'menu-style-group-model', caption: this.textDataAndModel },
{id: 'menu-style-group-title', caption: this.textTitlesAndHeadings },
{id: 'menu-style-group-themed', caption: this.textThemedCallStyles },
{id: 'menu-style-group-number', caption: this.textNumberFormat },
{id: 'menu-style-group-no-name', caption: this.textNoName }
]),
menuMaxHeight : 350,
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells']],
dataHint : '1',
dataHintDirection: 'bottom',
@ -1297,8 +1306,9 @@ define([
minMenuColumn = 6;
if (menu.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1;
var itemEl = $(menu.menuRoot.find('.dataview .item').get(0));
var groupContainerEl = $(menu.menuRoot.find('.dataview .group-items-container').get(0));
var itemMargin = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
Common.Utils.applicationPixelRatio() > 1 && Common.Utils.applicationPixelRatio() < 2 && (itemMargin = -1/Common.Utils.applicationPixelRatio());
var itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
(cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) +
@ -1311,11 +1321,13 @@ define([
menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl';
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1;
var dataviewEl = $(menu.menuRoot.find('.dataview').get(0));
var menuWidth = + columnCount * (itemWidth + itemMargin) + parseFloat(groupContainerEl.css('padding-left')) + parseFloat(groupContainerEl.css('padding-right')) + parseFloat(dataviewEl.css('padding-left')) + parseFloat(dataviewEl.css('padding-right'));
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - menuWidth - 1;
menu.setOffset(Math.min(offset, 0));
menu.cmpEl.css({
'width' : columnCount * (itemWidth + itemMargin),
'width' : menuWidth,
'min-height': cmp.cmpEl.height()
});
}
@ -3280,6 +3292,13 @@ define([
textDone: 'Done',
tipTextFormatting: 'More text formatting tools',
tipHAligh: 'Horizontal Align',
tipVAligh: 'Vertical Align'
tipVAligh: 'Vertical Align',
textCustom: 'Custom',
textGoodBadAndNeutral: 'Good, Bad, and Neutral',
textDataAndModel: 'Data and Model',
textTitlesAndHeadings: 'Titles and Headings',
textThemedCallStyles: 'Themed Call Styles',
textNumberFormat: 'Number Format',
textNoName: 'No name'
}, SSE.Views.Toolbar || {}));
});

View file

@ -1484,6 +1484,10 @@
"SSE.Controllers.Toolbar.txtTable_TableStyleDark": "Table Style Dark",
"SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Table Style Light",
"SSE.Controllers.Toolbar.txtTable_TableStyleMedium": "Table Style Medium",
"SSE.Controllers.Toolbar.txtGroupTable_Custom": "Custom",
"SSE.Controllers.Toolbar.txtGroupTable_Light": "Light",
"SSE.Controllers.Toolbar.txtGroupTable_Medium": "Medium",
"SSE.Controllers.Toolbar.txtGroupTable_Dark": "Dark",
"SSE.Controllers.Toolbar.warnLongOperation": "The operation you are about to perform might take rather much time to complete.<br>Are you sure you want to continue?",
"SSE.Controllers.Toolbar.warnMergeLostData": "Only the data from the upper-left cell will remain in the merged cell. <br>Are you sure you want to continue?",
"SSE.Controllers.Viewport.textFreezePanes": "Freeze Panes",
@ -3290,6 +3294,13 @@
"SSE.Views.TableSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
"SSE.Views.TableSettingsAdvanced.textAltTitle": "Title",
"SSE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings",
"SSE.Views.TableSettingsAdvanced.txtTable_TableStyleDark": "Table Style Dark",
"SSE.Views.TableSettingsAdvanced.txtTable_TableStyleLight": "Table Style Light",
"SSE.Views.TableSettingsAdvanced.txtTable_TableStyleMedium": "Table Style Medium",
"SSE.Views.TableSettingsAdvanced.txtGroupTable_Custom": "Custom",
"SSE.Views.TableSettingsAdvanced.txtGroupTable_Light": "Light",
"SSE.Views.TableSettingsAdvanced.txtGroupTable_Medium": "Medium",
"SSE.Views.TableSettingsAdvanced.txtGroupTable_Dark": "Dark",
"SSE.Views.TextArtSettings.strBackground": "Background color",
"SSE.Views.TextArtSettings.strColor": "Color",
"SSE.Views.TextArtSettings.strFill": "Fill",
@ -3455,6 +3466,13 @@
"SSE.Views.Toolbar.textVertical": "Vertical Text",
"SSE.Views.Toolbar.textWidth": "Width",
"SSE.Views.Toolbar.textZoom": "Zoom",
"SSE.Views.Toolbar.textCustom": "Custom",
"SSE.Views.Toolbar.textGoodBadAndNeutral": "Good, Bad and Neutral",
"SSE.Views.Toolbar.textDataAndModel": "Data and Model",
"SSE.Views.Toolbar.textTitlesAndHeadings": "Titles and Headings",
"SSE.Views.Toolbar.textThemedCallStyles": "Themed Call Styles",
"SSE.Views.Toolbar.textNumberFormat": "Number Format",
"SSE.Views.Toolbar.textNoName": "No Name",
"SSE.Views.Toolbar.tipAlignBottom": "Align bottom",
"SSE.Views.Toolbar.tipAlignCenter": "Align center",
"SSE.Views.Toolbar.tipAlignJust": "Justified",

View file

@ -1481,6 +1481,10 @@
"SSE.Controllers.Toolbar.txtTable_TableStyleDark": "Стиль таблицы: темный",
"SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Стиль таблицы: светлый",
"SSE.Controllers.Toolbar.txtTable_TableStyleMedium": "Стиль таблицы: средний",
"SSE.Controllers.Toolbar.txtGroupTable_Custom": "Пользовательский",
"SSE.Controllers.Toolbar.txtGroupTable_Light": "Светлый",
"SSE.Controllers.Toolbar.txtGroupTable_Medium": "Средний",
"SSE.Controllers.Toolbar.txtGroupTable_Dark": "Тёмный",
"SSE.Controllers.Toolbar.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?",
"SSE.Controllers.Toolbar.warnMergeLostData": "В объединенной ячейке останутся только данные из левой верхней ячейки.<br>Вы действительно хотите продолжить?",
"SSE.Controllers.Viewport.textFreezePanes": "Закрепить области",
@ -3279,6 +3283,13 @@
"SSE.Views.TableSettings.textTemplate": "По шаблону",
"SSE.Views.TableSettings.textTotal": "Итоговая",
"SSE.Views.TableSettings.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?",
"SSE.Views.TableSettings.txtTable_TableStyleDark": "Стиль таблицы: темный",
"SSE.Views.TableSettings.txtTable_TableStyleLight": "Стиль таблицы: светлый",
"SSE.Views.TableSettings.txtTable_TableStyleMedium": "Стиль таблицы: средний",
"SSE.Views.TableSettings.txtGroupTable_Custom": "Пользовательский",
"SSE.Views.TableSettings.txtGroupTable_Light": "Светлый",
"SSE.Views.TableSettings.txtGroupTable_Medium": "Средний",
"SSE.Views.TableSettings.txtGroupTable_Dark": "Тёмный",
"SSE.Views.TableSettingsAdvanced.textAlt": "Альтернативный текст",
"SSE.Views.TableSettingsAdvanced.textAltDescription": "Описание",
"SSE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.",
@ -3449,6 +3460,13 @@
"SSE.Views.Toolbar.textVertical": "Вертикальный текст",
"SSE.Views.Toolbar.textWidth": "Ширина",
"SSE.Views.Toolbar.textZoom": "Масштаб",
"SSE.Views.Toolbar.textCustom": "Пользовательский",
"SSE.Views.Toolbar.textGoodBadAndNeutral": "Хороший, плохой и нейтральный",
"SSE.Views.Toolbar.textDataAndModel": "Данные и модель",
"SSE.Views.Toolbar.textTitlesAndHeadings": "Названия и заголовки",
"SSE.Views.Toolbar.textThemedCallStyles": "Стили ячеек с темой",
"SSE.Views.Toolbar.textNumberFormat": "Числовой формат",
"SSE.Views.Toolbar.textNoName": "Без имени",
"SSE.Views.Toolbar.tipAlignBottom": "Выровнять по нижнему краю",
"SSE.Views.Toolbar.tipAlignCenter": "Выровнять по центру",
"SSE.Views.Toolbar.tipAlignJust": "Выровнять по ширине",

View file

@ -221,3 +221,25 @@
.box-shadow(none);
}
}
#id-table-menu-template {
.group-description {
padding: 3px 0 3px 10px;
.font-weight-bold();
}
.group-items-container {
.item {
&:hover {
.box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
}
&.selected {
.box-shadow(0 0 0 2px @border-preview-select-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
}
}
}
}

View file

@ -146,3 +146,55 @@
margin-right: 2px;
}
}
#id-toolbar-menu-table-templates {
.group-description {
padding: 3px 0 3px 10px;
.font-weight-bold();
}
.group-items-container {
.item {
&:hover {
.box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
}
&.selected {
.box-shadow(0 0 0 2px @border-preview-select-ie) !important;
.box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
}
}
}
}
.combo-styles {
.menu-picker-container .dataview {
padding: 10px 15px 0 5px;
}
.group-description {
padding: 3px 0 3px 10px;
.font-weight-bold();
}
.group-items-container {
padding-bottom: 1px;
padding-right: 1px;
}
.grouped-data .group-items-container .item {
margin: 0px -1px -1px 0px;
box-shadow: none;
&:hover {
.box-shadow(inset 0 0 0 2px @border-preview-hover-ie) !important;
.box-shadow(inset 0 0 0 @scaled-two-px-value @border-preview-hover) !important;
}
&.selected {
.box-shadow(inset 0 0 0 2px @border-preview-select-ie) !important;
.box-shadow(inset 0 0 0 @scaled-two-px-value @border-preview-select) !important;
}
}
}