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, itemWidth : 80,
itemHeight : 40, itemHeight : 40,
menuMaxHeight : 300, menuMaxHeight : 300,
autoWidth : false,
enableKeyEvents : false, enableKeyEvents : false,
beforeOpenHandler : null, beforeOpenHandler : null,
additionalMenuItems : null, additionalMenuItems : null,
@ -87,11 +88,13 @@ define([
this.menuMaxHeight = this.options.menuMaxHeight; this.menuMaxHeight = this.options.menuMaxHeight;
this.beforeOpenHandler = this.options.beforeOpenHandler; this.beforeOpenHandler = this.options.beforeOpenHandler;
this.showLast = this.options.showLast; this.showLast = this.options.showLast;
this.wrapWidth = 0;
this.rootWidth = 0; this.rootWidth = 0;
this.rootHeight = 0; this.rootHeight = 0;
this.rendered = false; this.rendered = false;
this.needFillComboView = 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.delayRenderTips = this.options.delayRenderTips || false;
this.itemTemplate = this.options.itemTemplate || _.template([ this.itemTemplate = this.options.itemTemplate || _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
@ -208,10 +211,12 @@ define([
me.fieldPicker.el.addEventListener('contextmenu', _.bind(me.onPickerComboContextMenu, me), false); me.fieldPicker.el.addEventListener('contextmenu', _.bind(me.onPickerComboContextMenu, me), false);
me.menuPicker.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.onResize();
me.rendered = true; me.rendered = true;
me.trigger('render:after', me); me.trigger('render:after', me);
} }
if (this.disabled) { if (this.disabled) {
@ -221,8 +226,26 @@ define([
return this; return this;
}, },
onMoreToggle: function(btn, state) {
if(state) {
this.checkSize();
}
},
checkSize: function() { checkSize: function() {
if (this.cmpEl && this.cmpEl.is(':visible')) { 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, var me = this,
width = this.cmpEl.width(), width = this.cmpEl.width(),
height = this.cmpEl.height(); height = this.cmpEl.height();
@ -265,7 +288,46 @@ define([
if (!this.isSuspendEvents) if (!this.isSuspendEvents)
this.trigger('resize', this); 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) { onBeforeShowMenu: function(e) {
var me = this; var me = this;

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

@ -328,6 +328,7 @@ define([
if (this.listenStoreEvents) { if (this.listenStoreEvents) {
this.listenTo(this.store, 'add', this.onAddItem); this.listenTo(this.store, 'add', this.onAddItem);
this.listenTo(this.store, 'reset', this.onResetItems); this.listenTo(this.store, 'reset', this.onResetItems);
this.groups && this.listenTo(this.groups, 'add', this.onAddGroup);
} }
this.onResetItems(); 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() { onResetItems: function() {
_.each(this.dataViewItems, function(item) { _.each(this.dataViewItems, function(item) {
var tip = item.$el.data('bs.tooltip'); var tip = item.$el.data('bs.tooltip');

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

@ -793,7 +793,7 @@ define([
hideMoreBtns: function() { hideMoreBtns: function() {
for (var btn in btnsMore) { 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', sdkplaceholder: 'id-ole-editor-placeholder',
initwidth: 900, initwidth: 900,
initheight: 700, initheight: 700,
minwidth: 840, minwidth: 860,
minheight: 275 minheight: 275
}, options); }, 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-button-width: 30px;
@combo-dataview-height: 46px; @item-height-calc: calc(@item-height - 6px + 2 * @scaled-two-px-value + 2 * @scaled-one-px-value);
@combo-dataview-height-calc: calc(40px + 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;
height: @combo-dataview-height-calc; height: @combo-dataview-height-calc;
.view { .view {
margin-right: -@combo-dataview-button-width; 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); .border-left-radius(0);
@ -116,8 +116,8 @@
@minus-px: calc((-1px / @pixel-ratio-factor)); @minus-px: calc((-1px / @pixel-ratio-factor));
margin: 0 @minus-px-ie @minus-px-ie 0; margin: 0 @minus-px-ie @minus-px-ie 0;
margin: 0 @minus-px @minus-px 0; margin: 0 @minus-px @minus-px 0;
height: @combo-dataview-height; height: @item-height;
height: @combo-dataview-height-calc; height: @item-height-calc;
background-color: @background-normal-ie; background-color: @background-normal-ie;
background-color: @background-normal; background-color: @background-normal;
display: flex; 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-template(@combo-dataview-height: 64px) {
@combo-dataview-button-width: 18px; @combo-dataview-button-width: 18px;
@ -344,17 +352,42 @@
.combo-template(60px); .combo-template(60px);
top: -4px; top: -4px;
padding-right: 12px;
position: absolute; position: absolute;
padding-right: 12px;
.more-container & { .more-container & {
padding-right: 0;
position: static; position: static;
} }
.view .dataview, .dropdown-menu { .view .dataview, .dropdown-menu {
padding: 1px; 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 { .combo-slicer-style {
@ -372,7 +405,7 @@
.view { .view {
margin-right: -@combo-dataview-button-width; 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 { .view .dataview, .dropdown-menu {

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

@ -87,7 +87,7 @@
</div> </div>
</div> </div>
<div class="separator long invisible"></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>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">

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

@ -761,6 +761,14 @@ define([
this._state.beginPreviewStyles = true; this._state.beginPreviewStyles = true;
this._state.currentStyleFound = false; this._state.currentStyleFound = false;
this._state.previewStylesCount = count; 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(){ onEndTableStylesPreview: function(){
@ -774,29 +782,73 @@ define([
onAddTableStylesPreview: function(Templates){ onAddTableStylesPreview: function(Templates){
var self = this; var self = this;
var arr = [];
_.each(Templates, function(template){ _.each(Templates, function(template){
var tip = template.asc_getDisplayName(); var tip = template.asc_getDisplayName();
var groupItem = '';
if (template.asc_getType()==0) { if (template.asc_getType()==0) {
['Table Grid', 'Plain Table', 'Grid Table', 'List Table', 'Light', 'Dark', 'Colorful', 'Accent'].forEach(function(item){ var arr = tip.split(' ');
var str = 'txtTable_' + item.replace(' ', '');
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]) if (self[str])
tip = tip.replace(item, self[str]); tip = tip.replace(item, self[str]);
}); });
} }
arr.push({ else {
groupItem = 'menu-table-group-custom'
}
var templateObj = {
imageUrl: template.asc_getImage(), imageUrl: template.asc_getImage(),
id : Common.UI.getId(), id : Common.UI.getId(),
group : groupItem,
templateId: template.asc_getId(), templateId: template.asc_getId(),
tip : tip 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(); !this._state.currentStyleFound && this.selectCurrentTableStyle();
}, },
@ -989,7 +1041,15 @@ define([
txtTable_Dark: 'Dark', txtTable_Dark: 'Dark',
txtTable_Colorful: 'Colorful', txtTable_Colorful: 'Colorful',
txtTable_Accent: 'Accent', 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 || {})); }, DE.Views.TableSettings || {}));
}); });

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

@ -1483,7 +1483,7 @@ define([
_set.viewFormMode, _set.lostConnect, _set.disableOnStart], _set.viewFormMode, _set.lostConnect, _set.disableOnStart],
itemWidth: itemWidth, itemWidth: itemWidth,
itemHeight: itemHeight, itemHeight: itemHeight,
style: 'min-width:150px;', style: 'min-width:139px;',
// hint : this.tipParagraphStyle, // hint : this.tipParagraphStyle,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
@ -1491,6 +1491,7 @@ define([
enableKeyEvents: true, enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem], additionalMenuItems: [this.listStylesAdditionalMenuItem],
delayRenderTips: true, delayRenderTips: true,
autoWidth: true,
itemTemplate: _.template([ itemTemplate: _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
'<div style="background-image: url(<%= imageUrl %>); width: ' + itemWidth + 'px; height: ' + itemHeight + 'px;"></div>', '<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.txtNoBorders": "No borders",
"DE.Views.TableSettings.txtTable_Accent": "Accent", "DE.Views.TableSettings.txtTable_Accent": "Accent",
"DE.Views.TableSettings.txtTable_Colorful": "Colorful", "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_Dark": "Dark",
"DE.Views.TableSettings.txtTable_GridTable": "Grid Table", "DE.Views.TableSettings.txtTable_GridTable": "Grid Table",
"DE.Views.TableSettings.txtTable_Light": "Light", "DE.Views.TableSettings.txtTable_Light": "Light",
"DE.Views.TableSettings.txtTable_ListTable": "List Table", "DE.Views.TableSettings.txtTable_ListTable": "List Table",
"DE.Views.TableSettings.txtTable_PlainTable": "Plain Table", "DE.Views.TableSettings.txtTable_PlainTable": "Plain Table",
"DE.Views.TableSettings.txtTable_TableGrid": "Table Grid", "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.textAlign": "Alignment",
"DE.Views.TableSettingsAdvanced.textAlignment": "Alignment", "DE.Views.TableSettingsAdvanced.textAlignment": "Alignment",
"DE.Views.TableSettingsAdvanced.textAllowSpacing": "Spacing between cells", "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_ListTable": "Список-таблица",
"DE.Views.TableSettings.txtTable_PlainTable": "Таблица простая", "DE.Views.TableSettings.txtTable_PlainTable": "Таблица простая",
"DE.Views.TableSettings.txtTable_TableGrid": "Сетка таблицы", "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.textAlign": "Выравнивание",
"DE.Views.TableSettingsAdvanced.textAlignment": "Выравнивание", "DE.Views.TableSettingsAdvanced.textAlignment": "Выравнивание",
"DE.Views.TableSettingsAdvanced.textAllowSpacing": "Интервалы между ячейками", "DE.Views.TableSettingsAdvanced.textAllowSpacing": "Интервалы между ячейками",

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

@ -168,3 +168,25 @@
margin-top: 4px; 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> </div>
<div class="separator long invisible"></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>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">
@ -153,7 +153,7 @@
</div> </div>
</section> </section>
<section id="transitions-panel" class="panel" data-tab="transit"> <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"> <div class="group small">
<span class="btn-slot text x-huge" id="transit-button-parameters"></span> <span class="btn-slot text x-huge" id="transit-button-parameters"></span>
@ -189,7 +189,7 @@
</div> </div>
</section> </section>
<section id="animation-panel" class="panel" data-tab="animate"> <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"> <div class="group small">
<span class="btn-slot text x-huge" id="animation-button-parameters"></span> <span class="btn-slot text x-huge" id="animation-button-parameters"></span>
</div> </div>

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

@ -203,7 +203,7 @@ define([
cls: 'combo-transitions combo-animation', cls: 'combo-transitions combo-animation',
itemWidth: itemWidth, itemWidth: itemWidth,
itemHeight: itemHeight, itemHeight: itemHeight,
style: 'min-width:210px;', style: 'min-width:200px;',
itemTemplate: _.template([ itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">', '<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= iconCls %>"></div>', '<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.beginPreviewStyles = true;
this._state.currentStyleFound = false; this._state.currentStyleFound = false;
this._state.previewStylesCount = count; 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(){ onEndTableStylesPreview: function(){
@ -707,28 +715,68 @@ define([
onAddTableStylesPreview: function(Templates){ onAddTableStylesPreview: function(Templates){
var self = this; var self = this;
var arr = [];
_.each(Templates, function(template){ _.each(Templates, function(template){
var tip = template.asc_getDisplayName(); var tip = template.asc_getDisplayName();
var groupItem = '';
if (template.asc_getType()==0) { 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){ ['No Style', 'No Grid', 'Table Grid', 'Themed Style', 'Light Style', 'Medium Style', 'Dark Style', 'Accent'].forEach(function(item){
var str = 'txtTable_' + item.replace(' ', ''); var str = 'txtTable_' + item.replace(' ', '');
if (self[str]) if (self[str])
tip = tip.replace(new RegExp(item, 'g'), 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(), imageUrl: template.asc_getImage(),
id : Common.UI.getId(), id : Common.UI.getId(),
templateId: template.asc_getId(), templateId: template.asc_getId(),
group : groupItem,
tip : tip 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(); !this._state.currentStyleFound && this.selectCurrentTableStyle();
}, },
@ -878,7 +926,12 @@ define([
txtTable_LightStyle: 'Light Style', txtTable_LightStyle: 'Light Style',
txtTable_MediumStyle: 'Medium Style', txtTable_MediumStyle: 'Medium Style',
txtTable_DarkStyle: 'Dark 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 || {})); }, PE.Views.TableSettings || {}));
}); });

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

@ -1058,12 +1058,13 @@ define([
itemWidth: 88, itemWidth: 88,
enableKeyEvents: true, enableKeyEvents: true,
itemHeight: 40, itemHeight: 40,
style: 'min-width:130px;', style: 'min-width:123px;',
lock: [_set.themeLock, _set.lostConnect, _set.noSlides], lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-16, -4', dataHintOffset: '-16, -4',
delayRenderTips: true, delayRenderTips: true,
autoWidth: true,
itemTemplate: _.template([ itemTemplate: _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
'<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"></div>', '<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', cls: 'combo-transitions',
itemWidth: itemWidth, itemWidth: itemWidth,
itemHeight: itemHeight, itemHeight: itemHeight,
style: 'min-width:110px;', style: 'min-width:108px;',
itemTemplate: _.template([ itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">', '<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>', '<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_NoStyle": "No Style",
"PE.Views.TableSettings.txtTable_TableGrid": "Table Grid", "PE.Views.TableSettings.txtTable_TableGrid": "Table Grid",
"PE.Views.TableSettings.txtTable_ThemedStyle": "Themed Style", "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.textAlt": "Alternative Text",
"PE.Views.TableSettingsAdvanced.textAltDescription": "Description", "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.", "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_NoStyle": "Нет стиля",
"PE.Views.TableSettings.txtTable_TableGrid": "сетка таблицы", "PE.Views.TableSettings.txtTable_TableGrid": "сетка таблицы",
"PE.Views.TableSettings.txtTable_ThemedStyle": "Стиль из темы", "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.textAlt": "Альтернативный текст",
"PE.Views.TableSettingsAdvanced.textAltDescription": "Описание", "PE.Views.TableSettingsAdvanced.textAltDescription": "Описание",
"PE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.", "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, var self = this,
styles = this.view.pivotStyles; styles = this.view.pivotStyles;
this._isTemplatesChanged = true; this._isTemplatesChanged = true;
var count = styles.menuPicker.store.length; var count = styles.menuPicker.store.length;
if (count>0 && count==Templates.length) { if (count>0 && count==Templates.length) {
var data = styles.menuPicker.dataViewItems; var data = styles.menuPicker.dataViewItems;
data && _.each(Templates, function(template, index){ data && _.each(Templates, function(template, index){
@ -367,20 +367,62 @@ define([
styles.fieldPicker.store.reset(styles.fieldPicker.store.models); styles.fieldPicker.store.reset(styles.fieldPicker.store.models);
} else { } else {
styles.menuPicker.store.reset([]); styles.menuPicker.store.reset([]);
var arr = []; var templates = [];
_.each(Templates, function(template){ var groups = [
arr.push({ {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(), id : Common.UI.getId(),
name : template.asc_getName(), name : template.asc_getName(),
caption : template.asc_getDisplayName(), caption : template.asc_getDisplayName(),
type : template.asc_getType(), type : template.asc_getType(),
imageUrl : template.asc_getImage(), imageUrl : template.asc_getImage(),
group : groupItem,
allowSelected : true, allowSelected : true,
selected : false, 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.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.btnMerge.menu.on('item:click', _.bind(this.onMergeCellsMenu, this));
toolbar.btnTableTemplate.menu.on('show:after', _.bind(this.onTableTplMenuOpen, 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.btnVisibleArea.menu.on('item:click', _.bind(this.onVisibleAreaMenu, this));
toolbar.btnVisibleAreaClose.on('click', _.bind(this.onVisibleAreaClose, this)); toolbar.btnVisibleAreaClose.on('click', _.bind(this.onVisibleAreaClose, this));
toolbar.cmbFontName.on('selected', _.bind(this.onFontNameSelect, this)); toolbar.cmbFontName.on('selected', _.bind(this.onFontNameSelect, this));
@ -2112,6 +2113,7 @@ define([
el: element, el: element,
parentMenu : menu, parentMenu : menu,
restoreHeight: 300, restoreHeight: 300,
groups: new Common.UI.DataViewGroupStore(),
style: 'max-height: 300px;', style: 'max-height: 300px;',
store: me.getCollection('TableTemplates'), store: me.getCollection('TableTemplates'),
itemTemplate: _.template('<div class="item-template"><img src="<%= imageUrl %>" id="<%= id %>" style="width:60px;height:44px;"></div>'), 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) { onApiInitTableTemplates: function(images) {
var me = this; var me = this;
var store = this.getCollection('TableTemplates'); var store = this.getCollection('TableTemplates');
this.fillTableTemplates();
if (store) { if (store) {
var templates = []; 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) { _.each(images, function(item) {
var tip = item.asc_getDisplayName(); var tip = item.asc_getDisplayName();
var groupItem = '';
if (item.asc_getType()==0) { if (item.asc_getType()==0) {
var arr = tip.split(' '), var arr = tip.split(' '),
last = arr.pop(); 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(''); arr = 'txtTable_' + arr.join('');
tip = me[arr] ? me[arr] + ' ' + last : tip; 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(), name : item.asc_getName(),
caption : item.asc_getDisplayName(), caption : item.asc_getDisplayName(),
type : item.asc_getType(), type : item.asc_getType(),
imageUrl : item.asc_getImage(), imageUrl : item.asc_getImage(),
group : groupItem,
allowSelected : true, allowSelected : true,
selected : false, selected : false,
tip : tip 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); 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){ onApiInitEditorStyles: function(styles){
window.styles_loaded = false; 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, 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) { if (!listStyles) {
self.styles = styles; self.styles = styles;
@ -2226,10 +2330,26 @@ define([
} }
var mainController = this.getApplication().getController('Main'); var mainController = this.getApplication().getController('Main');
var count = listStyles.menuPicker.store.length; var count = menuPicker.store.length;
var rec = listStyles.menuPicker.getSelectedRec(); 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) { if (count>0 && count==styles.length) {
var data = listStyles.menuPicker.dataViewItems; var data = menuPicker.dataViewItems;
data && _.each(styles, function(style, index){ data && _.each(styles, function(style, index){
var img = style.asc_getImage(); var img = style.asc_getImage();
data[index].model.set('imageUrl', img, {silent: true}); data[index].model.set('imageUrl', img, {silent: true});
@ -2241,19 +2361,48 @@ define([
}); });
} else { } else {
var arr = []; 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({ arr.push({
imageUrl: style.asc_getImage(), imageUrl: style.asc_getImage(),
name : style.asc_getName(), name : style.asc_getName(),
group : styleGroup,
tip : mainController.translationTable[style.get_Name()] || style.get_Name(), tip : mainController.translationTable[style.get_Name()] || style.get_Name(),
uid : Common.UI.getId() 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) { if (!this.toolbar.mode.isEditOle && menuPicker.store.length > 0 && listStyles.rendered) {
rec = rec ? listStyles.menuPicker.store.findWhere({name: rec.get('name')}) : null; rec = rec ? menuPicker.store.findWhere({name: rec.get('name')}) : null;
listStyles.fillComboView(rec ? rec : listStyles.menuPicker.store.at(0), true, true); listStyles.fillComboView(rec ? rec : menuPicker.store.at(0), true, true);
} }
window.styles_loaded = 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; var old_name = this._state.tablename;
this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined; this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined;
@ -5094,6 +5256,17 @@ define([
txtTable_TableStyleMedium: 'Table Style Medium', txtTable_TableStyleMedium: 'Table Style Medium',
txtTable_TableStyleDark: 'Table Style Dark', txtTable_TableStyleDark: 'Table Style Dark',
txtTable_TableStyleLight: 'Table Style Light', 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', textInsert: 'Insert',
txtInsertCells: 'Insert Cells', txtInsertCells: 'Insert Cells',
txtDeleteCells: 'Delete Cells', txtDeleteCells: 'Delete Cells',

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

@ -125,7 +125,7 @@
</div> </div>
</div> </div>
<div class="separator long invisible"></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>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <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-borders"></span>
<span class="btn-slot split" id="slot-btn-fillparag"></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-table-tpl"></span>
<span class="btn-slot split" id="slot-btn-cell-style"></span>
</div> </div>
</div> </div>
<div class="separator short"></div> <div class="separator short"></div>

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

@ -89,7 +89,7 @@ define([
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="separator long invisible"></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>' + '</div>' +
'</section>'; '</section>';
@ -274,15 +274,18 @@ define([
this.pivotStyles = new Common.UI.ComboDataView({ this.pivotStyles = new Common.UI.ComboDataView({
cls : 'combo-pivot-template', cls : 'combo-pivot-template',
style : 'min-width: 103px; max-width: 517px;',
enableKeyEvents : true, enableKeyEvents : true,
itemWidth : 61, itemWidth : 61,
itemHeight : 49, itemHeight : 49,
menuMaxHeight : 300, menuMaxHeight : 300,
groups : new Common.UI.DataViewGroupStore(),
autoWidth : true,
lock : [_set.lostConnect, _set.coAuth, _set.noPivot, _set.selRangeEdit, _set.pivotLock, _set['FormatCells'], _set['PivotTables']], lock : [_set.lostConnect, _set.coAuth, _set.noPivot, _set.selRangeEdit, _set.pivotLock, _set['FormatCells'], _set['PivotTables']],
beforeOpenHandler: function(e) { beforeOpenHandler: function(e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu, menu = cmp.openButton.menu,
columnCount = 4; columnCount = 7;
if (menu.cmpEl) { if (menu.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent(); var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
@ -445,7 +448,14 @@ define([
tipSubtotals: 'Show or hide subtotals', tipSubtotals: 'Show or hide subtotals',
txtSelect: 'Select', txtSelect: 'Select',
tipSelect: 'Select entire pivot table', 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 || {})); }()), 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', cls : 'btn-large-dataview sheet-template-table',
iconCls : 'icon-template-table', iconCls : 'icon-template-table',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
style: 'width: 505px;',
items: [ 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', dataHint : '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
}); });
this.btnTableTemplate.on('render:after', function(btn) { this.btnTableTemplate.on('render:after', function(btn) {
self.mnuTableTemplatePicker = new Common.UI.DataView({ self.mnuTableTemplatePicker = new Common.UI.DataView({
@ -540,11 +539,47 @@ define([
restoreHeight: 325, restoreHeight: 325,
groups: new Common.UI.DataViewGroupStore(), groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(), 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;', style: 'max-height: 325px;',
delayRenderTips: true 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.btnTableTemplate.render($('#table-btn-template'));
this.lockedControls.push(this.btnTableTemplate); this.lockedControls.push(this.btnTableTemplate);
this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, 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].model.set('imageUrl', img, {silent: true});
$(data[index].el).find('img').attr('src', img); $(data[index].el).find('img').attr('src', img);
}); });
} else { } else {
var arr = []; var templates = [];
_.each(Templates, function(template){ var groups = [
arr.push({ {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(), id : Common.UI.getId(),
name : template.asc_getName(), name : item.asc_getName(),
caption : template.asc_getDisplayName(), caption : item.asc_getDisplayName(),
type : template.asc_getType(), type : item.asc_getType(),
imageUrl : template.asc_getImage(), imageUrl : item.asc_getImage(),
group : groupItem,
allowSelected : true, allowSelected : true,
selected : false, 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', textRemDuplicates: 'Remove duplicates',
textSlicer: 'Insert slicer', textSlicer: 'Insert slicer',
textPivot: 'Insert pivot table', 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 || {})); }, SSE.Views.TableSettings || {}));
}); });

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

@ -532,6 +532,20 @@ define([
dataHintDirection: 'bottom' 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({ me.btnTextFormatting = new Common.UI.Button({
id : 'id-toolbar-btn-formatting', id : 'id-toolbar-btn-formatting',
cls : 'btn-toolbar no-caret', cls : 'btn-toolbar no-caret',
@ -1299,46 +1313,44 @@ define([
}); });
me.listStyles = new Common.UI.ComboDataView({ me.listStyles = new Common.UI.ComboDataView({
cls : 'combo-styles', cls : 'combo-cell-styles',
enableKeyEvents : true, enableKeyEvents : true,
itemWidth : 112, itemWidth : 100,
itemHeight : 40, itemHeight : 20,
style: 'min-width:158px;', style: 'min-width:135px; max-width: 660px;',
menuMaxHeight : 226, 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']], lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells']],
dataHint : '1', dataHint : '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset : '-16, -4', dataHintOffset : '-16, -4',
delayRenderTips: true, delayRenderTips: true,
autoWidth: true,
beforeOpenHandler: function(e) { beforeOpenHandler: function(e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu, menu = cmp.openButton.menu;
minMenuColumn = 6;
if (menu.cmpEl) { if (menu.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent(); var itemEl = $(menu.menuRoot.find('.dataview .item').get(0));
var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1; 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()); Common.Utils.applicationPixelRatio() > 1 && Common.Utils.applicationPixelRatio() < 2 && (itemMargin = -1/Common.Utils.applicationPixelRatio());
var itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) : var itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
(cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + (cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) +
parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width'))); parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width')));
var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length, var columnCount = 6;
columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5));
columnCount = columnCount < minCount ? minCount : columnCount;
menu.menuAlignEl = cmp.cmpEl; menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl'; 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; 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()) 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; var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
menu.setOffset(Math.min(offset, 0)); menu.setOffset(Math.min(offset, 0));
menu.cmpEl.css({ menu.cmpEl.css({
'width': menuWidth, 'width': menuWidth,
'min-height': cmp.cmpEl.height() 'min-height': cmp.cmpEl.height()
@ -2053,7 +2065,7 @@ define([
me.btnAlignMiddle, me.btnAlignBottom, me.btnWrap, me.btnTextOrient, me.btnBackColor, me.btnInsertTable, 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.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.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.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink,
me.btnInsertChart, me.btnColorSchemas, me.btnInsertSparkline, me.btnInsertChart, me.btnColorSchemas, me.btnInsertSparkline,
me.btnCopy, me.btnPaste, me.btnCut, me.btnSelectAll, me.listStyles, me.btnPrint, 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-setfilter', this.btnSetAutofilter);
_injectComponent('#slot-btn-clear-filter', this.btnClearAutofilter); _injectComponent('#slot-btn-clear-filter', this.btnClearAutofilter);
_injectComponent('#slot-btn-table-tpl', this.btnTableTemplate); _injectComponent('#slot-btn-table-tpl', this.btnTableTemplate);
_injectComponent('#slot-btn-cell-style', this.btnCellStyle);
_injectComponent('#slot-btn-format', this.cmbNumberFormat); _injectComponent('#slot-btn-format', this.cmbNumberFormat);
_injectComponent('#slot-btn-percents', this.btnPercentStyle); _injectComponent('#slot-btn-percents', this.btnPercentStyle);
_injectComponent('#slot-btn-currency', this.btnCurrencyStyle); _injectComponent('#slot-btn-currency', this.btnCurrencyStyle);
@ -2342,6 +2355,7 @@ define([
_updateHint(this.btnClearAutofilter, this.txtClearFilter); _updateHint(this.btnClearAutofilter, this.txtClearFilter);
_updateHint(this.btnSearch, this.txtSearch); _updateHint(this.btnSearch, this.txtSearch);
_updateHint(this.btnTableTemplate, this.txtTableTemplate); _updateHint(this.btnTableTemplate, this.txtTableTemplate);
_updateHint(this.btnCellStyle, this.txtCellStyle);
_updateHint(this.btnPercentStyle, this.tipDigStylePercent); _updateHint(this.btnPercentStyle, this.tipDigStylePercent);
_updateHint(this.btnCurrencyStyle, this.tipDigStyleAccounting); _updateHint(this.btnCurrencyStyle, this.tipDigStyleAccounting);
_updateHint(this.btnDecDecimal, this.tipDecDecimal); _updateHint(this.btnDecDecimal, this.tipDecDecimal);
@ -3165,6 +3179,7 @@ define([
txtSortZA: 'Sort Z to A', txtSortZA: 'Sort Z to A',
txtFilter: 'Filter', txtFilter: 'Filter',
txtTableTemplate: 'Format As Table Template', txtTableTemplate: 'Format As Table Template',
txtCellStyle: 'Cell Style',
textHorizontal: 'Horizontal Text', textHorizontal: 'Horizontal Text',
textCounterCw: 'Angle Counterclockwise', textCounterCw: 'Angle Counterclockwise',
textClockwise: 'Angle Clockwise', 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_TableStyleDark": "Table Style Dark",
"SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Table Style Light", "SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Table Style Light",
"SSE.Controllers.Toolbar.txtTable_TableStyleMedium": "Table Style Medium", "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.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.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", "SSE.Controllers.Viewport.textFreezePanes": "Freeze Panes",
@ -2797,6 +2808,13 @@
"SSE.Views.PivotTable.tipSubtotals": "Show or hide subtotals", "SSE.Views.PivotTable.tipSubtotals": "Show or hide subtotals",
"SSE.Views.PivotTable.txtCreate": "Insert Table", "SSE.Views.PivotTable.txtCreate": "Insert Table",
"SSE.Views.PivotTable.txtPivotTable": "Pivot 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.txtRefresh": "Refresh",
"SSE.Views.PivotTable.txtSelect": "Select", "SSE.Views.PivotTable.txtSelect": "Select",
"SSE.Views.PrintSettings.btnDownload": "Save & Download", "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.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.textAltTitle": "Title",
"SSE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings", "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.strBackground": "Background color",
"SSE.Views.TextArtSettings.strColor": "Color", "SSE.Views.TextArtSettings.strColor": "Color",
"SSE.Views.TextArtSettings.strFill": "Fill", "SSE.Views.TextArtSettings.strFill": "Fill",
@ -3492,6 +3517,7 @@
"SSE.Views.Toolbar.textVertical": "Vertical Text", "SSE.Views.Toolbar.textVertical": "Vertical Text",
"SSE.Views.Toolbar.textWidth": "Width", "SSE.Views.Toolbar.textWidth": "Width",
"SSE.Views.Toolbar.textZoom": "Zoom", "SSE.Views.Toolbar.textZoom": "Zoom",
"SSE.Views.Toolbar.textCustom": "Custom",
"SSE.Views.Toolbar.tipAlignBottom": "Align bottom", "SSE.Views.Toolbar.tipAlignBottom": "Align bottom",
"SSE.Views.Toolbar.tipAlignCenter": "Align center", "SSE.Views.Toolbar.tipAlignCenter": "Align center",
"SSE.Views.Toolbar.tipAlignJust": "Justified", "SSE.Views.Toolbar.tipAlignJust": "Justified",
@ -3632,6 +3658,7 @@
"SSE.Views.Toolbar.txtSortZA": "Sort descending", "SSE.Views.Toolbar.txtSortZA": "Sort descending",
"SSE.Views.Toolbar.txtSpecial": "Special", "SSE.Views.Toolbar.txtSpecial": "Special",
"SSE.Views.Toolbar.txtTableTemplate": "Format as table template", "SSE.Views.Toolbar.txtTableTemplate": "Format as table template",
"SSE.Views.Toolbar.txtCellStyle": "Cell Style",
"SSE.Views.Toolbar.txtText": "Text", "SSE.Views.Toolbar.txtText": "Text",
"SSE.Views.Toolbar.txtTime": "Time", "SSE.Views.Toolbar.txtTime": "Time",
"SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells", "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_TableStyleDark": "Стиль таблицы: темный",
"SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Стиль таблицы: светлый", "SSE.Controllers.Toolbar.txtTable_TableStyleLight": "Стиль таблицы: светлый",
"SSE.Controllers.Toolbar.txtTable_TableStyleMedium": "Стиль таблицы: средний", "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.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?",
"SSE.Controllers.Toolbar.warnMergeLostData": "В объединенной ячейке останутся только данные из левой верхней ячейки.<br>Вы действительно хотите продолжить?", "SSE.Controllers.Toolbar.warnMergeLostData": "В объединенной ячейке останутся только данные из левой верхней ячейки.<br>Вы действительно хотите продолжить?",
"SSE.Controllers.Viewport.textFreezePanes": "Закрепить области", "SSE.Controllers.Viewport.textFreezePanes": "Закрепить области",
@ -2775,6 +2786,13 @@
"SSE.Views.PivotTable.tipSubtotals": "Показать или скрыть промежуточные итоги", "SSE.Views.PivotTable.tipSubtotals": "Показать или скрыть промежуточные итоги",
"SSE.Views.PivotTable.txtCreate": "Вставить таблицу", "SSE.Views.PivotTable.txtCreate": "Вставить таблицу",
"SSE.Views.PivotTable.txtPivotTable": "Сводная таблица", "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.txtRefresh": "Обновить",
"SSE.Views.PivotTable.txtSelect": "Выделить", "SSE.Views.PivotTable.txtSelect": "Выделить",
"SSE.Views.PrintSettings.btnDownload": "Сохранить и скачать", "SSE.Views.PrintSettings.btnDownload": "Сохранить и скачать",
@ -3298,6 +3316,13 @@
"SSE.Views.TableSettings.textTemplate": "По шаблону", "SSE.Views.TableSettings.textTemplate": "По шаблону",
"SSE.Views.TableSettings.textTotal": "Итоговая", "SSE.Views.TableSettings.textTotal": "Итоговая",
"SSE.Views.TableSettings.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?", "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.textAlt": "Альтернативный текст",
"SSE.Views.TableSettingsAdvanced.textAltDescription": "Описание", "SSE.Views.TableSettingsAdvanced.textAltDescription": "Описание",
"SSE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.", "SSE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.",
@ -3610,6 +3635,7 @@
"SSE.Views.Toolbar.txtSortZA": "Сортировка по убыванию", "SSE.Views.Toolbar.txtSortZA": "Сортировка по убыванию",
"SSE.Views.Toolbar.txtSpecial": "Дополнительный", "SSE.Views.Toolbar.txtSpecial": "Дополнительный",
"SSE.Views.Toolbar.txtTableTemplate": "Форматировать как шаблон таблицы", "SSE.Views.Toolbar.txtTableTemplate": "Форматировать как шаблон таблицы",
"SSE.Views.Toolbar.txtCellStyle": "Стиль ячейки",
"SSE.Views.Toolbar.txtText": "Текстовый", "SSE.Views.Toolbar.txtText": "Текстовый",
"SSE.Views.Toolbar.txtTime": "Время", "SSE.Views.Toolbar.txtTime": "Время",
"SSE.Views.Toolbar.txtUnmerge": "Отменить объединение ячеек", "SSE.Views.Toolbar.txtUnmerge": "Отменить объединение ячеек",

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

@ -221,3 +221,25 @@
.box-shadow(none); .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; 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;
}
}
}