[SSE] Add cell settings to the right panel
This commit is contained in:
Julia Radzhabova
parent
731619473e
commit
ff89d888dc
|
|
@ -103,7 +103,8 @@ Common.Utils = _.extend(new(function() {
|
|||
Chart : 7,
|
||||
MailMerge : 8,
|
||||
Signature : 9,
|
||||
Pivot : 10
|
||||
Pivot : 10,
|
||||
Cell : 11
|
||||
},
|
||||
isMobile = /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera),
|
||||
me = this,
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ define([
|
|||
this._settings[Common.Utils.documentSettingsType.Table] = {panelId: "id-table-settings", panel: rightMenu.tableSettings, btn: rightMenu.btnTable, hidden: 1, locked: false};
|
||||
this._settings[Common.Utils.documentSettingsType.Pivot] = {panelId: "id-pivot-settings", panel: rightMenu.pivotSettings, btn: rightMenu.btnPivot, hidden: 1, locked: false};
|
||||
this._settings[Common.Utils.documentSettingsType.Signature] = {panelId: "id-signature-settings", panel: rightMenu.signatureSettings, btn: rightMenu.btnSignature, hidden: 1, props: {}, locked: false};
|
||||
this._settings[Common.Utils.documentSettingsType.Cell] = {panelId: "id-cell-settings", panel: rightMenu.cellSettings, btn: rightMenu.btnCell, hidden: 1, locked: false};
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
|
|
@ -118,6 +119,7 @@ define([
|
|||
selectType = info.asc_getFlags().asc_getSelectionType(),
|
||||
formatTableInfo = info.asc_getFormatTableInfo(),
|
||||
sparkLineInfo = info.asc_getSparklineInfo(),
|
||||
cellInfo = info,
|
||||
pivotInfo = null;//info.asc_getPivotTableInfo();
|
||||
|
||||
if (selectType == Asc.c_oAscSelectionType.RangeImage || selectType == Asc.c_oAscSelectionType.RangeShape ||
|
||||
|
|
@ -125,24 +127,24 @@ define([
|
|||
SelectedObjects = this.api.asc_getGraphicObjectProps();
|
||||
}
|
||||
|
||||
if (SelectedObjects.length<=0 && !formatTableInfo && !sparkLineInfo && !pivotInfo && !this.rightmenu.minimizedMode &&
|
||||
if (SelectedObjects.length<=0 && !cellInfo && !formatTableInfo && !sparkLineInfo && !pivotInfo && !this.rightmenu.minimizedMode &&
|
||||
this.rightmenu.GetActivePane() !== 'id-signature-settings') {
|
||||
this.rightmenu.clearSelection();
|
||||
this._openRightMenu = true;
|
||||
}
|
||||
|
||||
var need_disable = info.asc_getLocked(),
|
||||
need_disable_table = (info.asc_getLockedTable()===true || !this.rightmenu.mode.canModifyFilter),
|
||||
need_disable_spark = (info.asc_getLockedSparkline()===true),
|
||||
need_disable_pivot = (info.asc_getLockedPivotTable()===true);
|
||||
|
||||
this.onFocusObject(SelectedObjects, formatTableInfo, sparkLineInfo, pivotInfo, need_disable, need_disable_table, need_disable_spark, need_disable_pivot);
|
||||
this.onFocusObject(SelectedObjects, cellInfo, formatTableInfo, sparkLineInfo, pivotInfo);
|
||||
},
|
||||
|
||||
onFocusObject: function(SelectedObjects, formatTableInfo, sparkLineInfo, pivotInfo, isCellLocked, isTableLocked, isSparkLocked, isPivotLocked) {
|
||||
onFocusObject: function(SelectedObjects, cellInfo, formatTableInfo, sparkLineInfo, pivotInfo) {
|
||||
if (!this.editMode)
|
||||
return;
|
||||
|
||||
var isCellLocked = cellInfo.asc_getLocked(),
|
||||
isTableLocked = (cellInfo.asc_getLockedTable()===true || !this.rightmenu.mode.canModifyFilter),
|
||||
isSparkLocked = (cellInfo.asc_getLockedSparkline()===true),
|
||||
isPivotLocked = (cellInfo.asc_getLockedPivotTable()===true);
|
||||
|
||||
for (var i=0; i<this._settings.length; ++i) {
|
||||
if (i==Common.Utils.documentSettingsType.Signature) continue;
|
||||
if (this._settings[i]) {
|
||||
|
|
@ -204,6 +206,13 @@ define([
|
|||
// this._settings[settingsType].hidden = 0;
|
||||
// }
|
||||
|
||||
if (SelectedObjects.length<=0) { // cell is selected
|
||||
settingsType = Common.Utils.documentSettingsType.Cell;
|
||||
this._settings[settingsType].props = cellInfo;
|
||||
this._settings[settingsType].locked = isCellLocked;
|
||||
this._settings[settingsType].hidden = 0;
|
||||
}
|
||||
|
||||
var lastactive = -1, currentactive, priorityactive = -1,
|
||||
activePane = this.rightmenu.GetActivePane();
|
||||
for (i=0; i<this._settings.length; ++i) {
|
||||
|
|
@ -211,13 +220,11 @@ define([
|
|||
if (pnl===undefined || pnl.btn===undefined || pnl.panel===undefined) continue;
|
||||
|
||||
if ( pnl.hidden ) {
|
||||
if ( !pnl.btn.isDisabled() )
|
||||
pnl.btn.setDisabled(true);
|
||||
if (!pnl.btn.isDisabled()) pnl.btn.setDisabled(true);
|
||||
if (activePane == pnl.panelId)
|
||||
currentactive = -1;
|
||||
} else {
|
||||
if ( pnl.btn.isDisabled() )
|
||||
pnl.btn.setDisabled(false);
|
||||
if (pnl.btn.isDisabled()) pnl.btn.setDisabled(false);
|
||||
if (i!=Common.Utils.documentSettingsType.Signature) lastactive = i;
|
||||
if ( pnl.needShow ) {
|
||||
pnl.needShow = false;
|
||||
|
|
@ -277,6 +284,7 @@ define([
|
|||
this.rightmenu.shapeSettings.UpdateThemeColors();
|
||||
this.rightmenu.textartSettings.UpdateThemeColors();
|
||||
this.rightmenu.chartSettings.UpdateThemeColors();
|
||||
this.rightmenu.cellSettings.UpdateThemeColors();
|
||||
},
|
||||
|
||||
updateMetricUnit: function() {
|
||||
|
|
@ -295,7 +303,6 @@ define([
|
|||
var open = Common.localStorage.getItem("sse-hide-right-settings");
|
||||
this._openRightMenu = (open===null || parseInt(open) == 0);
|
||||
|
||||
this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onFocusObject, this));
|
||||
this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onSelectionChanged, this));
|
||||
this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
|
||||
this.rightmenu.shapeSettings.createDelayedElements();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<table cols="2">
|
||||
<tr>
|
||||
<td colspan=2 class="padding-small">
|
||||
<label class="header"><%= scope.textBorders %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2>
|
||||
<div id="cell-combo-border-type" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
|
||||
<div style="display: inline-block; float:right;vertical-align: middle;">
|
||||
<label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
|
||||
<div id="cell-border-color-btn" style="display: inline-block;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2>
|
||||
<label class="input-label"><%= scope.textSelectBorders %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 class="padding-small">
|
||||
<div id="cell-button-border-all" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-none" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-inner" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-outer" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-diagu" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-diagd" style="display: inline-block;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 class="padding-small">
|
||||
<div id="cell-button-border-left" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-inner-vert" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-right" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-top" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-inner-hor" style="display: inline-block;"></div>
|
||||
<div id="cell-button-border-bottom" style="display: inline-block;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2 align="right">
|
||||
<label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
|
||||
<div id="cell-back-color-btn" style="display: inline-block;text-align:left;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="finish-cell"></tr>
|
||||
</table>
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
</div>
|
||||
<div id="id-signature-settings" class="settings-panel">
|
||||
</div>
|
||||
<div id="id-cell-settings" class="settings-panel">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-menu-btns">
|
||||
<div class="ct-btn-category arrow-left" />
|
||||
|
|
@ -26,6 +28,7 @@
|
|||
<button id="id-right-menu-text" class="btn btn-category arrow-left" content-target="id-paragraph-settings"><i class="icon img-toolbarmenu btn-menu-text"> </i></button>
|
||||
<button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon img-toolbarmenu btn-menu-textart"> </i></button>
|
||||
<button id="id-right-menu-pivot" class="btn btn-category arrow-left hidden" content-target="id-pivot-settings"><i class="icon img-toolbarmenu btn-menu-pivot"> </i></button>
|
||||
<button id="id-right-menu-cell" class="btn btn-category arrow-left" content-target="id-cell-settings"><i class="icon img-toolbarmenu btn-menu-cell"> </i></button>
|
||||
<button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings"><i class="icon img-toolbarmenu btn-menu-signature"> </i></button>
|
||||
</div>
|
||||
</div>
|
||||
337
apps/spreadsheeteditor/main/app/view/CellSettings.js
Normal file
337
apps/spreadsheeteditor/main/app/view/CellSettings.js
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System Limited 2010-2018
|
||||
*
|
||||
* This program is a free software product. You can redistribute it and/or
|
||||
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
||||
* version 3 as published by the Free Software Foundation. In accordance with
|
||||
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
||||
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
||||
* of any third-party rights.
|
||||
*
|
||||
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
||||
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
*
|
||||
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* The interactive user interfaces in modified source and object code versions
|
||||
* of the Program must display Appropriate Legal Notices, as required under
|
||||
* Section 5 of the GNU AGPL version 3.
|
||||
*
|
||||
* Pursuant to Section 7(b) of the License you must retain the original Product
|
||||
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
||||
* grant you any rights under trademark law for use of our trademarks.
|
||||
*
|
||||
* All the Product's GUI elements, including illustrations and icon sets, as
|
||||
* well as technical writing content are licensed under the terms of the
|
||||
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
||||
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* CellSettings.js
|
||||
*
|
||||
* Created by Julia Radzhabova on 6/08/18
|
||||
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([
|
||||
'text!spreadsheeteditor/main/app/template/CellSettings.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'common/main/lib/component/Button',
|
||||
'common/main/lib/component/ThemeColorPalette',
|
||||
'common/main/lib/component/ColorButton',
|
||||
'common/main/lib/component/ComboBorderSize'
|
||||
], function (menuTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
SSE.Views.CellSettings = Backbone.View.extend(_.extend({
|
||||
el: '#id-cell-settings',
|
||||
|
||||
// Compile our stats template
|
||||
template: _.template(menuTemplate),
|
||||
|
||||
// Delegated events for creating new items, and clearing completed ones.
|
||||
events: {
|
||||
},
|
||||
|
||||
options: {
|
||||
alias: 'CellSettings'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this._initSettings = true;
|
||||
|
||||
this._state = {
|
||||
BackColor: undefined,
|
||||
DisabledControls: false
|
||||
};
|
||||
this.lockedControls = [];
|
||||
this._locked = false;
|
||||
this.isEditCell = false;
|
||||
this.BorderType = 1;
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
onColorsBackSelect: function(picker, color) {
|
||||
this.btnBackColor.setColor(color);
|
||||
|
||||
if (this.api) {
|
||||
this.api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color));
|
||||
}
|
||||
|
||||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
addNewColor: function(picker, btn) {
|
||||
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
|
||||
},
|
||||
|
||||
onColorsBorderSelect: function(picker, color) {
|
||||
this.btnBorderColor.setColor(color);
|
||||
},
|
||||
|
||||
onBtnBordersClick: function(btn, eOpts){
|
||||
if (this.api) {
|
||||
var new_borders = [],
|
||||
bordersWidth = this.BorderType,
|
||||
bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
|
||||
|
||||
if (btn.options.borderId == 'inner') {
|
||||
new_borders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
} else if (btn.options.borderId == 'all') {
|
||||
new_borders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
} else if (btn.options.borderId == 'outer') {
|
||||
new_borders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
new_borders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
} else if (btn.options.borderId != 'none') {
|
||||
new_borders[btn.options.borderId] = new Asc.asc_CBorder(bordersWidth, bordersColor);
|
||||
}
|
||||
|
||||
this.api.asc_setCellBorders(new_borders);
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete', this);
|
||||
},
|
||||
|
||||
onBorderTypeSelect: function(combo, record) {
|
||||
this.BorderType = record.value;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var el = $(this.el);
|
||||
el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
},
|
||||
|
||||
setApi: function(o) {
|
||||
this.api = o;
|
||||
if (o) {
|
||||
this.api.asc_registerCallback('asc_onEditCell', this.onApiEditCell.bind(this));
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
createDelayedControls: function() {
|
||||
var _arrBorderPosition = [
|
||||
[Asc.c_oAscBorderOptions.Left, 'btn-borders-small btn-position-left', 'cell-button-border-left', this.tipLeft],
|
||||
[Asc.c_oAscBorderOptions.InnerV,'btn-borders-small btn-position-inner-vert','cell-button-border-inner-vert', this.tipInnerVert],
|
||||
[Asc.c_oAscBorderOptions.Right, 'btn-borders-small btn-position-right', 'cell-button-border-right', this.tipRight],
|
||||
[Asc.c_oAscBorderOptions.Top, 'btn-borders-small btn-position-top', 'cell-button-border-top', this.tipTop],
|
||||
[Asc.c_oAscBorderOptions.InnerH,'btn-borders-small btn-position-inner-hor', 'cell-button-border-inner-hor', this.tipInnerHor],
|
||||
[Asc.c_oAscBorderOptions.Bottom,'btn-borders-small btn-position-bottom', 'cell-button-border-bottom', this.tipBottom],
|
||||
[Asc.c_oAscBorderOptions.DiagU, 'btn-borders-small btn-position-bottom', 'cell-button-border-diagu', this.tipDiagU],
|
||||
[Asc.c_oAscBorderOptions.DiagD, 'btn-borders-small btn-position-bottom', 'cell-button-border-diagd', this.tipDiagD],
|
||||
['inner', 'btn-borders-small btn-position-inner', 'cell-button-border-inner', this.tipInner],
|
||||
['outer', 'btn-borders-small btn-position-outer', 'cell-button-border-outer', this.tipOuter],
|
||||
['all', 'btn-borders-small btn-position-all', 'cell-button-border-all', this.tipAll],
|
||||
['none', 'btn-borders-small btn-position-none', 'cell-button-border-none', this.tipNone]
|
||||
];
|
||||
|
||||
_.each(_arrBorderPosition, function(item, index, list){
|
||||
var _btn = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: item[1],
|
||||
borderId:item[0],
|
||||
hint: item[3]
|
||||
});
|
||||
_btn.render( $('#'+item[2])) ;
|
||||
_btn.on('click', _.bind(this.onBtnBordersClick, this));
|
||||
this.lockedControls.push(_btn);
|
||||
}, this);
|
||||
|
||||
this.cmbBorderType = new Common.UI.ComboBorderType({
|
||||
el: $('#cell-combo-border-type'),
|
||||
style: "width: 93px;",
|
||||
menuStyle: 'min-width: 93px;',
|
||||
data: [
|
||||
{ value: Asc.c_oAscBorderStyles.Thin, offsety: 0},
|
||||
{ value: Asc.c_oAscBorderStyles.Hair, offsety: 20},
|
||||
{ value: Asc.c_oAscBorderStyles.Dotted, offsety: 40},
|
||||
{ value: Asc.c_oAscBorderStyles.Dashed, offsety: 60},
|
||||
{ value: Asc.c_oAscBorderStyles.DashDot, offsety: 80},
|
||||
{ value: Asc.c_oAscBorderStyles.DashDotDot, offsety: 100},
|
||||
{ value: Asc.c_oAscBorderStyles.Medium, offsety: 120},
|
||||
{ value: Asc.c_oAscBorderStyles.MediumDashed, offsety: 140},
|
||||
{ value: Asc.c_oAscBorderStyles.MediumDashDot, offsety: 160},
|
||||
{ value: Asc.c_oAscBorderStyles.MediumDashDotDot, offsety: 180},
|
||||
{ value: Asc.c_oAscBorderStyles.Thick, offsety: 200}
|
||||
]
|
||||
}).on('selected', _.bind(this.onBorderTypeSelect, this));
|
||||
this.BorderType = Asc.c_oAscBorderStyles.Thin;
|
||||
this.cmbBorderType.setValue(this.BorderType);
|
||||
this.lockedControls.push(this.cmbBorderType);
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
this.createDelayedControls();
|
||||
this.UpdateThemeColors();
|
||||
this._initSettings = false;
|
||||
},
|
||||
|
||||
ChangeSettings: function(props) {
|
||||
if (this._initSettings)
|
||||
this.createDelayedElements();
|
||||
|
||||
this.disableControls(this._locked); // need to update combodataview after disabled state
|
||||
|
||||
if (props )
|
||||
{
|
||||
var color = props.asc_getFill().asc_getColor(),
|
||||
clr;
|
||||
if (color) {
|
||||
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());
|
||||
}
|
||||
} else {
|
||||
clr = 'transparent';
|
||||
}
|
||||
|
||||
var type1 = typeof(clr);
|
||||
var type2 = typeof(this._state.BackColor);
|
||||
if ( (type1 !== type2) || (type1=='object' &&
|
||||
(clr.effectValue!==this._state.BackColor.effectValue || this._state.BackColor.color.indexOf(clr.color)<0)) ||
|
||||
(type1!='object' && this._state.BackColor!==undefined && this._state.BackColor.indexOf(clr)<0 )) {
|
||||
|
||||
this.btnBackColor.setColor(clr);
|
||||
if (_.isObject(clr)) {
|
||||
var isselected = false;
|
||||
for (var i = 0; i < 10; i++) {
|
||||
if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
|
||||
this.colorsBack.select(clr,true);
|
||||
isselected = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!isselected) this.colorsBack.clearSelection();
|
||||
} else {
|
||||
this.colorsBack.select(clr, true);
|
||||
}
|
||||
this._state.BackColor = clr;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
UpdateThemeColors: function() {
|
||||
if (!this.btnBackColor) {
|
||||
// create color buttons
|
||||
this.btnBorderColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="cell-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="cell-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnBorderColor.render( $('#cell-border-color-btn'));
|
||||
this.btnBorderColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnBorderColor);
|
||||
this.borderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#cell-border-color-menu')
|
||||
});
|
||||
this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
||||
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="cell-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="cell-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnBackColor.render( $('#cell-back-color-btn'));
|
||||
this.btnBackColor.setColor('transparent');
|
||||
this.lockedControls.push(this.btnBackColor);
|
||||
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#cell-back-color-menu'),
|
||||
transparent: true
|
||||
});
|
||||
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||
this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||
}
|
||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.btnBorderColor.setColor(this.borderColor.getColor());
|
||||
},
|
||||
|
||||
onApiEditCell: function(state) {
|
||||
this.isEditCell = (state != Asc.c_oAscCellEditorState.editEnd);
|
||||
if ( state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd)
|
||||
this.disableControls(this._locked);
|
||||
},
|
||||
|
||||
setLocked: function (locked) {
|
||||
this._locked = locked;
|
||||
},
|
||||
|
||||
disableControls: function(disable) {
|
||||
if (this._initSettings) return;
|
||||
disable = disable || this.isEditCell;
|
||||
|
||||
if (this._state.DisabledControls!==disable) {
|
||||
this._state.DisabledControls = disable;
|
||||
_.each(this.lockedControls, function(item) {
|
||||
item.setDisabled(disable);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
textBorders: 'Border\'s Style',
|
||||
textBorderColor: 'Color',
|
||||
textBackColor: 'Background color',
|
||||
textSelectBorders : 'Select borders that you want to change',
|
||||
textNewColor : 'Add New Custom Color',
|
||||
tipTop: 'Set Outer Top Border Only',
|
||||
tipLeft: 'Set Outer Left Border Only',
|
||||
tipBottom: 'Set Outer Bottom Border Only',
|
||||
tipRight: 'Set Outer Right Border Only',
|
||||
tipAll: 'Set Outer Border and All Inner Lines',
|
||||
tipNone: 'Set No Borders',
|
||||
tipInner: 'Set Inner Lines Only',
|
||||
tipInnerVert: 'Set Vertical Inner Lines Only',
|
||||
tipInnerHor: 'Set Horizontal Inner Lines Only',
|
||||
tipOuter: 'Set Outer Border Only',
|
||||
tipDiagU: 'Set Diagonal Up Border',
|
||||
tipDiagD: 'Set Diagonal Down Border'
|
||||
|
||||
}, SSE.Views.CellSettings || {}));
|
||||
});
|
||||
|
|
@ -57,6 +57,7 @@ define([
|
|||
'spreadsheeteditor/main/app/view/TableSettings',
|
||||
'spreadsheeteditor/main/app/view/PivotSettings',
|
||||
'spreadsheeteditor/main/app/view/SignatureSettings',
|
||||
'spreadsheeteditor/main/app/view/CellSettings',
|
||||
'common/main/lib/component/Scroller'
|
||||
], function (menuTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
|
@ -133,6 +134,14 @@ define([
|
|||
toggleGroup: 'tabpanelbtnsGroup',
|
||||
allowMouseEventsOnDisabled: true
|
||||
});
|
||||
this.btnCell = new Common.UI.Button({
|
||||
hint: this.txtCellSettings,
|
||||
asctype: Common.Utils.documentSettingsType.Cell,
|
||||
enableToggle: true,
|
||||
disabled: true,
|
||||
toggleGroup: 'tabpanelbtnsGroup',
|
||||
allowMouseEventsOnDisabled: true
|
||||
});
|
||||
|
||||
this._settings = [];
|
||||
this._settings[Common.Utils.documentSettingsType.Paragraph] = {panel: "id-paragraph-settings", btn: this.btnText};
|
||||
|
|
@ -142,6 +151,7 @@ define([
|
|||
this._settings[Common.Utils.documentSettingsType.TextArt] = {panel: "id-textart-settings", btn: this.btnTextArt};
|
||||
this._settings[Common.Utils.documentSettingsType.Table] = {panel: "id-table-settings", btn: this.btnTable};
|
||||
this._settings[Common.Utils.documentSettingsType.Pivot] = {panel: "id-pivot-settings", btn: this.btnPivot};
|
||||
this._settings[Common.Utils.documentSettingsType.Cell] = {panel: "id-cell-settings", btn: this.btnCell};
|
||||
|
||||
return this;
|
||||
},
|
||||
|
|
@ -164,6 +174,7 @@ define([
|
|||
this.btnTextArt.setElement($('#id-right-menu-textart'), false); this.btnTextArt.render();
|
||||
this.btnTable.setElement($('#id-right-menu-table'), false); this.btnTable.render();
|
||||
this.btnPivot.setElement($('#id-right-menu-pivot'), false); this.btnPivot.render();
|
||||
this.btnCell.setElement($('#id-right-menu-cell'), false); this.btnCell.render();
|
||||
|
||||
this.btnText.on('click', _.bind(this.onBtnMenuClick, this));
|
||||
this.btnImage.on('click', _.bind(this.onBtnMenuClick, this));
|
||||
|
|
@ -172,6 +183,7 @@ define([
|
|||
this.btnTextArt.on('click', _.bind(this.onBtnMenuClick, this));
|
||||
this.btnTable.on('click', _.bind(this.onBtnMenuClick, this));
|
||||
this.btnPivot.on('click', _.bind(this.onBtnMenuClick, this));
|
||||
this.btnCell.on('click', _.bind(this.onBtnMenuClick, this));
|
||||
|
||||
this.paragraphSettings = new SSE.Views.ParagraphSettings();
|
||||
this.imageSettings = new SSE.Views.ImageSettings();
|
||||
|
|
@ -180,6 +192,7 @@ define([
|
|||
this.textartSettings = new SSE.Views.TextArtSettings();
|
||||
this.tableSettings = new SSE.Views.TableSettings();
|
||||
this.pivotSettings = new SSE.Views.PivotSettings();
|
||||
this.cellSettings = new SSE.Views.CellSettings();
|
||||
|
||||
if (mode && mode.canProtect) {
|
||||
this.btnSignature = new Common.UI.Button({
|
||||
|
|
@ -233,6 +246,7 @@ define([
|
|||
this.textartSettings.setApi(api);
|
||||
this.tableSettings.setApi(api);
|
||||
this.pivotSettings.setApi(api);
|
||||
this.cellSettings.setApi(api);
|
||||
if (this.signatureSettings) this.signatureSettings.setApi(api);
|
||||
return this;
|
||||
},
|
||||
|
|
@ -313,6 +327,7 @@ define([
|
|||
txtSparklineSettings: 'Sparkline Settings',
|
||||
txtTableSettings: 'Table Settings',
|
||||
txtPivotSettings: 'Pivot Table Settings',
|
||||
txtSignatureSettings: 'Signature Settings'
|
||||
txtSignatureSettings: 'Signature Settings',
|
||||
txtCellSettings: 'Cell Settings'
|
||||
}, SSE.Views.RightMenu || {}));
|
||||
});
|
||||
|
|
@ -930,6 +930,23 @@
|
|||
"SSE.Views.CellRangeDialog.txtEmpty": "This field is required",
|
||||
"SSE.Views.CellRangeDialog.txtInvalidRange": "ERROR! Invalid cells range",
|
||||
"SSE.Views.CellRangeDialog.txtTitle": "Select Data Range",
|
||||
"SSE.Views.CellSetings.textBackColor": "Background Color",
|
||||
"SSE.Views.CellSetings.textBorderColor": "Color",
|
||||
"SSE.Views.CellSetings.textBorders": "Borders Style",
|
||||
"SSE.Views.CellSetings.textNewColor": "Add New Custom Color",
|
||||
"SSE.Views.CellSetings.textSelectBorders": "Select borders you want to change applying style chosen above",
|
||||
"SSE.Views.CellSetings.tipAll": "Set outer border and all inner lines",
|
||||
"SSE.Views.CellSetings.tipBottom": "Set outer bottom border only",
|
||||
"SSE.Views.CellSetings.tipDiagU": "Set Diagonal Up Border",
|
||||
"SSE.Views.CellSetings.tipDiagD": "Set Diagonal Down Border",
|
||||
"SSE.Views.CellSetings.tipInner": "Set inner lines only",
|
||||
"SSE.Views.CellSetings.tipInnerHor": "Set horizontal inner lines only",
|
||||
"SSE.Views.CellSetings.tipInnerVert": "Set vertical inner lines only",
|
||||
"SSE.Views.CellSetings.tipLeft": "Set outer left border only",
|
||||
"SSE.Views.CellSetings.tipNone": "Set no borders",
|
||||
"SSE.Views.CellSetings.tipOuter": "Set outer border only",
|
||||
"SSE.Views.CellSetings.tipRight": "Set outer right border only",
|
||||
"SSE.Views.CellSetings.tipTop": "Set outer top border only",
|
||||
"SSE.Views.ChartSettings.strLineWeight": "Line Weight",
|
||||
"SSE.Views.ChartSettings.strSparkColor": "Color",
|
||||
"SSE.Views.ChartSettings.strTemplate": "Template",
|
||||
|
|
@ -1569,6 +1586,7 @@
|
|||
"SSE.Views.PrintSettings.textShowHeadings": "Show Rows and Columns Headings",
|
||||
"SSE.Views.PrintSettings.textTitle": "Print Settings",
|
||||
"SSE.Views.PrintSettings.textTitlePDF": "PDF Settings",
|
||||
"SSE.Views.RightMenu.txtCellSettings": "Cell settings",
|
||||
"SSE.Views.RightMenu.txtChartSettings": "Chart settings",
|
||||
"SSE.Views.RightMenu.txtImageSettings": "Image settings",
|
||||
"SSE.Views.RightMenu.txtParagraphSettings": "Text settings",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@
|
|||
|
||||
/*menuPivot*/
|
||||
.toolbar-btn-icon(btn-menu-pivot, 87, @toolbar-icon-size);
|
||||
|
||||
/*menuCell*/
|
||||
.toolbar-btn-icon(btn-menu-cell, 80, @toolbar-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,6 +105,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-toolbar:not(.x-huge) .icon:not(svg).btn-borders-small {
|
||||
.background-ximage('@{common-image-path}/right-panels/SmallBorders.png', '@{common-image-path}/right-panels/SmallBorders@2x.png', 84px);
|
||||
}
|
||||
|
||||
.button-normal-icon(btn-position-all, 0, 21px);
|
||||
.button-normal-icon(btn-position-inner, 1, 21px);
|
||||
.button-normal-icon(btn-position-bottom, 2, 21px);
|
||||
.button-normal-icon(btn-position-inner-hor, 3, 21px);
|
||||
.button-normal-icon(btn-position-top, 4, 21px);
|
||||
.button-normal-icon(btn-position-none, 5, 21px);
|
||||
.button-normal-icon(btn-position-outer, 6, 21px);
|
||||
.button-normal-icon(btn-position-left, 7, 21px);
|
||||
.button-normal-icon(btn-position-inner-vert, 8, 21px);
|
||||
.button-normal-icon(btn-position-right, 9, 21px);
|
||||
|
||||
.button-otherstates-icon(btn-borders-small, 21px);
|
||||
|
||||
.btn-edit-table,
|
||||
.btn-change-shape {
|
||||
.background-ximage('@{common-image-path}/right-panels/rowscols_icon.png', '@{common-image-path}/right-panels/rowscols_icon@2x.png', 84px);
|
||||
|
|
|
|||
Loading…
Reference in a new issue