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

[SSE] Change toolbar in ole editing

Browse source
This commit is contained in:
Julia Radzhabova 2022-05-31 23:46:19 +03:00
parent cbb8545bf7
commit 2523a493a9
4 changed files with 400 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -344,6 +344,9 @@ define([
toolbar.cmbFontSize.on('hide:after', _.bind(this.onHideMenus, this)); toolbar.cmbFontSize.on('hide:after', _.bind(this.onHideMenus, this));
toolbar.cmbFontSize.on('combo:blur', _.bind(this.onComboBlur, this)); toolbar.cmbFontSize.on('combo:blur', _.bind(this.onComboBlur, this));
toolbar.cmbFontSize.on('combo:focusin', _.bind(this.onComboOpen, this, false)); toolbar.cmbFontSize.on('combo:focusin', _.bind(this.onComboOpen, this, false));
toolbar.btnTextFormatting.menu.on('item:click', _.bind(this.onTextFormattingMenu, this));
toolbar.btnHorizontalAlign.menu.on('item:click', _.bind(this.onHorizontalAlignMenu, this));
toolbar.btnVerticalAlign.menu.on('item:click', _.bind(this.onVerticalAlignMenu, this));
} else { } else {
toolbar.btnPrint.on('click', _.bind(this.onPrint, this)); toolbar.btnPrint.on('click', _.bind(this.onPrint, this));
toolbar.btnPrint.on('disabled', _.bind(this.onBtnChangeState, this, 'print:disabled')); toolbar.btnPrint.on('disabled', _.bind(this.onBtnChangeState, this, 'print:disabled'));
@ -2239,9 +2242,26 @@ define([
if ($('.asc-window.enable-key-events:visible').length>0) return; if ($('.asc-window.enable-key-events:visible').length>0) return;
var toolbar = this.toolbar; var toolbar = this.toolbar;
if (toolbar.mode.isEditDiagram || toolbar.mode.isEditMailMerge || toolbar.mode.isEditOle) { if (toolbar.mode.isEditDiagram || toolbar.mode.isEditMailMerge) {
is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart); var is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.btnDecDecimal,toolbar.btnIncDecimal,toolbar.cmbNumberFormat, toolbar.btnEditChartData, toolbar.btnEditChartType]}); toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.btnDecDecimal,toolbar.btnIncDecimal,toolbar.cmbNumberFormat, toolbar.btnEditChartData, toolbar.btnEditChartType]});
} else if (toolbar.mode.isEditOle) {
if (state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd) {
var is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.cmbNumberFormat, toolbar.btnWrap, toolbar.btnMerge, toolbar.btnBackColor,
toolbar.btnBorders, toolbar.btnTableTemplate, toolbar.btnHorizontalAlign, toolbar.btnVerticalAlign],
merge: true,
clear: [Common.enumLock.editFormula, Common.enumLock.editText]});
(is_cell_edited) ? Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l') :
Common.util.Shortcuts.resumeEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l');
} else {
if (state == Asc.c_oAscCellEditorState.editText) var is_text = true, is_formula = false; else
if (state == Asc.c_oAscCellEditorState.editFormula) is_text = !(is_formula = true); else
if (state == Asc.c_oAscCellEditorState.editEmptyCell) is_text = is_formula = false;
toolbar.lockToolbar(Common.enumLock.editFormula, is_formula, { array: [toolbar.cmbFontName, toolbar.cmbFontSize, toolbar.btnTextFormatting, toolbar.btnTextColor]});
toolbar.lockToolbar(Common.enumLock.editText, is_text, {array: [toolbar.btnInsertFormula]});
}
} else } else
if (state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd) { if (state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd) {
toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, { toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {
@ -3183,6 +3203,39 @@ define([
this._state.fontsize = str_size; this._state.fontsize = str_size;
} }
val = xfs.asc_getFontBold();
if (this._state.bold !== val) {
toolbar.btnTextFormatting.menu.items[0].setChecked(val === true);
this._state.bold = val;
}
val = xfs.asc_getFontItalic();
if (this._state.italic !== val) {
toolbar.btnTextFormatting.menu.items[1].setChecked(val === true);
this._state.italic = val;
}
val = xfs.asc_getFontUnderline();
if (this._state.underline !== val) {
toolbar.btnTextFormatting.menu.items[2].setChecked(val === true);
this._state.underline = val;
}
val = xfs.asc_getFontStrikeout();
if (this._state.strikeout !== val) {
toolbar.btnTextFormatting.menu.items[3].setChecked(val === true);
this._state.strikeout = val;
}
val = xfs.asc_getFontSuperscript();
if (this._state.superscript !== val) {
toolbar.btnTextFormatting.menu.items[4].setChecked(val === true);
this._state.superscript = val;
}
val = xfs.asc_getFontSubscript();
if (this._state.subscript !== val) {
toolbar.btnTextFormatting.menu.items[5].setChecked(val === true);
this._state.subscript = val;
}
/* read font color */ /* read font color */
var clr, var clr,
color, color,
@ -3272,7 +3325,7 @@ define([
formatTableInfo = info.asc_getFormatTableInfo(); formatTableInfo = info.asc_getFormatTableInfo();
/* read cell horizontal align */ /* read cell horizontal align */
/*
var fontparam = xfs.asc_getHorAlign(); var fontparam = xfs.asc_getHorAlign();
if (this._state.pralign !== fontparam) { if (this._state.pralign !== fontparam) {
this._state.pralign = fontparam; this._state.pralign = fontparam;
@ -3286,15 +3339,13 @@ define([
default: index = -255; align = 'btn-align-left'; break; default: index = -255; align = 'btn-align-left'; break;
} }
if (!(index < 0)) { if (!(index < 0)) {
toolbar.btnAlignRight.toggle(index===2, true); toolbar.btnHorizontalAlign.menu.items[index].setChecked(true);
toolbar.btnAlignLeft.toggle(index===0, true);
toolbar.btnAlignCenter.toggle(index===1, true);
toolbar.btnAlignJust.toggle(index===3, true);
} else if (index == -255) { } else if (index == -255) {
toolbar.btnAlignRight.toggle(false, true); toolbar.btnHorizontalAlign.menu.clearAll();
toolbar.btnAlignLeft.toggle(false, true); }
toolbar.btnAlignCenter.toggle(false, true); if ( toolbar.btnHorizontalAlign.rendered && toolbar.btnHorizontalAlign.$icon ) {
toolbar.btnAlignJust.toggle(false, true); toolbar.btnHorizontalAlign.$icon.removeClass(toolbar.btnHorizontalAlign.options.icls).addClass(align);
toolbar.btnHorizontalAlign.options.icls = align;
} }
} }
@ -3306,16 +3357,21 @@ define([
index = -1; align = ''; index = -1; align = '';
switch (fontparam) { switch (fontparam) {
case Asc.c_oAscVAlign.Top: index = 0; align = 'btn-valign-top'; break; case Asc.c_oAscVAlign.Top: index = 0; align = 'btn-align-top'; break;
case Asc.c_oAscVAlign.Center: index = 1; align = 'btn-valign-middle'; break; case Asc.c_oAscVAlign.Center: index = 1; align = 'btn-align-middle'; break;
case Asc.c_oAscVAlign.Bottom: index = 2; align = 'btn-valign-bottom'; break; case Asc.c_oAscVAlign.Bottom: index = 2; align = 'btn-align-bottom'; break;
}
if (!(index < 0)) {
toolbar.btnVerticalAlign.menu.items[index].setChecked(true);
} else if (index == -255) {
toolbar.btnVerticalAlign.menu.clearAll();
}
if ( toolbar.btnVerticalAlign.rendered && toolbar.btnVerticalAlign.$icon ) {
toolbar.btnVerticalAlign.$icon.removeClass(toolbar.btnVerticalAlign.options.icls).addClass(align);
toolbar.btnVerticalAlign.options.icls = align;
}
} }
toolbar.btnAlignTop.toggle(index===0, true);
toolbar.btnAlignMiddle.toggle(index===1, true);
toolbar.btnAlignBottom.toggle(index===2, true);
}
*/
need_disable = this._state.controlsdisabled.filters || formatTableInfo!==null || filterInfo && filterInfo.asc_getIsAutoFilter()===null; need_disable = this._state.controlsdisabled.filters || formatTableInfo!==null || filterInfo && filterInfo.asc_getIsAutoFilter()===null;
toolbar.lockToolbar(Common.enumLock.ruleMerge, need_disable, {array:[toolbar.btnMerge]}); toolbar.lockToolbar(Common.enumLock.ruleMerge, need_disable, {array:[toolbar.btnMerge]});
@ -3384,51 +3440,38 @@ define([
Common.NotificationCenter.trigger('fonts:change', fontobj); Common.NotificationCenter.trigger('fonts:change', fontobj);
/* read font params */ /* read font params */
// if (!toolbar.mode.isEditMailMerge && !toolbar.mode.isEditDiagram) { val = fontobj.asc_getFontBold();
// val = fontobj.asc_getFontBold(); if (this._state.bold !== val) {
// if (this._state.bold !== val) { toolbar.btnTextFormatting.menu.items[0].setChecked(val === true);
// toolbar.btnBold.toggle(val === true, true); this._state.bold = val;
// this._state.bold = val; }
// } val = fontobj.asc_getFontItalic();
// val = fontobj.asc_getFontItalic(); if (this._state.italic !== val) {
// if (this._state.italic !== val) { toolbar.btnTextFormatting.menu.items[1](val === true);
// toolbar.btnItalic.toggle(val === true, true); this._state.italic = val;
// this._state.italic = val; }
// } val = fontobj.asc_getFontUnderline();
// val = fontobj.asc_getFontUnderline(); if (this._state.underline !== val) {
// if (this._state.underline !== val) { toolbar.btnTextFormatting.menu.items[2](val === true);
// toolbar.btnUnderline.toggle(val === true, true); this._state.underline = val;
// this._state.underline = val; }
// } val = fontobj.asc_getFontStrikeout();
// val = fontobj.asc_getFontStrikeout(); if (this._state.strikeout !== val) {
// if (this._state.strikeout !== val) { toolbar.btnTextFormatting.menu.items[3](val === true);
// toolbar.btnStrikeout.toggle(val === true, true); this._state.strikeout = val;
// this._state.strikeout = val; }
// }
// val = fontobj.asc_getFontSubscript();
// var subsc = fontobj.asc_getFontSubscript(), if (this._state.subscript !== val) {
// supersc = fontobj.asc_getFontSuperscript(); toolbar.btnTextFormatting.menu.items[4](val === true);
// this._state.subscript = val;
// if (this._state.subscript !== subsc || this._state.superscript !== supersc) { }
// var index = (supersc) ? 0 : (subsc ? 1 : -1),
// btnSubscript = toolbar.btnSubscript; val = fontobj.asc_getFontSuperscript();
// if (this._state.superscript !== val) {
// btnSubscript.toggle(index>-1, true); toolbar.btnTextFormatting.menu.items[5](val === true);
// if (index < 0) { this._state.superscript = val;
// btnSubscript.menu.clearAll(); }
// } else {
// btnSubscript.menu.items[index].setChecked(true);
// if ( btnSubscript.rendered && btnSubscript.$icon ) {
// btnSubscript.$icon.removeClass(btnSubscript.options.icls);
// btnSubscript.options.icls = btnSubscript.menu.items[index].options.icls;
// btnSubscript.$icon.addClass(btnSubscript.options.icls);
// }
// }
//
// this._state.subscript = subsc;
// this._state.superscript = supersc;
// }
// }
/* read font size */ /* read font size */
var str_size = fontobj.asc_getFontSize(); var str_size = fontobj.asc_getFontSize();
@ -3438,52 +3481,51 @@ define([
} }
/* read font color */ /* read font color */
// var clr, var clr,
// color, color,
// fontColorPicker = this.toolbar.mnuTextColorPicker; fontColorPicker = this.toolbar.mnuTextColorPicker;
//
// if (!fontColorPicker.isDummy) {
// color = fontobj.asc_getFontColor();
// if (color) {
// if (color.get_auto()) {
// if (this._state.clrtext !== 'auto') {
// fontColorPicker.clearSelection();
// this.toolbar.btnTextColor.setAutoColor(true);
// this._state.clrtext = 'auto';
// }
// } else {
// if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
// clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
// } else {
// clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
// }
// var type1 = typeof(clr),
// type2 = typeof(this._state.clrtext);
// if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
// (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
// (type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
//
// this.toolbar.btnTextColor.setAutoColor(false);
// if (_.isObject(clr)) {
// var isselected = false;
// for (var i = 0; i < 10; i++) {
// if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
// fontColorPicker.select(clr, true);
// isselected = true;
// break;
// }
// }
// if (!isselected) fontColorPicker.clearSelection();
// } else {
// fontColorPicker.select(clr, true);
// }
// this._state.clrtext = clr;
// }
// }
// }
// this._state.clrtext_asccolor = color;
// }
if (!fontColorPicker.isDummy) {
color = fontobj.asc_getFontColor();
if (color) {
if (color.get_auto()) {
if (this._state.clrtext !== 'auto') {
fontColorPicker.clearSelection();
this.toolbar.btnTextColor.setAutoColor(true);
this._state.clrtext = 'auto';
}
} else {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
} else {
clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
var type1 = typeof(clr),
type2 = typeof(this._state.clrtext);
if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
(clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
(type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
this.toolbar.btnTextColor.setAutoColor(false);
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
fontColorPicker.select(clr, true);
isselected = true;
break;
}
}
if (!isselected) fontColorPicker.clearSelection();
} else {
fontColorPicker.select(clr, true);
}
this._state.clrtext = clr;
}
}
}
this._state.clrtext_asccolor = color;
}
}, },
onApiStyleChange: function() { onApiStyleChange: function() {
@ -4559,6 +4601,61 @@ define([
Common.NotificationCenter.trigger('edit:complete', this.toolbar); Common.NotificationCenter.trigger('edit:complete', this.toolbar);
}, },
onTextFormattingMenu: function(menu, item) {
if (this.api) {
switch (item.value) {
case 'bold':
this._state.bold = undefined;
this.api.asc_setCellBold(item.checked);
break;
case 'italic':
this._state.italic = undefined;
this.api.asc_setCellItalic(item.checked);
break;
case 'underline':
this._state.underline = undefined;
this.api.asc_setCellUnderline(item.checked);
break;
case 'strikeout':
this._state.strikeout = undefined;
this.api.asc_setCellStrikeout(item.checked);
break;
case 'subscript':
this._state.subscript = undefined;
this.api.asc_setCellSubscript(item.checked);
break;
case 'superscript':
this._state.superscript = undefined;
this.api.asc_setCellSuperscript(item.checked);
break;
}
}
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Text Formatting');
},
onHorizontalAlignMenu: function(menu, item) {
this._state.pralign = undefined;
if (this.api) {
this.api.asc_setCellAlign(!item.checked ? null : item.value);
this.toolbar.btnWrap.allowDepress = !(item.value == AscCommon.align_Justify);
}
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Horizontal align');
},
onVerticalAlignMenu: function(menu, item) {
this._state.valign = undefined;
if (this.api) {
this.api.asc_setCellVertAlign(!item.checked ? Asc.c_oAscVAlign.Bottom : item.value);
}
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Vertical align');
},
textEmptyImgUrl : 'You need to specify image URL.', textEmptyImgUrl : 'You need to specify image URL.',
warnMergeLostData : 'Operation can destroy data in the selected cells.<br>Continue?', warnMergeLostData : 'Operation can destroy data in the selected cells.<br>Continue?',
textWarning : 'Warning', textWarning : 'Warning',

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

@ -86,15 +86,18 @@
</div> </div>
<div class="separator short"></div> <div class="separator short"></div>
<div class="group small"> <div class="group small">
<div class="elset" style="width: 182px;"> <div class="elset" style="width: 202px;">
<span class="btn-slot" id="slot-field-fontname" style="width: 100px;float: left;"></span> <span class="btn-slot" id="slot-field-fontname" style="width: 100px;float: left;"></span>
<span class="btn-slot" id="slot-field-fontsize" style="margin-left: 2px;float: left;"></span> <span class="btn-slot" id="slot-field-fontsize" style="margin-left: 2px;float: left;"></span>
<span class="btn-slot split" id="slot-btn-fontcolor" style="margin-left: 2px;float: left;"></span> <span class="btn-slot split" id="slot-btn-fontcolor" style="margin-left: 2px;margin-top: 1px;float: left;"></span>
<span class="btn-slot" id="slot-btn-formatting" style="margin-left: 2px;margin-top: 1px;float: left;"></span>
</div> </div>
</div> </div>
<div class="separator short"></div> <div class="separator short"></div>
<div class="group small"> <div class="group small">
<div class="elset"> <div class="elset font-attr">
<span class="btn-slot split" id="slot-btn-halign"></span>
<span class="btn-slot split" id="slot-btn-valign"></span>
<span class="btn-slot split-small" id="slot-btn-wrap"></span> <span class="btn-slot split-small" id="slot-btn-wrap"></span>
<span class="btn-slot split" id="slot-btn-merge"></span> <span class="btn-slot split" id="slot-btn-merge"></span>
</div> </div>
@ -110,7 +113,7 @@
<div class="separator short"></div> <div class="separator short"></div>
<div class="group small"> <div class="group small">
<div class="elset"> <div class="elset">
<span class="btn-slot" id="slot-btn-format" style="width: 84px; vertical-align: middle;"></span> <span class="btn-slot" id="slot-btn-format" style="width: 84px; float: left;"></span>
</div> </div>
</div> </div>
<div class="separator short"></div> <div class="separator short"></div>
@ -128,8 +131,8 @@
<div class="group" style="width: 100%;"></div> <div class="group" style="width: 100%;"></div>
<div class="group small" style="padding-right: 10px;"> <div class="group small" style="padding-right: 10px;">
<div class="elset"> <div class="elset">
<span class="btn-slot" id="slot-btn-visible-area" style="width: auto;"></span> <span class="btn-slot" id="slot-btn-visible-area" style="width: auto;float: left;"></span>
<span class="btn-slot" id="slot-btn-visible-area-close" style="width: auto;"></span> <span class="btn-slot" id="slot-btn-visible-area-close" style="width: auto;float: left;"></span>
</div> </div>
</div> </div>
</section> </section>

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

@ -397,7 +397,7 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 55px;', menuStyle : 'min-width: 55px;',
hint : me.tipFontSize, hint : me.tipFontSize,
lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect], lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.editVisibleArea],
data : [ data : [
{ value: 8, displayValue: "8" }, { value: 8, displayValue: "8" },
{ value: 9, displayValue: "9" }, { value: 9, displayValue: "9" },
@ -426,7 +426,7 @@ define([
menuCls : 'scrollable-menu', menuCls : 'scrollable-menu',
menuStyle : 'min-width: 325px;', menuStyle : 'min-width: 325px;',
hint : me.tipFontName, hint : me.tipFontName,
lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect], lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.editVisibleArea],
store : new Common.Collections.Fonts(), store : new Common.Collections.Fonts(),
recent : 0, recent : 0,
dataHint: '1', dataHint: '1',
@ -451,7 +451,7 @@ define([
enableToggle: true, enableToggle: true,
allowDepress: true, allowDepress: true,
split : true, split : true,
lock : [_set.editCell, _set.selShape, _set.selShapeText, _set.selChart, _set.selChartText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.ruleMerge, _set.editPivot, _set.wsLock], lock : [_set.editCell, _set.selShape, _set.selShapeText, _set.selChart, _set.selChartText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.ruleMerge, _set.editPivot, _set.wsLock, _set.editVisibleArea],
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
items: [ items: [
{ {
@ -486,7 +486,7 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-fontcolor', iconCls : 'toolbar__icon btn-fontcolor',
split : true, split : true,
lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormat], lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormat, _set.editVisibleArea],
menu: true, menu: true,
auto: true, auto: true,
dataHint : '1', dataHint : '1',
@ -499,7 +499,7 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-paracolor', iconCls : 'toolbar__icon btn-paracolor',
split : true, split : true,
lock : [_set.selImage, _set.editCell, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormatFill], lock : [_set.selImage, _set.editCell, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormatFill, _set.editVisibleArea],
transparent: true, transparent: true,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
@ -513,7 +513,7 @@ define([
icls : 'btn-border-out', icls : 'btn-border-out',
borderId : 'outer', borderId : 'outer',
borderswidth: Asc.c_oAscBorderStyles.Thin, borderswidth: Asc.c_oAscBorderStyles.Thin,
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'], _set.editVisibleArea],
split : true, split : true,
menu : true, menu : true,
dataHint : '1', dataHint : '1',
@ -524,7 +524,7 @@ define([
id : 'id-toolbar-btn-ttempl', id : 'id-toolbar-btn-ttempl',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-menu-table', 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], 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({ menu : new Common.UI.Menu({
items: [ items: [
{ template: _.template('<div id="id-toolbar-menu-table-templates" style="width: 487px; height: 300px; margin: 0px 4px;"></div>') } { template: _.template('<div id="id-toolbar-menu-table-templates" style="width: 487px; height: 300px; margin: 0px 4px;"></div>') }
@ -534,6 +534,169 @@ define([
dataHintDirection: 'bottom' dataHintDirection: 'bottom'
}); });
me.btnTextFormatting = new Common.UI.Button({
id : 'id-toolbar-btn-formatting',
cls : 'btn-toolbar no-caret',
iconCls : 'toolbar__icon more-vertical',
lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormat, _set.editVisibleArea],
menu : new Common.UI.Menu({
items: [
{
caption : me.textBold,
iconCls : 'menu__icon btn-bold',
value : 'bold',
checkable : true,
checkmark : false,
allowDepress: true
},
{
caption : me.textItalic,
iconCls : 'menu__icon btn-italic',
value : 'italic',
checkable : true,
checkmark : false,
allowDepress: true
},
{
caption : me.textUnderline,
iconCls : 'menu__icon btn-underline',
value : 'underline',
checkable : true,
checkmark : false,
allowDepress: true
},
{
caption : me.textStrikeout,
iconCls : 'menu__icon btn-strikeout',
value : 'strikeout',
checkable : true,
checkmark : false,
allowDepress: true
},
{
caption : me.textSuperscript,
iconCls : 'menu__icon btn-superscript',
checkable : true,
checkmark : false,
allowDepress: true,
toggleGroup : 'textsubscriptgroup',
value : 'superscript'
},
{
caption : me.textSubscript,
iconCls : 'menu__icon btn-subscript',
checkable : true,
checkmark : false,
allowDepress: true,
toggleGroup : 'textsubscriptgroup',
value : 'subscript'
}
]
}),
dataHint : '1',
dataHintDirection: 'bottom'
});
me.btnHorizontalAlign = new Common.UI.Button({
id: 'id-toolbar-btn-halign',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-align-left',
icls: 'btn-align-left',
lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.coAuthText, _set.wsLockFormat, _set.editVisibleArea],
menu: new Common.UI.Menu({
items: [
{
caption: me.tipAlignLeft,
iconCls: 'menu__icon btn-align-left',
icls: 'btn-align-left',
checkable: true,
checkmark: false,
allowDepress: true,
toggleGroup: 'halignGroup',
checked: true,
value: AscCommon.align_Left
},
{
caption: me.tipAlignCenter,
iconCls: 'menu__icon btn-align-center',
icls: 'btn-align-center',
checkable: true,
checkmark: false,
allowDepress: true,
toggleGroup: 'halignGroup',
value: AscCommon.align_Center
},
{
caption: me.tipAlignRight,
iconCls: 'menu__icon btn-align-right',
icls: 'btn-align-right',
checkable: true,
checkmark: false,
allowDepress: true,
toggleGroup: 'halignGroup',
value: AscCommon.align_Right
},
{
caption: me.tipAlignJust,
iconCls: 'menu__icon btn-align-just',
icls: 'btn-align-just',
checkable: true,
checkmark: false,
allowDepress: true,
toggleGroup: 'halignGroup',
value: AscCommon.align_Justify
}
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
});
me.btnVerticalAlign = new Common.UI.Button({
id: 'id-toolbar-btn-valign',
cls: 'btn-toolbar',
lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.coAuthText, _set.wsLockFormat, _set.editVisibleArea],
iconCls: 'toolbar__icon btn-align-middle',
icls: 'btn-align-middle',
menu: new Common.UI.Menu({
items: [
{
caption: me.textAlignTop,
iconCls: 'menu__icon btn-align-top',
icls: 'btn-align-top',
checkable: true,
checkmark: false,
allowDepress: true,
toggleGroup: 'valignGroup',
value: Asc.c_oAscVAlign.Top
},
{
caption: me.textAlignMiddle,
iconCls: 'menu__icon btn-align-middle',
icls: 'btn-align-middle',
checkable: true,
checkmark: false,
allowDepress: true,
toggleGroup: 'valignGroup',
value: Asc.c_oAscVAlign.Center,
checked: true
},
{
caption: me.textAlignBottom,
iconCls: 'menu__icon btn-align-bottom',
icls: 'btn-align-bottom',
checkable: true,
checkmark: false,
allowDepress: true,
toggleGroup: 'valignGroup',
value: Asc.c_oAscVAlign.Bottom
}
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
});
me.btnVisibleArea = new Common.UI.Button({ me.btnVisibleArea = new Common.UI.Button({
id : 'id-toolbar-btn-visible-area', id : 'id-toolbar-btn-visible-area',
cls : 'btn-toolbar btn-icon-default', cls : 'btn-toolbar btn-icon-default',
@ -1873,7 +2036,7 @@ define([
me.btnCopy, me.btnPaste, me.listStyles, me.btnPrint, me.btnCopy, me.btnPaste, me.listStyles, me.btnPrint,
/*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle, /*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle,
me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnPrintTitles, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup, me.btnScale, me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnPrintTitles, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup, me.btnScale,
me.chPrintGridlines, me.chPrintHeadings, me.btnVisibleArea, me.btnVisibleAreaClose me.chPrintGridlines, me.chPrintHeadings, me.btnVisibleArea, me.btnVisibleAreaClose, me.btnTextFormatting, me.btnHorizontalAlign, me.btnVerticalAlign
]; ];
_.each(me.lockControls.concat([me.btnSave]), function(cmp) { _.each(me.lockControls.concat([me.btnSave]), function(cmp) {
@ -2090,6 +2253,9 @@ define([
_injectComponent('#slot-btn-condformat', this.btnCondFormat); _injectComponent('#slot-btn-condformat', this.btnCondFormat);
_injectComponent('#slot-btn-visible-area', this.btnVisibleArea); _injectComponent('#slot-btn-visible-area', this.btnVisibleArea);
_injectComponent('#slot-btn-visible-area-close', this.btnVisibleAreaClose); _injectComponent('#slot-btn-visible-area-close', this.btnVisibleAreaClose);
_injectComponent('#slot-btn-formatting', this.btnTextFormatting);
_injectComponent('#slot-btn-halign', this.btnHorizontalAlign);
_injectComponent('#slot-btn-valign', this.btnVerticalAlign);
this.btnsEditHeader = Common.Utils.injectButtons($host.find('.slot-editheader'), 'tlbtn-editheader-', 'toolbar__icon btn-editheader', this.capBtnInsHeader, this.btnsEditHeader = Common.Utils.injectButtons($host.find('.slot-editheader'), 'tlbtn-editheader-', 'toolbar__icon btn-editheader', this.capBtnInsHeader,
[Common.enumLock.editCell, Common.enumLock.selRangeEdit, Common.enumLock.headerLock, Common.enumLock.lostConnect, Common.enumLock.coAuth], undefined, undefined, undefined, '1', 'bottom', 'small'); [Common.enumLock.editCell, Common.enumLock.selRangeEdit, Common.enumLock.headerLock, Common.enumLock.lostConnect, Common.enumLock.coAuth], undefined, undefined, undefined, '1', 'bottom', 'small');
@ -2168,6 +2334,9 @@ define([
_updateHint(this.btnScale, this.tipScale); _updateHint(this.btnScale, this.tipScale);
_updateHint(this.btnCondFormat, this.tipCondFormat); _updateHint(this.btnCondFormat, this.tipCondFormat);
_updateHint(this.btnVisibleArea, this.tipVisibleArea); _updateHint(this.btnVisibleArea, this.tipVisibleArea);
_updateHint(this.btnTextFormatting, this.tipTextFormatting);
_updateHint(this.btnHorizontalAlign, this.tipHAligh);
_updateHint(this.btnVerticalAlign, this.tipVAligh);
this.btnsEditHeader.forEach(function (btn) { this.btnsEditHeader.forEach(function (btn) {
_updateHint(btn, me.tipEditHeader); _updateHint(btn, me.tipEditHeader);
}); });
@ -3109,6 +3278,9 @@ define([
textHideVA: 'Hide Visible Area', textHideVA: 'Hide Visible Area',
textEditVA: 'Edit Visible Area', textEditVA: 'Edit Visible Area',
tipVisibleArea: 'Visible area', tipVisibleArea: 'Visible area',
textDone: 'Done' textDone: 'Done',
tipTextFormatting: 'More text formatting tools',
tipHAligh: 'Horizontal Align',
tipVAligh: 'Vertical Align'
}, SSE.Views.Toolbar || {})); }, SSE.Views.Toolbar || {}));
}); });

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

@ -13,6 +13,10 @@
.simple-bar { .simple-bar {
display: table; display: table;
width: 100%; width: 100%;
.separator.short {
margin-top: 1px;
}
} }
.font-attr { .font-attr {