[SSE mobile] added new-styled mobile apps

apps/spreadsheeteditor/mobile/app-dev.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  app.js
+ *
+ *  Created by Maxim Kadushkin on 11/14/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+'use strict';
+var reqerr;
+require.config({
+    baseUrl: '../../',
+    paths: {
+        jquery          : '../vendor/jquery/jquery',
+        underscore      : '../vendor/underscore/underscore',
+        backbone        : '../vendor/backbone/backbone',
+        framework7      : '../vendor/framework7/js/framework7',
+        text            : '../vendor/requirejs-text/text',
+        xregexp         : '../vendor/xregexp/xregexp-all-min',
+        sockjs          : '../vendor/sockjs/sockjs.min',
+        jszip           : '../vendor/jszip/jszip.min',
+        jsziputils      : '../vendor/jszip-utils/jszip-utils.min',
+        jsrsasign       : '../vendor/jsrsasign/jsrsasign-latest-all-min',
+        api             : 'api/documents/api',
+        core            : 'common/main/lib/core/application',
+        extendes        : 'common/mobile/utils/extendes',
+        notification    : 'common/main/lib/core/NotificationCenter',
+        analytics       : 'common/Analytics',
+        gateway         : 'common/Gateway',
+        locale          : 'common/locale',
+        irregularstack  : 'common/IrregularStack',
+        sharedsettings  : 'common/mobile/utils/SharedSettings'
+    },
+
+    shim: {
+        framework7: {
+            exports: 'Framework7'
+        },
+        underscore: {
+            exports: '_'
+        },
+        backbone: {
+            deps: [
+                'underscore',
+                'jquery'
+            ],
+            exports: 'Backbone'
+        },
+        core: {
+            deps: [
+                'backbone',
+                'notification',
+                'irregularstack',
+                'sharedsettings'
+            ]
+        }
+    }
+});
+
+require([
+    'backbone',
+    'framework7',
+    'core',
+    'underscore',
+    'extendes',
+    'api',
+    'analytics',
+    'gateway',
+    'locale',
+    'jszip',
+    'jsziputils',
+    'jsrsasign',
+    'sockjs'
+], function (Backbone, Framework7) {
+    Backbone.history.start();
+
+    /**
+     * Application instance with DE namespace defined
+     */
+    var app = new Backbone.Application({
+        nameSpace: 'SSE',
+        autoCreate: false,
+        controllers : [
+            'Editor',
+            'Toolbar',
+            'Main',
+            'DocumentHolder'
+            // ,'Settings'
+            // ,'EditContainer'
+            // ,'EditText'
+            // ,'EditParagraph'
+            // ,'EditTable'
+            // ,'EditImage'
+            // ,'EditShape'
+            // ,'EditChart'
+            // ,'EditHyperlink'
+            // ,'AddContainer'
+            // ,'AddTable'
+            // ,'AddShape'
+            // ,'AddImage'
+            // ,'AddOther'
+        ]
+    });
+
+    Common.Locale.apply();
+
+    var device = Framework7.prototype.device;
+    var loadPlatformCss = function (filename, opt){
+        var fileref = document.createElement('link');
+        fileref.setAttribute('rel', 'stylesheet');
+        fileref.setAttribute('type', 'text/css');
+        fileref.setAttribute('href', filename);
+
+        if (typeof fileref != 'undefined') {
+            document.getElementsByTagName("head")[0].appendChild(fileref);
+        }
+    };
+
+    //Store Framework7 initialized instance for easy access
+    window.uiApp = new Framework7({
+        // Default title for modals
+        modalTitle: 'ONLYOFFICE',
+
+        // If it is webapp, we can enable hash navigation:
+//        pushState: false,
+
+        // If Android
+        material: device.android,
+
+        // Hide and show indicator during ajax requests
+        onAjaxStart: function (xhr) {
+            uiApp.showIndicator();
+        },
+        onAjaxComplete: function (xhr) {
+            uiApp.hideIndicator();
+        }
+    });
+
+    //Export DOM7 to local variable to make it easy accessable
+    window.$$ = Dom7;
+
+    //Load platform styles
+    loadPlatformCss('resources/css/app-' + (device.android ? 'material' : 'ios') + '.css');
+
+    require([
+        'common/main/lib/util/LocalStorage',
+        'common/main/lib/util/utils',
+        'spreadsheeteditor/mobile/app/controller/Editor',
+        'spreadsheeteditor/mobile/app/controller/Toolbar',
+        'spreadsheeteditor/mobile/app/controller/Main',
+        'spreadsheeteditor/mobile/app/controller/DocumentHolder'
+        // ,'documenteditor/mobile/app/controller/Settings'
+        // ,'documenteditor/mobile/app/controller/edit/EditContainer'
+        // ,'documenteditor/mobile/app/controller/edit/EditText'
+        // ,'documenteditor/mobile/app/controller/edit/EditParagraph'
+        // ,'documenteditor/mobile/app/controller/edit/EditTable'
+        // ,'documenteditor/mobile/app/controller/edit/EditImage'
+        // ,'documenteditor/mobile/app/controller/edit/EditShape'
+        // ,'documenteditor/mobile/app/controller/edit/EditChart'
+        // ,'documenteditor/mobile/app/controller/edit/EditHyperlink'
+        // ,'documenteditor/mobile/app/controller/add/AddContainer'
+        // ,'documenteditor/mobile/app/controller/add/AddTable'
+        // ,'documenteditor/mobile/app/controller/add/AddShape'
+        // ,'documenteditor/mobile/app/controller/add/AddImage'
+        // ,'documenteditor/mobile/app/controller/add/AddOther'
+    ], function() {
+        app.start();
+    });
+}, function(err) {
+    if (err.requireType == 'timeout' && !reqerr) {
+        var getUrlParams = function() {
+            var e,
+                a = /\+/g,  // Regex for replacing addition symbol with a space
+                r = /([^&=]+)=?([^&]*)/g,
+                d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                q = window.location.search.substring(1),
+                urlParams = {};
+
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+
+            return urlParams;
+        };
+
+        var encodeUrlParam = function(str) {
+            return str.replace(/&/g, '&')
+                .replace(/"/g, '"')
+                .replace(/'/g, ''')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+        };
+
+        var lang = (getUrlParams()["lang"] || 'en').split("-")[0];
+
+        if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+        else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+        else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+        else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+        else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+        window.alert(reqerr);
+        window.location.reload();
+    }
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/controller/DocumentHolder.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  DocumentHolder.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'spreadsheeteditor/mobile/app/view/DocumentHolder'
+], function (core) {
+    'use strict';
+
+    SSE.Controllers.DocumentHolder = Backbone.Controller.extend((function() {
+        // private
+        var _stack,
+            _isEdit = false;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'DocumentHolder'
+            ],
+
+            initialize: function() {
+                this.addListeners({
+                    'DocumentHolder': {
+                        'contextmenu:click' : this.onContextMenuClick
+                    }
+                });
+            },
+
+            setApi: function(api) {
+                this.api = api;
+
+                // this.api.asc_registerCallback('asc_onShowPopMenu',      _.bind(this.onApiShowPopMenu, this));
+                // this.api.asc_registerCallback('asc_onHidePopMenu',      _.bind(this.onApiHidePopMenu, this));
+            },
+
+            setMode: function (mode) {
+                _isEdit = ('edit' === mode);
+            },
+
+            // When our application is ready, lets get started
+            onLaunch: function() {
+                var me = this;
+
+                me.view = me.createView('DocumentHolder').render();
+
+                $$(window).on('resize', _.bind(me.onEditorResize, me));
+            },
+
+            // Handlers
+
+            onContextMenuClick: function (view, eventName) {
+                var me = this;
+
+                if ('cut' == eventName) {
+                    me.api.asc_Cut();
+                } else if ('copy' == eventName) {
+                    me.api.asc_Copy();
+                } else if ('paste' == eventName) {
+                    me.api.asc_Paste();
+                } else if ('delete' == eventName) {
+                    console.debug('IMPLEMENT: Delete fragment');
+                } else if ('edit' == eventName) {
+                    me.view.hideMenu();
+
+                    SSE.getController('EditContainer').showModal();
+                } else if ('addlink' == eventName) {
+                    me.view.hideMenu();
+
+                    SSE.getController('AddContainer').showModal();
+                    SSE.getController('AddOther').getView('AddOther').showLink();
+                } else if ('openlink' == eventName) {
+                    _.some(_stack, function (item) {
+                        if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                            me._openLink(item.get_ObjectValue().get_Value());
+                            return true;
+                        }
+                    });
+                }
+
+                me.view.hideMenu();
+            },
+
+            // API Handlers
+
+            onEditorResize: function(cmp) {
+                // Hide context menu
+            },
+
+            onApiShowPopMenu: function(posX, posY) {
+                var me = this,
+                    items;
+
+                _stack = me.api.getSelectedElements();
+                items = me._initMenu(_stack);
+
+                me.view.showMenu(items, posX, posY);
+            },
+
+            onApiHidePopMenu: function() {
+                this.view.hideMenu();
+            },
+
+            // Internal
+
+            _openLink: function(url) {
+                if (this.api.asc_getUrlType(url) > 0) {
+                    var newDocumentPage = window.open(url, '_blank');
+
+                    if (newDocumentPage) {
+                        newDocumentPage.focus();
+                    }
+                }
+            },
+
+            _initMenu: function (stack) {
+                var me = this,
+                    menuItems = [],
+                    canCopy = me.api.can_CopyCut();
+
+                if (canCopy) {
+                    menuItems.push({
+                        caption: 'Copy',
+                        event: 'copy'
+                    });
+                }
+
+                var isText = false,
+                    isTable = false,
+                    isImage = false,
+                    isChart = false,
+                    isShape = false,
+                    isLink = false;
+
+                _.each(stack, function (item) {
+                    var objectType = item.get_ObjectType(),
+                        objectValue = item.get_ObjectValue();
+
+                    if (objectType == Asc.c_oAscTypeSelectElement.Text) {
+                        isText = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
+                        if (objectValue && objectValue.get_ChartProperties()) {
+                            isChart = true;
+                        } else if (objectType && objectValue.get_ShapeProperties()) {
+                            isShape = true;
+                        } else {
+                            isImage = true;
+                        }
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
+                        isTable = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                        isLink = true;
+                    }
+                });
+
+                if (stack.length > 0) {
+                    var topObject = stack[stack.length - 1],
+                        topObjectType = topObject.get_ObjectType(),
+                        topObjectValue = topObject.get_ObjectValue(),
+                        objectLocked = _.isFunction(topObjectValue.get_Locked) ? topObjectValue.get_Locked() : false;
+
+                    var swapItems = function(items, indexBefore, indexAfter) {
+                        items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
+                    };
+
+                    if (!objectLocked && _isEdit) {
+                        menuItems.push({
+                            caption: 'Cut',
+                            event: 'cut'
+                        });
+                        menuItems.push({
+                            caption: 'Paste',
+                            event: 'paste'
+                        });
+
+                        // Swap 'Copy' and 'Cut'
+                        swapItems(menuItems, 0, 1);
+
+                        menuItems.push({
+                            caption: 'Delete',
+                            event: 'delete'
+                        });
+
+                        menuItems.push({
+                            caption: 'Edit',
+                            event: 'edit'
+                        });
+                    }
+
+                    var text = me.api.can_AddHyperlink();
+
+                    if (!_.isEmpty(text)) {
+                        menuItems.push({
+                            caption: 'Add Link',
+                            event: 'addlink'
+                        });
+                    }
+
+                    if (isLink) {
+                        menuItems.push({
+                            caption: 'Open Link',
+                            event: 'openlink'
+                        });
+                    }
+                }
+
+                if (Common.SharedSettings.get('phone') && menuItems.length > 3) {
+                    menuItems = menuItems.slice(0, 3);
+                }
+
+                return menuItems;
+            }
+        }
+    })());
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/controller/Editor.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  Editor.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'spreadsheeteditor/mobile/app/view/Editor'
+], function (core) {
+    'use strict';
+
+    SSE.Controllers.Editor = Backbone.Controller.extend((function() {
+        // private
+
+        function isPhone() {
+            var ua = navigator.userAgent,
+                isMobile = /Mobile(\/|\s)/.test(ua);
+
+            return /(iPhone|iPod)/.test(ua) ||
+                (!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) ||
+                (/(BlackBerry|BB)/.test(ua) && isMobile) ||
+                /(Windows Phone)/.test(ua);
+        }
+
+        function isTablet() {
+            var ua = navigator.userAgent;
+
+            return !isPhone(ua) && (/iPad/.test(ua) || /Android/.test(ua) || /(RIM Tablet OS)/.test(ua) ||
+                (/MSIE 10/.test(ua) && /; Touch/.test(ua)));
+        }
+
+        return {
+            // Specifying a EditorController model
+            models: [],
+
+            // Specifying a collection of out EditorView
+            collections: [],
+
+            // Specifying application views
+            views: [
+                'Editor'   // is main application layout
+            ],
+
+            // When controller is created let's setup view event listeners
+            initialize: function() {
+                // This most important part when we will tell our controller what events should be handled
+            },
+
+            setApi: function(api) {
+                this.api = api;
+            },
+
+            // When our application is ready, lets get started
+            onLaunch: function() {
+                // Device detection
+                var phone = isPhone();
+                console.debug('Layout profile:', phone ? 'Phone' : 'Tablet');
+
+                Common.SharedSettings.set('android', Framework7.prototype.device.android);
+                Common.SharedSettings.set('phone', phone);
+
+                $('html').addClass(phone ? 'phone' : 'tablet');
+
+                // Create and render main view
+                this.editorView = this.createView('Editor').render();
+
+                $$(window).on('resize', _.bind(this.onWindowResize, this));
+            },
+
+            onWindowResize: function(e) {
+                this.api && this.api.asc_Resize();
+            }
+        }
+    })());
+});

apps/spreadsheeteditor/mobile/app/controller/Main.js

@@ -29,350 +29,1528 @@
  * Creative Commons Attribution-ShareAlike 4.0 International. See the License
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
-*/
-Ext.define('SSE.controller.Main', {
-    extend: 'Ext.app.Controller',
-    editMode: false,
-
-    requires: [
-        'Ext.Anim',
-        'Ext.MessageBox',
-        'SSE.controller.ApiEvents',
-        'SSE.view.OpenCsvPanel'
-    ],
-
-    config: {
-        refs: {
-            mainView: 'semainview'
-        }
-    },
+ */
 
-    launch: function() {
-        if (!this._isSupport()){
-            Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText);
-            return;
-        }
+/**
+ *  Main.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'irregularstack',
+    'common/main/lib/util/LocalStorage'
+    ,'common/main/lib/util/LanguageInfo'
+], function () {
+    'use strict';
+
+    SSE.Controllers.Main = Backbone.Controller.extend(_.extend((function() {
+        var InitApplication = -254;
+        var ApplyEditRights = -255;
+        var LoadingDocument = -256;
+
+        Common.localStorage.setId('table');
+        Common.localStorage.setKeysFilter('sse-,asc.table');
+        Common.localStorage.sync();
+
+        var fillUserInfo = function(info, lang, defname) {
+            var user = info || {};
+            !user.id && (user.id = ('uid-' + Date.now()));
+            _.isEmpty(user.firstname) && _.isEmpty(user.lastname) && (user.firstname = defname);
+            if (_.isEmpty(user.firstname))
+                user.fullname = user.lastname;
+            else if (_.isEmpty(user.lastname))
+                user.fullname = user.firstname;
+            else
+                user.fullname = /^ru/.test(lang) ? user.lastname + ' ' + user.firstname :  user.firstname + ' ' + user.lastname;
+
+            return user;
+        };
 
-        // Initialize descendants
-
-        this.initControl();
-
-        // Initialize analytics
-
-//        Common.component.Analytics.initialize('UA-12442749-13', 'Spreadsheet Mobile');
-
-        var app = this.getApplication();
-
-        // Initialize api
-        this.api = new Asc.spreadsheet_api({
-            'id-view'  : 'id-sdkeditor',
-            'mobile'   : true
-        });
-
-        this.api.asc_registerCallback('asc_onAdvancedOptions',      Ext.bind(this.onAdvancedOptions, this));
-        this.api.asc_registerCallback('asc_onOpenDocumentProgress', Ext.bind(this.onOpenDocumentProgress, this));
-        this.api.asc_registerCallback('asc_onEndAction',            Ext.bind(this.onLongActionEnd, this));
-        this.api.asc_registerCallback('asc_onError',                Ext.bind(this.onError, this));
-        this.api.asc_registerCallback('asc_onSaveUrl',              Ext.bind(this.onSaveUrl, this));
-        this.api.asc_registerCallback('asc_onGetEditorPermissions', Ext.bind(this.onEditorPermissions, this));
-        this.api.asc_registerCallback('asc_onDownloadUrl',          Ext.bind(this.onDownloadUrl, this));
-
-        // Initialize descendants
-        Ext.each(app.getControllers(), function(controllerName){
-            var controller = app.getController(controllerName);
-            controller && Ext.isFunction(controller.setApi) && controller.setApi(this.api);
-        }, this);
-
-        this.initApi();
-
-        // Initialize api gateway
-        this.editorConfig = {};
-        Common.Gateway.on('init', Ext.bind(this.loadConfig, this));
-        Common.Gateway.on('opendocument', Ext.bind(this.loadDocument, this));
-        Common.Gateway.on('showmessage', Ext.bind(this.onExternalMessage, this));
-        Common.Gateway.on('processsaveresult', Ext.bind(this.onProcessSaveResult, this));
-        Common.Gateway.on('downloadas',        Ext.bind(this.onDownloadAs, this));
-        Common.Gateway.ready();
-    },
-
-    initControl: function() {
-    },
-
-    initApi: function() {
-    },
-
-    loadConfig: function(data) {
-        this.editorConfig = Ext.merge(this.editorConfig, data.config);
-        this.editorConfig.user = this._fillUserInfo(this.editorConfig.user, this.editorConfig.lang, this.textAnonymous);
-    },
-
-    loadDocument: function(data) {
-        if (data.doc) {
-            this.permissions = data.doc.permissions;
-
-            var _user = new Asc.asc_CUserInfo();
-            _user.put_Id(this.editorConfig.user.id);
-            _user.put_FirstName(this.editorConfig.user.firstname);
-            _user.put_LastName(this.editorConfig.user.lastname);
-            _user.put_FullName(this.editorConfig.user.fullname);
-
-            docInfo = new Asc.asc_CDocInfo();
-            docInfo.put_Id(data.doc.key);
-            docInfo.put_Url(data.doc.url);
-            docInfo.put_Title(data.doc.title);
-            docInfo.put_Format(data.doc.fileType);
-            docInfo.put_VKey(data.doc.vkey);
-            docInfo.put_Options(data.doc.options);
-            docInfo.put_UserInfo(_user);
-
-            this.api.asc_setDocInfo(docInfo);
-            this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId);
-
-            Common.component.Analytics.trackEvent('Load', 'Start');
-        }
-    },
+        return {
+            models: [],
+            collections: [],
+            views: [],
 
-    onEditorPermissions: function(params) {
-        var modeEdit = /*this.permissions.edit === true && this.editorConfig.mode !== 'view'*/false;
-        this.api.asc_setViewMode(!modeEdit);
-        this.api.asc_LoadDocument();
+            initialize: function() {
+                //
+            },
 
-        var profileName = this.getApplication().getCurrentProfile().getName();
-//            this.getApplication().getController(profileName + '.Main').setDocumentName(data.doc.title || 'Unnamed Spreadsheet');
-        this.getApplication().getController(profileName + '.Main').setMode(modeEdit);
+            onLaunch: function() {
+                var me = this;
 
-    },
+                me.stackLongActions = new Common.IrregularStack({
+                    strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
+                    weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
+                });
 
-    onError: function(id, level) {
-        this._hideLoadSplash();
+                this._state = {
+                    isDisconnected      : false,
+                    usersCount          : 1,
+                    fastCoauth          : true,
+                    startModifyDocument : true,
+                    lostEditingRights   : false,
+                    licenseWarning      : false
+                };
 
-        var config = {
-            closable: false
-        };
+                // Initialize viewport
 
-        switch (id)
-        {
-            case Asc.c_oAscError.ID.Unknown:
-                config.message = this.unknownErrorText;
-                break;
+//                if (!Common.Utils.isBrowserSupported()){
+//                    Common.Utils.showBrowserRestriction();
+//                    Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText);
+//                    return;
+//                }
 
-            case Asc.c_oAscError.ID.ConvertationTimeout:
-                config.message = this.convertationTimeoutText;
-                break;
+                // Initialize api
 
-            case Asc.c_oAscError.ID.ConvertationError:
-                config.message = this.convertationErrorText;
-                break;
+                // window["flat_desine"] = true;
 
-            case Asc.c_oAscError.ID.DownloadError:
-                config.message = this.downloadErrorText;
-                break;
+                me.api = new Asc.spreadsheet_api({
+                    'id-view'  : 'editor_sdk',
+                    'id-input' : 'ce-cell-content'
+                    ,'mobile'   : true
+                });
 
-            case Asc.c_oAscError.ID.UplImageSize:
-                config.message = this.uploadImageSizeMessage;
-                break;
+                if (me.api){
+                    var value = Common.localStorage.getItem("sse-settings-fontrender");
+                    if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3';
+                    me.api.asc_setFontRenderingMode(parseInt(value));
+
+                    Common.Utils.Metric.setCurrentMetric(1); //pt
+
+                    me.api.asc_registerCallback('asc_onError',                      _.bind(me.onError, me));
+                    me.api.asc_registerCallback('asc_onOpenDocumentProgress',       _.bind(me.onOpenDocument, me));
+                    me.api.asc_registerCallback('asc_onAdvancedOptions',            _.bind(me.onAdvancedOptions, me));
+                    me.api.asc_registerCallback('asc_onDocumentUpdateVersion',      _.bind(me.onUpdateVersion, me));
+                    me.api.asc_registerCallback('asc_onPrintUrl',                   _.bind(me.onPrintUrl, me));
+                    me.api.asc_registerCallback('asc_onDocumentName',               _.bind(me.onDocumentName, me));
+                    me.api.asc_registerCallback('asc_onEndAction',                  _.bind(me.onLongActionEnd, me));
+/**/
+                    // this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this));
+                    // this.api.asc_registerCallback('asc_onPrintUrl',              _.bind(this.onPrintUrl, this));
+                    // this.api.asc_registerCallback('asc_onMeta',                  _.bind(this.onMeta, this));
+/**/
+                    Common.NotificationCenter.on('api:disconnect',                  _.bind(me.onCoAuthoringDisconnect, me));
+                    Common.NotificationCenter.on('goback',                          _.bind(me.goBack, me));
+
+                    // Initialize descendants
+                    _.each(me.getApplication().controllers, function(controller) {
+                        if (controller && _.isFunction(controller.setApi)) {
+                            controller.setApi(me.api);
+                        }
+                    });
 
-            case Asc.c_oAscError.ID.UplImageExt:
-                config.message = this.uploadImageExtMessage;
-                break;
+                    // Initialize api gateway
+                    me.editorConfig = {};
+                    me.appOptions   = {};
+                    me.plugins      = undefined;
 
-            case Asc.c_oAscError.ID.UplImageFileCount:
-                config.message = this.uploadImageFileCountMessage;
-                break;
+                    Common.Gateway.on('init',           _.bind(me.loadConfig, me));
+                    Common.Gateway.on('showmessage',    _.bind(me.onExternalMessage, me));
+                    Common.Gateway.on('opendocument',   _.bind(me.loadDocument, me));
+                    Common.Gateway.ready();
+                }
+            },
+
+            loadConfig: function(data) {
+                this.editorConfig = $.extend(this.editorConfig, data.config);
+
+                this.editorConfig.user          =
+                this.appOptions.user            = fillUserInfo(this.editorConfig.user, this.editorConfig.lang, this.textAnonymous);
+                this.appOptions.nativeApp       = this.editorConfig.nativeApp === true;
+                this.appOptions.isDesktopApp    = this.editorConfig.targetApp == 'desktop';
+                this.appOptions.canCreateNew    = !_.isEmpty(this.editorConfig.createUrl) && !this.appOptions.isDesktopApp;
+                this.appOptions.canOpenRecent   = this.editorConfig.nativeApp !== true && this.editorConfig.recent !== undefined && !this.appOptions.isDesktopApp;
+                this.appOptions.templates       = this.editorConfig.templates;
+                this.appOptions.recent          = this.editorConfig.recent;
+                this.appOptions.createUrl       = this.editorConfig.createUrl;
+                this.appOptions.lang            = this.editorConfig.lang;
+                this.appOptions.location        = (typeof (this.editorConfig.location) == 'string') ? this.editorConfig.location.toLowerCase() : '';
+                this.appOptions.sharingSettingsUrl = this.editorConfig.sharingSettingsUrl;
+                this.appOptions.fileChoiceUrl   = this.editorConfig.fileChoiceUrl;
+                this.appOptions.mergeFolderUrl  = this.editorConfig.mergeFolderUrl;
+                this.appOptions.canAnalytics    = false;
+                this.appOptions.customization   = this.editorConfig.customization;
+                this.appOptions.canBackToFolder = (this.editorConfig.canBackToFolder!==false) && (typeof (this.editorConfig.customization) == 'object')
+                    && (typeof (this.editorConfig.customization.goback) == 'object') && !_.isEmpty(this.editorConfig.customization.goback.url);
+                this.appOptions.canBack         = this.editorConfig.nativeApp !== true && this.appOptions.canBackToFolder === true;
+                this.appOptions.canPlugins      = false;
+                this.plugins                    = this.editorConfig.plugins;
+
+                if (this.editorConfig.lang)
+                    this.api.asc_setLocale((this.editorConfig.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.editorConfig.lang)) : 0x0409);
+
+               if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
+                   Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
+            },
+
+            loadDocument: function(data) {
+                this.appOptions.spreadsheet = data.doc;
+                this.permissions = {};
+                var docInfo = {};
+
+                if ( data.doc ) {
+                    this.permissions = $.extend(this.permissions, data.doc.permissions);
+
+                    var _user = new Asc.asc_CUserInfo();
+                    _user.put_Id(this.appOptions.user.id);
+                    _user.put_FirstName(this.appOptions.user.firstname);
+                    _user.put_LastName(this.appOptions.user.lastname);
+                    _user.put_FullName(this.appOptions.user.fullname);
+
+                    docInfo = new Asc.asc_CDocInfo();
+                    docInfo.put_Id(data.doc.key);
+                    docInfo.put_Url(data.doc.url);
+                    docInfo.put_Title(data.doc.title);
+                    docInfo.put_Format(data.doc.fileType);
+                    docInfo.put_VKey(data.doc.vkey);
+                    docInfo.put_Options(data.doc.options);
+                    docInfo.put_UserInfo(_user);
+                    docInfo.put_CallbackUrl(this.editorConfig.callbackUrl);
+                }
 
-            case Asc.c_oAscError.ID.VKeyEncrypt:
-                config.msg = this.errorKeyEncrypt;
-                break;
+                this.api.asc_registerCallback('asc_onGetEditorPermissions', _.bind(this.onEditorPermissions, this));
+                this.api.asc_setDocInfo(docInfo);
+                this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId);
 
-            case Asc.c_oAscError.ID.KeyExpire:
-                config.msg = this.errorKeyExpire;
-                break;
+                Common.SharedSettings.set('document', data.doc);
 
-            case Asc.c_oAscError.ID.UserCountExceed:
-                config.msg = this.errorUsersExceed;
-                break;
 
-            default:
-                config.message = this.errorDefaultMessage.replace('%1', id);
-                break;
-        }
+                if (data.doc) {
+                    this.getApplication()
+                       .getController('Toolbar')
+                       .setDocumentTitle(data.doc.title);
+                }
+            },
 
