change style celleditor

test/documenteditor/main/js/ApplicationController.js

@@ -402,7 +402,8 @@ DE.ApplicationController = new(function(){
 
         window["flat_desine"] = true;
         api = new Asc.asc_docs_api({
-            'id-view'  : 'editor_sdk'
+            'id-view'  : 'editor_sdk',
+            'embedded' : true
         });
 
         if (api){

test/presentationeditor/main/js/ApplicationController.js

@@ -72,16 +72,7 @@ PE.ApplicationController = new(function(){
 
         //common.controller.modals.init(embedConfig);
 
-        // Docked toolbar
+
-        /*if (embedConfig.toolbarDocked === 'bottom') {
-            $('#toolbar').addClass('bottom');
-            $('#editor_sdk').addClass('bottom');
-            $('#box-tools').removeClass('dropdown').addClass('dropup');
-            ttOffset[1] = -40;
-        } else {
-            $('#toolbar').addClass('top');
-            $('#editor_sdk').addClass('top');
-        }*/
 
         config.canBackToFolder = (config.canBackToFolder!==false) && config.customization && config.customization.goback &&
                                 (config.customization.goback.url || config.customization.goback.requestClose && config.canRequestClose);
@@ -408,6 +399,7 @@ if (api) api.asc_runAutostartMacroses();
     function onBeforeUnload () {
         common.localStorage.save();
     }
+
     // Helpers
     // -------------------------
 
@@ -418,8 +410,7 @@ api.Resize();
     }
 
     function createController(){
-if (created)
+        if (created) return me;
-return me;
 
         me = this;
         created = true;
@@ -442,14 +433,13 @@ api.SetThemesPath("../../../../sdkjs/slide/themes/");
             api.asc_registerCallback('asc_onError',                 onError);
             api.asc_registerCallback('asc_onDocumentContentReady',  onDocumentContentReady);
             api.asc_registerCallback('asc_onOpenDocumentProgress',  onOpenDocument);
-//api.asc_registerCallback('asc_onCountPages',            onCountPages);
-//api.asc_registerCallback('asc_onCurrentPage',           onCurrentPage);
 
             // Initialize api gateway
             Common.Gateway.on('init',               loadConfig);
             Common.Gateway.on('opendocument',       loadDocument);
             Common.Gateway.on('showmessage',        onExternalMessage);
             Common.Gateway.appReady();
+
         }
 
         return me;

test/spreadsheeteditor/main/index.html

@@ -16,113 +16,7 @@
 
     <!-- splash -->
 
-    <style type="text/css">
-        .loadmask {
-            position: absolute;
-            left: 0;
-            top: 0;
-            height: 100%;
-            width: 100%;
-            overflow: hidden;
-            border: none;
-            background-color: #f4f4f4;
-            z-index: 10000;
-        }
-        .loadmask > .brendpanel {
-            width: 100%;
-            position: absolute;
-            height: 48px;
-            background-color: #F7F7F7;
-            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
-            box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
-        }
 
-        .loadmask > .brendpanel > div {
-            display: flex;
-            align-items: center;
-            height: 100%;
-        }
-
-        .loadmask > .brendpanel .loading-logo {
-            max-width: 200px;
-            height: 24px;
-            margin-left: 10px;
-            text-align: center;
-        }
-
-        .loadmask > .brendpanel .loading-logo > img {
-            display: inline-block;
-            max-width: 124px;
-            max-height: 20px;
-            margin-top: 2px;
-            opacity: 0;
-        }
-        .loadmask > .brendpanel .doc-title {
-            flex-grow: 1;
-        }
-
-        .loadmask > .brendpanel .circle {
-            vertical-align: middle;
-            width: 24px;
-            height: 24px;
-            border-radius: 12px;
-            margin: 4px 10px;
-            background: rgba(255, 255, 255, 0.2);
-        }
-
-        .loadmask > .placeholder {
-            background: #fbfbfb;
-            width: 100%;
-            height: 100%;
-            font-size: 0;
-            border: 1px solid #dfdfdf;
-            white-space: nowrap;
-            padding-top: 48px;
-        }
-
-        .loadmask > .placeholder > .columns {
-            width: 100%;
-            height: 100%;
-            display: inline-block;
-            background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0,
-            linear-gradient(rgba(0,0,0,0) 19px, #d5d5d5 20px) 0 0,
-            linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x;
-            background-size: 80px 20px;
-
-            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            animation: flickerAnimation 2s infinite ease-in-out;
-        }
-
-        .loadmask > .placeholder > .columns:first-child {
-            position: absolute;
-            background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0;
-            background-size: 20px 20px;
-            width: 25px;
-        }
-
-        @keyframes flickerAnimation {
-            0%   { opacity:1; }
-            50%  { opacity:0.3; }
-            100% { opacity:1; }
-        }
-        @-o-keyframes flickerAnimation{
-            0%   { opacity:1; }
-            50%  { opacity:0.3; }
-            100% { opacity:1; }
-        }
-        @-moz-keyframes flickerAnimation{
-            0%   { opacity:1; }
-            50%  { opacity:0.3; }
-            100% { opacity:1; }
-        }
-        @-webkit-keyframes flickerAnimation{
-            0%   { opacity:1; }
-            50%  { opacity:0.3; }
-            100% { opacity:1; }
-        }
-    </style>
 
     <!--[if lt IE 9]>
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
@@ -130,7 +24,7 @@
 </head>
 
 <body class="main-body">
-<div id="loading-mask" class="loadmask">
+<!--<div id="loading-mask" class="loadmask">
     <div class="brendpanel">
         <div>
             <div class="brand-logo loading-logo">
@@ -144,7 +38,7 @@
         <div class="columns"></div>
         <div class="columns"></div>
     </div>
-</div>
+</div>-->
 
 <!-- debug begin -->
 <script type="text/javascript">var less=less||{};less.env='development';</script>
@@ -199,9 +93,9 @@
     var elem = document.querySelector('.loading-logo');
     if (elem && logo) {
         elem.style.backgroundImage= 'none';
-        var img = document.querySelector('.loading-logo img');
+        /*var img = document.querySelector('.loading-logo img');
         img && img.setAttribute('src', logo);
-        img.style.opacity = 1;
+        img.style.opacity = 1;*/
     }
 </script>
 
@@ -212,13 +106,14 @@
             <div id="ce-cell-name-menu" class="layout-item" style="height: 20px; top: 0px; border-left: none;"></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">
+        <!--<div class="ce-group-expand">
             <button id="ce-btn-expand" type="button" class="btn"><span class="caret">&nbsp;</span></button>
-        </div>
+        </div>-->
         <div class="ce-group-content">
             <textarea id="ce-cell-content" class="form-control" spellcheck="false" rows="1" cols="20"></textarea>
         </div>
     </div>
+    <div class="layout-resizer after" style="top: 20px; height: 4px; z-index: 4;"></div>
     <div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
     <ul id="worksheets" class="worksheet-list"></ul>
 </div>
@@ -290,7 +185,6 @@
 <!--application-->
 <script type="text/javascript" src="../../unit-tests/common/locale.js"></script>
 <script type="text/javascript" src="../../unit-tests/common/Gateway.js"></script>
-<!--<script type="text/javascript" src="../../unit-tests/common/Analytics.js"></script>-->
 <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>

test/spreadsheeteditor/main/js/ApplicationController.js

@@ -135,8 +135,6 @@ SSE.ApplicationController = new(function(){
                 api.asc_setDocInfo(docInfo);
                 api.asc_getEditorPermissions(config.licenseUrl, config.customerId);
                 api.asc_enableKeyEvents(false);
-
-               // Common.Analytics.trackEvent('Load', 'Start');
             }
 
             embedConfig.docTitle = docConfig.title;
@@ -243,11 +241,7 @@ SSE.ApplicationController = new(function(){
         Common.Gateway.on('requestclose',       onRequestClose);
 
 
-         if(common.controller.CellEditor ) {
+
-             common.controller.CellEditor.create();
-             common.controller.CellEditor.setApi(api)
-             common.controller.CellEditor.setMode(config);
-         }
 
         SSE.ApplicationView.tools.get('#idt-fullscreen')
             .on('click', function(){
@@ -362,6 +356,7 @@ SSE.ApplicationController = new(function(){
     }
 
     function onEditorPermissions(params) {
+        api.asc_setAutoSaveGap(1);
         if ( (params.asc_getLicenseType() === Asc.c_oLicenseResult.Success) && (typeof config.customization == 'object') &&
             config.customization && config.customization.logo ) {
 
@@ -654,6 +649,11 @@ SSE.ApplicationController = new(function(){
             api.asc_registerCallback('asc_onSheetsChanged',         onSheetsChanged);
             api.asc_registerCallback('asc_onActiveSheetChanged',    setActiveWorkSheet);
 
+            if(common.controller.CellEditor ) {
+                common.controller.CellEditor.create();
+                common.controller.CellEditor.setApi(api)
+                common.controller.CellEditor.setMode(config);
+            }
             // Initialize api gateway
             Common.Gateway.on('init',               loadConfig);
             Common.Gateway.on('opendocument',       loadDocument);

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

@@ -16,8 +16,6 @@
     .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;
 
@@ -100,11 +98,10 @@
     }
 
     .ce-group-content {
-        margin: 0 16px 0 120px;
+        margin: 0 2px 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;
@@ -113,7 +110,7 @@
             font-size: 12px;
             line-height: 18px;
             padding-bottom: 0;
-
+            padding-top: 0;
             &[disabled] {
                 color: @border-preview-select-ie;
                 color: @border-preview-select;
@@ -158,3 +155,14 @@
         }
     }
 }
+
+.layout-resizer {
+    z-index: @zindex-dropdown - 10;
+    background: @background-toolbar-ie;
+    background: @background-toolbar;
+    border: 0 none;
+
+    &.move {
+        opacity: 0.4;
+    }
+}

test/unit-tests/common/main/lib/controller/CellEditor.js

@@ -1,5 +1,6 @@
 !window.common && (window.common = {});
 !common.controller && (common.controller = {});
+
 Common.UI = _.extend(Common.UI || {}, {
     Keys : {
         BACKSPACE:  8,
@@ -39,6 +40,7 @@ Common.UI = _.extend(Common.UI || {}, {
         EQUALITY:   187,
         MINUS:      189
     }});
+
 common.controller.CellEditor = new(function(){
     var  me,
         api,
@@ -55,17 +57,20 @@ common.controller.CellEditor = new(function(){
             //Common.NotificationCenter.trigger('edit:complete', editor);
         }
     }
+
     function onKeyupCellEditor(e) {
         if(e.keyCode == Common.UI.Keys.RETURN && !e.altKey){
             api.isCEditorFocused = 'clear';
         }
     }
+
     function onBlurCellEditor() {
         if (api.isCEditorFocused == 'clear')
             api.isCEditorFocused = undefined;
         else if (api.isCellEdited)
             api.isCEditorFocused = true;
     }
+
     function expandEditorField() {
         if ( Math.floor(editor.$el.height()) > 19) {
             editor.keep_height = editor.$el.height();
@@ -80,9 +85,8 @@ common.controller.CellEditor = new(function(){
             common.localStorage.setBool('sse-celleditor-expand', true);
         }
 
-        //Common.NotificationCenter.trigger('layout:changed', 'celleditor');
-        //Common.NotificationCenter.trigger('edit:complete', editor, {restorefocus:true});
     }
+
     function events() {
            editor.$el.find('#ce-cell-name').on( 'keyup', onCellName);
            editor.$el.find('textarea#ce-cell-content').on( 'keyup', onKeyupCellEditor);
@@ -90,6 +94,7 @@ common.controller.CellEditor = new(function(){
            //editor.$el.find('button#ce-btn-expand').on('click',  expandEditorField);/*,
             /*'click button#ce-func-label': onInsertFunction*/
     }
+
     function createController() {
         me = this;
         if (created)
@@ -100,6 +105,7 @@ common.controller.CellEditor = new(function(){
         onLaunch();
         return me;
     }
+
     function onLayoutResize(o, r) {
         if (r == 'cell:edit') {
             /*if (Math.floor(editor.$el.height()) > 19) {
@@ -117,6 +123,7 @@ common.controller.CellEditor = new(function(){
             //}
         }
     }
+
     function  onLaunch(){
         common.view.CellEditor.create();
         editor = common.view.CellEditor;
@@ -140,6 +147,7 @@ common.controller.CellEditor = new(function(){
     function onApiCellSelection(info){
         editor.cell.updateInfo(info);
     }
+
     function onApiEditCell(state) {
         if (this.viewmode) return; // signed file
 
@@ -155,9 +163,11 @@ common.controller.CellEditor = new(function(){
         }
         editor.$btnfunc.toggleClass('disabled', state == Asc.c_oAscCellEditorState.editText);
     }
+
     function onLockDefNameManager(state) {
         this.namedrange_locked = (state == Asc.c_oAscDefinedNameReason.LockDefNameManager);
     }
+
     function onInputKeyDown(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 ||
@@ -167,6 +177,7 @@ common.controller.CellEditor = new(function(){
                 menu.find('.dropdown-menu').trigger('keydown', e);
         }
     }
+
     function onApiDisconnect() {
         mode.isEdit = false;
 
@@ -180,10 +191,7 @@ common.controller.CellEditor = new(function(){
             editor.btnNamedRanges.setVisible(false);
         }
     }
-    function onCellsRange(status) {
+
-        editor.cell.nameDisabled(status != Asc.c_oAscSelectionDialogType.None);
-        editor.$btnfunc.toggleClass('disabled', status != Asc.c_oAscSelectionDialogType.None);
-    }
     function setApi(apiF){
         api=apiF;
 
@@ -191,11 +199,10 @@ common.controller.CellEditor = new(function(){
         api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection);
         api.asc_registerCallback('asc_onEditCell', onApiEditCell);
         api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect);
-        //Common.NotificationCenter.on('api:disconnect', onApiDisconnect);
-        //Common.NotificationCenter.on('cells:range', onCellsRange);
         api.asc_registerCallback('asc_onLockDefNameManager', onLockDefNameManager);
         api.asc_registerCallback('asc_onInputKeyDown', onInputKeyDown);
     }
+
     function onApiSelectionChanged(info) {
         if (this.viewmode) return; // signed file
 
@@ -211,26 +218,29 @@ common.controller.CellEditor = new(function(){
 
         editor.$btnfunc.toggleClass('disabled', is_image || is_mode_2 || coauth_disable);
     }
+
     function setMode(modeF) {
         mode = modeF;
 
         editor.$btnfunc[mode.isEdit?'removeClass':'addClass']('disabled');
-        //editor.btnNamedRanges.setVisible(mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge);
 
         if ( mode.isEdit ) {
             api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged);
         }
     }
+
     function setPreviewMode(mode) {
         if (this.viewmode === mode) return;
         this.viewmode = mode;
-        editor.$btnfunc[!mode && mode.isEdit?'removeClass':'addClass']('disabled');
+        //editor.$btnfunc[!mode && mode.isEdit?'removeClass':'addClass']('disabled');
         editor.cell.nameDisabled(mode && !(mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge));
     }
+
     return {
         create: createController,
         setApi: setApi,
-        setMode: setMode
+        setMode: setMode,
+        setPreviewMode: setPreviewMode
     }
 
 })();