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

Merge pull request #1979 from ONLYOFFICE/feature/cell-style-groups

Browse source 
Feature/cell style groups
This commit is contained in:
Julia Radzhabova 2022-09-24 22:15:07 +03:00 committed by GitHub
parent 71434d517d cd8211ffde
commit 0c2502056d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 867 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
apps/common/main/lib/component/ComboDataView.js
View file

@ -56,6 +56,7 @@ define([
itemWidth : 80,
itemHeight : 40,
menuMaxHeight : 300,
autoWidth : false,
enableKeyEvents : false,
beforeOpenHandler : null,
additionalMenuItems : null,
@ -87,11 +88,13 @@ define([
this.menuMaxHeight = this.options.menuMaxHeight;
this.beforeOpenHandler = this.options.beforeOpenHandler;
this.showLast = this.options.showLast;
this.wrapWidth = 0;
this.rootWidth = 0;
this.rootHeight = 0;
this.rendered = false;
this.needFillComboView = false;
this.minWidth = this.options.minWidth;
this.minWidth = this.options.minWidth;
this.autoWidth = this.initAutoWidth = (Common.Utils.isIE10 || Common.Utils.isIE11) ? false : this.options.autoWidth;
this.delayRenderTips = this.options.delayRenderTips || false;
this.itemTemplate = this.options.itemTemplate || _.template([
'<div class="style" id="<%= id %>">',
@ -208,10 +211,12 @@ define([
me.fieldPicker.el.addEventListener('contextmenu', _.bind(me.onPickerComboContextMenu, me), false);
me.menuPicker.el.addEventListener('contextmenu', _.bind(me.onPickerComboContextMenu, me), false);
Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
me.onResize();
me.rendered = true;
me.trigger('render:after', me);
}
if (this.disabled) {
@ -221,8 +226,26 @@ define([
return this;
},
onMoreToggle: function(btn, state) {
if(state) {
this.checkSize();
}
},
checkSize: function() {
if (this.cmpEl && this.cmpEl.is(':visible')) {
if(this.autoWidth && this.menuPicker.store.length > 0) {
var wrapWidth = this.$el.width();
if(wrapWidth != this.wrapWidth || this.needFillComboView){
this.wrapWidth = wrapWidth;
this.autoChangeWidth();
var picker = this.menuPicker;
var record = picker.getSelectedRec();
this.fillComboView(record || picker.store.at(0), !!record, true);
}
}
var me = this,
width = this.cmpEl.width(),
height = this.cmpEl.height();
@ -265,7 +288,46 @@ define([
if (!this.isSuspendEvents)
this.trigger('resize', this);
},
autoChangeWidth: function() {
if(this.menuPicker.dataViewItems[0]){
var wrapEl = this.$el;
var wrapWidth = wrapEl.width();
var itemEl = this.menuPicker.dataViewItems[0].$el;
var itemWidth = this.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + 2 * parseFloat(itemEl.css('border-width'));
var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
var fieldPickerEl = this.fieldPicker.$el;
var fieldPickerPadding = parseFloat(fieldPickerEl.css('padding-right'));
var fieldPickerBorder = parseFloat(fieldPickerEl.css('border-width'));
var dataviewPaddings = parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-left')) + parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-right'));
var cmbDataViewEl = this.cmpEl;
var cmbDataViewPaddings = parseFloat(cmbDataViewEl.css('padding-left')) + parseFloat(cmbDataViewEl.css('padding-right'));
var itemsCount = Math.floor((wrapWidth - fieldPickerPadding - dataviewPaddings - 2 * fieldPickerBorder - cmbDataViewPaddings) / (itemWidth + itemMargins));
if(itemsCount > this.store.length)
itemsCount = this.store.length;
var widthCalc = Math.ceil((itemsCount * (itemWidth + itemMargins) + fieldPickerPadding + dataviewPaddings + 2 * fieldPickerBorder + cmbDataViewPaddings) * 10) / 10;
var maxWidth = parseFloat(cmbDataViewEl.css('max-width'));
if(widthCalc > maxWidth)
widthCalc = maxWidth;
cmbDataViewEl.css('width', widthCalc);
if(this.initAutoWidth) {
this.initAutoWidth = false;
cmbDataViewEl.css('position', 'absolute');
cmbDataViewEl.css('top', '50%');
cmbDataViewEl.css('bottom', '50%');
cmbDataViewEl.css('margin', 'auto 0');
}
}
},
onBeforeShowMenu: function(e) {
var me = this;

30
apps/common/main/lib/component/DataView.js
View file

@ -328,6 +328,7 @@ define([
if (this.listenStoreEvents) {
this.listenTo(this.store, 'add', this.onAddItem);
this.listenTo(this.store, 'reset', this.onResetItems);
this.groups && this.listenTo(this.groups, 'add', this.onAddGroup);
}
this.onResetItems();
@ -510,6 +511,35 @@ define([
}
},
onAddGroup: function(group) {
var el = $(_.template([
'<% if (group.headername !== undefined) { %>',
'<div class="header-name"><%= group.headername %></div>',
'<% } %>',
'<div class="grouped-data <% if (group.inline) { %> group.inline <% } %> <% if (!_.isEmpty(group.caption)) { %> margin <% } %>" id="<%= group.id %>">',
'<% if (!_.isEmpty(group.caption)) { %>',
'<div class="group-description">',
'<span><%= group.caption %></span>',
'</div>',
'<% } %>',
'<div class="group-items-container">',
'</div>',
'</div>'
].join(''))({
group: group.toJSON()
}));
var innerEl = $(this.el).find('.inner').addBack().filter('.inner');
if (innerEl) {
var idx = _.indexOf(this.groups.models, group);
var innerDivs = innerEl.find('.grouped-data');
if (idx > 0)
$(innerDivs.get(idx - 1)).after(el);
else {
(innerDivs.length > 0) ? $(innerDivs[idx]).before(el) : innerEl.append(el);
}
}
},
onResetItems: function() {
_.each(this.dataViewItems, function(item) {
var tip = item.$el.data('bs.tooltip');

2
apps/common/main/lib/component/Mixtbar.js
View file

@ -793,7 +793,7 @@ define([
hideMoreBtns: function() {
for (var btn in btnsMore) {
btnsMore[btn] && btnsMore[btn].toggle(false);
btnsMore[btn] && btnsMore[btn].isActive() && btnsMore[btn].toggle(false);
}
}
};

2
apps/common/main/lib/view/ExternalOleEditor.js
View file

@ -51,7 +51,7 @@ define([
sdkplaceholder: 'id-ole-editor-placeholder',
initwidth: 900,
initheight: 700,
minwidth: 840,
minwidth: 860,
minheight: 275
}, options);

53
apps/common/main/resources/less/combo-dataview.less
View file

@ -81,17 +81,17 @@
}
.combo-styles {
.combo-styles(@combo-dataview-height: 46px, @item-height: 46px, @row-count: 1) {
@combo-dataview-button-width: 30px;
@combo-dataview-height: 46px;
@combo-dataview-height-calc: calc(40px + 2 * @scaled-two-px-value + 2 * @scaled-one-px-value);
@item-height-calc: calc(@item-height - 6px + 2 * @scaled-two-px-value + 2 * @scaled-one-px-value);
@combo-dataview-height-calc: calc(@combo-dataview-height - ((@row-count - 1) * @scaled-one-px-value) - @row-count * (6px - 2 * @scaled-two-px-value - 2 * @scaled-one-px-value));
height: @combo-dataview-height;
height: @combo-dataview-height-calc;
.view {
margin-right: -@combo-dataview-button-width;
padding-right: @combo-dataview-button-width;
padding-right: calc(@combo-dataview-button-width - @scaled-two-px-value);
.border-left-radius(0);
@ -116,8 +116,8 @@
@minus-px: calc((-1px / @pixel-ratio-factor));
margin: 0 @minus-px-ie @minus-px-ie 0;
margin: 0 @minus-px @minus-px 0;
height: @combo-dataview-height;
height: @combo-dataview-height-calc;
height: @item-height;
height: @item-height-calc;
background-color: @background-normal-ie;
background-color: @background-normal;
display: flex;
@ -216,6 +216,14 @@
}
}
.combo-styles {
.combo-styles()
}
.combo-cell-styles {
.combo-styles(52px, 26px, 2);
}
.combo-template(@combo-dataview-height: 64px) {
@combo-dataview-button-width: 18px;
@ -344,17 +352,42 @@
.combo-template(60px);
top: -4px;
padding-right: 12px;
position: absolute;
padding-right: 12px;
.more-container & {
padding-right: 0;
position: static;
}
.view .dataview, .dropdown-menu {
padding: 1px;
}
.dataview {
.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;
}
}
}
.dropdown-menu {
padding: 5px 1px 5px 1px;
.dataview {
.group-description {
padding: 3px 0 3px 10px;
.font-weight-bold();
}
}
}
}
.combo-slicer-style {
@ -372,7 +405,7 @@
.view {
margin-right: -@combo-dataview-button-width;
padding-right: @combo-dataview-button-width;
padding-right: calc(@combo-dataview-button-width - @scaled-one-px-value);
}
.view .dataview, .dropdown-menu {

2
apps/documenteditor/main/app/template/Toolbar.template
View file

@ -87,7 +87,7 @@
</div>
</div>
<div class="separator long invisible"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="min-width: 160px;width: 100%; " data-group-width="100%"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="min-width: 151px;width: 100%; " data-group-width="100%"></div>
</section>
<section class="panel" data-tab="ins">
<div class="group">

82
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -761,6 +761,14 @@ define([
this._state.beginPreviewStyles = true;
this._state.currentStyleFound = false;
this._state.previewStylesCount = count;
this._state.groups = {
'menu-table-group-custom': {id: 'menu-table-group-custom', caption: this.txtGroupTable_Custom, index: 0, templateCount: 0},
'menu-table-group-plain': {id: 'menu-table-group-plain', caption: this.txtGroupTable_Plain, index: 1, templateCount: 0},
'menu-table-group-grid': {id: 'menu-table-group-grid', caption: this.txtGroupTable_Grid, index: 2, templateCount: 0},
'menu-table-group-list': {id: 'menu-table-group-list', caption: this.txtGroupTable_List, index: 3, templateCount: 0},
'menu-table-group-bordered-and-lined': {id: 'menu-table-group-bordered-and-lined', caption: this.txtGroupTable_BorderedAndLined, index: 4, templateCount: 0},
'menu-table-group-no-name': {id: 'menu-table-group-no-name', caption: '&nbsp', index: 5, templateCount: 0},
};
},
onEndTableStylesPreview: function(){
@ -774,29 +782,73 @@ define([
onAddTableStylesPreview: function(Templates){
var self = this;
var arr = [];
_.each(Templates, function(template){
var tip = template.asc_getDisplayName();
var groupItem = '';
if (template.asc_getType()==0) {
['Table Grid', 'Plain Table', 'Grid Table', 'List Table', 'Light', 'Dark', 'Colorful', 'Accent'].forEach(function(item){
var str = 'txtTable_' + item.replace(' ', '');
var arr = tip.split(' ');
if(new RegExp('Table Grid', 'i').test(tip)){
groupItem = 'menu-table-group-plain';
}
else if(new RegExp('Lined|Bordered', 'i').test(tip)) {
groupItem = 'menu-table-group-bordered-and-lined';
}
else{
if(arr[0]){
groupItem = 'menu-table-group-' + arr[0].toLowerCase();
}
if(self._state.groups.hasOwnProperty(groupItem) == false) {
groupItem = 'menu-table-group-no-name';
}
}
['Table Grid', 'Plain Table', 'Grid Table', 'List Table', 'Light', 'Dark', 'Colorful', 'Accent', 'Bordered & Lined', 'Bordered', 'Lined'].forEach(function(item){
var str = 'txtTable_' + item.replace('&', 'And').replace(new RegExp(' ', 'g'), '');
if (self[str])
tip = tip.replace(item, self[str]);
});
}
arr.push({
else {
groupItem = 'menu-table-group-custom'
}
var templateObj = {
imageUrl: template.asc_getImage(),
id : Common.UI.getId(),
group : groupItem,
templateId: template.asc_getId(),
tip : tip
});
};
var templateIndex = 0;
for(var group in self._state.groups) {
if(self._state.groups[group].index <= self._state.groups[groupItem].index) {
templateIndex += self._state.groups[group].templateCount;
}
}
if (self._state.beginPreviewStyles) {
self._state.beginPreviewStyles = false;
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.groups.reset(self._state.groups[groupItem]);
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(templateObj);
self.mnuTableTemplatePicker.groups.comparator = function(item) {
return item.get('index');
};
}
else {
if(self._state.groups[groupItem].templateCount == 0) {
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.groups.add(self._state.groups[groupItem]);
}
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.add(templateObj, {at: templateIndex});
}
self._state.groups[groupItem].templateCount += 1;
});
if (this._state.beginPreviewStyles) {
this._state.beginPreviewStyles = false;
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(arr);
} else
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.add(arr);
!this._state.currentStyleFound && this.selectCurrentTableStyle();
},
@ -989,7 +1041,15 @@ define([
txtTable_Dark: 'Dark',
txtTable_Colorful: 'Colorful',
txtTable_Accent: 'Accent',
textConvert: 'Convert Table to Text'
txtTable_Lined: 'Lined',
txtTable_Bordered: 'Bordered',
txtTable_BorderedAndLined: 'Bordered & Lined',
txtGroupTable_Custom: 'Custom',
txtGroupTable_Plain: 'Plain Tables',
txtGroupTable_Grid: 'Grid Tables',
txtGroupTable_List: 'List Tables',
txtGroupTable_BorderedAndLined: 'Bordered & Lined Tables',
textConvert: 'Convert Table to Text',
}, DE.Views.TableSettings || {}));
});

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

@ -1483,7 +1483,7 @@ define([
_set.viewFormMode, _set.lostConnect, _set.disableOnStart],
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:150px;',
style: 'min-width:139px;',
// hint : this.tipParagraphStyle,
dataHint: '1',
dataHintDirection: 'bottom',
@ -1491,6 +1491,7 @@ define([
enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem],
delayRenderTips: true,
autoWidth: true,
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<div style="background-image: url(<%= imageUrl %>); width: ' + itemWidth + 'px; height: ' + itemHeight + 'px;"></div>',

8
apps/documenteditor/main/locale/en.json
View file

@ -2600,12 +2600,20 @@
"DE.Views.TableSettings.txtNoBorders": "No borders",
"DE.Views.TableSettings.txtTable_Accent": "Accent",
"DE.Views.TableSettings.txtTable_Colorful": "Colorful",
"DE.Views.TableSettings.txtTable_Lined": "Lined",
"DE.Views.TableSettings.txtTable_Bordered": "Bordered",
"DE.Views.TableSettings.txtTable_BorderedAndLined": "Bordered & Lined",
"DE.Views.TableSettings.txtTable_Dark": "Dark",
"DE.Views.TableSettings.txtTable_GridTable": "Grid Table",
"DE.Views.TableSettings.txtTable_Light": "Light",
"DE.Views.TableSettings.txtTable_ListTable": "List Table",
"DE.Views.TableSettings.txtTable_PlainTable": "Plain Table",
"DE.Views.TableSettings.txtTable_TableGrid": "Table Grid",
"DE.Views.TableSettings.txtGroupTable_Custom": "Custom",
"DE.Views.TableSettings.txtGroupTable_Plain": "Plain Tables",
"DE.Views.TableSettings.txtGroupTable_Grid": "Grid Tables",
"DE.Views.TableSettings.txtGroupTable_List": "List Tables",
"DE.Views.TableSettings.txtGroupTable_BorderedAndLined": "Bordered & Lined Tables",
"DE.Views.TableSettingsAdvanced.textAlign": "Alignment",
"DE.Views.TableSettingsAdvanced.textAlignment": "Alignment",
"DE.Views.TableSettingsAdvanced.textAllowSpacing": "Spacing between cells",

8
apps/documenteditor/main/locale/ru.json
View file

@ -2579,6 +2579,14 @@
"DE.Views.TableSettings.txtTable_ListTable": "Список-таблица",
"DE.Views.TableSettings.txtTable_PlainTable": "Таблица простая",
"DE.Views.TableSettings.txtTable_TableGrid": "Сетка таблицы",
"DE.Views.TableSettings.txtTable_Lined": "C подкладкой",
"DE.Views.TableSettings.txtTable_Bordered": "C границей",
"DE.Views.TableSettings.txtTable_BorderedAndLined": "C границей и подкладкой",
"DE.Views.TableSettings.txtGroupTable_Custom": "Пользовательский",
"DE.Views.TableSettings.txtGroupTable_Plain": "Таблицы простые",
"DE.Views.TableSettings.txtGroupTable_Grid": "Таблицы сеткой",
"DE.Views.TableSettings.txtGroupTable_List": "Таблицы списком",
"DE.Views.TableSettings.txtGroupTable_BorderedAndLined": "Таблицы с границей и подкладкой",
"DE.Views.TableSettingsAdvanced.textAlign": "Выравнивание",
"DE.Views.TableSettingsAdvanced.textAlignment": "Выравнивание",
"DE.Views.TableSettingsAdvanced.textAllowSpacing": "Интервалы между ячейками",

22
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -168,3 +168,25 @@
margin-top: 4px;
}
}
#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;
}
}
}
}

6
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -110,7 +110,7 @@
</div>
</div>
<div class="separator long invisible"></div>
<div class="group flex small field-styles" id="slot-field-styles" style="width: 100%; min-width: 140px;" data-group-width="100%"></div>
<div class="group flex small field-styles" id="slot-field-styles" style="width: 100%; min-width: 136px;" data-group-width="100%"></div>
</section>
<section class="panel" data-tab="ins">
<div class="group">
@ -153,7 +153,7 @@
</div>
</section>
<section id="transitions-panel" class="panel" data-tab="transit">
<div class="group flex small" id="transit-field-effects" style="width: 900px; max-width: 900px; min-width: 120px;" data-group-width="900px"></div>
<div class="group flex small" id="transit-field-effects" style="width: 854px; max-width: 854px; min-width: 120px;" data-group-width="854px"></div>
<div class="group small">
<span class="btn-slot text x-huge" id="transit-button-parameters"></span>
@ -189,7 +189,7 @@
</div>
</section>
<section id="animation-panel" class="panel" data-tab="animate">
<div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 220px;" data-group-width="700px"></div>
<div class="group flex small" id="animation-field-effects" style="width: 670px; max-width: 670px; min-width: 220px;" data-group-width="670px"></div>
<div class="group small">
<span class="btn-slot text x-huge" id="animation-button-parameters"></span>
</div>

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

@ -203,7 +203,7 @@ define([
cls: 'combo-transitions combo-animation',
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:210px;',
style: 'min-width:200px;',
itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= iconCls %>"></div>',

71
apps/presentationeditor/main/app/view/TableSettings.js
View file

@ -694,6 +694,14 @@ define([
this._state.beginPreviewStyles = true;
this._state.currentStyleFound = false;
this._state.previewStylesCount = count;
this._state.groups = {
'menu-table-group-custom': {id: 'menu-table-group-custom', caption: this.txtGroupTable_Custom, index: 0, templateCount: 0},
'menu-table-group-optimal': {id: 'menu-table-group-optimal', caption: this.txtGroupTable_Optimal, index: 1, templateCount: 0},
'menu-table-group-light': {id: 'menu-table-group-light', caption: this.txtGroupTable_Light, index: 2, templateCount: 0},
'menu-table-group-medium': {id: 'menu-table-group-medium', caption: this.txtGroupTable_Medium, index: 3, templateCount: 0},
'menu-table-group-dark': {id: 'menu-table-group-dark', caption: this.txtGroupTable_Dark, index: 4, templateCount: 0},
'menu-table-group-no-name': {id: 'menu-table-group-no-name', caption: '&nbsp', index: 5, templateCount: 0},
};
},
onEndTableStylesPreview: function(){
@ -707,28 +715,68 @@ define([
onAddTableStylesPreview: function(Templates){
var self = this;
var arr = [];
_.each(Templates, function(template){
var tip = template.asc_getDisplayName();
var groupItem = '';
if (template.asc_getType()==0) {
var arr = tip.split(' ');
if(new RegExp('No Style|Themed Style', 'i').test(tip)){
groupItem = 'menu-table-group-optimal';
}
else{
if(arr[0]){
groupItem = 'menu-table-group-' + arr[0].toLowerCase();
}
if(self._state.groups.hasOwnProperty(groupItem) == false) {
groupItem = 'menu-table-group-no-name';
}
}
['No Style', 'No Grid', 'Table Grid', 'Themed Style', 'Light Style', 'Medium Style', 'Dark Style', 'Accent'].forEach(function(item){
var str = 'txtTable_' + item.replace(' ', '');
if (self[str])
tip = tip.replace(new RegExp(item, 'g'), self[str]);
});
}
arr.push({
else {
groupItem = 'menu-table-group-custom'
}
var templateObj = {
imageUrl: template.asc_getImage(),
id : Common.UI.getId(),
templateId: template.asc_getId(),
group : groupItem,
tip : tip
});
};
var templateIndex = 0;
for(var group in self._state.groups) {
if(self._state.groups[group].index <= self._state.groups[groupItem].index) {
templateIndex += self._state.groups[group].templateCount;
}
}
if (self._state.beginPreviewStyles) {
self._state.beginPreviewStyles = false;
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.groups.reset(self._state.groups[groupItem]);
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(templateObj);
self.mnuTableTemplatePicker.groups.comparator = function(item) {
return item.get('index');
};
}
else {
if(self._state.groups[groupItem].templateCount == 0) {
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.groups.add(self._state.groups[groupItem]);
}
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.add(templateObj, {at: templateIndex});
}
self._state.groups[groupItem].templateCount += 1;
});
if (this._state.beginPreviewStyles) {
this._state.beginPreviewStyles = false;
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(arr);
} else
self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.add(arr);
!this._state.currentStyleFound && this.selectCurrentTableStyle();
},
@ -878,7 +926,12 @@ define([
txtTable_LightStyle: 'Light Style',
txtTable_MediumStyle: 'Medium Style',
txtTable_DarkStyle: 'Dark Style',
txtTable_Accent: 'Accent'
txtTable_Accent: 'Accent',
txtGroupTable_Custom: 'Custom',
txtGroupTable_Optimal: 'Best Match for Document',
txtGroupTable_Light: 'Light',
txtGroupTable_Medium: 'Medium',
txtGroupTable_Dark: 'Dark',
}, PE.Views.TableSettings || {}));
});

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

@ -1058,12 +1058,13 @@ define([
itemWidth: 88,
enableKeyEvents: true,
itemHeight: 40,
style: 'min-width:130px;',
style: 'min-width:123px;',
lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, -4',
delayRenderTips: true,
autoWidth: true,
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"></div>',

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

@ -142,7 +142,7 @@ define([
cls: 'combo-transitions',
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:110px;',
style: 'min-width:108px;',
itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>',

5
apps/presentationeditor/main/locale/en.json
View file

@ -2124,6 +2124,11 @@
"PE.Views.TableSettings.txtTable_NoStyle": "No Style",
"PE.Views.TableSettings.txtTable_TableGrid": "Table Grid",
"PE.Views.TableSettings.txtTable_ThemedStyle": "Themed Style",
"PE.Views.TableSettings.txtGroupTable_Custom": "Custom",
"PE.Views.TableSettings.txtGroupTable_Optimal": "Best Match for Document",
"PE.Views.TableSettings.txtGroupTable_Light": "Light",
"PE.Views.TableSettings.txtGroupTable_Medium": "Medium",
"PE.Views.TableSettings.txtGroupTable_Dark": "Dark",
"PE.Views.TableSettingsAdvanced.textAlt": "Alternative Text",
"PE.Views.TableSettingsAdvanced.textAltDescription": "Description",
"PE.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.",

5
apps/presentationeditor/main/locale/ru.json
View file

@ -2103,6 +2103,11 @@
"PE.Views.TableSettings.txtTable_NoStyle": "Нет стиля",
"PE.Views.TableSettings.txtTable_TableGrid": "сетка таблицы",
"PE.Views.TableSettings.txtTable_ThemedStyle": "Стиль из темы",
"PE.Views.TableSettings.txtGroupTable_Custom": "Пользовательский",
"PE.Views.TableSettings.txtGroupTable_Optimal": "Оптимальный для документа",
"PE.Views.TableSettings.txtGroupTable_Light": "Светлый",
"PE.Views.TableSettings.txtGroupTable_Medium": "Средний",
"PE.Views.TableSettings.txtGroupTable_Dark": "Темный",
"PE.Views.TableSettingsAdvanced.textAlt": "Альтернативный текст",
"PE.Views.TableSettingsAdvanced.textAltDescription": "Описание",
"PE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.",

22
apps/presentationeditor/main/resources/less/rightmenu.less
View file

@ -101,4 +101,26 @@
}
}
}
}
#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;
}
}
}
}

54
apps/spreadsheeteditor/main/app/controller/PivotTable.js
View file

@ -355,8 +355,8 @@ define([
var self = this,
styles = this.view.pivotStyles;
this._isTemplatesChanged = true;
var count = styles.menuPicker.store.length;
if (count>0 && count==Templates.length) {
var data = styles.menuPicker.dataViewItems;
data && _.each(Templates, function(template, index){
@ -367,20 +367,62 @@ define([
styles.fieldPicker.store.reset(styles.fieldPicker.store.models);
} else {
styles.menuPicker.store.reset([]);
var arr = [];
_.each(Templates, function(template){
arr.push({
var templates = [];
var groups = [
{id: 'menu-table-group-custom', caption: self.view.__proto__.txtGroupPivot_Custom, templates: []},
{id: 'menu-table-group-light', caption: self.view.__proto__.txtGroupPivot_Light, templates: []},
{id: 'menu-table-group-medium', caption: self.view.__proto__.txtGroupPivot_Medium, templates: []},
{id: 'menu-table-group-dark', caption: self.view.__proto__.txtGroupPivot_Dark, templates: []},
{id: 'menu-table-group-no-name', caption: '&nbsp', templates: []},
];
_.each(Templates, function(template, index){
var tip = template.asc_getDisplayName();
var groupItem = '';
if (template.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.view.__proto__[arr] ? self.view.__proto__[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(),
group : groupItem,
allowSelected : true,
selected : false,
tip : template.asc_getDisplayName()
tip : tip
});
});
styles.menuPicker.store.add(arr);
groups = groups.filter(function(item, index){
return item.templates.length > 0
});
groups.forEach(function(item){
templates = templates.concat(item.templates);
delete item.templates;
});
styles.groups.reset(groups);
styles.menuPicker.store.reset(templates);
}
},

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

@ -335,6 +335,7 @@ define([
toolbar.btnMerge.on('click', _.bind(this.onMergeCellsMenu, this, toolbar.btnMerge.menu, toolbar.btnMerge.menu.items[0]));
toolbar.btnMerge.menu.on('item:click', _.bind(this.onMergeCellsMenu, this));
toolbar.btnTableTemplate.menu.on('show:after', _.bind(this.onTableTplMenuOpen, this));
toolbar.btnCellStyle.menu.on('show:after', _.bind(this.onCellStyleMenuOpen, this));
toolbar.btnVisibleArea.menu.on('item:click', _.bind(this.onVisibleAreaMenu, this));
toolbar.btnVisibleAreaClose.on('click', _.bind(this.onVisibleAreaClose, this));
toolbar.cmbFontName.on('selected', _.bind(this.onFontNameSelect, this));
@ -2112,6 +2113,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>'),
@ -2188,37 +2190,139 @@ 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();
},
onCellStyleMenuOpen: function(menu) {
if (menu && this.toolbar.mnuCellStylePicker) {
var picker = this.toolbar.mnuCellStylePicker,
columnCount = 6;
if (picker.cmpEl) {
var itemEl = $(picker.cmpEl.find('.dataview.inner .item').get(0)),
itemMargin = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right')),
itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) : 106;
var menuWidth = columnCount * (itemMargin + itemWidth) + 15, // for scroller
menuMargins = parseFloat(picker.cmpEl.css('margin-left')) + parseFloat(picker.cmpEl.css('margin-right'));
if (menuWidth + menuMargins>Common.Utils.innerWidth())
menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-menuMargins-11)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 11;
picker.cmpEl.css({
'width': menuWidth
});
menu.alignPosition();
}
}
var scroller = this.toolbar.mnuCellStylePicker.scroller;
if (scroller) {
scroller.update({alwaysVisibleY: true});
scroller.scrollTop(0);
}
var val = this.toolbar.mnuCellStylePicker.store.findWhere({name: this._state.prstyle});
if (val)
this.toolbar.mnuCellStylePicker.selectRecord(val);
else
this.toolbar.mnuCellStylePicker.deselectAll();
},
onApiInitEditorStyles: function(styles){
window.styles_loaded = false;
if(this.toolbar.mode.isEditOle) {
var me = this;
function createPicker(element, menu) {
var picker = new Common.UI.DataView({
el: element,
parentMenu : menu,
restoreHeight: 380,
groups: new Common.UI.DataViewGroupStore(),
store : new Common.UI.DataViewStore(),
style: 'max-height: 380px;',
itemTemplate: _.template('<div class="style"><img src="<%= imageUrl %>" id="<%= id %>" style="width:100px;height:20px;"></div>'),
delayRenderTips: true
});
picker.on('item:click', function(picker, item, record) {
me.onListStyleSelect(picker, record);
});
if (picker.scroller) {
picker.scroller.update({alwaysVisibleY: true});
}
return picker;
}
if (_.isUndefined(this.toolbar.mnuCellStylePicker)) {
this.toolbar.mnuCellStylePicker = createPicker($('#id-toolbar-menu-cell-styles'), this.toolbar.btnCellStyle.menu);
}
}
var self = this,
listStyles = self.toolbar.listStyles;
listStyles = this.toolbar.mode.isEditOle ? self.toolbar.mnuCellStylePicker: self.toolbar.listStyles,
menuPicker = this.toolbar.mode.isEditOle ? listStyles: listStyles.menuPicker;
if (!listStyles) {
self.styles = styles;
@ -2226,10 +2330,26 @@ define([
}
var mainController = this.getApplication().getController('Main');
var count = listStyles.menuPicker.store.length;
var rec = listStyles.menuPicker.getSelectedRec();
var count = menuPicker.store.length;
var rec = menuPicker.getSelectedRec();
var groupStore = [
{id: 'menu-style-group-custom', caption: this.txtGroupCell_Custom},
{id: 'menu-style-group-color', caption: this.txtGroupCell_GoodBadAndNeutral},
{id: 'menu-style-group-model', caption: this.txtGroupCell_DataAndModel},
{id: 'menu-style-group-title', caption: this.txtGroupCell_TitlesAndHeadings},
{id: 'menu-style-group-themed', caption: this.txtGroupCell_ThemedCallStyles},
{id: 'menu-style-group-number', caption: this.txtGroupCell_NumberFormat},
{id: 'menu-style-group-no-name', caption: this.txtGroupCell_NoName}
];
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;
var data = menuPicker.dataViewItems;
data && _.each(styles, function(style, index){
var img = style.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true});
@ -2241,19 +2361,48 @@ 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;
}
});
listStyles.menuPicker.store.reset(arr);
if(countCustomStyles == 0){
groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-custom'; });
}
if(hasNoNameGroup === false){
groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-no-name'; });
}
menuPicker.groups.reset(groupStore);
menuPicker.store.reset(arr);
}
if (listStyles.menuPicker.store.length > 0 && listStyles.rendered) {
rec = rec ? listStyles.menuPicker.store.findWhere({name: rec.get('name')}) : null;
listStyles.fillComboView(rec ? rec : listStyles.menuPicker.store.at(0), true, true);
if (!this.toolbar.mode.isEditOle && menuPicker.store.length > 0 && listStyles.rendered) {
rec = rec ? menuPicker.store.findWhere({name: rec.get('name')}) : null;
listStyles.fillComboView(rec ? rec : menuPicker.store.at(0), true, true);
}
window.styles_loaded = true;
},
@ -3465,6 +3614,19 @@ define([
}
}
val = info.asc_getStyleName();
if (this._state.prstyle != val && this.toolbar.mnuCellStylePicker) {
val = this.toolbar.mnuCellStylePicker.store.findWhere({name: val});
if (val) {
this.toolbar.mnuCellStylePicker.selectRecord(val);
this._state.prstyle = val.get('name');
} else {
this.toolbar.mnuCellStylePicker.deselectAll();
this._state.prstyle = null;
}
}
var old_name = this._state.tablename;
this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined;
@ -5094,6 +5256,17 @@ 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',
txtGroupCell_Custom: 'Custom',
txtGroupCell_GoodBadAndNeutral: 'Good, Bad, and Neutral',
txtGroupCell_DataAndModel: 'Data and Model',
txtGroupCell_TitlesAndHeadings: 'Titles and Headings',
txtGroupCell_ThemedCallStyles: 'Themed Call Styles',
txtGroupCell_NumberFormat: 'Number Format',
txtGroupCell_NoName: 'No name',
textInsert: 'Insert',
txtInsertCells: 'Insert Cells',
txtDeleteCells: 'Delete Cells',

2
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

@ -125,7 +125,7 @@
</div>
</div>
<div class="separator long invisible"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="min-width: 168px;width: 100%;" data-group-width="100%"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="min-width: 148px;width: 100%;" data-group-width="100%"></div>
</section>
<section class="panel" data-tab="ins">
<div class="group">

1
apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
View file

@ -108,6 +108,7 @@
<span class="btn-slot split" id="slot-btn-borders"></span>
<span class="btn-slot split" id="slot-btn-fillparag"></span>
<span class="btn-slot split" id="slot-btn-table-tpl"></span>
<span class="btn-slot split" id="slot-btn-cell-style"></span>
</div>
</div>
<div class="separator short"></div>

16
apps/spreadsheeteditor/main/app/view/PivotTable.js
View file

@ -89,7 +89,7 @@ define([
'</div>' +
'</div>' +
'<div class="separator long invisible"></div>' +
'<div class="group flex small" id="slot-field-pivot-styles" style="width: 324px;max-width: 324px;min-width: 105px;" data-group-width="324px">' +
'<div class="group flex small" id="slot-field-pivot-styles" style="width: 100%; min-width: 105px;" data-group-width="100%">' +
'</div>' +
'</section>';
@ -274,15 +274,18 @@ define([
this.pivotStyles = new Common.UI.ComboDataView({
cls : 'combo-pivot-template',
style : 'min-width: 103px; max-width: 517px;',
enableKeyEvents : true,
itemWidth : 61,
itemHeight : 49,
menuMaxHeight : 300,
groups : new Common.UI.DataViewGroupStore(),
autoWidth : true,
lock : [_set.lostConnect, _set.coAuth, _set.noPivot, _set.selRangeEdit, _set.pivotLock, _set['FormatCells'], _set['PivotTables']],
beforeOpenHandler: function(e) {
var cmp = this,
menu = cmp.openButton.menu,
columnCount = 4;
columnCount = 7;
if (menu.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
@ -445,7 +448,14 @@ define([
tipSubtotals: 'Show or hide subtotals',
txtSelect: 'Select',
tipSelect: 'Select entire pivot table',
txtPivotTable: 'Pivot Table'
txtPivotTable: 'Pivot Table',
txtTable_PivotStyleMedium: 'Pivot Table Style Medium',
txtTable_PivotStyleDark: 'Pivot Table Style Dark',
txtTable_PivotStyleLight: 'Pivot Table Style Light',
txtGroupPivot_Custom: 'Custom',
txtGroupPivot_Light: 'Light',
txtGroupPivot_Medium: 'Medium',
txtGroupPivot_Dark: 'Dark'
}
}()), SSE.Views.PivotTable || {}));
});

116
apps/spreadsheeteditor/main/app/view/TableSettings.js
View file

@ -524,14 +524,13 @@ define([
cls : 'btn-large-dataview sheet-template-table',
iconCls : 'icon-template-table',
menu : new Common.UI.Menu({
style: 'width: 505px;',
items: [
{ template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') }
{ template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 0 4px;"></div>') }
]
}),
dataHint : '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
});
this.btnTableTemplate.on('render:after', function(btn) {
self.mnuTableTemplatePicker = new Common.UI.DataView({
@ -540,11 +539,47 @@ define([
restoreHeight: 325,
groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="44" width="60"></div>'),
itemTemplate: _.template('<div id="<%= id %>" class="item-template"><img src="<%= imageUrl %>" height="44" width="60"></div>'),
style: 'max-height: 325px;',
delayRenderTips: true
});
});
this.btnTableTemplate.menu.on('show:before', function(menu) {
if (menu && self.mnuTableTemplatePicker) {
var picker = self.mnuTableTemplatePicker,
columnCount = 7;
if (picker.cmpEl) {
var itemEl = $(picker.cmpEl.find('.dataview.inner .item-template').get(0)).parent(),
itemMargin = 8,
itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) : 60;
var menuWidth = columnCount * (itemMargin + itemWidth) + 11, // for scroller
menuMargins = parseFloat(picker.cmpEl.css('margin-left')) + parseFloat(picker.cmpEl.css('margin-right'));
if (menuWidth + menuMargins>Common.Utils.innerWidth())
menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-menuMargins-11)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 11;
picker.cmpEl.css({
'width': menuWidth
});
menu.alignPosition();
}
}
var scroller = self.mnuTableTemplatePicker.scroller;
if (scroller) {
scroller.update({alwaysVisibleY: true});
scroller.scrollTop(0);
}
var val = self.mnuTableTemplatePicker.store.findWhere({name: self._state.tablestylename});
if (val)
self.mnuTableTemplatePicker.selectRecord(val);
else
self.mnuTableTemplatePicker.deselectAll();
});
this.btnTableTemplate.render($('#table-btn-template'));
this.lockedControls.push(this.btnTableTemplate);
this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, this.btnTableTemplate));
@ -560,21 +595,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 +778,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 || {}));
});

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

@ -532,6 +532,20 @@ define([
dataHintDirection: 'bottom'
});
me.btnCellStyle = new Common.UI.Button({
id : 'id-toolbar-btn-cstyle',
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-menu-cell',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.multiselect, _set.cantModifyFilter, _set.wsLock, _set.editVisibleArea],
menu : new Common.UI.Menu({
items: [
{ template: _.template('<div id="id-toolbar-menu-cell-styles" style="width: 645px; height: 306px; margin: 0px 4px;"></div>') }
]
}),
dataHint : '1',
dataHintDirection: 'bottom'
});
me.btnTextFormatting = new Common.UI.Button({
id : 'id-toolbar-btn-formatting',
cls : 'btn-toolbar no-caret',
@ -1299,46 +1313,44 @@ define([
});
me.listStyles = new Common.UI.ComboDataView({
cls : 'combo-styles',
cls : 'combo-cell-styles',
enableKeyEvents : true,
itemWidth : 112,
itemHeight : 40,
style: 'min-width:158px;',
menuMaxHeight : 226,
itemWidth : 100,
itemHeight : 20,
style: 'min-width:135px; max-width: 660px;',
groups: new Common.UI.DataViewGroupStore(),
menuMaxHeight : 380,
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',
dataHintOffset : '-16, -4',
delayRenderTips: true,
autoWidth: true,
beforeOpenHandler: function(e) {
var cmp = this,
menu = cmp.openButton.menu,
minMenuColumn = 6;
menu = cmp.openButton.menu;
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')) +
parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width')));
var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length,
columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5));
columnCount = columnCount < minCount ? minCount : columnCount;
var columnCount = 6;
menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl';
var menuWidth = columnCount * (itemMargin + itemWidth),
var menuPickerEl = $(menu.menuRoot.find('.menu-picker-container').get(0)),
paddings = 15 + parseFloat(groupContainerEl.css('padding-left')) + parseFloat(groupContainerEl.css('padding-right')) + parseFloat(menuPickerEl.css('margin-left')) + parseFloat(menuPickerEl.css('margin-right')),
menuWidth = Math.ceil(+ columnCount * (itemWidth + itemMargin) + paddings),
buttonOffsetLeft = cmp.openButton.$el.offset().left;
// if (menuWidth>buttonOffsetLeft)
// menuWidth = Math.max(Math.floor(buttonOffsetLeft/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth);
if (menuWidth>Common.Utils.innerWidth())
menuWidth = Math.max(Math.floor(Common.Utils.innerWidth()/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth);
menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-paddings)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + paddings;
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
menu.setOffset(Math.min(offset, 0));
menu.cmpEl.css({
'width': menuWidth,
'min-height': cmp.cmpEl.height()
@ -2053,7 +2065,7 @@ define([
me.btnAlignMiddle, me.btnAlignBottom, me.btnWrap, me.btnTextOrient, me.btnBackColor, me.btnInsertTable,
me.btnMerge, me.btnInsertFormula, me.btnNamedRange, me.btnIncDecimal, me.btnInsertShape, me.btnInsertEquation, me.btnInsertSymbol, me.btnInsertSlicer,
me.btnInsertText, me.btnInsertTextArt, me.btnSortUp, me.btnSortDown, me.btnSetAutofilter, me.btnClearAutofilter,
me.btnTableTemplate, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell, me.btnCondFormat,
me.btnTableTemplate, me.btnCellStyle, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell, me.btnCondFormat,
me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink,
me.btnInsertChart, me.btnColorSchemas, me.btnInsertSparkline,
me.btnCopy, me.btnPaste, me.btnCut, me.btnSelectAll, me.listStyles, me.btnPrint,
@ -2244,6 +2256,7 @@ define([
_injectComponent('#slot-btn-setfilter', this.btnSetAutofilter);
_injectComponent('#slot-btn-clear-filter', this.btnClearAutofilter);
_injectComponent('#slot-btn-table-tpl', this.btnTableTemplate);
_injectComponent('#slot-btn-cell-style', this.btnCellStyle);
_injectComponent('#slot-btn-format', this.cmbNumberFormat);
_injectComponent('#slot-btn-percents', this.btnPercentStyle);
_injectComponent('#slot-btn-currency', this.btnCurrencyStyle);
@ -2342,6 +2355,7 @@ define([
_updateHint(this.btnClearAutofilter, this.txtClearFilter);
_updateHint(this.btnSearch, this.txtSearch);
_updateHint(this.btnTableTemplate, this.txtTableTemplate);
_updateHint(this.btnCellStyle, this.txtCellStyle);
_updateHint(this.btnPercentStyle, this.tipDigStylePercent);
_updateHint(this.btnCurrencyStyle, this.tipDigStyleAccounting);
_updateHint(this.btnDecDecimal, this.tipDecDecimal);
@ -3165,6 +3179,7 @@ define([
txtSortZA: 'Sort Z to A',
txtFilter: 'Filter',
txtTableTemplate: 'Format As Table Template',
txtCellStyle: 'Cell Style',
textHorizontal: 'Horizontal Text',
textCounterCw: 'Angle Counterclockwise',
textClockwise: 'Angle Clockwise',

27
apps/spreadsheeteditor/main/locale/en.json
View file

@ -1502,6 +1502,17 @@
"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.txtGroupCell_Custom": "Custom",
"SSE.Controllers.Toolbar.txtGroupCell_GoodBadAndNeutral": "Good, Bad and Neutral",
"SSE.Controllers.Toolbar.txtGroupCell_DataAndModel": "Data and Model",
"SSE.Controllers.Toolbar.txtGroupCell_TitlesAndHeadings": "Titles and Headings",
"SSE.Controllers.Toolbar.txtGroupCell_ThemedCallStyles": "Themed Call Styles",
"SSE.Controllers.Toolbar.txtGroupCell_NumberFormat": "Number Format",
"SSE.Controllers.Toolbar.txtGroupCell_NoName": "No Name",
"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",
@ -2797,6 +2808,13 @@
"SSE.Views.PivotTable.tipSubtotals": "Show or hide subtotals",
"SSE.Views.PivotTable.txtCreate": "Insert Table",
"SSE.Views.PivotTable.txtPivotTable": "Pivot Table",
"SSE.Views.PivotTable.txtTable_PivotStyleMedium": "Pivot Table Style Medium",
"SSE.Views.PivotTable.txtTable_PivotStyleDark": "Pivot Table Style Dark",
"SSE.Views.PivotTable.txtTable_PivotStyleLight": "Pivot Table Style Light",
"SSE.Views.PivotTable.txtGroupPivot_Custom": "Custom",
"SSE.Views.PivotTable.txtGroupPivot_Light": "Light",
"SSE.Views.PivotTable.txtGroupPivot_Medium": "Medium",
"SSE.Views.PivotTable.txtGroupPivot_Dark": "Dark",
"SSE.Views.PivotTable.txtRefresh": "Refresh",
"SSE.Views.PivotTable.txtSelect": "Select",
"SSE.Views.PrintSettings.btnDownload": "Save & Download",
@ -3325,6 +3343,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",
@ -3492,6 +3517,7 @@
"SSE.Views.Toolbar.textVertical": "Vertical Text",
"SSE.Views.Toolbar.textWidth": "Width",
"SSE.Views.Toolbar.textZoom": "Zoom",
"SSE.Views.Toolbar.textCustom": "Custom",
"SSE.Views.Toolbar.tipAlignBottom": "Align bottom",
"SSE.Views.Toolbar.tipAlignCenter": "Align center",
"SSE.Views.Toolbar.tipAlignJust": "Justified",
@ -3632,6 +3658,7 @@
"SSE.Views.Toolbar.txtSortZA": "Sort descending",
"SSE.Views.Toolbar.txtSpecial": "Special",
"SSE.Views.Toolbar.txtTableTemplate": "Format as table template",
"SSE.Views.Toolbar.txtCellStyle": "Cell Style",
"SSE.Views.Toolbar.txtText": "Text",
"SSE.Views.Toolbar.txtTime": "Time",
"SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells",

26
apps/spreadsheeteditor/main/locale/ru.json
View file

@ -1497,6 +1497,17 @@
"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.txtGroupCell_Custom": "Пользовательский",
"SSE.Controllers.Toolbar.txtGroupCell_GoodBadAndNeutral": "Хороший, плохой и нейтральный",
"SSE.Controllers.Toolbar.txtGroupCell_DataAndModel": "Данные и модель",
"SSE.Controllers.Toolbar.txtGroupCell_TitlesAndHeadings": "Названия и заголовки",
"SSE.Controllers.Toolbar.txtGroupCell_ThemedCallStyles": "Стили ячеек с темой",
"SSE.Controllers.Toolbar.txtGroupCell_NumberFormat": "Числовой формат",
"SSE.Controllers.Toolbar.txtGroupCell_NoName": "Без имени",
"SSE.Controllers.Toolbar.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?",
"SSE.Controllers.Toolbar.warnMergeLostData": "В объединенной ячейке останутся только данные из левой верхней ячейки.<br>Вы действительно хотите продолжить?",
"SSE.Controllers.Viewport.textFreezePanes": "Закрепить области",
@ -2775,6 +2786,13 @@
"SSE.Views.PivotTable.tipSubtotals": "Показать или скрыть промежуточные итоги",
"SSE.Views.PivotTable.txtCreate": "Вставить таблицу",
"SSE.Views.PivotTable.txtPivotTable": "Сводная таблица",
"SSE.Views.PivotTable.txtTable_PivotStyleMedium": "Стиль сводной таблицы: средний",
"SSE.Views.PivotTable.txtTable_PivotStyleDark": "Стиль сводной таблицы: темный",
"SSE.Views.PivotTable.txtTable_PivotStyleLight": "Стиль сводной таблицы: светлый",
"SSE.Views.PivotTable.txtGroupPivot_Custom": "Пользовательский",
"SSE.Views.PivotTable.txtGroupPivot_Light": "Светлый",
"SSE.Views.PivotTable.txtGroupPivot_Medium": "Средний",
"SSE.Views.PivotTable.txtGroupPivot_Dark": "Темный",
"SSE.Views.PivotTable.txtRefresh": "Обновить",
"SSE.Views.PivotTable.txtSelect": "Выделить",
"SSE.Views.PrintSettings.btnDownload": "Сохранить и скачать",
@ -3298,6 +3316,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": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.",
@ -3610,6 +3635,7 @@
"SSE.Views.Toolbar.txtSortZA": "Сортировка по убыванию",
"SSE.Views.Toolbar.txtSpecial": "Дополнительный",
"SSE.Views.Toolbar.txtTableTemplate": "Форматировать как шаблон таблицы",
"SSE.Views.Toolbar.txtCellStyle": "Стиль ячейки",
"SSE.Views.Toolbar.txtText": "Текстовый",
"SSE.Views.Toolbar.txtTime": "Время",
"SSE.Views.Toolbar.txtUnmerge": "Отменить объединение ячеек",

22
apps/spreadsheeteditor/main/resources/less/rightmenu.less
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;
}
}
}
}

58
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -146,3 +146,61 @@
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-cell-styles, #id-toolbar-btn-cstyle {
.dropdown-menu {
padding: 5px 0px !important;
}
.menu-picker-container {
margin: 0px 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 {
padding: @scaled-two-px-value;
border: @scaled-one-px-value solid @border-regular-control;
margin: 0px calc(-1 * @scaled-one-px-value) calc(-1 * @scaled-one-px-value) 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;
}
}
}