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

[SSE] Added cell styles menu in Ole editor

Browse source
This commit is contained in:
Alexei Koshelev 2022-09-22 22:06:58 +03:00
parent 5660dd8cfd
commit 7fbce6170b
6 changed files with 148 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
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));
@ -2251,11 +2252,77 @@ define([
}
},
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;
@ -2263,8 +2330,17 @@ 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'); }
@ -2273,7 +2349,7 @@ define([
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});
@ -2315,24 +2391,18 @@ define([
});
if(countCustomStyles == 0){
listStyles.groups.models.forEach(function(style) {
if(style.id === 'menu-style-group-custom'){
listStyles.groups.remove(style);
}
});
groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-custom'; });
}
if(hasNoNameGroup === false){
listStyles.groups.models.forEach(function(style) {
if(style.id === 'menu-style-group-no-name'){
listStyles.groups.remove(style);
}
});
groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-no-name'; });
}
listStyles.menuPicker.store.reset(arr);
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;
},
@ -3544,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;
@ -5177,6 +5260,13 @@ define([
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',

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>

38
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-table',
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',
@ -1304,15 +1318,7 @@ define([
itemWidth : 100,
itemHeight : 20,
style: 'min-width:135px; max-width: 660px;',
groups: new Common.UI.DataViewGroupStore([
{id: 'menu-style-group-custom', caption: this.textCustom },
{id: 'menu-style-group-color', caption: this.textGoodBadAndNeutral },
{id: 'menu-style-group-model', caption: this.textDataAndModel },
{id: 'menu-style-group-title', caption: this.textTitlesAndHeadings },
{id: 'menu-style-group-themed', caption: this.textThemedCallStyles },
{id: 'menu-style-group-number', caption: this.textNumberFormat },
{id: 'menu-style-group-no-name', caption: this.textNoName }
]),
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',
@ -2059,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,
@ -2250,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);
@ -2348,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);
@ -3171,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',
@ -3317,13 +3326,6 @@ define([
tipHAlighOle: 'Horizontal Align',
tipVAlighOle: 'Vertical Align',
tipSelectAll: 'Select all',
tipCut: 'Cut',
textCustom: 'Custom',
textGoodBadAndNeutral: 'Good, Bad, and Neutral',
textDataAndModel: 'Data and Model',
textTitlesAndHeadings: 'Titles and Headings',
textThemedCallStyles: 'Themed Call Styles',
textNumberFormat: 'Number Format',
textNoName: 'No name'
tipCut: 'Cut'
}, SSE.Views.Toolbar || {}));
});

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

@ -1504,6 +1504,13 @@
"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",
@ -3494,12 +3501,6 @@
"SSE.Views.Toolbar.textWidth": "Width",
"SSE.Views.Toolbar.textZoom": "Zoom",
"SSE.Views.Toolbar.textCustom": "Custom",
"SSE.Views.Toolbar.textGoodBadAndNeutral": "Good, Bad and Neutral",
"SSE.Views.Toolbar.textDataAndModel": "Data and Model",
"SSE.Views.Toolbar.textTitlesAndHeadings": "Titles and Headings",
"SSE.Views.Toolbar.textThemedCallStyles": "Themed Call Styles",
"SSE.Views.Toolbar.textNumberFormat": "Number Format",
"SSE.Views.Toolbar.textNoName": "No Name",
"SSE.Views.Toolbar.tipAlignBottom": "Align bottom",
"SSE.Views.Toolbar.tipAlignCenter": "Align center",
"SSE.Views.Toolbar.tipAlignJust": "Justified",
@ -3640,6 +3641,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",

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

@ -1500,6 +1500,13 @@
"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": "Закрепить области",
@ -3487,13 +3494,6 @@
"SSE.Views.Toolbar.textVertical": "Вертикальный текст",
"SSE.Views.Toolbar.textWidth": "Ширина",
"SSE.Views.Toolbar.textZoom": "Масштаб",
"SSE.Views.Toolbar.textCustom": "Пользовательский",
"SSE.Views.Toolbar.textGoodBadAndNeutral": "Хороший, плохой и нейтральный",
"SSE.Views.Toolbar.textDataAndModel": "Данные и модель",
"SSE.Views.Toolbar.textTitlesAndHeadings": "Названия и заголовки",
"SSE.Views.Toolbar.textThemedCallStyles": "Стили ячеек с темой",
"SSE.Views.Toolbar.textNumberFormat": "Числовой формат",
"SSE.Views.Toolbar.textNoName": "Без имени",
"SSE.Views.Toolbar.tipAlignBottom": "Выровнять по нижнему краю",
"SSE.Views.Toolbar.tipAlignCenter": "Выровнять по центру",
"SSE.Views.Toolbar.tipAlignJust": "Выровнять по ширине",
@ -3634,6 +3634,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": "Отменить объединение ячеек",

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

@ -168,8 +168,8 @@
}
}
.combo-cell-styles {
.combo-cell-styles, #id-toolbar-btn-cstyle {
.dropdown-menu {
padding: 5px 0px !important;
}
@ -188,6 +188,8 @@
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 {