+            setMode: function(mode){
+                var me = this;
 
+                Common.SharedSettings.set('mode', mode);
 
-        if (level == Asc.c_oAscError.Level.Critical) {
+                if ( me.api ) {
+                    me.api.asc_enableKeyEvents(mode == 'edit');
+                    me.api.asc_setViewMode(mode != 'edit');
 
-            // report only critical errors
-            Common.Gateway.reportError(id, config.message);
+                    // Force on autosave if edit
+                    if (mode == 'edit') {
+                        me.api.asc_setAutoSaveGap(1);
+                    }
+                }
+            },
+
+            onProcessSaveResult: function(data) {
+                this.api.asc_OnSaveEnd(data.result);
+                if (data && data.result === false) {
+                    uiApp.alert(
+                        _.isEmpty(data.message) ? this.errorProcessSaveResult : data.message,
+                        this.criticalErrorTitle
+                    );
+                }
+            },
+
+            onProcessRightsChange: function(data) {
+                if (data && data.enabled === false) {
+                    var me = this,
+                        old_rights = this._state.lostEditingRights;
+                    this._state.lostEditingRights = !this._state.lostEditingRights;
+                    this.api.asc_coAuthoringDisconnect();
+
+                    if (!old_rights) {
+                        uiApp.alert(
+                            _.isEmpty(data.message) ? this.warnProcessRightsChange : data.message,
+                            this.notcriticalErrorTitle,
+                            function () {
+                                me._state.lostEditingRights = false;
+                                me.onEditComplete();
+                            }
+                        );
+                    }
+                }
+            },
+
+            onDownloadAs: function() {
+//                this._state.isFromGatewayDownloadAs = true;
+//                var type = /^(?:(pdf|djvu|xps))$/.exec(this.document.fileType);
+//                (type && typeof type[1] === 'string') ? this.api.asc_DownloadOrigin(true) : this.api.asc_DownloadAs(Asc.c_oAscFileType.DOCX, true);
+            },
+
+
+            disableEditing: function(disable) {
+               var app = this.getApplication();
+//                if (this.appOptions.canEdit && this.editorConfig.mode !== 'view') {
+//                    app.getController('RightMenu').getView('RightMenu').clearSelection();
+//                    app.getController('Toolbar').DisableToolbar(disable, disable);
+//                    app.getController('RightMenu').SetDisabled(disable, false);
+//                    app.getController('Statusbar').getView('Statusbar').SetDisabled(disable);
+//
+//                    var tooltip = app.getController('Toolbar').getView('Toolbar').synchTooltip;
+//                    if (tooltip) tooltip.hide();
+//                }
+//                app.getController('LeftMenu').SetDisabled(disable, true);
+            },
+
+            goBack: function(blank) {
+                var href = this.appOptions.customization.goback.url;
+                if (blank) {
+                    window.open(href, "_blank");
+                } else {
+                    parent.location.href = href;
+                }
+            },
+
+            onEditComplete: function(cmp) {
+////                this.getMainMenu().closeFullScaleMenu();
+//                var application = this.getApplication(),
+//                    toolbarController = application.getController('Toolbar'),
+//                    toolbarView = toolbarController.getView('Toolbar');
+//
+//                if (this.appOptions.isEdit && toolbarView && (toolbarView.btnInsertShape.pressed || toolbarView.btnInsertText.pressed) &&
+//                    ( !_.isObject(arguments[1]) || arguments[1].id !== 'id-toolbar-btn-insertshape')) { // TODO: Event from api is needed to clear btnInsertShape state
+//                    if (this.api)
+//                        this.api.StartAddShape('', false);
+//
+//                    toolbarView.btnInsertShape.toggle(false, false);
+//                    toolbarView.btnInsertText.toggle(false, false);
+//                }
+//
+//                application.getController('DocumentHolder').getView('DocumentHolder').focus();
+//
+//                if (this.api) {
+//                    var cansave = this.api.asc_isDocumentCanSave();
+//                    var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch');
+//                    if (toolbarView.btnSave.isDisabled() !== (!cansave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1))
+//                        toolbarView.btnSave.setDisabled(!cansave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1);
+//                }
+            },
+
+            onLongActionBegin: function(type, id) {
+                var action = {id: id, type: type};
+                this.stackLongActions.push(action);
+                this.setLongActionView(action);
+            },
+
+            onLongActionEnd: function(type, id) {
+                var me = this,
+                    action = {id: id, type: type};
+
+                this.stackLongActions.pop(action);
+
+                this.updateWindowTitle(true);
+
+                if (type === Asc.c_oAscAsyncActionType.BlockInteraction && id == Asc.c_oAscAsyncAction.Open) {
+                    Common.Gateway.internalMessage('documentReady', {});
+                    this.onDocumentContentReady();
+                }
 
-            config.title = this.criticalErrorTitle;
-            config.message += '<br/>' + this.criticalErrorExtText;
-            config.buttons = Ext.Msg.OK;
-            config.fn = function(btn) {
-                if (btn == 'ok') {
-                    window.location.reload();
+                action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
+                if (action) {
+                    this.setLongActionView(action)
+                } else {
+                    if (this._state.fastCoauth && this._state.usersCount>1 && id==Asc.c_oAscAsyncAction['Save']) {
+                        var me = this;
+                        if (me._state.timerSave===undefined)
+                            me._state.timerSave = setInterval(function(){
+                                if ((new Date()) - me._state.isSaving>500) {
+                                    clearInterval(me._state.timerSave);
+                                    console.debug('End long action');
+                                    me._state.timerSave = undefined;
+                                }
+                            }, 500);
+                    } else {
+                        console.debug('End long action');
+                    }
                 }
-            }
-        }
-        else {
-            config.title = this.notcriticalErrorTitle;
-            config.buttons = Ext.Msg.OK;
-            config.fn = Ext.emptyFn;
-        }
 
-        Ext.Msg.show(config);
-    },
-
-    onSaveUrl: function(url) {
-        Common.Gateway.save(url);
-    },
-
-    onDownloadUrl: function(url) {
-        Common.Gateway.downloadAs(url);
-    },
-    
-    onExternalMessage: function(msg) {
-        if (msg) {
-            this._hideLoadSplash();
-            Ext.Msg.show({
-                title: msg.title,
-                msg: '<br/>' + msg.msg,
-                icon: Ext.Msg[msg.severity.toUpperCase()],
-                buttons: Ext.Msg.OK
-            });
-
-            Common.component.Analytics.trackEvent('External Error', msg.title);
-        }
-    },
-
-    onAdvancedOptions: function(advOptions) {
-        if (advOptions.asc_getOptionId() == Asc.c_oAscAdvancedOptionsID['CSV']){
-            var preloader = Ext.get('loading-mask'),
-                me = this;
-
-            Ext.Anim.run(preloader, 'slide', {
-                out         : true,
-                direction   : 'up',
-                duration    : 250,
-                after       : function(){
-                    preloader.hide();
+                action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
+
+                if (action) {
+                    this.setLongActionView(action)
+                } else {
+                    _.delay(function () {
+                        $(me.loadMask).hasClass('modal-in') && uiApp.closeModal(me.loadMask);
+                    }, 200);
+                }
+
+                if (id==Asc.c_oAscAsyncAction['Save'] && (!this._state.fastCoauth || this._state.usersCount<2)) {
+                    this.synchronizeChanges();
+                }
+            },
+
+            setLongActionView: function(action) {
+                var title = '', text = '';
+
+                switch (action.id) {
+                    case Asc.c_oAscAsyncAction['Open']:
+                        title   = this.openTitleText;
+                        text    = this.openTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['Save']:
+                        this._state.isSaving = new Date();
+                        title   = this.saveTitleText;
+                        text    = this.saveTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
+                        title   = this.loadFontsTitleText;
+                        text    = this.loadFontsTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['LoadDocumentImages']:
+                        title   = this.loadImagesTitleText;
+                        text    = this.loadImagesTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['LoadFont']:
+                        title   = this.loadFontTitleText;
+                        text    = this.loadFontTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['LoadImage']:
+                        title   = this.loadImageTitleText;
+                        text    = this.loadImageTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['DownloadAs']:
+                        title   = this.downloadTitleText;
+                        text    = this.downloadTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['Print']:
+                        title   = this.printTitleText;
+                        text    = this.printTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['UploadImage']:
+                        title   = this.uploadImageTitleText;
+                        text    = this.uploadImageTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['ApplyChanges']:
+                        title   = this.applyChangesTitleText;
+                        text    = this.applyChangesTextText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['PrepareToSave']:
+                        title   = this.savePreparingText;
+                        text    = this.savePreparingTitle;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['MailMergeLoadFile']:
+                        title   = this.mailMergeLoadFileText;
+                        text    = this.mailMergeLoadFileTitle;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['DownloadMerge']:
+                        title   = this.downloadMergeTitle;
+                        text    = this.downloadMergeText;
+                        break;
+
+                    case Asc.c_oAscAsyncAction['SendMailMerge']:
+                        title   = this.sendMergeTitle;
+                        text    = this.sendMergeText;
+                        break;
+
+                    case ApplyEditRights:
+                        title   = this.txtEditingMode;
+                        text    = this.txtEditingMode;
+                        break;
+
+                    case LoadingDocument:
+                        title   = this.loadingDocumentTitleText;
+                        text    = this.loadingDocumentTextText;
+                        break;
+                }
+
+                if (action.type == Asc.c_oAscAsyncActionType['BlockInteraction']) {
+                    if (!this.loadMask)
+                        this.loadMask = uiApp.showPreloader(title);
+                }
+                else {
+//                    this.getApplication().getController('Statusbar').setStatusCaption(text);
                 }
-            });
-
-            var viewAdvOptionsCsv = Ext.Viewport.add({
-                xtype   : 'seopencsvpanel',
-                left    : 0,
-                top     : 0,
-                width   : '100%',
-                height  : '100%'
-
-            });
-
-            Ext.Anim.run(viewAdvOptionsCsv, 'slide', {
-                out         : false,
-                direction   : 'up',
-                duration    : 1000
-            });
-
-            viewAdvOptionsCsv.on('close', Ext.bind(function(panel, result){
-                preloader.show();
-
-                Ext.Anim.run(preloader, 'slide', {
-                    out         : false,
-                    direction   : 'down',
-                    duration    : 1000
+            },
+
+            onApplyEditRights: function(data) {
+//                var application = this.getApplication();
+//                application.getController('Statusbar').setStatusCaption('');
+//
+//                if (data) {
+//                    if (data.allowed) {
+//                        data.requestrights = true;
+//                        this.appOptions.isEdit= true;
+//
+//                        this.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'],ApplyEditRights);
+//
+//                        var me = this;
+//                        setTimeout(function(){
+//                            me.applyModeCommonElements();
+//                            me.applyModeEditorElements();
+//                            me.api.asc_setViewMode(false);
+//
+//                            var timer_rp = setInterval(function(){
+//                                clearInterval(timer_rp);
+//
+//                                var toolbarController           = application.getController('Toolbar'),
+//                                    rightmenuController         = application.getController('RightMenu'),
+//                                    leftmenuController          = application.getController('LeftMenu'),
+//                                    documentHolderController    = application.getController('DocumentHolder'),
+//                                    fontsControllers            = application.getController('Common.Controllers.Fonts');
+//
+//                                leftmenuController.setMode(me.appOptions).createDelayedElements();
+//
+//                                rightmenuController.createDelayedElements();
+//
+//                                Common.NotificationCenter.trigger('layout:changed', 'main');
+//
+//                                var timer_sl = setInterval(function(){
+//                                    if (window.styles_loaded) {
+//                                        clearInterval(timer_sl);
+//
+//                                        documentHolderController.getView('DocumentHolder').createDelayedElements();
+//                                        documentHolderController.getView('DocumentHolder').changePosition();
+//                                        me.loadLanguages();
+//
+//                                        var shapes = me.api.asc_getPropertyEditorShapes();
+//                                        if (shapes)
+//                                            me.fillAutoShapes(shapes[0], shapes[1]);
+//
+//                                        me.fillTextArt(me.api.asc_getTextArtPreviews());
+//                                        me.updateThemeColors();
+//                                        toolbarController.activateControls();
+//
+//                                        me.api.UpdateInterfaceState();
+//                                    }
+//                                }, 50);
+//                            },50);
+//                        }, 100);
+//                    } else {
+//                        Common.UI.info({
+//                            title: this.requestEditFailedTitleText,
+//                            msg: data.message || this.requestEditFailedMessageText
+//                        });
+//                    }
+//                }
+            },
+
+            onDocumentContentReady: function() {
+                if (this._isDocReady)
+                    return;
+
+                var me = this,
+                    value;
+
+                me._isDocReady = true;
+
+                var worksheetsCount = this.api.asc_getWorksheetsCount();
+                var i = me.api.asc_getActiveWorksheetIndex();
+                me.api.asc_showWorksheet(i);
+                me.api.asc_Resize();
+                // me.api.asc_cleanSelection();
+
+                me.hidePreloader();
+                me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+
+                /** coauthoring begin **/
+                // value = Common.localStorage.getItem("sse-settings-livecomment");
+                // this.isLiveCommenting = !(value!==null && parseInt(value) == 0);
+                // this.isLiveCommenting ? this.api.asc_showComments() : this.api.asc_hideComments();
+                /** coauthoring end **/
+
+                value = (this.appOptions.isEditMailMerge || this.appOptions.isEditDiagram) ? 100 : Common.localStorage.getItem("sse-settings-zoom");
+                var zf = (value!==null) ? parseInt(value)/100 : (this.appOptions.customization && this.appOptions.customization.zoom ? parseInt(this.appOptions.customization.zoom)/100 : 1);
+                this.api.asc_setZoom(zf>0 ? zf : 1);
+
+                // value = Common.localStorage.getItem("de-show-hiddenchars");
+                // me.api.put_ShowParaMarks((value!==null) ? eval(value) : false);
+                //
+                // value = Common.localStorage.getItem("de-show-tableline");
+                // me.api.put_ShowTableEmptyLine((value!==null) ? eval(value) : true);
+                //
+                // value = Common.localStorage.getItem("de-settings-spellcheck");
+                // me.api.asc_setSpellCheck(value===null || parseInt(value) == 1);
+
+                // Common.localStorage.setItem("de-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
+
+                me.api.asc_registerCallback('asc_onStartAction',            _.bind(me.onLongActionBegin, me));
+                me.api.asc_registerCallback('asc_onEndAction',              _.bind(me.onLongActionEnd, me));
+                me.api.asc_registerCallback('asc_onCoAuthoringDisconnect',  _.bind(me.onCoAuthoringDisconnect, me));
+                me.api.asc_registerCallback('asc_onPrint',                  _.bind(me.onPrint, me));
+
+                var application = me.getApplication();
+//                application.getController('Viewport')
+//                    .getView('Common.Views.Header')
+//                    .setDocumentCaption(me.api.asc_getDocumentName());
+
+                me.updateWindowTitle(true);
+
+                // value = Common.localStorage.getItem("de-settings-inputmode");
+                // me.api.SetTextBoxInputMode(value!==null && parseInt(value) == 1);
+
+                /** coauthoring begin **/
+                // if (me.appOptions.isEdit && me.appOptions.canLicense && !me.appOptions.isOffline && me.appOptions.canCoAuthoring) {
+                //     value = Common.localStorage.getItem("de-settings-coauthmode");
+                //     me._state.fastCoauth = (value===null || parseInt(value) == 1);
+                //     me.api.asc_SetFastCollaborative(me._state.fastCoauth);
+                //
+                //     value = Common.localStorage.getItem((me._state.fastCoauth) ? "de-settings-showchanges-fast" : "de-settings-showchanges-strict");
+                //     if (value !== null)
+                //         me.api.SetCollaborativeMarksShowType(value == 'all' ? Asc.c_oAscCollaborativeMarksShowType.All :
+                //             value == 'none' ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
+                //     else
+                //         me.api.SetCollaborativeMarksShowType(me._state.fastCoauth ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
+                // } else {
+                //     me._state.fastCoauth = false;
+                //     me.api.asc_SetFastCollaborative(me._state.fastCoauth);
+                //     me.api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None);
+                // }
+                /** coauthoring end **/
+
+//                var toolbarController           = application.getController('Toolbar'),
+//                    statusbarController         = application.getController('Statusbar'),
+//                    documentHolderController    = application.getController('DocumentHolder'),
+//                    fontsController             = application.getController('Common.Controllers.Fonts'),
+//                    rightmenuController         = application.getController('RightMenu'),
+//                    leftmenuController          = application.getController('LeftMenu'),
+//                    chatController              = application.getController('Common.Controllers.Chat'),
+//                    pluginsController           = application.getController('Common.Controllers.Plugins');
+//
+//                leftmenuController.getView('LeftMenu').getMenu('file').loadDocument({doc:me.document});
+//                leftmenuController.setMode(me.appOptions).createDelayedElements().setApi(me.api);
+//
+//                chatController.setApi(this.api).setMode(this.appOptions);
+//                application.getController('Common.Controllers.ExternalDiagramEditor').setApi(this.api).loadConfig({config:this.editorConfig, customization: this.editorConfig.customization});
+//                application.getController('Common.Controllers.ExternalMergeEditor').setApi(this.api).loadConfig({config:this.editorConfig, customization: this.editorConfig.customization});
+//
+//                pluginsController.setApi(me.api);
+//                me.updatePlugins(me.plugins);
+//                me.api.asc_registerCallback('asc_onPluginsInit', _.bind(me.updatePluginsList, me));
+//
+//                documentHolderController.setApi(me.api);
+//                documentHolderController.createDelayedElements();
+//                statusbarController.createDelayedElements();
+//
+//                leftmenuController.getView('LeftMenu').disableMenu('all',false);
+//
+//                if (me.appOptions.canBranding)
+//                    me.getApplication().getController('LeftMenu').leftMenu.getMenu('about').setLicInfo(me.editorConfig.customization);
+//
+//                documentHolderController.getView('DocumentHolder').setApi(me.api).on('editcomplete', _.bind(me.onEditComplete, me));
+
+//                if (me.appOptions.isEdit) {
+//                    value = Common.localStorage.getItem("de-settings-autosave");
+//                    value = (!me._state.fastCoauth && value!==null) ? parseInt(value) : (me.appOptions.canCoAuthoring ? 1 : 0);
+//
+//                    me.api.asc_setAutoSaveGap(value);
+//
+//                    if (me.needToUpdateVersion)
+//                        Common.NotificationCenter.trigger('api:disconnect');
+//                    var timer_sl = setInterval(function(){
+//                        if (window.styles_loaded) {
+//                            clearInterval(timer_sl);
+//
+//                            toolbarController.createDelayedElements();
+//
+//                            documentHolderController.getView('DocumentHolder').createDelayedElements();
+//                            me.loadLanguages();
+//
+//                            rightmenuController.createDelayedElements();
+//
+//                            var shapes = me.api.asc_getPropertyEditorShapes();
+//                            if (shapes)
+//                                me.fillAutoShapes(shapes[0], shapes[1]);
+//
+//                            me.updateThemeColors();
+//                            toolbarController.activateControls();
+//                            if (me.needToUpdateVersion)
+//                                toolbarController.onApiCoAuthoringDisconnect();
+//                            me.api.UpdateInterfaceState();
+//                            me.fillTextArt(me.api.asc_getTextArtPreviews());
+//                        }
+//                    }, 50);
+//                }
+//
+//                if (this.appOptions.canAnalytics && false)
+//                    Common.component.Analytics.initialize('UA-12442749-13', 'Document Editor');
+
+                Common.Gateway.on('applyeditrights',        _.bind(me.onApplyEditRights, me));
+                Common.Gateway.on('processsaveresult',      _.bind(me.onProcessSaveResult, me));
+                Common.Gateway.on('processrightschange',    _.bind(me.onProcessRightsChange, me));
+                Common.Gateway.on('downloadas',             _.bind(me.onDownloadAs, me));
+
+                Common.Gateway.sendInfo({
+                    mode: me.appOptions.isEdit?'edit':'view'
                 });
 
-                Ext.Anim.run(viewAdvOptionsCsv, 'slide', {
-                    out         : true,
-                    direction   : 'down',
-                    duration    : 1000,
-                    after       : function(){
-                        Ext.Viewport.remove(viewAdvOptionsCsv);
-                        if (me.api) {
-                            me.api.asc_setAdvancedOptions(Asc.c_oAscAdvancedOptionsID['CSV'], new Asc.asc_CCSVAdvancedOptions(result.encoding, result.delimiter));
+//                if (this._state.licenseWarning) {
+//                    value = Common.localStorage.getItem("de-license-warning");
+//                    value = (value!==null) ? parseInt(value) : 0;
+//                    var now = (new Date).getTime();
+//                    if (now - value > 86400000) {
+//                        Common.localStorage.setItem("de-license-warning", now);
+//                        Common.UI.info({
+//                            width: 500,
+//                            title: this.textNoLicenseTitle,
+//                            msg  : this.warnNoLicense,
+//                            buttons: [
+//                                {value: 'buynow', caption: this.textBuyNow},
+//                                {value: 'contact', caption: this.textContactUs}
+//                            ],
+//                            primary: 'buynow',
+//                            callback: function(btn) {
+//                                if (btn == 'buynow')
+//                                    window.open('http://www.onlyoffice.com/enterprise-edition.aspx', "_blank");
+//                                else if (btn == 'contact')
+//                                    window.open('mailto:sales@onlyoffice.com', "_blank");
+//                            }
+//                        });
+//                    }
+//                }
+            },
+
+            onOpenDocument: function(progress) {
+                if (this.loadMask) {
+                    var $title = $$(this.loadMask).find('.modal-title'),
+                        proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
+
+                    $title.text(this.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
+                }
+            },
+
+            onEditorPermissions: function(params) {
+                var me = this,
+                    licType = params.asc_getLicenseType();
+
+                if (Asc.c_oLicenseResult.Expired === licType ||
+                    Asc.c_oLicenseResult.Error === licType ||
+                    Asc.c_oLicenseResult.ExpiredTrial === licType) {
+                    uiApp.modal({
+                        title   : me.titleLicenseExp,
+                        text    : me.warnLicenseExp
+                    });
+                    return;
+                }
+
+                me.permissions.review         = (me.permissions.review === undefined) ? (me.permissions.edit !== false) : me.permissions.review;
+                me.appOptions.canAnalytics    = params.asc_getIsAnalyticsEnable();
+                me.appOptions.canLicense      = (licType === Asc.c_oLicenseResult.Success);
+                me.appOptions.isLightVersion  = params.asc_getIsLight();
+                /** coauthoring begin **/
+                me.appOptions.canCoAuthoring  = !me.appOptions.isLightVersion;
+                /** coauthoring end **/
+                me.appOptions.isOffline       = me.api.asc_isOffline();
+                me.appOptions.isReviewOnly    = (me.permissions.review === true) && (me.permissions.edit === false);
+                me.appOptions.canRequestEditRights = me.editorConfig.canRequestEditRights;
+                me.appOptions.canEdit         = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review
+                    (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined
+                    (!me.appOptions.isReviewOnly || me.appOptions.canLicense); // if isReviewOnly==true -> canLicense must be true
+                me.appOptions.isEdit          = me.appOptions.canLicense && me.appOptions.canEdit && me.editorConfig.mode !== 'view';
+                me.appOptions.canReview       = me.appOptions.canLicense && me.appOptions.isEdit && (me.permissions.review===true);
+                me.appOptions.canUseHistory   = me.appOptions.canLicense && !me.appOptions.isLightVersion && me.editorConfig.canUseHistory && me.appOptions.canCoAuthoring && !me.appOptions.isDesktopApp;
+                me.appOptions.canHistoryClose  = me.editorConfig.canHistoryClose;
+                me.appOptions.canHistoryRestore= me.editorConfig.canHistoryRestore && !!me.permissions.changeHistory;
+                me.appOptions.canUseMailMerge= me.appOptions.canLicense && me.appOptions.canEdit && !me.appOptions.isDesktopApp;
+                me.appOptions.canSendEmailAddresses  = me.appOptions.canLicense && me.editorConfig.canSendEmailAddresses && me.appOptions.canEdit && me.appOptions.canCoAuthoring;
+                me.appOptions.canComments     = me.appOptions.canLicense && !((typeof (me.editorConfig.customization) == 'object') && me.editorConfig.customization.comments===false);
+                me.appOptions.canChat         = me.appOptions.canLicense && !me.appOptions.isOffline && !((typeof (me.editorConfig.customization) == 'object') && me.editorConfig.customization.chat===false);
+                me.appOptions.canEditStyles   = me.appOptions.canLicense && me.appOptions.canEdit;
+                me.appOptions.canPrint        = (me.permissions.print !== false);
+
+                me.appOptions.canDownload     = !me.appOptions.nativeApp && me.permissions.download !== false;
+
+                me._state.licenseWarning = (licType===Asc.c_oLicenseResult.Connections) && me.appOptions.canEdit && me.editorConfig.mode !== 'view';
+
+                me.appOptions.canBranding  = params.asc_getCanBranding() && (typeof me.editorConfig.customization == 'object');
+
+                me.applyModeCommonElements();
+                me.applyModeEditorElements();
+
+                me.api.asc_setViewMode(/*!me.appOptions.isEdit*/false);
+                me.api.asc_LoadDocument();
+                // me.api.asc_Resize();
+
+                if (!me.appOptions.isEdit) {
+                    me.hidePreloader();
+                    me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+                }
+            },
+
+            applyModeCommonElements: function() {
+                var me = this;
+
+                window.editor_elements_prepared = true;
+
+                _.each(me.getApplication().controllers, function(controller) {
+                    if (controller && _.isFunction(controller.setMode)) {
+                        controller.setMode(me.editorConfig.mode);
+                    }
+                });
+
+
+//                var app             = this.getApplication(),
+//                    viewport        = app.getController('Viewport').getView('Viewport'),
+//                    headerView      = app.getController('Viewport').getView('Common.Views.Header'),
+//                    statusbarView   = app.getController('Statusbar').getView('Statusbar'),
+//                    documentHolder  = app.getController('DocumentHolder').getView('DocumentHolder');
+//
+//                if (headerView) {
+//                    headerView.setHeaderCaption(this.appOptions.isEdit ? 'Document Editor' : 'Document Viewer');
+//                    headerView.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isDesktopApp);
+//                }
+//
+//                if (this.appOptions.nativeApp) {
+//                    $('body').removeClass('safari');
+//                }
+//
+//                viewport && viewport.setMode(this.appOptions);
+//                statusbarView && statusbarView.setMode(this.appOptions);
+//
+//                documentHolder.setMode(this.appOptions);
+//
+                if (me.api) {
+                    me.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
+
+                    var translateChart = new Asc.asc_CChartTranslate();
+                    translateChart.asc_setTitle(me.txtDiagramTitle);
+                    translateChart.asc_setXAxis(me.txtXAxis);
+                    translateChart.asc_setYAxis(me.txtYAxis);
+                    translateChart.asc_setSeries(me.txtSeries);
+                    me.api.asc_setChartTranslate(translateChart);
+
+                    var translateArt = new Asc.asc_TextArtTranslate();
+                    translateArt.asc_setDefaultText(me.txtArt);
+                    me.api.asc_setTextArtTranslate(translateArt);
+                }
+            },
+
+            applyModeEditorElements: function() {
+                if (this.appOptions.isEdit) {
+                    var me = this;
+//                        application         = this.getApplication(),
+//                        toolbarController   = application.getController('Toolbar'),
+//                        rightmenuController = application.getController('RightMenu'),
+//                        fontsControllers    = application.getController('Common.Controllers.Fonts'),
+//                        reviewController    = (this.appOptions.canReview) ? application.getController('Common.Controllers.ReviewChanges') : null;
+//
+//                    fontsControllers    && fontsControllers.setApi(me.api);
+//                    toolbarController   && toolbarController.setApi(me.api);
+//
+//                    /** coauthoring begin **/
+//                    me.contComments.setMode(me.appOptions);
+//                    me.contComments.setConfig({config: me.editorConfig}, me.api);
+//                    /** coauthoring end **/
+//                    rightmenuController && rightmenuController.setApi(me.api);
+//
+//                    if (reviewController)
+//                        reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
+//
+//                    var viewport = this.getApplication().getController('Viewport').getView('Viewport');
+//
+//                    viewport.applyEditorMode();
+//
+//                    var toolbarView = (toolbarController) ? toolbarController.getView('Toolbar') : null;
+//
+//                    _.each([
+//                        toolbarView,
+//                        rightmenuController.getView('RightMenu')
+//                    ], function(view) {
+//                        if (view) {
+//                            view.setApi(me.api);
+//                            view.on('editcomplete', _.bind(me.onEditComplete, me));
+//                            view.setMode(me.appOptions);
+//                        }
+//                    });
+//
+//                    if (toolbarView) {
+//                        toolbarView.on('insertimage', _.bind(me.onInsertImage, me));
+//                        toolbarView.on('inserttable', _.bind(me.onInsertTable, me));
+//                        toolbarView.on('insertshape', _.bind(me.onInsertShape, me));
+//                        toolbarView.on('inserttextart', _.bind(me.onInsertTextArt, me));
+//                        toolbarView.on('insertchart', _.bind(me.onInsertChart, me));
+//                    }
+//
+//                    var value = Common.localStorage.getItem('de-settings-unit');
+//                    value = (value!==null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
+//                    Common.Utils.Metric.setCurrentMetric(value);
+//                    me.api.asc_SetDocumentUnits((value==Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value==Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
+
+                    me.api.asc_registerCallback('asc_onDocumentModifiedChanged', _.bind(me.onDocumentModifiedChanged, me));
+                    me.api.asc_registerCallback('asc_onDocumentCanSaveChanged',  _.bind(me.onDocumentCanSaveChanged, me));
+                    me.api.asc_registerCallback('asc_onSaveUrl',                 _.bind(me.onSaveUrl, me));
+                    me.api.asc_registerCallback('asc_onDownloadUrl',             _.bind(me.onDownloadUrl, me));
+                    /** coauthoring begin **/
+                    me.api.asc_registerCallback('asc_onCollaborativeChanges',    _.bind(me.onCollaborativeChanges, me));
+                    me.api.asc_registerCallback('asc_OnTryUndoInFastCollaborative',_.bind(me.onTryUndoInFastCollaborative, me));
+                    me.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(me.onAuthParticipantsChanged, me));
+                    me.api.asc_registerCallback('asc_onParticipantsChanged',     _.bind(me.onAuthParticipantsChanged, me));
+                    /** coauthoring end **/
+
+                    if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) {
+                        me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights);
+                    } else if (!this._isDocReady) {
+                        me.hidePreloader();
+                        me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+                    }
+
+                    // Message on window close
+                    window.onbeforeunload = _.bind(me.onBeforeUnload, me);
+                    window.onunload = _.bind(me.onUnload, me);
+                }
+            },
+
+            onExternalMessage: function(msg) {
+                if (msg && msg.msg) {
+                    msg.msg = (msg.msg).toString();
+                    uiApp.addNotification({
+                        title: 'ONLYOFFICE',
+                        message: [msg.msg.charAt(0).toUpperCase() + msg.msg.substring(1)]
+                    });
+
+                    Common.component.Analytics.trackEvent('External Error', msg.title);
+                }
+            },
+
+            onError: function(id, level, errData) {
+                this.hidePreloader();
+                this.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+
+                var config = {
+                    closable: false
+                };
+
+                switch (id)
+                {
+                    case Asc.c_oAscError.ID.Unknown:
+                        config.msg = this.unknownErrorText;
+                        break;
+
+                    case Asc.c_oAscError.ID.ConvertationTimeout:
+                        config.msg = this.convertationTimeoutText;
+                        break;
+
+                    case Asc.c_oAscError.ID.ConvertationOpenError:
+                        config.msg = this.openErrorText;
+                        break;
+
+                    case Asc.c_oAscError.ID.ConvertationSaveError:
+                        config.msg = this.saveErrorText;
+                        break;
+
+                    case Asc.c_oAscError.ID.DownloadError:
+                        config.msg = this.downloadErrorText;
+                        break;
+
+                    case Asc.c_oAscError.ID.UplImageSize:
+                        config.msg = this.uploadImageSizeMessage;
+                        break;
+
+                    case Asc.c_oAscError.ID.UplImageExt:
+                        config.msg = this.uploadImageExtMessage;
+                        break;
+
+                    case Asc.c_oAscError.ID.UplImageFileCount:
+                        config.msg = this.uploadImageFileCountMessage;
+                        break;
+
+                    case Asc.c_oAscError.ID.SplitCellMaxRows:
+                        config.msg = this.splitMaxRowsErrorText.replace('%1', errData.get_Value());
+                        break;
+
+                    case Asc.c_oAscError.ID.SplitCellMaxCols:
+                        config.msg = this.splitMaxColsErrorText.replace('%1', errData.get_Value());
+                        break;
+
+                    case Asc.c_oAscError.ID.SplitCellRowsDivider:
+                        config.msg = this.splitDividerErrorText.replace('%1', errData.get_Value());
+                        break;
+
+                    case Asc.c_oAscError.ID.VKeyEncrypt:
+                        config.msg = this.errorKeyEncrypt;
+                        break;
+
+                    case Asc.c_oAscError.ID.KeyExpire:
+                        config.msg = this.errorKeyExpire;
+                        break;
+
+                    case Asc.c_oAscError.ID.UserCountExceed:
+                        config.msg = this.errorUsersExceed;
+                        break;
+
+                    case Asc.c_oAscError.ID.CoAuthoringDisconnect:
+                        config.msg = (this.appOptions.isEdit) ? this.errorCoAuthoringDisconnect : this.errorViewerDisconnect;
+                        break;
+
+                    case Asc.c_oAscError.ID.ConvertationPassword:
+                        config.msg = this.errorFilePassProtect;
+                        break;
+
+                    case Asc.c_oAscError.ID.StockChartError:
+                        config.msg = this.errorStockChart;
+                        break;
+
+                    case Asc.c_oAscError.ID.DataRangeError:
+                        config.msg = this.errorDataRange;
+                        break;
+
+                    case Asc.c_oAscError.ID.Database:
+                        config.msg = this.errorDatabaseConnection;
+                        break;
+
+                    case Asc.c_oAscError.ID.UserDrop:
+                        if (this._state.lostEditingRights) {
+                            this._state.lostEditingRights = false;
+                            return;
+                        }
+                        this._state.lostEditingRights = true;
+                        config.msg = this.errorUserDrop;
+                        break;
+
+                    case Asc.c_oAscError.ID.MailMergeLoadFile:
+                        config.msg = this.errorMailMergeLoadFile;
+                        break;
+
+                    case Asc.c_oAscError.ID.MailMergeSaveFile:
+                        config.msg = this.errorMailMergeSaveFile;
+                        break;
+
+                    case Asc.c_oAscError.ID.Warning:
+                        config.msg = this.errorConnectToServer;
+                        break;
+
+                    default:
+                        config.msg = this.errorDefaultMessage.replace('%1', id);
+                        break;
+                }
+
+
+                if (level == Asc.c_oAscError.Level.Critical) {
+
+                    // report only critical errors
+                    Common.Gateway.reportError(id, config.msg);
+
+                    config.title = this.criticalErrorTitle;
+//                    config.iconCls = 'error';
+
+                    if (this.appOptions.canBackToFolder) {
+                        config.msg += '</br></br>' + this.criticalErrorExtText;
+                        config.callback = function() {
+                            Common.NotificationCenter.trigger('goback');
                         }
                     }
+                }
+                else {
+                    config.title    = this.notcriticalErrorTitle;
+//                    config.iconCls  = 'warn';
+//                    config.buttons  = ['ok'];
+                    config.callback = _.bind(function(btn){
+                        if (id == Asc.c_oAscError.ID.Warning && btn == 'ok' && (this.appOptions.canDownload || this.appOptions.canDownloadOrigin)) {
+                            Common.UI.Menu.Manager.hideAll();
+                            if (this.appOptions.isDesktopApp && this.appOptions.isOffline)
+                                this.api.asc_DownloadAs();
+                            else
+                                (this.appOptions.canDownload) ? this.getApplication().getController('LeftMenu').leftMenu.showMenu('file:saveas') : this.api.asc_DownloadOrigin();
+                        }
+                        this._state.lostEditingRights = false;
+                        this.onEditComplete();
+                    }, this);
+                }
+
+//                Common.UI.alert(config);
+                uiApp.modal({
+                    title   : config.title,
+                    text    : config.msg,
+                    buttons: [
+                        {
+                            text: 'OK',
+                            onClick: config.callback
+                        }
+                    ]
                 });
 
-            }, this));
-        }
-    },
+                Common.component.Analytics.trackEvent('Internal Error', id.toString());
+            },
+
+            onCoAuthoringDisconnect: function() {
+//                this.getApplication().getController('Viewport').getView('Viewport').setMode({isDisconnected:true});
+                this._state.isDisconnected = true;
+            },
+
+            updateWindowTitle: function(force) {
+                var isModified = this.api.asc_isDocumentModified();
+                if (this._state.isDocModified !== isModified || force) {
+                    var title = this.defaultTitleText;
+
+//                    var headerView = this.getApplication()
+//                        .getController('Viewport')
+//                        .getView('Common.Views.Header');
+//
+//                    if (!_.isEmpty(headerView.getDocumentCaption()))
+//                        title = headerView.getDocumentCaption() + ' - ' + title;
+//
+//                    if (isModified) {
+//                        if (!_.isUndefined(title) && (!this._state.fastCoauth || this._state.usersCount<2 )) {
+//                            title = '* ' + title;
+//                            headerView.setDocumentCaption(headerView.getDocumentCaption() + '*', true);
+//                        }
+//                    } else {
+//                        headerView.setDocumentCaption(headerView.getDocumentCaption());
+//                    }
+
+                    if (window.document.title != title)
+                        window.document.title = title;
+
+                    if (!this._state.fastCoauth || this._state.usersCount<2 )
+                        Common.Gateway.setDocumentModified(isModified);
+                    else if ( this._state.startModifyDocument!==undefined && this._state.startModifyDocument === isModified){
+                        Common.Gateway.setDocumentModified(isModified);
+                        this._state.startModifyDocument = (this._state.startModifyDocument) ? !this._state.startModifyDocument : undefined;
+                    }
 
-    onOpenDocumentProgress: function(progress) {
-        var elem = document.getElementById('loadmask-text');
-        if (elem) {
-            var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-            elem.innerHTML = this.textLoadingDocument + ': '+ Math.round(proc*100) + '%';
-        }
-    },
-
-    onOpenDocument: function() {
-        this._hideLoadSplash();
-        this.api.asc_Resize();
-
-        if (this.api)
-            this.api.asc_cleanSelection();
-    },
-
-    onLongActionEnd: function(type, id) {
-        if (type === Asc.c_oAscAsyncActionType['BlockInteraction']){
-            switch (id) {
-                case Asc.c_oAscAsyncAction['Open']:
-                    this.onOpenDocument();
-                    break;
-            }
-        }
-    },
-
-    onDownloadAs: function() {
-       this.api.asc_DownloadAs(Asc.c_oAscFileType.XLSX, true);
-    },
-
-    _hideLoadSplash: function(){
-        var preloader = Ext.get('loading-mask');
-        if (preloader) {
-            Ext.Anim.run(preloader, 'fade', {
-                out     : true,
-                duration: 1000,
-                after   : function(){
-                    preloader.destroy();
+                    this._state.isDocModified = isModified;
+                }
+            },
+
+            onDocumentModifiedChanged: function() {
+                if (this._state.fastCoauth && this._state.usersCount > 1 && this._state.startModifyDocument===undefined )
+                    return;
+
+                var isModified = this.api.asc_isDocumentCanSave();
+                if (this._state.isDocModified !== isModified) {
+                    Common.Gateway.setDocumentModified(this.api.asc_isDocumentModified());
+                }
+
+                this.updateWindowTitle();
+
+//                var toolbarView = this.getApplication().getController('Toolbar').getView('Toolbar');
+//
+//                if (toolbarView) {
+//                    var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch');
+//                    if (toolbarView.btnSave.isDisabled() !== (!isModified && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1))
+//                        toolbarView.btnSave.setDisabled(!isModified && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1);
+//                }
+            },
+            onDocumentCanSaveChanged: function (isCanSave) {
+//                var application = this.getApplication(),
+//                    toolbarController = application.getController('Toolbar'),
+//                    toolbarView = toolbarController.getView('Toolbar');
+//
+//                if (toolbarView && this.api) {
+//                    var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch');
+//                    if (toolbarView.btnSave.isDisabled() !== (!isCanSave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1))
+//                        toolbarView.btnSave.setDisabled(!isCanSave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1);
+//                }
+            },
+
+            onBeforeUnload: function() {
+                Common.localStorage.save();
+
+                if (this.api.asc_isDocumentModified()) {
+                    var me = this;
+                    this.api.asc_stopSaving();
+                    this.continueSavingTimer = window.setTimeout(function() {
+                        me.api.asc_continueSaving();
+                    }, 500);
+
+                    return this.leavePageText;
+                }
+            },
+
+            onUnload: function() {
+                if (this.continueSavingTimer)
+                    clearTimeout(this.continueSavingTimer);
+            },
+
+            hidePreloader: function() {
+                $('#loading-mask').hide().remove();
+            },
+
+            onSaveUrl: function(url) {
+                Common.Gateway.save(url);
+            },
+
+            onDownloadUrl: function(url) {
+                if (this._state.isFromGatewayDownloadAs) {
+                    Common.Gateway.downloadAs(url);
+                }
+
+                this._state.isFromGatewayDownloadAs = false;
+            },
+
+            onUpdateVersion: function(callback) {
+                var me = this;
+                me.needToUpdateVersion = true;
+                me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+
+                uiApp.alert(
+                    me.errorUpdateVersion,
+                    me.titleUpdateVersion,
+                    function () {
+                        _.defer(function() {
+                            Common.Gateway.updateVersion();
+
+                            if (callback) {
+                                callback.call(me);
+                            }
+
+                            me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+                        })
+                });
+            },
+
+            onCollaborativeChanges: function() {
+//                if (this._state.hasCollaborativeChanges) return;
+//                this._state.hasCollaborativeChanges = true;
+//                if (this.appOptions.isEdit)
+//                    this.getApplication().getController('Statusbar').setStatusCaption(this.txtNeedSynchronize);
+            },
+            /** coauthoring end **/
+
+            synchronizeChanges: function() {
+//                this.getApplication().getController('Statusbar').synchronizeChanges();
+//                this.getApplication().getController('DocumentHolder').getView('DocumentHolder').hideTips();
+//                /** coauthoring begin **/
+//                this.getApplication().getController('Toolbar').getView('Toolbar').synchronizeChanges();
+//                /** coauthoring end **/
+                this._state.hasCollaborativeChanges = false;
+            },
+
+            initNames: function() {
+                this.shapeGroupNames = [
+                    this.txtBasicShapes,
+                    this.txtFiguredArrows,
+                    this.txtMath,
+                    this.txtCharts,
+                    this.txtStarsRibbons,
+                    this.txtCallouts,
+                    this.txtButtons,
+                    this.txtRectangles,
+                    this.txtLines
+                ];
+            },
+
+            fillAutoShapes: function(groupNames, shapes){
+//                if (_.isEmpty(shapes) || _.isEmpty(groupNames) || shapes.length != groupNames.length)
+//                    return;
+//
+//                var me = this,
+//                    shapegrouparray = [],
+//                    shapeStore = this.getCollection('ShapeGroups');
+//
+//                shapeStore.reset();
+//
+//                var groupscount = groupNames.length;
+//                _.each(groupNames, function(groupName, index){
+//                    var store = new Backbone.Collection([], {
+//                        model: DE.Models.ShapeModel
+//                    });
+//
+//                    var cols = (shapes[index].length) > 18 ? 7 : 6,
+//                        height = Math.ceil(shapes[index].length/cols) * 35 + 3,
+//                        width = 30 * cols;
+//
+//                    _.each(shapes[index], function(shape, idx){
+//                        store.add({
+//                            imageUrl : shape.Image,
+//                            data     : {shapeType: shape.Type},
+//                            tip      : me.textShape + ' ' + (idx+1),
+//                            allowSelected : true,
+//                            selected: false
+//                        });
+//                    });
+//
+//                    shapegrouparray.push({
+//                        groupName   : me.shapeGroupNames[index],
+//                        groupStore  : store,
+//                        groupWidth  : width,
+//                        groupHeight : height
+//                    });
+//                });
+//
+//                shapeStore.add(shapegrouparray);
+//
+//                setTimeout(function(){
+//                    me.getApplication().getController('Toolbar').fillAutoShapes();
+//                }, 50);
+
+            },
+
+            fillTextArt: function(shapes){
+//                if (_.isEmpty(shapes)) return;
+//
+//                var me = this, arr = [],
+//                    artStore = this.getCollection('Common.Collections.TextArt');
+//
+//                _.each(shapes, function(shape, index){
+//                    arr.push({
+//                        imageUrl : shape,
+//                        data     : index,
+//                        allowSelected : true,
+//                        selected: false
+//                    });
+//                });
+//                artStore.reset(arr);
+//
+//                setTimeout(function(){
+//                    me.getApplication().getController('Toolbar').fillTextArt();
+//                }, 50);
+//
+//                setTimeout(function(){
+//                    me.getApplication().getController('RightMenu').fillTextArt();
+//                }, 50);
+
+            },
+
+            updateThemeColors: function() {
+//                var me = this;
+//                setTimeout(function(){
+//                    me.getApplication().getController('RightMenu').UpdateThemeColors();
+//                }, 50);
+//                setTimeout(function(){
+//                    me.getApplication().getController('DocumentHolder').getView('DocumentHolder').updateThemeColors();
+//                }, 50);
+//
+//                setTimeout(function(){
+//                    me.getApplication().getController('Toolbar').updateThemeColors();
+//                }, 50);
+            },
+
+            onSendThemeColors: function(colors, standart_colors) {
+               Common.Utils.ThemeColor.setColors(colors, standart_colors);
+//                if (window.styles_loaded) {
+//                    this.updateThemeColors();
+//                    this.fillTextArt(this.api.asc_getTextArtPreviews());
+//                }
+            },
+
+            loadLanguages: function() {
+//                var langs = this.api.asc_getSpellCheckLanguages();
+//                this.getApplication().getController('DocumentHolder').getView('DocumentHolder').setLanguages(langs);
+//                this.getApplication().getController('Statusbar').setLanguages(langs);
+            },
+
+            onAdvancedOptions: function(advOptions) {
+//                var type = advOptions.asc_getOptionId(),
+//                    me = this, dlg;
+//                if (type == Asc.c_oAscAdvancedOptionsID.TXT) {
+//                    dlg = new Common.Views.OpenDialog({
+//                        type: type,
+//                        codepages: advOptions.asc_getOptions().asc_getCodePages(),
+//                        settings: advOptions.asc_getOptions().asc_getRecommendedSettings(),
+//                        handler: function (encoding) {
+//                            me.isShowOpenDialog = false;
+//                            if (me && me.api) {
+//                                me.api.asc_setAdvancedOptions(type, new Asc.asc_CTXTAdvancedOptions(encoding));
+//                                me.loadMask && me.loadMask.show();
+//                            }
+//                        }
+//                    });
+//                } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
+//                    dlg = new Common.Views.OpenDialog({
+//                        type: type,
+//                        handler: function (value) {
+//                            me.isShowOpenDialog = false;
+//                            if (me && me.api) {
+//                                me.api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(value));
+//                                me.loadMask && me.loadMask.show();
+//                            }
+//                        }
+//                    });
+//                }
+//                if (dlg) {
+//                    this.isShowOpenDialog = true;
+//                    this.loadMask && this.loadMask.hide();
+//                    this.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
+//                    dlg.show();
+//                }
+            },
+
+            onTryUndoInFastCollaborative: function() {
+//                var val = window.localStorage.getItem("de-hide-try-undoredo");
+//                if (!(val && parseInt(val) == 1))
+//                    Common.UI.info({
+//                        width: 500,
+//                        msg: this.textTryUndoRedo,
+//                        iconCls: 'info',
+//                        buttons: ['custom', 'cancel'],
+//                        primary: 'custom',
+//                        customButtonText: this.textStrict,
+//                        dontshow: true,
+//                        callback: _.bind(function(btn, dontshow){
+//                            if (dontshow) window.localStorage.setItem("de-hide-try-undoredo", 1);
+//                            if (btn == 'custom') {
+//                                Common.localStorage.setItem("de-settings-coauthmode", 0);
+//                                this.api.asc_SetFastCollaborative(false);
+//                                this._state.fastCoauth = false;
+//                                Common.localStorage.setItem("de-settings-showchanges-strict", 'last');
+//                                this.api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.LastChanges);
+//                            }
+//                            this.fireEvent('editcomplete', this);
+//                        }, this)
+//                    });
+            },
+
+            onAuthParticipantsChanged: function(users) {
+                var length = 0;
+                _.each(users, function(item){
+                    if (!item.asc_getView())
+                        length++;
+                });
+                this._state.usersCount = length;
+            },
+
+            applySettings: function() {
+                if (this.appOptions.isEdit && this.appOptions.canLicense && !this.appOptions.isOffline && this.appOptions.canCoAuthoring) {
+                    var value = Common.localStorage.getItem("de-settings-coauthmode"),
+                        oldval = this._state.fastCoauth;
+                    this._state.fastCoauth = (value===null || parseInt(value) == 1);
+                    if (this._state.fastCoauth && !oldval)
+                        this.synchronizeChanges();
+                }
+            },
+
+            onDocumentName: function(name) {
+//                this.getApplication().getController('Viewport').getView('Common.Views.Header').setDocumentCaption(name);
+                this.updateWindowTitle(true);
+            },
+
+            onPrint: function() {
+                if (!this.appOptions.canPrint) return;
+
+                if (this.api)
+                    this.api.asc_Print(Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
+                Common.component.Analytics.trackEvent('Print');
+            },
+
+            onPrintUrl: function(url) {
+                if (this.iframePrint) {
+                    this.iframePrint.parentNode.removeChild(this.iframePrint);
+                    this.iframePrint = null;
+                }
+                if (!this.iframePrint) {
+                    var me = this;
+                    this.iframePrint = document.createElement("iframe");
+                    this.iframePrint.id = "id-print-frame";
+                    this.iframePrint.style.display = 'none';
+                    this.iframePrint.style.visibility = "hidden";
+                    this.iframePrint.style.position = "fixed";
+                    this.iframePrint.style.right = "0";
+                    this.iframePrint.style.bottom = "0";
+                    document.body.appendChild(this.iframePrint);
+                    this.iframePrint.onload = function() {
+                        me.iframePrint.contentWindow.focus();
+                        me.iframePrint.contentWindow.print();
+                        me.iframePrint.contentWindow.blur();
+                        window.focus();
+                    };
                 }
-            });
+                if (url) this.iframePrint.src = url;
+            },
+
+            leavePageText: 'You have unsaved changes in this document. Click \'Stay on this Page\' then \'Save\' to save them. Click \'Leave this Page\' to discard all the unsaved changes.',
+            defaultTitleText: 'ONLYOFFICE Document Editor',
+            criticalErrorTitle: 'Error',
+            notcriticalErrorTitle: 'Warning',
+            errorDefaultMessage: 'Error code: %1',
+            criticalErrorExtText: 'Press "Ok" to back to document list.',
+            openTitleText: 'Opening Document',
+            openTextText: 'Opening document...',
+            saveTitleText: 'Saving Document',
+            saveTextText: 'Saving document...',
+            loadFontsTitleText: 'Loading Data',
+            loadFontsTextText: 'Loading data...',
+            loadImagesTitleText: 'Loading Images',
+            loadImagesTextText: 'Loading images...',
+            loadFontTitleText: 'Loading Data',
+            loadFontTextText: 'Loading data...',
+            loadImageTitleText: 'Loading Image',
+            loadImageTextText: 'Loading image...',
+            downloadTitleText: 'Downloading Document',
+            downloadTextText: 'Downloading document...',
+            printTitleText: 'Printing Document',
+            printTextText: 'Printing document...',
+            uploadImageTitleText: 'Uploading Image',
+            uploadImageTextText: 'Uploading image...',
+            savePreparingText: 'Preparing to save',
+            savePreparingTitle: 'Preparing to save. Please wait...',
+            uploadImageSizeMessage: 'Maximium image size limit exceeded.',
+            uploadImageExtMessage: 'Unknown image format.',
+            uploadImageFileCountMessage: 'No images uploaded.',
+            reloadButtonText: 'Reload Page',
+            unknownErrorText: 'Unknown error.',
+            convertationTimeoutText: 'Convertation timeout exceeded.',
+            downloadErrorText: 'Download failed.',
+            unsupportedBrowserErrorText : 'Your browser is not supported.',
+            splitMaxRowsErrorText: 'The number of rows must be less than %1',
+            splitMaxColsErrorText: 'The number of columns must be less than %1',
+            splitDividerErrorText: 'The number of rows must be a divisor of %1',
+            requestEditFailedTitleText: 'Access denied',
+            requestEditFailedMessageText: 'Someone is editing this document right now. Please try again later.',
+            txtNeedSynchronize: 'You have an updates',
+            textLoadingDocument: 'Loading document',
+            warnBrowserZoom: 'Your browser\'s current zoom setting is not fully supported. Please reset to the default zoom by pressing Ctrl+0.',
+            warnBrowserIE9: 'The application has low capabilities on IE9. Use IE10 or higher',
+            applyChangesTitleText: 'Loading Data',
+            applyChangesTextText: 'Loading data...',
+            errorKeyEncrypt: 'Unknown key descriptor',
+            errorKeyExpire: 'Key descriptor expired',
+            errorUsersExceed: 'Count of users was exceed',
+            errorCoAuthoringDisconnect: 'Server connection lost. You can\'t edit anymore.',
+            errorFilePassProtect: 'The document is password protected.',
+            txtBasicShapes: 'Basic Shapes',
+            txtFiguredArrows: 'Figured Arrows',
+            txtMath: 'Math',
+            txtCharts: 'Charts',
+            txtStarsRibbons: 'Stars & Ribbons',
+            txtCallouts: 'Callouts',
+            txtButtons: 'Buttons',
+            txtRectangles: 'Rectangles',
+            txtLines: 'Lines',
+            txtEditingMode: 'Set editing mode...',
+            textAnonymous: 'Anonymous',
+            loadingDocumentTitleText: 'Loading document',
+            loadingDocumentTextText: 'Loading document...',
+            warnProcessRightsChange: 'You have been denied the right to edit the file.',
+            errorProcessSaveResult: 'Saving is failed.',
+            textCloseTip: '\nClick to close the tip.',
+            textShape: 'Shape',
+            errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.',
+            errorDataRange: 'Incorrect data range.',
+            errorDatabaseConnection: 'External error.<br>Database connection error. Please, contact support.',
+            titleUpdateVersion: 'Version changed',
+            errorUpdateVersion: 'The file version has been changed. The page will be reloaded.',
+            errorUserDrop: 'The file cannot be accessed right now.',
+            txtDiagramTitle: 'Chart Title',
+            txtXAxis: 'X Axis',
+            txtYAxis: 'Y Axis',
+            txtSeries: 'Seria',
+            errorMailMergeLoadFile: 'Loading failed',
+            mailMergeLoadFileText: 'Loading Data Source...',
+            mailMergeLoadFileTitle: 'Loading Data Source',
+            errorMailMergeSaveFile: 'Merge failed.',
+            downloadMergeText: 'Downloading...',
+            downloadMergeTitle: 'Downloading',
+            sendMergeTitle: 'Sending Merge',
+            sendMergeText: 'Sending Merge...',
+            txtArt: 'Your text here',
+            errorConnectToServer: ' The document could not be saved. Please check connection settings or contact your administrator.<br>When you click the \'OK\' button, you will be prompted to download the document.<br><br>' +
+                'Find more information about connecting Document Server <a href=\"https://api.onlyoffice.com/editors/callback\" target=\"_blank\">here</a>',
+            textTryUndoRedo: 'The Undo/Redo functions are disabled for the Fast co-editing mode.<br>Click the \'Strict mode\' button to switch to the Strict co-editing mode to edit the file without other users interference and send your changes only after you save them. You can switch between the co-editing modes using the editor Advanced settings.',
+            textStrict: 'Strict mode',
+            txtErrorLoadHistory: 'Loading history failed',
+            textBuyNow: 'Visit website',
+            textNoLicenseTitle: 'ONLYOFFICE open source version',
+            warnNoLicense: 'You are using an open source version of ONLYOFFICE. The version has limitations for concurrent connections to the document server (20 connections at a time).<br>If you need more please consider purchasing a commercial license.',
+            textContactUs: 'Contact sales',
+            errorViewerDisconnect: 'Connection is lost. You can still view the document,<br>but will not be able to download until the connection is restored.',
+            warnLicenseExp: 'Your license has expired.<br>Please update your license and refresh the page.',
+            titleLicenseExp: 'License expired',
+            openErrorText: 'An error has occurred while opening the file',
+            saveErrorText: 'An error has occurred while saving the file'
         }
-    },
-
-    _isSupport: function(){
-        return (Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop));
-    },
-
-    _fillUserInfo: function(info, lang, defname) {
-        var _user = info || {};
-        !_user.id && (_user.id = ('uid-' + Date.now()));
-        _.isEmpty(_user.firstname) && _.isEmpty(_user.lastname)
-            && (_user.firstname = defname);
-
-        _user.fullname = /^ru/.test(lang) ?
-        _user.lastname + ' ' + _user.firstname : _user.firstname + ' ' + _user.lastname;
-
-        return _user;
-    },
-
-    printText: 'Printing...',
-    criticalErrorTitle: 'Error',
-    notcriticalErrorTitle: 'Warning',
-    errorDefaultMessage: 'Error code: %1',
-    criticalErrorExtText: 'Press "Ok" to reload view page.',
-    uploadImageSizeMessage: 'Maximium image size limit exceeded.',
-    uploadImageExtMessage: 'Unknown image format.',
-    uploadImageFileCountMessage: 'No images uploaded.',
-    unknownErrorText: 'Unknown error.',
-    convertationTimeoutText: 'Convertation timeout exceeded.',
-    convertationErrorText: 'Convertation failed.',
-    downloadErrorText: 'Download failed.',
-    unsupportedBrowserErrorText : 'Your browser is not supported.',
-    errorKeyEncrypt: 'Unknown key descriptor',
-    errorKeyExpire: 'Key descriptor expired',
-    errorUsersExceed: 'Count of users was exceed',
-    textAnonymous: 'Anonymous',
-    textLoadingDocument: 'Loading document'
+    })(), SSE.Controllers.Main || {}))
 });
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/controller/Settings.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  Settings.js
+ *  Document Editor
+ *
+ *  Created by Alexander Yuzhin on 10/7/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/Settings'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.Settings = Backbone.Controller.extend((function() {
+        // private
+        var rootView,
+            inProgress,
+            infoObj,
+            modalView;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'Settings'
+            ],
+
+            initialize: function () {
+                Common.SharedSettings.set('readerMode', false);
+                Common.NotificationCenter.on('settingscontainer:show', _.bind(this.initEvents, this));
+
+                this.addListeners({
+                    'Settings': {
+                        'page:show' : this.onPageShow
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                me.api.asc_registerCallback('asc_onGetDocInfoStart',    _.bind(me._onApiGetDocInfoStart, me));
+                me.api.asc_registerCallback('asc_onGetDocInfoStop',     _.bind(me._onApiGetDocInfoEnd, me));
+                me.api.asc_registerCallback('asc_onDocInfo',            _.bind(me._onApiDocInfo, me));
+                me.api.asc_registerCallback('asc_onGetDocInfoEnd',      _.bind(me._onApiGetDocInfoEnd, me));
+                me.api.asc_registerCallback('asc_onDocumentName',       _.bind(me._onApiDocumentName, me));
+            },
+
+            onLaunch: function () {
+                this.createView('Settings').render();
+            },
+
+            setMode: function (mode) {
+                this.getView('Settings').setMode(mode);
+            },
+
+            initEvents: function () {
+
+
+                // $('#font-bold').single('click',             _.bind(me.onBold, me));
+                // $('#font-italic').single('click',           _.bind(me.onItalic, me));
+                // $('#font-underline').single('click',        _.bind(me.onUnderline, me));
+                // $('#font-strikethrough').single('click',    _.bind(me.onStrikethrough, me));
+            },
+
+            rootView : function() {
+                return rootView;
+            },
+
+            showModal: function() {
+                if (Common.SharedSettings.get('phone')) {
+                    modalView = uiApp.popup(
+                        '<div class="popup container-settings">' +
+                            '<div class="content-block">' +
+                                '<div class="view settings-root-view navbar-through">' +
+                                    this.getView('Settings').rootLayout() +
+                                '</div>' +
+                            '</div>' +
+                        '</div>'
+                    );
+                } else {
+                    modalView = uiApp.popover(
+                        '<div class="popover container-settings">' +
+                            '<div class="popover-angle"></div>' +
+                            '<div class="popover-inner">' +
+                                '<div class="content-block">' +
+                                    '<div class="view popover-view settings-root-view navbar-through">' +
+                                        this.getView('Settings').rootLayout() +
+                                    '</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>',
+                        $$('#toolbar-settings')
+                    );
+                }
+
+                if (Framework7.prototype.device.android === true) {
+                    $$('.view.settings-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
+                    $$('.view.settings-root-view .navbar').prependTo('.view.settings-root-view > .pages > .page');
+                }
+
+                rootView = uiApp.addView('.settings-root-view', {
+                    dynamicNavbar: true
+                });
+
+                Common.NotificationCenter.trigger('settingscontainer:show');
+                this.onPageShow(this.getView('Settings'));
+            },
+
+            hideModal: function() {
+                if (modalView) {
+                    uiApp.closeModal(modalView);
+                }
+            },
+
+            onPageShow: function(view) {
+                var me = this;
+                $('#settings-search').single('click',                       _.bind(me._onSearch, me));
+                $('#settings-readermode input:checkbox').single('change',   _.bind(me._onReaderMode, me));
+                $('#settings-edit-document').single('click',                _.bind(me._onEditDocumet, me));
+                $(modalView).find('.formats a').single('click',             _.bind(me._onSaveFormat, me));
+            },
+
+
+            // API handlers
+
+            _onApiGetDocInfoStart: function () {
+                var me = this;
+                inProgress = true;
+                infoObj = {
+                    PageCount       : 0,
+                    WordsCount      : 0,
+                    ParagraphCount  : 0,
+                    SymbolsCount    : 0,
+                    SymbolsWSCount  : 0
+                };
+
+                _.defer(function(){
+                    if (!inProgress)
+                        return;
+
+                    $('#statistic-pages').html(me.txtLoading);
+                    $('#statistic-words').html(me.txtLoading);
+                    $('#statistic-paragraphs').html(me.txtLoading);
+                    $('#statistic-symbols').html(me.txtLoading);
+                    $('#statistic-spaces').html(me.txtLoading);
+                }, 2000);
+            },
+
+            _onApiGetDocInfoEnd: function() {
+                inProgress = false;
+
+                $('#statistic-pages').html(infoObj.PageCount);
+                $('#statistic-words').html(infoObj.WordsCount);
+                $('#statistic-paragraphs').html(infoObj.ParagraphCount);
+                $('#statistic-symbols').html(infoObj.SymbolsCount);
+                $('#statistic-spaces').html(infoObj.SymbolsWSCount);
+            },
+
+            _onApiDocInfo: function(obj) {
+                if (obj) {
+                    if (obj.get_PageCount() > -1)
+                        infoObj.PageCount = obj.get_PageCount();
+                    if (obj.get_WordsCount() > -1)
+                        infoObj.WordsCount = obj.get_WordsCount();
+                    if (obj.get_ParagraphCount() > -1)
+                        infoObj.ParagraphCount = obj.get_ParagraphCount();
+                    if (obj.get_SymbolsCount() > -1)
+                        infoObj.SymbolsCount = obj.get_SymbolsCount();
+                    if (obj.get_SymbolsWSCount() > -1)
+                        infoObj.SymbolsWSCount = obj.get_SymbolsWSCount();
+                }
+            },
+
+            _onApiDocumentName: function(name) {
+                $('#settings-document-title').html(name ? name : '-');
+            },
+
+            _onEditDocumet: function() {
+                Common.Gateway.requestEditRights();
+            },
+
+            _onSearch: function (e) {
+                var toolbarView = DE.getController('Toolbar').getView('Toolbar');
+
+                if (toolbarView) {
+                    toolbarView.showSearch();
+                }
+
+                this.hideModal();
+            },
+
+            _onReaderMode: function (e) {
+                var me = this;
+
+                Common.SharedSettings.set('readerMode', !Common.SharedSettings.get('readerMode'));
+
+                me.api && me.api.ChangeReaderMode();
+
+                if (Common.SharedSettings.get('phone')) {
+                    _.defer(function () {
+                        me.hideModal();
+                    }, 1000);
+                }
+
+                Common.NotificationCenter.trigger('readermode:change', Common.SharedSettings.get('readerMode'));
+            },
+
+            _onSaveFormat: function(e) {
+                var me = this,
+                    format = $(e.currentTarget).data('format');
+
+                if (format) {
+                    if (format == Asc.c_oAscFileType.TXT) {
+                        uiApp.confirm(
+                            me.warnDownloadAs,
+                            me.notcriticalErrorTitle,
+                            function () {
+                                me.api.asc_DownloadAs(format);
+                            }
+                        );
+                    } else {
+                        me.api.asc_DownloadAs(format);
+                    }
+
+                    me.hideModal();
+                }
+            },
+
+            txtLoading              : 'Loading...',
+            notcriticalErrorTitle   : 'Warning',
+            warnDownloadAs          : 'If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?'
+        }
+    })());
+});

