changes SE

test/spreadsheeteditor/main/index.html

@@ -10,6 +10,7 @@
     <!-- debug begin -->
     <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main.css"/>
     <link rel="stylesheet/less" type="text/css" href="resources/less/application.less" />
+    <link rel="stylesheet/less" type="text/css" href="resources/less/celleditor.less" />
     <!-- debug end -->
 
     <!-- splash -->
@@ -204,6 +205,17 @@
 </script>
 
 <div class="viewer">
+    <div class="ce-group-name">
+        <input id="ce-cell-name" class="aslabel form-control" type="text">
+        <div id="ce-cell-name-menu"></div>
+        <button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
+    </div>
+    <div class="ce-group-expand">
+        <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
+    </div>
+    <div class="ce-group-content">
+        <textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
+    </div>
     <div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
     <ul id="worksheets" class="worksheet-list"></ul>
 </div>
@@ -257,6 +269,7 @@
 <script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
 <script type="text/javascript" src="../../../vendor/jszip-utils/jszip-utils.min.js"></script>
 
+
 <script src="../../../vendor/requirejs/require.js"></script>
 <script>
     require.config({
@@ -278,8 +291,14 @@
 <script type="text/javascript" src="../../unit-tests/common/main/lib/util/LocalStorage.js"></script>
 <script type="text/javascript" src="../../unit-tests/common/main/lib/util/utils.js"></script>
 <script type="text/javascript" src="../../unit-tests/common/main/lib/view/LoadMask.js"></script>
+
+<!--<script type="text/javascript" src="../../unit-tests/common/main/lib/component/BaseView.js"></script>
+<script type="text/javascript" src="../../unit-tests/common/main/lib/core/application.js"></script>-->
 <!--<script type="text/javascript" src="../../unit-tests/common/main/lib/view/modals.js"></script>
-<script type="text/javascript" src="../../unit-tests/common/main/lib/controller/modals.js"></script>-->
+<script type="text/javascript" src="../../unit-tests/common/main/lib/controller/modals.js"></script>
+<script type="text/javascript" src="js/CellEditorView.js"></script>
+<script type="text/javascript" src="js/CellEditorController.js"></script>-->
+
 <script type="text/javascript" src="js/ApplicationView.js"></script>
 <script type="text/javascript" src="js/ApplicationController.js"></script>
 <script type="text/javascript" src="js/application.js"></script>

test/spreadsheeteditor/main/js/ApplicationController.js

@@ -134,7 +134,7 @@ SSE.ApplicationController = new(function(){
                 api.asc_registerCallback('asc_onRunAutostartMacroses', onRunAutostartMacroses);
                 api.asc_setDocInfo(docInfo);
                 api.asc_getEditorPermissions(config.licenseUrl, config.customerId);
-                api.asc_enableKeyEvents(true);
+                api.asc_enableKeyEvents(false);
 
                // Common.Analytics.trackEvent('Load', 'Start');
             }
@@ -202,6 +202,7 @@ SSE.ApplicationController = new(function(){
         hidePreloader();
         onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
 
+
         if ( permissions.print === false)
             $('#idt-print').hide();
 
@@ -241,6 +242,8 @@ SSE.ApplicationController = new(function(){
         Common.Gateway.on('downloadas',         onDownloadAs);
         Common.Gateway.on('requestclose',       onRequestClose);
 
+
+
         SSE.ApplicationView.tools.get('#idt-fullscreen')
             .on('click', function(){
                 common.utils.openLink(embedConfig.fullscreenUrl);
@@ -379,7 +382,7 @@ SSE.ApplicationController = new(function(){
 
         onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
         
-        api.asc_setViewMode(true);
+        //api.asc_setViewMode(true);
         api.asc_LoadDocument();
     }
     
@@ -427,6 +430,8 @@ SSE.ApplicationController = new(function(){
             }
 
             me.loadMask && me.loadMask.hide();
+           /* if (type == Asc.c_oAscAsyncActionType.BlockInteraction && !( (id == Asc.c_oAscAsyncAction['LoadDocumentFonts'] || id == Asc.c_oAscAsyncAction['ApplyChanges']) && (this.dontCloseDummyComment || this.inTextareaControl || Common.Utils.ModalWindow.isVisible() || this.inFormControl) ))
+                this.onEditComplete(this.loadMask, {restorefocus:true});*/
         }
     }
 

test/spreadsheeteditor/main/js/ApplicationView.js

@@ -36,13 +36,39 @@ if (SSE === undefined) {
 
 SSE.ApplicationView = new(function(){
 
-    var $btnTools;
+    var $btnTools
+        ,$cellname
+        ,$btnexpand
+        ,$btnfunc
+        ,btnNamedRanges;
+
+
 
     // Initialize view
 
     function createView(){
+
+        $cellname = $('#ce-cell-name');
+        $btnexpand = $('#ce-btn-expand');
+        $btnfunc = $('#ce-func-label');
+        $btnfunc.addClass('disabled');
+        /*btnNamedRanges = new Common.UI.Button({
+            parentEl: $('#ce-cell-name-menu'),
+            menu        : new Common.UI.Menu({
+                style   : 'min-width: 70px;max-width:400px;',
+                maxHeight: 250,
+                items: [
+                    { caption: this.textManager, value: 'manager' },
+                    { caption: '--' }
+                ]
+            })
+        });
+        this.btnNamedRanges.setVisible(false);
+        this.btnNamedRanges.menu.setOffset(-81);*/
+
         $btnTools = $('#box-tools button');
 
+
         $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
         $btnTools.parent().append(
             '<ul class="dropdown-menu pull-right">' +
@@ -59,12 +85,25 @@ SSE.ApplicationView = new(function(){
     function getTools(name) {
         return $btnTools.parent().find(name);
     }
+    function updateCellInfo(info) {
+        if (info) {
+            this.$cellname.val(typeof(info)=='string' ? info : info.asc_getName());
+        }
+    }
+    function cellNameDisabled(disabled){
+        (disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled');
+        this.btnNamedRanges.setDisabled(disabled);
+    }
 
     return {
         create: createView
         , tools: {
             get: getTools
         },
+        cell:   {
+            updateInfo: updateCellInfo,
+            nameDisabled: cellNameDisabled
+        },
 
         txtDownload: 'Download',
         txtPrint: 'Print',

test/spreadsheeteditor/main/js/CellEditorController.js

@@ -0,0 +1,338 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * 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 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * 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
+ *
+*/
+/**
+ *    CellEditor.js
+ *
+ *    CellEditor Controller
+ *
+ *    Created by Maxim Kadushkin on 08 April 2014
+ *    Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'test/unit-tests/common/main/lib/core/application'
+
+], function (Viewport) {
+    'use strict';
+
+    SSE.Controllers.CellEditor = Backbone.Controller.extend({
+        views: [
+            'CellEditorView'
+        ],
+
+        events: function() {
+            return {
+                'keyup input#ce-cell-name': _.bind(this.onCellName,this),
+                'keyup textarea#ce-cell-content': _.bind(this.onKeyupCellEditor,this),
+                'blur textarea#ce-cell-content': _.bind(this.onBlurCellEditor,this),
+                'click button#ce-btn-expand': _.bind(this.expandEditorField,this),
+                'click button#ce-func-label': _.bind(this.onInsertFunction, this)
+            };
+        },
+
+        initialize: function() {
+            this.addListeners({
+                'CellEditor': {},
+                'Viewport': {
+                    'layout:resizedrag': _.bind(this.onLayoutResize, this)
+                },
+                'Common.Views.Header': {
+                    'formulabar:hide': function (state) {
+                        this.editor.setVisible(!state);
+                        common.localStorage.setBool('sse-hidden-formula', state);
+                        Common.NotificationCenter.trigger('layout:changed', 'celleditor', state?'hidden':'showed');
+                    }.bind(this)
+                }
+            });
+        },
+
+        setApi: function(api) {
+            this.api = api;
+
+            this.api.isCEditorFocused = false;
+            this.api.asc_registerCallback('asc_onSelectionNameChanged', _.bind(this.onApiCellSelection, this));
+            this.api.asc_registerCallback('asc_onEditCell', _.bind(this.onApiEditCell, this));
+            this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiDisconnect,this));
+            Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiDisconnect, this));
+            Common.NotificationCenter.on('cells:range', _.bind(this.onCellsRange, this));
+            this.api.asc_registerCallback('asc_onLockDefNameManager', _.bind(this.onLockDefNameManager, this));
+            this.api.asc_registerCallback('asc_onInputKeyDown', _.bind(this.onInputKeyDown, this));
+
+            return this;
+        },
+
+        setMode: function(mode) {
+            this.mode = mode;
+
+            this.editor.$btnfunc[this.mode.isEdit?'removeClass':'addClass']('disabled');
+            this.editor.btnNamedRanges.setVisible(this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge);
+
+            if ( this.mode.isEdit ) {
+                this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onApiSelectionChanged, this));
+            }
+        },
+
+        onInputKeyDown: function(e) {
+            if (Common.UI.Keys.UP === e.keyCode || Common.UI.Keys.DOWN === e.keyCode ||
+                Common.UI.Keys.TAB === e.keyCode || Common.UI.Keys.RETURN === e.keyCode || Common.UI.Keys.ESC === e.keyCode ||
+                Common.UI.Keys.LEFT === e.keyCode || Common.UI.Keys.RIGHT === e.keyCode) {
+                var menu = $('#menu-formula-selection'); // for formula menu
+                if (menu.hasClass('open'))
+                    menu.find('.dropdown-menu').trigger('keydown', e);
+            } 
+        },
+
+        onLaunch: function() {
+            this.editor = this.getView('CellEditor');
+            this.bindViewEvents(this.editor, this.events);
+
+            this.editor.$el.parent().find('.after').css({zIndex: '4'}); // for spreadsheets - bug 23127
+
+            var val = common.localStorage.getItem('sse-celleditor-height');
+            this.editor.keep_height = (val!==null && parseInt(val)>0) ? parseInt(val) : 74;
+            if (common.localStorage.getBool('sse-celleditor-expand')) {
+                this.editor.$el.height(this.editor.keep_height);
+                this.onLayoutResize(undefined, 'cell:edit');
+            }
+
+            this.editor.btnNamedRanges.menu.on('item:click', _.bind(this.onNamedRangesMenu, this))
+                                           .on('show:before', _.bind(this.onNameBeforeShow, this));
+            this.namedrange_locked = false;
+        },
+
+        onApiEditCell: function(state) {
+            if (this.viewmode) return; // signed file
+
+            if (state == Asc.c_oAscCellEditorState.editStart){
+                this.api.isCellEdited = true;
+                this.editor.cellNameDisabled(true);
+            } else if (state == Asc.c_oAscCellEditorState.editInCell) {
+                this.api.isCEditorFocused = 'clear';
+            } else if (state == Asc.c_oAscCellEditorState.editEnd) {
+                this.api.isCellEdited = false;
+                this.api.isCEditorFocused = false;
+                this.editor.cellNameDisabled(false);
+            }
+            this.editor.$btnfunc.toggleClass('disabled', state == Asc.c_oAscCellEditorState.editText);
+        },
+
+        onApiCellSelection: function(info) {
+            this.editor.updateCellInfo(info);
+        },
+
+        onApiSelectionChanged: function(info) {
+            if (this.viewmode) return; // signed file
+
+            var seltype = info.asc_getSelectionType(),
+                coauth_disable = (!this.mode.isEditMailMerge && !this.mode.isEditDiagram) ? (info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true) : false;
+
+            var is_chart_text   = seltype == Asc.c_oAscSelectionType.RangeChartText,
+                is_chart        = seltype == Asc.c_oAscSelectionType.RangeChart,
+                is_shape_text   = seltype == Asc.c_oAscSelectionType.RangeShapeText,
+                is_shape        = seltype == Asc.c_oAscSelectionType.RangeShape,
+                is_image        = seltype == Asc.c_oAscSelectionType.RangeImage || seltype == Asc.c_oAscSelectionType.RangeSlicer,
+                is_mode_2       = is_shape_text || is_shape || is_chart_text || is_chart;
+
+            this.editor.$btnfunc.toggleClass('disabled', is_image || is_mode_2 || coauth_disable);
+        },
+
+        onApiDisconnect: function() {
+            this.mode.isEdit = false;
+
+            var controller = this.getApplication().getController('FormulaDialog');
+            if (controller) {
+                controller.hideDialog();
+            }
+
+            if (!this.mode.isEdit) {
+                $('#ce-func-label', this.editor.el).addClass('disabled');
+                this.editor.btnNamedRanges.setVisible(false);
+            }
+        },
+
+        onCellsRange: function(status) {
+            this.editor.cellNameDisabled(status != Asc.c_oAscSelectionDialogType.None);
+            this.editor.$btnfunc.toggleClass('disabled', status != Asc.c_oAscSelectionDialogType.None);
+        },
+
+        onLayoutResize: function(o, r) {
+            if (r == 'cell:edit') {
+                if (Math.floor(this.editor.$el.height()) > 19) {
+                    if (!this.editor.$btnexpand.hasClass('btn-collapse')) {
+                        this.editor.$el.addClass('expanded');
+                        this.editor.$btnexpand['addClass']('btn-collapse');
+                    }
+
+                    o && common.localStorage.setItem('sse-celleditor-height', this.editor.$el.height());
+                    o && common.localStorage.setBool('sse-celleditor-expand', true);
+                } else {
+                    this.editor.$el.removeClass('expanded');
+                    this.editor.$btnexpand['removeClass']('btn-collapse');
+                    o && common.localStorage.setBool('sse-celleditor-expand', false);
+                }
+            }
+        },
+
+        onCellName: function(e) {
+            if (e.keyCode == Common.UI.Keys.RETURN){
+                var name = this.editor.$cellname.val();
+                if (name && name.length) {
+                    this.api.asc_findCell(name);
+                }
+
+                Common.NotificationCenter.trigger('edit:complete', this.editor);
+            }
+        },
+
+        onBlurCellEditor: function() {
+            if (this.api.isCEditorFocused == 'clear')
+                this.api.isCEditorFocused = undefined;
+            else if (this.api.isCellEdited)
+                this.api.isCEditorFocused = true;
+//            if (Common.Utils.isIE && !$('#menu-formula-selection').hasClass('open')) {// for formula menu
+//                this.getApplication().getController('DocumentHolder').documentHolder.focus();
+//            }
+        },
+
+        onKeyupCellEditor: function(e) {
+            if(e.keyCode == Common.UI.Keys.RETURN && !e.altKey){
+                this.api.isCEditorFocused = 'clear';
+            }
+        },
+
+        expandEditorField: function() {
+            if ( Math.floor(this.editor.$el.height()) > 19) {
+                this.editor.keep_height = this.editor.$el.height();
+                this.editor.$el.height(19);
+                this.editor.$el.removeClass('expanded');
+                this.editor.$btnexpand['removeClass']('btn-collapse');
+                common.localStorage.setBool('sse-celleditor-expand', false);
+            } else {
+                this.editor.$el.height(this.editor.keep_height);
+                this.editor.$el.addClass('expanded');
+                this.editor.$btnexpand['addClass']('btn-collapse');
+                common.localStorage.setBool('sse-celleditor-expand', true);
+            }
+            
+            Common.NotificationCenter.trigger('layout:changed', 'celleditor');
+            Common.NotificationCenter.trigger('edit:complete', this.editor, {restorefocus:true});
+        },
+
+        onInsertFunction: function() {
+            if (this.viewmode) return; // signed file
+
+            if ( this.mode.isEdit && !this.editor.$btnfunc['hasClass']('disabled')) {
+                var controller = this.getApplication().getController('FormulaDialog');
+                if (controller) {
+                    $('#ce-func-label', this.editor.el).blur();
+                    controller.showDialog();
+                }
+            }
+        },
+
+        onNamedRangesMenu: function(menu, item) {
+            var me = this;
+            if (item.options.value=='manager') {
+                var wc = this.api.asc_getWorksheetsCount(),
+                        i = -1,
+                        items = [], sheetNames = [];
+                while (++i < wc) {
+                    if (!this.api.asc_isWorksheetHidden(i)) {
+                        sheetNames[i] = this.api.asc_getWorksheetName(i);
+                        items.push({displayValue: sheetNames[i], value: i});
+                    }
+                }
+
+                (new SSE.Views.NameManagerDlg({
+                    api: this.api,
+                    handler: function(result) {
+                        Common.NotificationCenter.trigger('edit:complete', me.editor);
+                    },
+                    locked: this.namedrange_locked,
+                    sheets: items,
+                    sheetNames: sheetNames,
+                    ranges: this.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.All),
+                    props : this.api.asc_getDefaultDefinedName(),
+                    sort  : this.rangeListSort
+                })).on('close', function(win){
+                    me.rangeListSort = win.getSettings();
+                }).show();
+            } else {
+                this.api.asc_findCell(item.caption);
+                Common.NotificationCenter.trigger('edit:complete', this.editor);
+            }
+        },
+
+        onNameBeforeShow: function() {
+            var names = this.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.WorksheetWorkbook, true),
+                rangesMenu = this.editor.btnNamedRanges.menu,
+                prev_name='';
+
+            rangesMenu.removeItems(2, rangesMenu.items.length-1);
+            names.sort(function(item1, item2) {
+                var n1 = item1.asc_getName(true).toLowerCase(),
+                    n2 = item2.asc_getName(true).toLowerCase();
+                if (n1==n2) return 0;
+                return (n1<n2) ? -1 : 1;
+            });
+            _.each(names, function(field, index) {
+                var name = field.asc_getName(true);
+                if (prev_name !== name) {
+                    rangesMenu.addItem(new Common.UI.MenuItem({
+                        caption : name
+                    }));
+                }
+                prev_name = name;
+            });
+            this.editor.btnNamedRanges.menu.items[0].setDisabled(!!this.api.asc_isProtectedSheet());
+            this.editor.btnNamedRanges.menu.items[1].setVisible(rangesMenu.items.length>2);
+        },
+
+        onLockDefNameManager: function(state) {
+            this.namedrange_locked = (state == Asc.c_oAscDefinedNameReason.LockDefNameManager);
+        },
+
+        SetDisabled: function(disabled) {
+            this.editor.$btnfunc[!disabled && this.mode.isEdit ?'removeClass':'addClass']('disabled');
+            this.editor.btnNamedRanges.setVisible(!disabled && this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge);
+        },
+
+        setPreviewMode: function(mode) {
+            if (this.viewmode === mode) return;
+            this.viewmode = mode;
+            this.editor.$btnfunc[!mode && this.mode.isEdit?'removeClass':'addClass']('disabled');
+            this.editor.cellNameDisabled(mode && !(this.mode.isEdit && !this.mode.isEditDiagram && !this.mode.isEditMailMerge));
+        }
+    });
+});

test/spreadsheeteditor/main/js/CellEditorView.js

@@ -0,0 +1,106 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * 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 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * 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
+ *
+*/
+/**
+ *    CellEdit.js
+ *
+ *    Created by Maxim Kadushkin on 04 April 2014
+ *    Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!spreadsheeteditor/main/template/CellEditor.template',
+    'test/unit-tests/common/main/lib/component/BaseView'
+], function (template) {
+    'use strict';
+
+    SSE.Views.CellEditor = Common.UI.BaseView.extend(_.extend({
+        template: _.template(template),
+
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+        },
+
+        render: function () {
+            $(this.el).html(this.template());
+
+            this.btnNamedRanges = new Common.UI.Button({
+                parentEl: $('#ce-cell-name-menu'),
+                menu        : new Common.UI.Menu({
+                    style   : 'min-width: 70px;max-width:400px;',
+                    maxHeight: 250,
+                    items: [
+                        { caption: this.textManager, value: 'manager' },
+                        { caption: '--' }
+                    ]
+                })
+            });
+            this.btnNamedRanges.setVisible(false);
+            this.btnNamedRanges.menu.setOffset(-81);
+
+            this.$cellname = $('#ce-cell-name', this.el);
+            this.$btnexpand = $('#ce-btn-expand', this.el);
+            this.$btnfunc = $('#ce-func-label', this.el);
+
+            var me = this;
+            this.$cellname.on('focus', function(e){
+                var txt = me.$cellname[0];
+                txt.selectionStart = 0;
+                txt.selectionEnd = txt.value.length;
+                txt.scrollLeft = txt.scrollWidth;
+            });
+
+            this.$btnfunc.addClass('disabled');
+            this.$btnfunc.tooltip({
+                title       : this.tipFormula,
+                placement   : 'cursor'
+            });
+
+            return this;
+        },
+
+        updateCellInfo: function(info) {
+            if (info) {
+                this.$cellname.val(typeof(info)=='string' ? info : info.asc_getName());
+            }
+        },
+
+        cellNameDisabled: function(disabled){
+            (disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled');
+            this.btnNamedRanges.setDisabled(disabled);
+        },
+
+        tipFormula: 'Insert Function',
+        textManager: 'Manager'
+    }, SSE.Views.CellEditor || {}));
+});

test/spreadsheeteditor/main/resources/less/celleditor.less

@@ -0,0 +1,159 @@
+// Common styles
+@import "../../../../unit-tests/common/main/resources/less/colors-table-ie-fix.less";
+@import "../../../../unit-tests/common/main/resources/less/variables.less";
+@import "../../../../unit-tests/common/main/resources/less/colors-table.less";
+#cell-editing-box {
+    --pixel-ratio-factor: 1;
+    border-bottom: solid @scaled-one-px-value-ie @border-toolbar-ie;
+    border-bottom: solid @scaled-one-px-value @border-toolbar;
+    border-left: solid @scaled-one-px-value-ie @border-toolbar-ie;
+    border-left: solid @scaled-one-px-value @border-toolbar;
+    min-height: 20px;
+    background-color: @background-toolbar-ie;
+    background-color: @background-toolbar;
+
+    .ce-group-name {
+        float: left;
+        height: 20px;
+        //border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
+        //border-bottom: @scaled-one-px-value solid @border-toolbar;
+        background-color: @background-toolbar-ie;
+        background-color: @background-toolbar;
+
+        #ce-cell-name {
+            width: 100px;
+            height: 19px;
+            height: calc(19px + (1px - 1px/var(--pixel-ratio-factor,1)));
+            padding: 0px 19px 0 4px;
+            vertical-align: top;
+            display: inline-block;
+            border: 0 none;
+            border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-right: @scaled-one-px-value solid @border-toolbar;
+            transition: none;
+            -webkit-transition: none;
+            box-shadow: 0 @scaled-one-px-value-ie 0 0 @border-toolbar-ie;
+            box-shadow: 0 @scaled-one-px-value 0 0 @border-toolbar;
+
+            &[disabled] {
+                color: @border-preview-select-ie;
+                color: @border-preview-select;
+                opacity: 0.5;
+            }
+        }
+
+        #ce-cell-name-menu {
+            display: inline-block;
+            position: absolute;
+            left: 80px;
+            background-color: @background-toolbar-ie;
+            background-color: @background-toolbar;
+
+            button {
+                background-color: @background-normal-ie;
+                background-color: @background-normal;
+                height: 19px;
+
+                &.disabled {
+                    opacity: 0.5;
+                }
+
+                &:active:not(.disabled),
+                &.active:not(.disabled){
+                    .caret {
+                        border-color: @icon-normal;
+                    }
+                }
+            }
+
+            .dropdown-menu a {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        #ce-func-label {
+            height: 20px;
+            margin-left: -3px;
+            .border-radius(0);
+
+            &.disabled {
+                opacity: 0.4;
+            }
+        }
+    }
+
+    &:not(.expanded) {
+        #ce-func-label {
+            border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-bottom: @scaled-one-px-value solid @border-toolbar;
+        }
+    }
+
+    .ce-group-expand {
+        float: right;
+        //height: 20px;
+        height: 100%;
+        background-color: @background-normal-ie;
+        background-color: @background-normal;
+    }
+
+    .ce-group-content {
+        margin: 0 16px 0 120px;
+        height: 100%;
+        border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+        border-left: @scaled-one-px-value solid @border-toolbar;
+
+        #ce-cell-content {
+            height: 100%;
+            resize: none;
+            min-height: 19px;
+            border: 0 none;
+            font-size: 12px;
+            line-height: 18px;
+            padding-bottom: 0;
+
+            &[disabled] {
+                color: @border-preview-select-ie;
+                color: @border-preview-select;
+                opacity: 0.5;
+            }
+        }
+    }
+
+    #ce-cell-name, #ce-cell-content {
+        border-radius: 0;
+    }
+
+    &+.layout-resizer {
+        border-top: 0 none;
+        border-bottom: 0 none;
+
+        &.move {
+            border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-top: @scaled-one-px-value solid @border-toolbar;
+            border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-bottom: @scaled-one-px-value solid @border-toolbar;
+            opacity: 0.4;
+        }
+    }
+}
+
+#ce-btn-expand {
+    width: 16px;
+    height: 18px;
+    .border-radius(0);
+    background: transparent;
+    padding: 0 2px 0;
+
+    .caret {
+        transition: transform .2s;
+        border-color: @icon-normal;
+    }
+
+    &.btn-collapse {
+        .caret {
+            transform: rotate(45deg);
+        }
+    }
+}

test/spreadsheeteditor/main/template/CellEditor.template

@@ -0,0 +1,11 @@
+<div class="ce-group-name">
+    <input id="ce-cell-name" class="aslabel form-control" type="text">
+    <div id="ce-cell-name-menu"></div>
+    <button id="ce-func-label" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-function"></i></button>
+</div>
+<div class="ce-group-expand">
+    <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
+</div>
+<div class="ce-group-content">
+    <textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
+</div>