[SSE] Add cell settings to the right panel

apps/common/main/lib/util/utils.js

@@ -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,

apps/spreadsheeteditor/main/app/controller/RightMenu.js

@@ -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(),
+            this.onFocusObject(SelectedObjects, cellInfo, formatTableInfo, sparkLineInfo, pivotInfo);
-                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);
         },
 
-        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() )
+                    if (!pnl.btn.isDisabled()) pnl.btn.setDisabled(true);
-                        pnl.btn.setDisabled(true);
                     if (activePane == pnl.panelId)
                         currentactive = -1;
                 } else {
-                    if ( pnl.btn.isDisabled() )
+                    if (pnl.btn.isDisabled()) pnl.btn.setDisabled(false);
-                        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();

apps/spreadsheeteditor/main/app/template/CellSettings.template

@@ -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>

apps/spreadsheeteditor/main/app/template/RightMenu.template

@@ -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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</i></button>
     </div>
 </div>

apps/spreadsheeteditor/main/app/view/CellSettings.js

@@ -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 || {}));
+});

apps/spreadsheeteditor/main/app/view/RightMenu.js

@@ -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 || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -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",

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -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);