apps/spreadsheeteditor/mobile/app/controller/Toolbar.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  Toolbar.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'spreadsheeteditor/mobile/app/view/Toolbar'
+], function (core) {
+    'use strict';
+
+    SSE.Controllers.Toolbar = Backbone.Controller.extend((function() {
+        // private
+        var _backUrl;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'Toolbar'
+            ],
+
+            initialize: function() {
+                this.addListeners({
+                    'Toolbar': {
+                        'searchbar:show'        : this.onSearchbarShow,
+                        'searchbar:render'      : this.onSearchbarRender
+                    }
+                });
+
+                Common.Gateway.on('init', _.bind(this.loadConfig, this));
+            },
+
+            loadConfig: function (data) {
+                if (data && data.config && data.config.canBackToFolder !== false &&
+                    data.config.customization && data.config.customization.goback && data.config.customization.goback.url) {
+                    _backUrl = data.config.customization.goback.url;
+
+                    $('#document-back').show().single('click', _.bind(this.onBack, this));
+                }
+            },
+
+            setApi: function(api) {
+                this.api = api;
+
+                // this.api.asc_registerCallback('asc_onCanUndo',  _.bind(this.onApiCanRevert, this, 'undo'));
+                // this.api.asc_registerCallback('asc_onCanRedo',  _.bind(this.onApiCanRevert, this, 'redo'));
+            },
+
+            setMode: function (mode) {
+                this.getView('Toolbar').setMode(mode);
+            },
+
+            onLaunch: function() {
+                var me = this;
+                me.createView('Toolbar').render();
+
+                $('#toolbar-undo').single('click',  _.bind(me.onUndo, me));
+                $('#toolbar-redo').single('click',  _.bind(me.onRedo, me));
+            },
+
+            setDocumentTitle: function (title) {
+                $('#toolbar-title').html(title);
+            },
+
+            // Search
+
+            onSearchbarRender: function(bar) {
+                var me = this;
+                me.searchBar = uiApp.searchbar('.searchbar.document', {
+                    customSearch: true,
+                    onSearch    : _.bind(me.onSearchChange, me),
+                    onEnable    : _.bind(me.onSearchEnable, me),
+                    onDisable   : _.bind(me.onSearchDisable, me),
+                    onClear     : _.bind(me.onSearchClear, me)
+                });
+
+                me.searchPrev = $('.searchbar.document .prev');
+                me.searchNext = $('.searchbar.document .next');
+
+                me.searchPrev.on('click', _.bind(me.onSearchPrev, me));
+                me.searchNext.on('click', _.bind(me.onSearchNext, me));
+            },
+
+            onSearchbarShow: function(bar) {
+                //
+            },
+
+            onSearchChange: function(search) {
+                var me = this,
+                    isEmpty = (search.query.trim().length < 1);
+
+                _.each([me.searchPrev, me.searchNext], function(btn) {
+                    btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
+                });
+            },
+
+            onSearchEnable: function(search) {
+                //
+            },
+
+            onSearchDisable: function(search) {
+                //
+            },
+
+            onSearchClear: function(search) {
+//            window.focus();
+//            document.activeElement.blur();
+            },
+
+            onSearchPrev: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'back');
+            },
+
+            onSearchNext: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'next');
+            },
+
+            onQuerySearch: function(query, direction, opts) {
+                if (query && query.length) {
+                //     if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
+                        var me = this;
+                        uiApp.alert(
+                            '',
+                            me.textNoTextFound,
+                            function () {
+                                me.searchBar.input.focus();
+                            }
+                        );
+                //     }
+                }
+            },
+
+            // Handlers
+
+            onBack: function (e) {
+                var me = this;
+
+                if (me.api.asc_isDocumentModified()) {
+                    uiApp.modal({
+                        title   : me.dlgLeaveTitleText,
+                        text    : me.dlgLeaveMsgText,
+                        verticalButtons: true,
+                        buttons : [
+                            {
+                                text: me.leaveButtonText,
+                                onClick: function() {
+                                    window.parent.location.href = _backUrl;
+                                }
+                            },
+                            {
+                                text: me.stayButtonText,
+                                bold: true
+                            }
+                        ]
+                    });
+                } else {
+                    window.parent.location.href = _backUrl;
+                }
+            },
+
+            onUndo: function (e) {
+                if ( this.api ) this.api.asc_Undo();
+            },
+
+            onRedo: function (e) {
+                if ( this.api ) this.api.asc_Redo();
+            },
+
+            // API handlers
+
+            onApiCanRevert: function(which, can) {
+                if (which == 'undo') {
+                    $('#toolbar-undo').toggleClass('disabled', !can);
+                } else {
+                    $('#toolbar-redo').toggleClass('disabled', !can);
+                }
+            },
+
+            dlgLeaveTitleText   : 'You leave the application',
+            dlgLeaveMsgText     : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
+            leaveButtonText     : 'Leave this Page',
+            stayButtonText      : 'Stay on this Page',
+            textNoTextFound     : 'Text not found',
+        }
+    })());
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/AddImage.template

+<!-- Root view -->
+<div id="addimage-root-view">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="add-image-file" class="item-link no-indicator">
+                    <div class="item-content">
+                        <div class="item-media">
+                            <i class="icon icon-search"></i>
+                        </div>
+                        <div class="item-inner">
+                            <div class="item-title">Picture from Library</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="add-image-url" class="item-link">
+                    <div class="item-content">
+                        <div class="item-media">
+                            <i class="icon icon-link"></i>
+                        </div>
+                        <div class="item-inner">
+                            <div class="item-title">Picture from URL</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- Url view -->
+<div id="addimage-url-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Link Settings</div>
+        </div>
+    </div>
+    <div class="page" id="addimage-url">
+        <div class="page-content">
+            <div class="content-block-title">Address</div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div id="addimage-link-url" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <input type="url" placeholder="Image URL">
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block disabled" id="addimage-insert">
+                <% if (android) { %>
+                <a href="#" class="button button-fill button-raised" style="margin: 20px 16px;">Insert Image</a>
+                <% } else { %>
+                <ul>
+                    <li>
+                        <a href="#" class="list-button item-link">Insert Image</a>
+                    </li>
+                </ul>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/AddOther.template

+<!-- Root view -->
+<div id="addother-root-view">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="add-other-pagebreak" class="item-link no-indicator">
+                    <div class="item-content">
+                        <div class="item-media">
+                            <i class="icon icon-pagebreak"></i>
+                        </div>
+                        <div class="item-inner">
+                            <div class="item-title">Page Break</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="add-other-section" class="item-link">
+                    <div class="item-content">
+                        <div class="item-media">
+                            <i class="icon icon-sectionbreak"></i>
+                        </div>
+                        <div class="item-inner">
+                            <div class="item-title">Section Break</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="add-other-linebreak" class="item-link no-indicator">
+                    <div class="item-content">
+                        <div class="item-media">
+                            <i class="icon icon-stringbreak"></i>
+                        </div>
+                        <div class="item-inner">
+                            <div class="item-title">Line Break</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="add-other-link" class="item-link">
+                    <div class="item-content">
+                        <div class="item-media">
+                            <i class="icon icon-link"></i>
+                        </div>
+                        <div class="item-inner">
+                            <div class="item-title">Link</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="add-other-pagenumber" class="item-link">
+                    <div class="item-content">
+                        <div class="item-media">
+                            <i class="icon icon-pagenumber"></i>
+                        </div>
+                        <div class="item-inner">
+                            <div class="item-title">Page Number</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- Secton break view -->
+<div id="addother-sectionbreak">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Section Break</div>
+        </div>
+    </div>
+    <div class="page" data-page="addother-sectionbreak">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <a data-type="next" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Next Page</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="continuous" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Continuous Page</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="even" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Even Page</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="odd" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Odd Page</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Link view -->
+<div id="addother-link">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Add Link</div>
+        </div>
+    </div>
+    <div class="page" data-page="addother-link">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div id="add-link-url" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title label">Link</div>
+                                <div class="item-input">
+                                    <input type="url" placeholder="Link">
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div id="add-link-display" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title label">Display</div>
+                                <div class="item-input">
+                                    <input type="text" placeholder="Display">
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div id="add-link-tip" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title label">Screen Tip</div>
+                                <div class="item-input">
+                                    <input type="text" placeholder="Screen Tip">
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block disabled" id="add-link-insert">
+                <% if (android) { %>
+                <a href="#" class="button button-fill button-raised" style="margin: 20px 16px;">Insert</a>
+                <% } else { %>
+                <ul>
+                    <li>
+                        <a href="#" class="list-button item-link">Insert</a>
+                    </li>
+                </ul>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Page Number Position view -->
+<div id="addother-pagenumber">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Position</div>
+        </div>
+    </div>
+    <div class="page" data-page="addother-pagenumber">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <a data-type="lt" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Left Top</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="ct" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Center Top</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="rt" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Right Top</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="lb" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Left Bottom</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="cb" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Center Bottom</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="rb" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Right Bottom</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="current" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">Current Position</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/AddShape.template

+<!-- Root view -->
+<div id="add-shapes-root">
+    <div class="page-content dataview shapes">
+        <% _.each(shapes, function(row) { %>
+        <ul class="row">
+            <% _.each(row, function(shape) { %>
+            <li data-type="<%= shape.type %>">
+                <div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
+            </li>
+            <% }); %>
+        </ul>
+        <% }); %>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/AddTable.template

+<!-- Root view -->
+<div id="add-table-root">
+    <div class="page-content dataview table-styles">
+        <ul class="row">
+            <% _.each(styles, function(style) { %>
+            <li data-type="<%= style.templateId %>">
+                <img src="<%= style.imageUrl %>">
+            </li>
+            <% }); %>
+        </ul>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditChart.template

+<!-- Root view -->
+<div id="edit-chart-root">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="chart-style" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Style</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="chart-wrap" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Wrap</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="chart-reorder" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Reorder</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block">
+        <% if (!android) { %>
+        <ul>
+            <li>
+                <a id="chart-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Chart</a>
+            </li>
+        </ul>
+        <% } else { %>
+        <a id="chart-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Chart</a>
+        <% } %>
+    </div>
+</div>
+
+<!-- Reorder view -->
+<div id="edit-chart-reorder">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Reorder</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page chart-reorder">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <a data-type="all-up" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Bring to Foreground</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="all-down" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Send to Background</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="move-up" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Forward</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="move-down" class="item-link no-indicator">
+                            <div data-type="move-down" class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Backward</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Wrap view -->
+<div id="edit-chart-wrap">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page chart-wrap">
+        <div class="page-content">
+            <div class="list-block chart-wrap-types">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="chart-wrap" value="inline">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="chart-wrap" value="square">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Square</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="chart-wrap" value="tight">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Tight</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="chart-wrap" value="through">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Through</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="chart-wrap" value="top-bottom">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Top and Bottom</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="chart-wrap" value="infront">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">In Front</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="chart-wrap" value="behind">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Behind</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title align">Align</div>
+            <div class="list-block align">
+                <ul>
+                    <li id="edit-chart-align">
+                        <div class="item-content buttons">
+                            <div class="item-inner">
+                                <div class="row">
+                                    <a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
+                                    <a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
+                                    <a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block inline">
+                <ul>
+                    <li id="edit-chart-movetext">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Move with Text</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="edit-chart-overlap">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Allow Overlap</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title distance">Distance from text</div>
+            <div class="list-block distance" style="margin-bottom: 40px;">
+                <ul>
+                    <li id="table-distance">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <div class="range-slider">
+                                        <input type="range" min="0" max="200" value="0" step="1">
+                                    </div>
+                                </div>
+                                <div class="item-after value">0 pt</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Styles view -->
+<div id="edit-chart-style">
+    <div class="navbar">
+        <div class="navbar-inner edit-chart-style" data-page="edit-chart-style">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding categories">
+                <% if (android) { %>
+                <div class="toolbar tabbar">
+                    <div data-page="index" class="toolbar-inner">
+                        <a href="#tab-chart-type" data-type="type" class="tab-link active">Type</a>
+                        <a href="#tab-chart-style" data-type="style" class="tab-link">Style</a>
+                        <a href="#tab-chart-fill" data-type="fill" class="tab-link">Fill</a>
+                        <a href="#tab-chart-border" data-type="border" class="tab-link">Border</a>
+                    </div>
+                </div>
+                <% } else { %>
+                <div class="buttons-row">
+                    <a href="#tab-chart-type" data-type="type" class="tab-link button active">Type</a>
+                    <a href="#tab-chart-style" data-type="style" class="tab-link button">Style</a>
+                    <a href="#tab-chart-fill" data-type="fill" class="tab-link button">Fill</a>
+                    <a href="#tab-chart-border" data-type="border" class="tab-link button">Border</a>
+                </div>
+                <% } %>
+            </div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-chart-style">
+        <div class="tabs-animated-wrap">
+            <div class="tabs">
+                <div id="tab-chart-type" class="page-content tab active dataview chart-types">
+                    <% _.each(types, function(row) { %>
+                    <ul class="row">
+                        <% _.each(row, function(type) { %>
+                        <li data-type="<%= type.type %>">
+                            <div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div>
+                        </li>
+                        <% }); %>
+                    </ul>
+                    <% }); %>
+                </div>
+                <div id="tab-chart-style" class="page-content tab">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-chart-styles">
+                                <div class="item-content">
+                                    <div class="item-inner"></div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="tab-chart-fill" class="page-content tab">
+                    <!--Fill colors-->
+                </div>
+                <div id="tab-chart-border" class="page-content tab">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-chart-bordersize">
+                                <div style="padding: 15px 0 0 15px;">Size</div>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-input">
+                                            <div class="range-slider">
+                                                <input type="range" min="0" max="7" value="0" step="1">
+                                            </div>
+                                        </div>
+                                        <div class="item-after value">0 pt</div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <a id="edit-chart-bordercolor" class="item-link">
+                                    <div class="item-content">
+                                        <div class="item-inner">
+                                            <div class="item-title">Color</div>
+                                            <div class="item-after"><div class="color-preview"></div></div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Border color view -->
+<div id="edit-chart-border-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-chart-border-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Color</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-chart-border-color">
+        <div class="page-content">
+            <!--Color palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditHyperlink.template

+<!-- Link view -->
+<div id="edit-link-root">
+    <div class="list-block">
+        <ul>
+            <li>
+                <div id="edit-link-url" class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title label">Link</div>
+                        <div class="item-input">
+                            <input type="url" placeholder="Link">
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div id="edit-link-display" class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title label">Display</div>
+                        <div class="item-input">
+                            <input type="text" placeholder="Display">
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div id="edit-link-tip" class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title label">Screen Tip</div>
+                        <div class="item-input">
+                            <input type="text" placeholder="Screen Tip">
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block">
+        <% if (android) { %>
+        <a href="#" id="edit-link-edit" class="button button-raised button-fill disabled" style="margin: 20px 16px;">Edit Link</a>
+        <a href="#" id="edit-link-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Link</a>
+        <% } else { %>
+        <ul>
+            <li>
+                <a href="#" id="edit-link-edit" class="list-button item-link disabled" style="text-align: center;">Edit Link</a>
+            </li>
+            <li>
+                <a href="#" id="edit-link-remove" class="list-button item-link" style="text-align: center; color: #f00">Remove Link</a>
+            </li>
+        </ul>
+        <% } %>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditImage.template

+<!-- Root view -->
+<div id="edit-image-root">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="image-wrap" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Wrap</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="image-replace" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Replace</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="image-reorder" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Reorder</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block">
+        <ul>
+            <li>
+                <% if (android) { %>
+                <a id="image-default" class="button button-raised button-fill" style="margin: 20px 16px;">Default Size</a>
+                <% } else { %>
+                <a id="image-default" class="item-link list-button" style="text-align: center;">Default Size</a>
+                <% } %>
+            </li>
+            <li>
+                <% if (android) { %>
+                <a id="image-default" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Image</a>
+                <% } else { %>
+                <a id="image-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Image</a>
+                <% } %>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- Reorder view -->
+<div id="edit-image-reorder-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Reorder</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page image-reorder">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <a data-type="all-up" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Bring to Foreground</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="all-down" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Send to Background</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="move-up" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Forward</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="move-down" class="item-link no-indicator">
+                            <div data-type="move-down" class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Backward</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Wrap view -->
+<div id="edit-image-wrap-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page image-wrap">
+        <div class="page-content">
+            <div class="list-block image-wrap-types">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="image-wrap" value="inline">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="image-wrap" value="square">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Square</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="image-wrap" value="tight">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Tight</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="image-wrap" value="through">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Through</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="image-wrap" value="top-bottom">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Top and Bottom</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="image-wrap" value="infront">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">In Front</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="image-wrap" value="behind">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Behind</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title align">Align</div>
+            <div class="list-block align">
+                <ul>
+                    <li id="edit-image-align">
+                        <div class="item-content buttons">
+                            <div class="item-inner">
+                                <div class="row">
+                                    <a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
+                                    <a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
+                                    <a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block inline">
+                <ul>
+                    <li id="edit-image-movetext">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Move with Text</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="edit-image-overlap">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Allow Overlap</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title distance">Distance from text</div>
+            <div class="list-block distance" style="margin-bottom: 40px;">
+                <ul>
+                    <li id="table-distance">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <div class="range-slider">
+                                        <input type="range" min="0" max="200" value="0" step="1">
+                                    </div>
+                                </div>
+                                <div class="item-after value">0 pt</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Replace view -->
+<div id="edit-image-replace-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Replace</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <a id="edit-image-file" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media">
+                                    <i class="icon icon-search"></i>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title">Picture from Library</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a id="edit-image-url" class="item-link">
+                            <div class="item-content">
+                                <div class="item-media">
+                                    <i class="icon icon-search"></i>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title">Picture from URL</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Url view -->
+<div id="edit-image-url-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Link Settings</div>
+        </div>
+    </div>
+    <div class="page edit-image-url-link">
+        <div class="page-content">
+            <div class="content-block-title">Address</div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <input type="url" placeholder="Image URL">
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block disabled buttons">
+                <% if (android) { %>
+                <a href="#" class="button button-fill button-raised" style="margin: 20px 16px;">Replace Image</a>
+                <% } else { %>
+                <ul>
+                    <li>
+                        <a href="#" class="list-button item-link">Replace Image</a>
+                    </li>
+                </ul>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditParagraph.template

+<!-- Root view -->
+<div id="edit-paragraph-root">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="paragraph-background" class="item-link">
+                <div class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title">Background</div>
+                        <div class="item-after"><div class="color-preview"></div></div>
+                    </div>
+                </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="paragraph-advanced" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Advanced settings</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="content-block-title">Paragraph styles</div>
+    <div id="paragraph-list" class="list-block">
+        <ul></ul>
+    </div>
+</div>
+
+<!-- Background color view -->
+<div id="edit-paragraph-color">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Background</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-paragraph-color">
+        <div class="page-content">
+        </div>
+    </div>
+</div>
+
+<!-- Advanced view -->
+<div id="edit-paragraph-advanced">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Advanced</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-paragraph-advanced">
+        <div class="page-content">
+            <div class="content-block-title">Distance from text</div>
+            <div class="list-block">
+                <ul>
+                    <li id="paragraph-distance-before">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Before</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label>Auto</label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label>Auto</label><% } %>
+                                        <span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="paragraph-distance-after">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">After</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label>Auto</label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label>Auto</label><% } %>
+                                        <span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block">
+                <ul>
+                    <li id="paragraph-space">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Space Between Paragraphs</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block">
+                <ul>
+                    <li id="paragraph-page-break">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Page Break Before</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="paragraph-page-orphan">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Orphan Control</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="paragraph-page-keeptogether">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Keep Lines Together</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="paragraph-page-keepnext">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Keep with Next</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditShape.template

+<!-- Root view -->
+<div id="edit-shape-root">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="shape-style" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Style</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="shape-wrap" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Wrap</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="shape-replace" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Replace</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="shape-reorder" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Reorder</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block">
+        <ul>
+            <li>
+                <% if (android) { %>
+                <a id="shape-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Shape</a>
+                <% } else { %>
+                <a id="shape-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Shape</a>
+                <% } %>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- Reorder view -->
+<div id="edit-shape-reorder">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Reorder</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page shape-reorder">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <a data-type="all-up" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Bring to Foreground</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="all-down" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Send to Background</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="move-up" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Forward</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a data-type="move-down" class="item-link no-indicator">
+                            <div data-type="move-down" class="item-content">
+                                <div class="item-media"><i class="icon icon-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Backward</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Replace view -->
+<div id="edit-shape-replace">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Replace</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page shape-replace">
+        <div class="page-content dataview shapes">
+            <% _.each(shapes, function(row) { %>
+            <ul class="row">
+                <% _.each(row, function(shape) { %>
+                <li data-type="<%= shape.type %>">
+                    <div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
+                </li>
+                <% }); %>
+            </ul>
+            <% }); %>
+        </div>
+    </div>
+</div>
+
+<!-- Wrap view -->
+<div id="edit-shape-wrap">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page shape-wrap">
+        <div class="page-content">
+            <div class="list-block shape-wrap-types">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="shape-wrap" value="inline">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="shape-wrap" value="square">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Square</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="shape-wrap" value="tight">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Tight</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="shape-wrap" value="through">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Through</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="shape-wrap" value="top-bottom">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Top and Bottom</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="shape-wrap" value="infront">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">In Front</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="shape-wrap" value="behind">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Behind</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title align">Align</div>
+            <div class="list-block align">
+                <ul>
+                    <li id="edit-shape-align">
+                        <div class="item-content buttons">
+                            <div class="item-inner">
+                                <div class="row">
+                                    <a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
+                                    <a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
+                                    <a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block inline">
+                <ul>
+                    <li id="edit-shape-movetext">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Move with Text</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="edit-shape-overlap">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Allow Overlap</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title distance">Distance from text</div>
+            <div class="list-block distance" style="margin-bottom: 40px;">
+                <ul>
+                    <li id="table-distance">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <div class="range-slider">
+                                        <input type="range" min="0" max="200" value="0" step="1">
+                                    </div>
+                                </div>
+                                <div class="item-after value">0 pt</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Styles view -->
+<div id="edit-shape-style">
+    <div class="navbar">
+        <div class="navbar-inner edit-shape-style" data-page="edit-shape-style">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding categories">
+                <% if (android) { %>
+                <div class="toolbar tabbar">
+                    <div data-page="index" class="toolbar-inner">
+                        <a href="#tab-shape-fill" data-type="fill" class="tab-link active">Fill</a>
+                        <a href="#tab-shape-border" data-type="border" class="tab-link">Border</a>
+                        <a href="#tab-shape-effects" data-type="effects" class="tab-link">Effects</a>
+                    </div>
+                </div>
+                <% } else { %>
+                <div class="buttons-row">
+                    <a href="#tab-shape-fill" data-type="fill" class="tab-link button active">Fill</a>
+                    <a href="#tab-shape-border" data-type="border" class="tab-link button">Border</a>
+                    <a href="#tab-shape-effects" data-type="effects" class="tab-link button">Effects</a>
+                </div>
+                <% } %>
+            </div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-shape-style">
+        <div class="tabs-animated-wrap">
+            <div class="tabs">
+                <div id="tab-shape-fill" class="page-content tab active">
+                    <!--Fill colors-->
+                </div>
+                <div id="tab-shape-border" class="page-content tab">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-shape-bordersize">
+                                <div style="padding: 15px 0 0 15px;">Size</div>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-input">
+                                            <div class="range-slider">
+                                                <input type="range" min="0" max="7" value="0" step="1">
+                                            </div>
+                                        </div>
+                                        <div class="item-after value">0 pt</div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <a id="edit-shape-bordercolor" class="item-link">
+                                    <div class="item-content">
+                                        <div class="item-inner">
+                                            <div class="item-title">Color</div>
+                                            <div class="item-after"><div class="color-preview"></div></div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="tab-shape-effects" class="page-content tab">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-shape-effect">
+                                <div style="padding: 15px 0 0 15px;">Opacity</div>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-input">
+                                            <div class="range-slider">
+                                                <input type="range" min="0" max="100" value="0" step="1">
+                                            </div>
+                                        </div>
+                                        <div class="item-after value">0 %</div>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Border color view -->
+<div id="edit-shape-border-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-shape-border-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Color</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-shape-border-color">
+        <div class="page-content">
+            <!--Color palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditTable.template

+<!-- Root view -->
+<div id="edit-table-root">
+    <div class="list-block">
+        <ul>
+            <li id="table-insert">
+                <div class="item-content buttons">
+                    <div class="item-inner">
+                        <div class="row">
+                            <a id="insert-column-left" class="button no-ripple"><i class="icon icon-table-add-column-left"></i></a>
+                            <a id="insert-column-right" class="button no-ripple"><i class="icon icon-table-add-column-right"></i></a>
+                            <a id="insert-row-above" class="button no-ripple"><i class="icon icon-table-add-row-above"></i></a>
+                            <a id="insert-row-below" class="button no-ripple"><i class="icon icon-table-add-row-below"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li id="table-remove">
+                <div class="item-content buttons">
+                    <div class="item-inner">
+                        <div class="row">
+                            <a id="remove-column" class="button no-ripple"><i class="icon icon-table-remove-column"></i></a>
+                            <a id="remove-row" class="button no-ripple"><i class="icon icon-table-remove-row"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <% if (!android) { %>
+                <a id="table-remove-all" class="item-link list-button" style="text-align: center; color: #f00">Remove Table</a>
+                <% } %>
+            </li>
+        </ul>
+        <% if (android) { %>
+        <a id="table-remove-all" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Table</a>
+        <% } %>
+    </div>
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="table-options" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Table Options</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="table-style" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Style</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="table-wrap" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title">Wrap</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- Wrap view -->
+<div id="edit-table-wrap">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" id="edit-tablewrap-page" data-page="edit-table-wrap">
+        <div class="page-content">
+            <div class="list-block" id="table-wrap-type">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="table-wrap" value="inline">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="table-wrap" value="flow">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Flow</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block">
+                <ul>
+                    <li id="table-move-text">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Move with Text</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title flow">Distance from text</div>
+            <div class="list-block flow" style="margin-bottom: 40px;">
+                <ul>
+                    <li id="table-distance">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <div class="range-slider">
+                                        <input type="range" min="0" max="200" value="0" step="1">
+                                    </div>
+                                </div>
+                                <div class="item-after value">0 pt</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title inline">Align</div>
+            <div class="list-block inline" style="margin-bottom: 40px;">
+                <ul>
+                    <li id="table-align">
+                        <div class="item-content buttons">
+                            <div class="item-inner">
+                                <div class="row">
+                                    <a id="table-align-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
+                                    <a id="table-align-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
+                                    <a id="table-align-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Options view -->
+<div id="edit-table-options">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Options</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-table-wrap">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li id="table-option-repeatasheader">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Repeat as Header Row</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="table-option-resizetofit">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Resize to Fit Content</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title">Cell margins</div>
+            <div class="list-block" style="margin-bottom: 40px;">
+                <ul>
+                    <li id="table-options-margins">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <div class="range-slider">
+                                        <input type="range" min="0" max="150" value="0" step="1">
+                                    </div>
+                                </div>
+                                <div class="item-after value">0 pt</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Styles view -->
+<div id="edit-table-style">
+    <div class="navbar">
+        <div class="navbar-inner edit-table-style" data-page="edit-table-style">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding categories">
+                <% if (android) { %>
+                <div class="toolbar tabbar">
+                    <div data-page="index" class="toolbar-inner">
+                        <a href="#tab-table-style" data-type="style" class="tab-link active">Style</a>
+                        <a href="#tab-table-fill" data-type="fill" class="tab-link">Fill</a>
+                        <a href="#tab-table-border" data-type="border" class="tab-link">Border</a>
+                    </div>
+                </div>
+                <% } else { %>
+                <div class="buttons-row">
+                    <a href="#tab-table-style" data-type="style" class="tab-link button active">Style</a>
+                    <a href="#tab-table-fill"  data-type="fill" class="tab-link button">Fill</a>
+                    <a href="#tab-table-border" data-type="border" class="tab-link button">Border</a>
+                </div>
+                <% } %>
+            </div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-table-style">
+        <div class="tabs-animated-wrap">
+            <div class="tabs">
+                <div id="tab-table-style" class="page-content tab active">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-table-styles">
+                                <div class="item-content">
+                                    <div class="item-inner"></div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="list-block" style="margin-bottom: 40px;">
+                        <ul>
+                            <li>
+                                <a id="edit-table-style-options" class="item-link">
+                                    <div class="item-content">
+                                        <div class="item-inner">
+                                            <div class="item-title">Style Options</div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="tab-table-fill" class="page-content tab">
+                    <!--Fill colors-->
+                </div>
+                <div id="tab-table-border" class="page-content tab">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-table-bordersize">
+                                <div style="padding: 15px 0 0 15px;">Size</div>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-input">
+                                            <div class="range-slider">
+                                                <input type="range" min="0" max="7" value="0" step="1">
+                                            </div>
+                                        </div>
+                                        <div class="item-after value">0 pt</div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <a id="edit-table-bordercolor" class="item-link">
+                                    <div class="item-content">
+                                        <div class="item-inner">
+                                            <div class="item-title">Color</div>
+                                            <div class="item-after"><div class="color-preview"></div></div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li id="edit-table-bordertypes">
+                                <div class="item-content buttons" style="-webkit-flex-flow: row wrap;justify-content: space-around;">
+                                    <div class="item-inner" style="margin: 20px 0;">
+                                        <div class="row">
+                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtbcm"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type=""><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="cm"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtb"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="l"><i class="icon icon-text-align-left"></i></a>
+                                        </div>
+                                    </div>
+                                    <div class="item-inner" style="margin: 0 0 20px;">
+                                        <div class="row">
+                                            <a class="button no-ripple" style="min-width:0;" data-type="c"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="r"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="t"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="m"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="b"><i class="icon icon-text-align-left"></i></a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Style options view -->
+<div id="edit-table-style-options-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-table-style-options">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Options</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-table-style-options">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li id="table-options-header-row">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Header Row</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="table-options-total-row">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Total Row</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="table-options-banded-row">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Banded Row</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block">
+                <ul>
+                    <li id="table-options-first-column">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">First Column</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="table-options-last-column">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Last Column</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="table-options-banded-column">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Banded Column</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Style options view -->
+<div id="edit-table-border-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-table-border-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Color</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-table-border-color">
+        <div class="page-content">
+            <!--Color palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditText.template

+<!-- Root view -->
+<div id="edit-text-root">
+    <div class="list-block">
+        <ul>
+            <li><a id="font-fonts" class="item-link">
+                <div class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title">Fonts</div>
+                        <div class="item-after" style="color: #000;"><span></span><span style="margin-left: 5px;"></span></div>
+                    </div>
+                </div></a></li>
+            <li><div class="item-content buttons">
+                <div class="item-inner">
+                    <div class="row">
+                        <a id="font-bold" class="button"><b>B</b></a>
+                        <a id="font-italic" class="button"><i>I</i></a>
+                        <a id="font-underline" class="button" style="text-decoration: underline;">U</a>
+                        <a id="font-strikethrough" class="button" style="text-decoration: line-through">S</a>
+                    </div>
+                </div>
+            </div></li>
+            <li>
+                <a id="font-color" class="item-link">
+                    <div class="item-content">
+                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
+                        <div class="item-inner">
+                            <div class="item-title">Font color</div>
+                            <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li><a id="font-background" class="item-link">
+                <div class="item-content">
+                    <% if (!android) { %><div class="item-media"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
+                    <div class="item-inner">
+                        <div class="item-title">Highlight color</div>
+                        <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
+                    </div>
+                </div>
+            </a>
+            </li>
+            <li>
+                <a id="font-additional" class="item-link">
+                    <div class="item-content">
+                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-additional"></i></div><% } %>
+                        <div class="item-inner">
+                            <div class="item-title">Additional formatting</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block">
+        <ul>
+            <li><div id="paragraph-align" class="item-content buttons">
+                <div class="item-inner">
+                    <div class="row">
+                        <a id="font-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
+                        <a id="font-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
+                        <a id="font-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
+                        <a id="font-just" class="button no-ripple"><i class="icon icon-text-align-jast"></i></a>
+                    </div>
+                </div>
+            </div></li>
+            <li><div class="item-content buttons">
+                <div class="item-inner">
+                    <div class="row">
+                        <a id="font-moveleft" class="button no-ripple"><i class="icon icon-de-indent"></i></a>
+                        <a id="font-moveright" class="button no-ripple"><i class="icon icon-in-indent"></i></a>
+                    </div>
+                </div>
+            </div></li>
+            <li><a id="font-bullets" class="item-link">
+                <div class="item-content">
+                    <% if (!android) { %><div class="item-media"><i class="icon icon-bullets"></i></div><% } %>
+                    <div class="item-inner">
+                        <div class="item-title">Bullets</div>
+                    </div>
+                </div></a></li>
+            <li><a id="font-numbers" class="item-link">
+                <div class="item-content">
+                    <% if (!android) { %><div class="item-media"><i class="icon icon-numbers"></i></div><% } %>
+                    <div class="item-inner">
+                        <div class="item-title">Numbers</div>
+                    </div>
+                </div></a></li>
+            <li><a id="font-line-spacing" class="item-link">
+                <div class="item-content">
+                    <% if (!android) { %><div class="item-media"><i class="icon icon-linespacing"></i></div><% } %>
+                    <div class="item-inner">
+                        <div class="item-title">Line Spacing</div>
+                    </div>
+                </div></a></li>
+        </ul>
+    </div>
+</div>
+
+<!-- Fonts view -->
+<div id="edit-text-fonts">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
+            <div class="center sliding">Fonts</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-font-page">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li id="font-size">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Size</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label></label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label></label><% } %>
+                                        <span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title">Fonts</div>
+            <div id="font-list" class="list-block virtual-list">
+                <!-- Fonts List -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Font color view -->
+<div id="edit-text-color">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
+            <div class="center sliding">Font Colors</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-font-color">
+        <div class="page-content">
+            <div class="list-block" style="<% if (!android) { %>margin-bottom: -36px;<% } %>">
+                <ul>
+                    <li>
+                        <a id="font-color-auto" class="item-link no-indicator">
+                            <div class="item-content">
+                                <div class="item-media">
+                                    <div style="width:22px; height: 22px; background-color: #000;"></div>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title">Automatic</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Highlight color view -->
+<div id="edit-text-background">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
+            <div class="center sliding">Highlight Colors</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-font-background">
+        <div class="page-content">
+        </div>
+    </div>
+</div>
+
+
+<!-- Additional view -->
+<div id="edit-text-additional">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
+            <div class="center sliding">Additional</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" id="page-text-additional" data-page="edit-text-additional">
+        <div class="page-content">
+            <div class="list-block" id="text-additional">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-strikethrough" value="strikethrough">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Strikethrough</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-strikethrough" value="double-strikethrough">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Double Strikethrough</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-script" value="superscript">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Superscript</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-script" value="subscript">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Subscript</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-caps" value="small">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Small Caps</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-caps" value="all">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">All Caps</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block">
+                <ul>
+                    <li id="letter-spacing" id="letter-spacing">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Letter Spacing</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label></label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label></label><% } %>
+                                        <span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Line Spacing view -->
+<div id="edit-text-linespacing">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
+            <div class="center sliding">Line Spacing</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" id="page-text-linespacing" data-page="edit-text-additional">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="line-spacing" value="1">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">1.0</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="line-spacing" value="1.15">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">1.15</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="line-spacing" value="1.5">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">1.5</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="line-spacing" value="2">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">2.0</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="line-spacing" value="2.5">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">2.5</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="line-spacing" value="3">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">3.0</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Bullets view -->
+<div id="edit-text-bullets">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
+            <div class="center sliding">Bullets</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" id="page-text-bullets">
+        <div class="page-content dataview bullets">
+            <div class="list-block">
+                <% _.each(bullets, function(row) { %>
+                <ul class="row">
+                    <% _.each(row, function(bullet) { %>
+                    <li data-type="<%= bullet.type %>">
+                        <% if (bullet.thumb.length < 1) { %>
+                        <div class="thumb"><label>None</label></div>
+                        <% } else { %>
+                        <div class="thumb" style="background-image:url('../mobile/resources/img/bullets/<%= bullet.thumb %>')"></div>
+                        <% } %>
+                    </li>
+                    <% }); %>
+                </ul>
+                <% }); %>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Numbers view -->
+<div id="edit-text-numbers">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></a></div>
+            <div class="center sliding">Numbers</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" id="page-text-numbers">
+        <div class="page-content dataview numbers">
+            <div class="list-block">
+                <% _.each(numbers, function(row) { %>
+                <ul class="row">
+                    <% _.each(row, function(number) { %>
+                    <li data-type="<%= number.type %>">
+                        <% if (number.thumb.length < 1) { %>
+                        <div class="thumb"><label>None</label></div>
+                        <% } else { %>
+                        <div class="thumb" style="background-image:url('../mobile/resources/img/numbers/<%= number.thumb %>')"></div>
+                        <% } %>
+                    </li>
+                    <% }); %>
+                </ul>
+                <% }); %>
+            </div>
+        </div>
+    </div>
+</div>

apps/spreadsheeteditor/mobile/app/template/Editor.template

+<div class="views">
+    <div class="view view-main">
+        <div class="pages navbar-through">
+            <div data-page="index" class="page">
+                <div id="editor_sdk" class="page-content no-fastclick">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/Settings.template

+<!-- Root view -->
+<div id="settings-root-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="center sliding">Settings</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link close-popup">Done</a><% } %></div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="settings-root-view">
+            <div class="page-content">
+                <div class="list-block">
+                    <ul>
+                        <!--<li>-->
+                            <!--<a id="settings-search" class="item-link no-indicator">-->
+                                <!--<div class="item-content">-->
+                                    <!--<div class="item-media">-->
+                                        <!--<i class="icon icon-search"></i>-->
+                                    <!--</div>-->
+                                    <!--<div class="item-inner">-->
+                                        <!--<div class="item-title">Search</div>-->
+                                    <!--</div>-->
+                                <!--</div>-->
+                            <!--</a>-->
+                        <!--</li>-->
+                        <li>
+                            <a id="settings-edit-document" class="item-link no-indicator">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-edit"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">Edit Document</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <div id="settings-readermode" class="item-content">
+                                <div class="item-media">
+                                    <i class="icon icon-reader"></i>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title">Reader Mode</div>
+                                    <div class="item-after">
+                                        <label class="label-switch">
+                                            <input type="checkbox">
+                                            <div class="checkbox"></div>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li>
+                            <a id="settings-download" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-download"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">Download</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a id="settings-document-info" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-info"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">Document Info</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <!--<li>-->
+                            <!--<a id="settings-history" class="item-link">-->
+                                <!--<div class="item-content">-->
+                                    <!--<div class="item-media">-->
+                                        <!--<i class="icon icon-versions"></i>-->
+                                    <!--</div>-->
+                                    <!--<div class="item-inner">-->
+                                        <!--<div class="item-title">Document History</div>-->
+                                    <!--</div>-->
+                                <!--</div>-->
+                            <!--</a>-->
+                        <!--</li>-->
+                        <li>
+                            <a id="settings-help" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-help"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">Help</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a id="settings-about" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-about"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">About</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Document Info view -->
+<div id="settings-info-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding">
+                <a href="#" class="back link">
+                    <i class="icon icon-back"></i>
+                    <% if (!android) { %>
+                        <span>Back</span>
+                    <% } %>
+                </a>
+            </div>
+            <div class="center sliding">Document Info</div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="settings-info-view">
+            <div class="page-content">
+                <div class="content-block-title">Document title</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div id="settings-document-title" class="item-title">Loading...</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Author</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div id="settings-document-autor" class="item-title">Loading...</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Create date</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div id="settings-document-date" class="item-title">Loading...</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Statistic</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Pages</div>
+                                <div class="item-after" id="statistic-pages">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Paragraphs</div>
+                                <div class="item-after" id="statistic-paragraphs">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Words</div>
+                                <div class="item-after" id="statistic-words">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Symbols</div>
+                                <div class="item-after" id="statistic-symbols">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Spaces</div>
+                                <div class="item-after" id="statistic-spaces">0</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Download view -->
+<div id="settings-download-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding">
+                <a href="#" class="back link">
+                    <i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %>
+                </a>
+            </div>
+            <div class="center sliding">Download</div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page formats" data-page="settings-download-view">
+            <div class="page-content">
+                <div class="content-block-title">Download As...</div>
+                <div class="list-block">
+                    <ul>
+                        <li>
+                            <a data-format="65" class="item-link no-indicator">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">DOCX</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a data-format="513" class="item-link no-indicator">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">PDF</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a data-format="69" class="item-link no-indicator">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">TXT</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a data-format="67" class="item-link no-indicator">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">ODT</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a data-format="2051" class="item-link no-indicator">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">HTML</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- History view -->
+<div id="settings-history-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding">
+                <a href="#" class="back link">
+                    <i class="icon icon-back"></i>
+                    <% if (!android) { %>
+                    <span>Back</span>
+                    <% } %>
+                </a>
+            </div>
+            <div class="center sliding">Version History</div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="settings-history-view">
+            <div class="page-content">
+                <div class="content-block-title">Saved versions</div>
+                <div class="content-block inset">
+                    <div class="content-block-inner">
+                        <p>Under construction</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- About view -->
+<div id="settings-about-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding">
+                <a href="#" class="back link">
+                    <i class="icon icon-back"></i>
+                    <% if (!android) { %>
+                    <span>Back</span>
+                    <% } %>
+                </a>
+            </div>
+            <div class="center sliding">About</div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page about" data-page="settings-about-view">
+            <div class="page-content">
+                <div class="content-block">
+                    <div class="logo" style="display: inline-block; width: 100%; height: 55px;"></div>
+                </div>
+                <div class="content-block">
+                    <h3>DOCUMENT EDITOR</h3>
+                    <h3>Version 4.1</h3>
+                </div>
+                <div class="content-block">
+                    <h3 class="vendor">Ascensio System SIA</h3>
+                    <p><label>address:</label><a class="external" href="#">Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021</a></p>
+                    <p><label>email:</label><a class="external" target="_blank" href="mailto:support@onlyoffice.com">support@onlyoffice.com</a></p>
+                    <p><label>tel:</label><a class="external" target="_blank" href="tel:+371 660-16425">+371 660-16425</a></p>
+                    <p><a class="external" target="_blank" href="http://www.onlyoffice.com">www.onlyoffice.com</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/Toolbar.template

+<div class="navbar" id="editor-navbar">
+    <div class="navbar-inner">
+        <div class="left">
+            <a id="document-back" href="#" class="link" style="display: none;">
+                <i class="icon icon-back"></i>
+                <% if (backTitle && !phone) { %>
+                <span class="subtitle"><%= backTitle %></span>
+                <% } %>
+            </a>
+            <% if (!android) { %>
+            <a href="#" id="toolbar-undo" class="link icon-only disabled" style="display: none;">
+                <i class="icon icon-undo"></i>
+            </a>
+            <a href="#" id="toolbar-redo" class="link icon-only disabled" style="display: none;">
+                <i class="icon icon-redo"></i>
+            </a>
+            <% } %>
+        </div>
+        <% if (!phone) { %>
+        <div class="center" id="toolbar-title"></div>
+        <% } %>
+        <div class="right">
+            <% if (android) { %>
+            <a href="#" id="toolbar-undo" class="link icon-only disabled" style="display: none;">
+                <i class="icon icon-undo"></i>
+            </a>
+            <a href="#" id="toolbar-redo" class="link icon-only disabled" style="display: none;">
+                <i class="icon icon-redo"></i>
+            </a>
+            <% } %>
+            <a href="#" id="toolbar-edit" class="link icon-only" style="display: none;">
+                <i class="icon icon-edit"></i>
+            </a>
+            <a href="#" id="toolbar-add" class="link icon-only" style="display: none;">
+                <i class="icon icon-plus"></i>
+            </a>
+            <a href="#" id="toolbar-search" class="link icon-only">
+                <i class="icon icon-search"></i>
+            </a>
+            <a href="#" id="toolbar-settings" class="link icon-only">
+                <i class="icon icon-settings"></i>
+            </a>
+        </div>
+    </div>
+</div>

apps/spreadsheeteditor/mobile/app/view/DocumentHolder.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  DocumentHolder.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/8/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'jquery',
+    'underscore',
+    'backbone'
+], function ($, _, Backbone) {
+    'use strict';
+
+    SSE.Views.DocumentHolder = Backbone.View.extend((function() {
+        // private
+        var _anchorId = 'context-menu-target';
+
+        return {
+            el: '#editor_sdk',
+
+            template: _.template('<div id="' + _anchorId + '" style="position: absolute;"></div>'),
+            // Delegated events for creating new items, and clearing completed ones.
+            events: {
+            },
+
+            // Set innerHTML and get the references to the DOM elements
+            initialize: function() {
+                //
+            },
+
+            // Render layout
+            render: function() {
+                var el = $(this.el);
+
+                el.append(this.template({
+                    //
+                }));
+
+                // this.f7View = uiApp.addView('.view-main', {
+                //     // params
+                // });
+
+                return this;
+            },
+
+            showMenu: function (items, posX, posY) {
+                if (items.length < 1) {
+                    return;
+                }
+
+                var menuItemTemplate = _.template([
+                    '<% _.each(menuItems, function(item) { %>',
+                    '<li data-event="<%= item.event %>"><a href="#" class="item-link list-button"><%= item.caption %></li>',
+                    '<% }); %>'
+                ].join(''));
+
+                $('#' + _anchorId)
+                    .css('left', posX)
+                    .css('top', posY);
+
+                uiApp.closeModal('.document-menu.modal-in');
+
+                var popoverHTML =
+                    '<div class="popover document-menu">'+
+                        '<div class="popover-inner">'+
+                            '<div class="list-block">'+
+                                '<ul>'+
+                                    menuItemTemplate({menuItems: items}) +
+                                '</ul>'+
+                            '</div>'+
+                        '</div>'+
+                    '</div>';
+                uiApp.popover(popoverHTML, $('#' + _anchorId));
+
+                $('.modal-overlay').removeClass('modal-overlay-visible');
+
+                $('.document-menu li').single('click', _.buffered(function(e) {
+                    var $target = $(e.currentTarget),
+                        eventName = $target.data('event');
+
+                    this.fireEvent('contextmenu:click', [this, eventName]);
+                }, 100, this));
+
+                // console.log('Show menu at position:', posX, posY);
+            },
+
+            hideMenu: function () {
+                $('#' + _anchorId)
+                    .css('left', -1000)
+                    .css('top', -1000);
+
+                uiApp.closeModal('.document-menu.modal-in');
+            }
+        }
+    })());
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/view/Editor.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  Editor.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'text!spreadsheeteditor/mobile/app/template/Editor.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (editorTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.Editor = Backbone.View.extend({
+        el: 'body',
+
+        // Compile our stats template
+        template: _.template(editorTemplate),
+
+        // Delegated events for creating new items, and clearing completed ones.
+        events: {
+        },
+
+        // Set innerHTML and get the references to the DOM elements
+        initialize: function() {
+            //
+        },
+
+        // Render layout
+        render: function() {
+            var el = $(this.el);
+            el.html(this.template({
+                backTitle: Framework7.prototype.device.android ? '' : ''
+            }));
+
+            this.f7View = uiApp.addView('.view-main', {
+                // params
+            });
+
+            return this;
+        }
+    });
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/view/Toolbar.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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
+ *
+ */
+
+/**
+ *  Toolbar.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!spreadsheeteditor/mobile/app/template/Toolbar.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (toolbarTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.Toolbar = Backbone.View.extend((function() {
+        // private
+
+        return {
+            el: '.view-main',
+
+            // Compile our stats template
+            template: _.template(toolbarTemplate),
+
+            // Delegated events for creating new items, and clearing completed ones.
+            events: {
+                "click #toolbar-search"     : "searchToggle",
+                "click #toolbar-edit"       : "showEdition",
+                "click #toolbar-add"        : "showInserts",
+                "click #toolbar-settings"   : "showSettings"
+            },
+
+            // Set innerHTML and get the references to the DOM elements
+            initialize: function() {
+                var me = this;
+
+                Common.NotificationCenter.on('readermode:change', function (reader) {
+                    if (reader) {
+                        me.hideSearch();
+                        $('#toolbar-search').addClass('disabled');
+                    } else {
+                        $('#toolbar-search').removeClass('disabled');
+                    }
+                });
+            },
+
+            // Render layout
+            render: function() {
+                var $el = $(this.el);
+
+                $el.prepend(this.template({
+                    android     : Common.SharedSettings.get('android'),
+                    phone       : Common.SharedSettings.get('phone'),
+                    backTitle   : Common.SharedSettings.get('android') ? '' : 'Back'
+                }));
+
+                return this;
+            },
+
+            setMode: function (mode) {
+                var isEdit = (mode === 'edit');
+
+                if (isEdit) {
+                    $('#toolbar-edit, #toolbar-add, #toolbar-undo, #toolbar-redo').show();
+                }
+            },
+
+            // Search
+            searchToggle: function() {
+                if ($$('.searchbar.document').length > 0) {
+                    this.hideSearch();
+                } else {
+                    this.showSearch();
+                }
+            },
+
+            showSearch: function () {
+                var me = this,
+                    searchBar = $$('.searchbar.document');
+
+                if (searchBar.length < 1) {
+                    $(me.el).find('.pages .page').first().prepend(_.template(
+                        '<form class="searchbar document navbar navbar-hidden">' +
+                            '<div class="searchbar-input">' +
+                                '<input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>' +
+                            '</div>' +
+                            '<p class="buttons-row">' +
+                                '<a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>' +
+                                '<a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>' +
+                            '</p>' +
+                        '</form>', {}
+                    ));
+                    me.fireEvent('searchbar:render', me);
+
+                    searchBar = $$('.searchbar.document');
+
+                    if (Common.SharedSettings.get('android')) {
+                        searchBar.find('.buttons-row').css('margin-left', '10px');
+                        searchBar.find('.buttons-row a').css('min-width', '0px');
+                    } else {
+                        searchBar.find('.buttons-row .next').css('margin-left', '10px');
+                    }
+
+                    _.defer(function() {
+                        uiApp.showNavbar(searchBar);
+
+                        searchBar.transitionEnd(function () {
+                            if (!searchBar.hasClass('navbar-hidden')) {
+                                me.fireEvent('searchbar:show', me);
+                                $('.searchbar input').focus();
+                            }
+                        });
+                    }, 10);
+                }
+            },
+
+            hideSearch: function () {
+                var me = this,
+                    searchBar = $$('.searchbar.document');
+
+                if (searchBar.length > 0) {
+                    // Animating
+                    if (searchBar.hasClass('.navbar-hidding')) {
+                        return;
+                    }
+
+                    _.defer(function() {
+                        searchBar.transitionEnd(function () {
+                            me.fireEvent('searchbar:hide', me);
+                            searchBar.remove();
+                        });
+
+                        uiApp.hideNavbar(searchBar);
+                    }, 10);
+                }
+            },
+
+            // Editor
+            showEdition: function () {
+                // SSE.getController('EditContainer').showModal();
+            },
+
+            // Inserts
+
+            showInserts: function () {
+                // SSE.getController('AddContainer').showModal();
+            },
+
+            // Settings
+            showSettings: function () {
+                // SSE.getController('Settings').showModal();
+            }
+        }
+    })());
+});

apps/spreadsheeteditor/mobile/index.html

 <!DOCTYPE html>
 <html>
     <head>
-        <title>ONLYOFFICE Spreadsheet</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-        <meta name="description" content="" />
-        <meta name="keywords" content="" />
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="mobile-web-app-capable" content="yes">
+
+        <title>ONLYOFFICE Spreadsheets</title>
+
+        <link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+        <!-- App styles -->
+
+        <!-- splash -->
 
-        <!-- splash -->        
-    
         <style type="text/css">
             .loadmask {
                 position: absolute;
@@ -169,63 +175,72 @@
                  14%    { background: #f4f4f4; top:100px; opacity:1; }
                  15%    { background: #f4f4f4; top:0; opacity:1; }
                  20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #fff; top:0; opacity:0; }
                  45%    { background: #EFEFEF; top:0; opacity:0,2; }
                 100%    { top:100px; background: #55bce6; }
             }
         </style>
-
-        <!-- vendor -->
-        <!-- sdk -->
-        <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main-mobile.css"/>
-
-        <script type="text/javascript" src="../../../vendor/touch/sencha-touch-debug.js"></script>
-        <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/underscore/underscore-min.js"></script>
-        <script type="text/javascript" src="../../../vendor/megapixel/src/megapix-image.js"></script>
-        <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
-        <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 type="text/javascript" src="../../../vendor/jsrsasign/jsrsasign-latest-all-min.js"></script>
-
-        <!-- Application -->
-
-        <!--<link rel="stylesheet" href="resources/css/application-normal.css" type="text/css"/>-->
+    </head>
+    <body>
         <script type="text/javascript">
-            var injectStyleElement = function(url) {
-                var style = document.createElement('link'),
-                        documentHead = typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]);
-
-                style.rel = 'stylesheet';
-                style.href = url;
-                style.type = 'text/css';
-
-                if (documentHead) {
-                    documentHead.appendChild(style);
-                    return true;
-                }
-
-                return false;
-            };
-
-            injectStyleElement((window.devicePixelRatio > 1)
-                ? 'resources/css/application-retina.css'
-                : 'resources/css/application-normal.css'
-            );
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split("-")[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
         </script>
 
-        <script type="text/javascript" src="../../common/Analytics.js"></script>
-        <script type="text/javascript" src="../../common/Gateway.js"></script>
-        <script type="text/javascript" src="../../common/mobile/loader.js"></script>
-        <script type="text/javascript" src="app.js"></script>
-        <script type="text/javascript" src="../../common/locale.js"></script>
+        <div id="viewport"></div>
 
-        <!-- SDK -->
-
-        <script type="text/javascript">
-            window.g_debug_mode = true;
-        </script>
+        <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+        <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
 
         <script type="text/javascript" src="../sdk_dev_scripts.js"></script>
         <script>
@@ -233,67 +248,8 @@
                 document.write('<script type="text/javascript" src="' + item + '"><\/script>');
             });
         </script>
-    </head>
-    <body>
-        <script type="text/javascript">
-            if (!(Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop))) {
-                document.write(
-                        '<div id="unsuported-view-id" class="unsuported-view"></div>'
-                );
-            } else {
-                function getUrlParams() {
-                    var e,
-                        a = /\+/g,  // Regex for replacing addition symbol with a space
-                        r = /([^&=]+)=?([^&]*)/g,
-                        d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
-                        q = window.location.search.substring(1),
-                        urlParams = {};
+        <!-- application -->
+        <script data-main="app-dev" src="../../../vendor/requirejs/require.js"></script>
 
-                    while (e = r.exec(q))
-                        urlParams[d(e[1])] = d(e[2]);
-
-                    return urlParams;
-                }
-
-                function encodeUrlParam(str) {
-                    return str.replace(/&/g, '&amp;')
-                            .replace(/"/g, '&quot;')
-                            .replace(/'/g, '&#39;')
-                            .replace(/</g, '&lt;')
-                            .replace(/>/g, '&gt;');
-                }
-
-                var params = getUrlParams(),
-                    lang = (params["lang"] || 'en').split("-")[0],
-                    customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
-                    margin = (customer !== '') ? 50 : 20,
-                    loading = 'Loading...',
-                    logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
-
-                if ( lang == 'de')      loading = 'Ladevorgang...';
-                else if ( lang == 'es') loading = 'Cargando...';
-                else if ( lang == 'fr') loading = 'Chargement en cours...';
-                else if ( lang == 'it') loading = 'Caricamento in corso...';
-                else if ( lang == 'pt') loading = 'Carregando...';
-                else if ( lang == 'ru') loading = 'Загрузка...';
-                else if ( lang == 'sl') loading = 'Nalaganje...';
-                else if ( lang == 'tr') loading = 'Yükleniyor...';
-
-                document.write(
-                    '<div id="loading-mask" class="loadmask">' +
-                            '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                                ((logo!==null) ? logo :
-                                '<div class="loader-page-romb">' +
-                                    '<div class="romb" id="blue"></div>' +
-                                    '<div class="romb" id="green"></div>' +
-                                    '<div class="romb" id="red"></div>' +
-                                '</div>') +
-                            '</div>' +
-                            '<div class="loader-page-text">' +  customer +
-                            '<div class="loader-page-text-loading">' + loading + '</div>' +
-                        '</div>' +
-                    '</div>');
-            }
-        </script>
     </body>
 </html>

apps/spreadsheeteditor/mobile/resources/less/app-ios.less

+@import url('../../../../../vendor/framework7/src/less/ios/_mixins.less');
+@import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less');
+
+// Colors
+@themeColor: #8ca946; // (64,102,215)
+
+@import url('../../../../../vendor/framework7/src/less/ios/intro.less');
+@import url('../../../../../vendor/framework7/src/less/ios/grid.less');
+@import url('../../../../../vendor/framework7/src/less/ios/views.less');
+@import url('../../../../../vendor/framework7/src/less/ios/pages.less');
+@import url('../../../../../vendor/framework7/src/less/ios/toolbars.less');
+@import url('../../../../../vendor/framework7/src/less/ios/toolbars-pages.less');
+@import url('../../../../../vendor/framework7/src/less/ios/searchbar.less');
+@import url('../../../../../vendor/framework7/src/less/ios/messagebar.less');
+@import url('../../../../../vendor/framework7/src/less/ios/icons.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/badges.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/chips.less');
+@import url('../../../../../vendor/framework7/src/less/ios/content-block.less');
+@import url('../../../../../vendor/framework7/src/less/ios/lists.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/contacts.less');
+@import url('../../../../../vendor/framework7/src/less/ios/forms.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/floating-button.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/accordion.less');
+@import url('../../../../../vendor/framework7/src/less/ios/cards.less');
+@import url('../../../../../vendor/framework7/src/less/ios/modals.less');
+@import url('../../../../../vendor/framework7/src/less/ios/panels.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/lazy-load.less');
+@import url('../../../../../vendor/framework7/src/less/ios/tabs.less');
+@import url('../../../../../vendor/framework7/src/less/ios/messages.less');
+@import url('../../../../../vendor/framework7/src/less/ios/statusbar.less');
+@import url('../../../../../vendor/framework7/src/less/ios/preloader.less');
+@import url('../../../../../vendor/framework7/src/less/ios/progressbar.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/pull-to-refresh.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/infinite-scroll.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/autocomplete.less');
+@import url('../../../../../vendor/framework7/src/less/ios/swiper.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/photo-browser.less');
+@import url('../../../../../vendor/framework7/src/less/ios/picker.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/calendar.less');
+@import url('../../../../../vendor/framework7/src/less/ios/notifications.less');
+//@import url('../../../../../vendor/framework7/src/less/ios/login-screen.less');
+@import url('../../../../../vendor/framework7/src/less/ios/disabled.less');
+
+// Main Toolbar
+#editor-navbar.navbar .right a + a,
+#editor-navbar.navbar .left a + a {
+  margin-left: 0;
+
+  html:not(.phone) & {
+    margin-left: 10px;
+  }
+}
+
+@import url('../../../../common/mobile/resources/less/_mixins.less');
+@import url('../../../../common/mobile/resources/less/ios/_container.less');
+@import url('../../../../common/mobile/resources/less/ios/_dataview.less');
+@import url('../../../../common/mobile/resources/less/ios/_listview.less');
+@import url('../../../../common/mobile/resources/less/ios/_button.less');
+@import url('../../../../common/mobile/resources/less/ios/_contextmenu.less');
+@import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
+@import url('../../../../common/mobile/resources/less/ios/_about.less');
+
+@import url('ios/_search.less');
+@import url('ios/_icons.less');
+
+// Add Container
+
+#add-table,
+#add-shape {
+  .page {
+    background-color: #fff;
+  }
+}
+
+// Table styles
+
+.table-styles {
+  .row {
+    &, li {
+      margin-bottom: 12px;
+    }
+  }
+
+  li {
+    margin: 0;
+    padding: 1px;
+
+    img {
+      width: 70px;
+      height: 50px;
+    }
+  }
+}
+
+// Shapes
+
+.shapes {
+  li {
+    width: 70px;
+    height: 70px;
+    margin: 0 1px;
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+      background-color: @themeColor;
+    }
+  }
+}
+
+// Charts
+
+.chart-types {
+  li {
+    width: 60px;
+    height: 60px;
+    margin: 6px;
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+      background-size: contain;
+    }
+  }
+}
+
+// Bullets and numbers
+
+.bullets,
+.numbers {
+  ul {
+    margin-top: 10px;
+  }
+
+  li {
+    width: 70px;
+    height: 70px;
+    margin-right: 1px;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+
+    &.active {
+      //
+    }
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+      background-color: @white;
+      background-size: cover;
+
+      label {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        top: 34%;
+      }
+    }
+  }
+}
+
+#editor_sdk {
+  //position: absolute;
+  //left: 0;
+}

apps/spreadsheeteditor/mobile/resources/less/app-material.less

+@import url('../../../../../vendor/framework7/src/less/material/_mixins.less');
+@import url('../../../../../vendor/framework7/src/less/material/_colors-vars.less');
+
+// Colors
+@themeColor: #5a7dc9; // (64,102,215)
+@navBarIconColor: #fff;
+
+@import url('../../../../../vendor/framework7/src/less/material/intro.less');
+@import url('../../../../../vendor/framework7/src/less/material/grid.less');
+@import url('../../../../../vendor/framework7/src/less/material/views.less');
+@import url('../../../../../vendor/framework7/src/less/material/pages.less');
+@import url('../../../../../vendor/framework7/src/less/material/toolbars.less');
+@import url('../../../../../vendor/framework7/src/less/material/toolbars-pages.less');
+@import url('../../../../../vendor/framework7/src/less/material/searchbar.less');
+@import url('../../../../../vendor/framework7/src/less/material/messagebar.less');
+@import url('../../../../../vendor/framework7/src/less/material/icons.less');
+@import url('../../../../../vendor/framework7/src/less/material/badges.less');
+//@import url('../../../../../vendor/framework7/src/less/material/chips.less');
+@import url('../../../../../vendor/framework7/src/less/material/content-block.less');
+@import url('../../../../../vendor/framework7/src/less/material/lists.less');
+//@import url('../../../../../vendor/framework7/src/less/material/contacts.less');
+@import url('../../../../../vendor/framework7/src/less/material/forms.less');
+@import url('../../../../../vendor/framework7/src/less/material/floating-button.less');
+//@import url('../../../../../vendor/framework7/src/less/material/accordion.less');
+//@import url('../../../../../vendor/framework7/src/less/material/cards.less');
+@import url('../../../../../vendor/framework7/src/less/material/modals.less');
+@import url('../../../../../vendor/framework7/src/less/material/panels.less');
+//@import url('../../../../../vendor/framework7/src/less/material/lazy-load.less');
+@import url('../../../../../vendor/framework7/src/less/material/tabs.less');
+@import url('../../../../../vendor/framework7/src/less/material/messages.less');
+@import url('../../../../../vendor/framework7/src/less/material/statusbar.less');
+@import url('../../../../../vendor/framework7/src/less/material/preloader.less');
+@import url('../../../../../vendor/framework7/src/less/material/progressbar.less');
+//@import url('../../../../../vendor/framework7/src/less/material/pull-to-refresh.less');
+//@import url('../../../../../vendor/framework7/src/less/material/infinite-scroll.less');
+//@import url('../../../../../vendor/framework7/src/less/material/autocomplete.less');
+//@import url('../../../../../vendor/framework7/src/less/material/swiper.less');
+//@import url('../../../../../vendor/framework7/src/less/material/photo-browser.less');
+@import url('../../../../../vendor/framework7/src/less/material/picker.less');
+//@import url('../../../../../vendor/framework7/src/less/material/calendar.less');
+@import url('../../../../../vendor/framework7/src/less/material/notifications.less');
+//@import url('../../../../../vendor/framework7/src/less/material/login-screen.less');
+@import url('../../../../../vendor/framework7/src/less/material/ripple.less');
+@import url('../../../../../vendor/framework7/src/less/material/disabled.less');
+
+
+@import url('../../../../common/mobile/resources/less/_mixins.less');
+@import url('../../../../common/mobile/resources/less/material/_container.less');
+@import url('../../../../common/mobile/resources/less/material/_dataview.less');
+@import url('../../../../common/mobile/resources/less/material/_listview.less');
+@import url('../../../../common/mobile/resources/less/material/_button.less');
+@import url('../../../../common/mobile/resources/less/material/_contextmenu.less');
+@import url('../../../../common/mobile/resources/less/material/_color-palette.less');
+@import url('../../../../common/mobile/resources/less/material/_about.less');
+
+@import url('material/_search.less');
+@import url('material/_icons.less');
+
+// Add Container
+
+#add-table,
+#add-shape {
+  .page {
+    background-color: #fff;
+  }
+}
+
+// Table styles
+
+.table-styles {
+  .row {
+    &, li {
+      margin-bottom: 12px;
+    }
+  }
+
+  li {
+    margin: 0;
+    padding: 1px;
+
+    img {
+      width: 70px;
+      height: 50px;
+    }
+  }
+}
+
+// Shapes
+
+.shapes {
+  li {
+    width: 70px;
+    height: 70px;
+    margin: 0 1px;
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+      background-color: @themeColor;
+    }
+  }
+}
+
+// Charts
+
+.chart-types {
+  li {
+    width: 60px;
+    height: 60px;
+    margin: 6px;
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+      background-size: contain;
+    }
+  }
+}
+
+// Bullets and numbers
+
+.bullets,
+.numbers {
+  ul {
+    margin-top: 10px;
+  }
+
+  li {
+    width: 70px;
+    height: 70px;
+    margin-right: 1px;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+
+    &.active {
+      //
+    }
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+      background-color: @white;
+      background-size: cover;
+
+      label {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        top: 34%;
+      }
+    }
+  }
+}

apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less

+// Icons
+i.icon {
+  &.icon-search {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.8,15c1.4-1.6,2.2-3.7,2.2-5.9c0-5-4-9-9-9C4,0,0,4,0,9c0,5,4,9,9,9c2.3,0,4.4-0.9,5.9-2.2l5.8,5.8l0.2-0.6l0.7-0.2L15.8,15z M9,17c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8C17,13.5,13.5,17,9,17z"/></g></svg>');
+  }
+  &.icon-burger {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect x="2" y="17" width="18" height="1"/><rect x="2" y="13" width="18" height="1"/><rect x="2" y="9" width="18" height="1"/><rect x="2" y="5" width="18" height="1"/></g></svg>');
+  }
+  &.icon-edit {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="19.3,5.3 6.1,18.4 4.6,16.9 17.8,3.8 17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
+  }
+  &.icon-undo {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,16v2h-1v-2l0,0c0-2.9-2.1-5-5-5l0,0H1.9L5,14c0.1,0.1,0.1,0.2,0,0.3l-0.4,0.4c-0.1,0.1-0.2,0.1-0.3,0l-4.2-4.2c-0.1-0.1-0.1-0.2,0-0.3l0.4-0.4h0.1L4.4,6c0.1-0.1,0.2-0.1,0.3,0l0.5,0.4c0.1,0.1,0.1,0.2,0,0.3L1.9,10H16l0,0C19.3,10,22,12.7,22,16L22,16z"/></g></svg>');
+  }
+  &.icon-redo {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,16c0-3.3,2.7-6,6-6v0h14.1l-3.3-3.3c-0.1-0.1-0.1-0.2,0-0.3L17.3,6c0.1-0.1,0.2-0.1,0.3,0l3.8,3.8c0,0,0.1,0,0.1,0l0.4,0.4c0.1,0.1,0.1,0.2,0,0.3l-4.2,4.2c-0.1,0.1-0.2,0.1-0.3,0l-0.4-0.4c-0.1-0.1-0.1-0.2,0-0.3l3.1-3H6v0c-2.9,0-5,2.1-5,5h0v2H0L0,16L0,16z"/></g></svg>');
+  }
+  &.icon-reader {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M17,21H1V9h6V2l0,0h10v5h1V1H6.2L0,7.6V22h18v-3h-1V21z M6,2.8V8H1.1L6,2.8z M13,8c-5.1,0-9,5-9,5s4.1,5,9,5c5,0,9-5,9-5S18,8,13,8z M8.7,15.5C6.8,14.4,6.4,13,6.4,13s0.4-1.5,2.4-2.6C8.3,11.2,8,12,8,13C8,13.9,8.3,14.8,8.7,15.5z M13,16.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7c2.1,0,3.7,1.7,3.7,3.7C16.7,15.1,15.1,16.7,13,16.7z M17.3,15.5c0.4-0.7,0.7-1.6,0.7-2.5c0-1-0.3-1.8-0.7-2.6c2,1.1,3.4,2.6,3.4,2.6S19.2,14.4,17.3,15.5z M13,11.7c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3S13.7,11.7,13,11.7z"/></g></svg>');
+  }
+  &.icon-download {
+    width: 22px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 	"/><polygon points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 	"/></g></svg>');
+  }
+  &.icon-info {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M10,17h2V8h-2V17z M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1z M11,20c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S16,20,11,20z M10,7h2V5h-2V7z"/></g></svg>');
+  }
+  &.icon-plus {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
+  }
+  &.icon-settings {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.8,3l0.4,2c0.1,0.7,0.6,1.1,1.3,1.1c0.3,0,0.5-0.1,0.7-0.2l1.9-1.2l1.1,1.1l-1.1,1.8C15.8,8,15.8,8.5,16,8.9c0.2,0.4,0.5,0.7,1,0.8l2.1,0.5v1.6L17,12.2c-0.5,0.1-0.8,0.4-1,0.8c-0.2,0.4-0.1,0.9,0.1,1.2l1.2,1.9l-1.1,1.1l-1.8-1.1c-0.2-0.2-0.5-0.2-0.8-0.2c-0.6,0-1.2,0.5-1.3,1.1l-0.5,2.1h-1.6l-0.4-2C9.7,16.4,9.2,16,8.5,16c-0.3,0-0.5,0.1-0.7,0.2l-1.9,1.2l-1.1-1.1l1.1-1.8c0.3-0.4,0.3-0.9,0.1-1.3c-0.2-0.4-0.5-0.7-1-0.8l-2.1-0.5v-1.6l2-0.4c0.5-0.1,0.8-0.4,1-0.8C6.1,8.7,6,8.2,5.8,7.9l-1-2l1.1-1.1l1.8,1.1C8,6.1,8.2,6.2,8.5,6.2c0.6,0,1.2-0.5,1.3-1.1L10.3,3H11.8 M11,15.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5s-4.5,2-4.5,4.5S8.5,15.5,11,15.5 M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2c-0.1,0-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5c-0.1,0-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
+  }
+  &.icon-about {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
+  }
+  &.icon-help {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
+  }
+  &.icon-versions {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
+  }
+  &.icon-text-additional {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
+  }
+  &.icon-text-color {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
+  }
+  &.icon-text-selection {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
+  }
+  &.icon-bullets {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
+  }
+  &.icon-numbers {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
+  }
+  &.icon-linespacing {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 	"/></g></svg>');
+  }
+  &.icon-text-align-center {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-jast {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-left {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-right {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+  }
+  &.icon-de-indent {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
+  }
+  &.icon-in-indent {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
+  }
+  &.icon-prev {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
+  }
+  &.icon-next {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
+  }
+  &.icon-table-add-column-left {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
+  }
+  &.icon-table-add-column-right {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
+  }
+  &.icon-table-add-row-above {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
+  }
+  &.icon-table-add-row-below {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
+  }
+  &.icon-table-remove-column {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+  }
+  &.icon-table-remove-row {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+  }
+  &.icon-expand-down {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20.5,6.5l1.1,1.1L11,18l0,0l0,0L0.5,7.5l1.1-1.1l9.5,9.5L20.5,6.5z"/></g></svg>');
+  }
+  &.icon-pagebreak {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8,14v1h1v-1H8z M6,14v1h1v-1H6z M18,21H3v-6H2v7h17v-7h-1V21z M4,14v1h1v-1H4z M14,14v1h1v-1H14z M10,14v1h1v-1H10z M8.2,1L2,7.6V14h1V9h6V2l0,0h9v12h1V1H8.2z M8,8H3.1L8,2.8V8z M12,14v1h1v-1H12z M16,14v1h1v-1H16z"/></g></svg>');
+  }
+  &.icon-sectionbreak {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20,14V2H3v12H2V1h19v13H20z M5,14v1H4v-1H5z M7,14v1H6v-1H7z M9,14v1H8v-1H9z M11,14v1h-1v-1H11z M13,14v1h-1v-1H13z M15,14v1h-1v-1H15z M17,14v1h-1v-1H17z M18,14h1v1h-1V14z M3,21h17v-6h1v7H2v-7h1V21z"/></g></svg>');
+  }
+  &.icon-stringbreak {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18,12H5.1L9,15.9l-0.7,0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9,7.1L5.1,11H18V5h1v6v1H18z"/></g></svg>');
+  }
+  &.icon-pagenumber {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.2,1L2,7.6V22h17V1H8.2z M8,2.8V8H3.1L8,2.8z M18,21H3V9h6V2l0,0h9V21z M12,19h1v-4h-0.7c0,0.2-0.1-0.1-0.1,0c-0.1,0.1-0.2,0-0.3,0c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0V16H12V19z M15.3,17.3C15,17.9,15.1,18.4,15,19h0.9c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.1-0.6,0.3-0.9c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.1-0.3,0.3-0.5V15h-3v1h1.9C15.6,16.4,15.5,16.7,15.3,17.3z"/></g></svg>');
+  }
+  &.icon-link {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
+  }
+}
\ No newline at end of file

apps/spreadsheeteditor/mobile/resources/less/ios/_search.less

+// Search
+
+.tablet {
+  // Replace mode
+  .searchbar.document.replace {
+    .center {
+      .searchbar-input:first-child {
+        margin-right: 10px;
+      }
+
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .center {
+      width: 100%;
+
+      .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      .prev {
+        margin-left: 0;
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+  }
+}
+
+.phone {
+  // Replace mode
+  .searchbar.document.replace {
+    height: 88px;
+
+    .left {
+      margin-top: -44px;
+    }
+
+    .center {
+      .searchbar-input {
+        margin: 8px 0;
+      }
+
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .left,
+    .center,
+    .right {
+      flex-direction: column;
+    }
+
+    .left {
+      min-width: 22px;
+      max-width: 22px;
+    }
+
+    .center {
+      width: 100%;
+
+      .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      > p {
+        margin: 0;
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+  }
+}
+
+.searchbar.document {
+  background: lighten(@searchbarBg, 10%);
+}
\ No newline at end of file

apps/spreadsheeteditor/mobile/resources/less/material/_icons.less

+// Icons
+i.icon {
+  &.icon-expand-up {
+    width: 17px;
+    height: 17px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,5.1 2,13.9 4.1,16 11.1,9.2 17.9,16 20,13.9 11.2,5.1 11.1,5 "/></g></svg>');
+  }
+  &.icon-expand-down {
+    width: 17px;
+    height: 17px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
+  }
+  &.icon-search {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
+  }
+  &.icon-edit {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
+  }
+  &.icon-reader {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M17,21H1V9h6V2l0,0h10v5h1V1H6.2L0,7.6V22h18v-3h-1V21z M6,2.8V8H1.1L6,2.8z M13,8c-5.1,0-9,5-9,5s4.1,5,9,5c5,0,9-5,9-5S18,8,13,8z M8.7,15.5C6.8,14.4,6.4,13,6.4,13s0.4-1.5,2.4-2.6C8.3,11.2,8,12,8,13C8,13.9,8.3,14.8,8.7,15.5z M13,16.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7c2.1,0,3.7,1.7,3.7,3.7C16.7,15.1,15.1,16.7,13,16.7z M17.3,15.5c0.4-0.7,0.7-1.6,0.7-2.5c0-1-0.3-1.8-0.7-2.6c2,1.1,3.4,2.6,3.4,2.6S19.2,14.4,17.3,15.5z M13,11.7c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3S13.7,11.7,13,11.7z"/></g></svg>');
+  }
+  &.icon-download {
+    width: 22px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon id="XMLID_3_" points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 	"/><polygon id="XMLID_6_" points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 	"/></g></svg>');
+  }
+  &.icon-info {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M10,17h2V8h-2V17z M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1z M11,20c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S16,20,11,20z M10,7h2V5h-2V7z"/></g></svg>');
+  }
+  &.icon-about {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
+  }
+  &.icon-help {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
+  }
+  &.icon-versions {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
+  }
+  //&.icon-text-additional {
+  //  width: 22px;
+  //  height: 22px;
+  //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
+  //}
+  //&.icon-text-color {
+  //  width: 22px;
+  //  height: 22px;
+  //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
+  //}
+  //&.icon-text-selection {
+  //  width: 22px;
+  //  height: 22px;
+  //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
+  //}
+  //&.icon-bullets {
+  //  width: 22px;
+  //  height: 22px;
+  //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
+  //}
+  //&.icon-numbers {
+  //  width: 22px;
+  //  height: 22px;
+  //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
+  //}
+  //&.icon-linespacing {
+  //  width: 22px;
+  //  height: 22px;
+  //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 	"/></g></svg>');
+  //}
+  &.icon-text-align-center {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-jast {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-left {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-right {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+  }
+  &.icon-de-indent {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
+  }
+  &.icon-in-indent {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
+  }
+  &.icon-table-add-column-left {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
+  }
+  &.icon-table-add-column-right {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
+  }
+  &.icon-table-add-row-above {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
+  }
+  &.icon-table-add-row-below {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
+  }
+  &.icon-table-remove-column {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+  }
+  &.icon-table-remove-row {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+  }
+  &.icon-pagebreak {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8,14v1h1v-1H8z M6,14v1h1v-1H6z M18,21H3v-6H2v7h17v-7h-1V21z M4,14v1h1v-1H4z M14,14v1h1v-1H14z M10,14v1h1v-1H10z M8.2,1L2,7.6V14h1V9h6V2l0,0h9v12h1V1H8.2z M8,8H3.1L8,2.8V8z M12,14v1h1v-1H12z M16,14v1h1v-1H16z"/></g></svg>');
+  }
+  &.icon-sectionbreak {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20,14V2H3v12H2V1h19v13H20z M5,14v1H4v-1H5z M7,14v1H6v-1H7z M9,14v1H8v-1H9z M11,14v1h-1v-1H11z M13,14v1h-1v-1H13z M15,14v1h-1v-1H15z M17,14v1h-1v-1H17z M18,14h1v1h-1V14z M3,21h17v-6h1v7H2v-7h1V21z"/></g></svg>');
+  }
+  &.icon-stringbreak {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18,12H5.1L9,15.9l-0.7,0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9,7.1L5.1,11H18V5h1v6v1H18z"/></g></svg>');
+  }
+  &.icon-pagenumber {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.2,1L2,7.6V22h17V1H8.2z M8,2.8V8H3.1L8,2.8z M18,21H3V9h6V2l0,0h9V21z M12,19h1v-4h-0.7c0,0.2-0.1-0.1-0.1,0c-0.1,0.1-0.2,0-0.3,0c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0V16H12V19z M15.3,17.3C15,17.9,15.1,18.4,15,19h0.9c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.1-0.6,0.3-0.9c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.1-0.3,0.3-0.5V15h-3v1h1.9C15.6,16.4,15.5,16.7,15.3,17.3z"/></g></svg>');
+  }
+  &.icon-link {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
+  }
+}
+
+// Overwrite color for toolbar
+.navbar {
+  i.icon {
+    &.icon-undo {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M20,17v-2c0-1.7-1.3-3-3-3H3.7l3.4,3.4l-1.4,1.4l-5.2-5.2L0,11l0.5-0.6l5.2-5.2l1.4,1.4L3.7,10H17c2.8,0,5,2.2,5,5v2H20z"/></g></svg>');
+    }
+    &.icon-redo {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,17v-2c0-2.8,2.2-5,5-5h13.3l-3.4-3.4l1.4-1.4l5.2,5.2L22,11l-0.5,0.6l-5.2,5.2l-1.4-1.4l3.4-3.4H5c-1.7,0-3,1.3-3,3v2H0z"/></g></svg>');
+    }
+    &.icon-search {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
+    }
+    &.icon-burger {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-8 1 22 22" fill="@{navBarIconColor}"><g><path d="M-6,6v2h18V6H-6z M-6,13h18v-2H-6V13z M-6,18h18v-2H-6V18z"/></g></svg>');
+    }
+    &.icon-plus {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
+    }
+    &.icon-edit {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
+    }
+    &.icon-settings {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2s-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5s-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
+    }
+    &.icon-prev {
+      width: 20px;
+      height: 20px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
+    }
+    &.icon-next {
+      width: 20px;
+      height: 20px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
+    }
+    &.icon-expand-down {
+      width: 22px;
+      height: 22px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
+    }
+  }
+}
\ No newline at end of file