[SE mobile] Add EditCell layout.

apps/common/mobile/resources/less/ios/_container.less

@@ -39,6 +39,10 @@
         margin-top: 0;
       }
 
+      &:last-child {
+        margin-bottom: 30px;
+      }
+
       li:first-child a,
       li:last-child a {
         border-radius: 0 !important;

apps/common/mobile/resources/less/ios/_listview.less

@@ -69,6 +69,7 @@
   &.no-indicator {
     .item-inner {
       background-image: none;
+      padding-right: 15px;
     }
   }
 }

apps/documenteditor/mobile/app/template/EditText.template

@@ -2,14 +2,18 @@
 <div id="edit-text-root">
     <div class="list-block">
         <ul>
-            <li><a id="font-fonts" class="item-link">
+            <li>
+                <a id="font-fonts" class="item-link">
                     <div class="item-content">
                         <div class="item-inner">
                             <div class="item-title"><%= scope.textFonts %></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>
+                </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>
@@ -18,7 +22,8 @@
                             <a id="font-strikethrough" class="button" style="text-decoration: line-through">S</a>
                         </div>
                     </div>
-            </div></li>
+                </div>
+            </li>
             <li>
                 <a id="font-color" class="item-link">
                     <div class="item-content">
@@ -30,7 +35,8 @@
                     </div>
                 </a>
             </li>
-            <li><a id="font-background" class="item-link">
+            <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">

apps/spreadsheeteditor/mobile/app-dev.js

@@ -123,7 +123,7 @@ require([
             , 'Statusbar'
             ,'Settings'
             ,'EditContainer'
-            // ,'EditText'
+            ,'EditCell'
             // ,'EditParagraph'
             // ,'EditTable'
             // ,'EditImage'
@@ -193,7 +193,7 @@ require([
         , 'spreadsheeteditor/mobile/app/controller/Statusbar'
         , 'spreadsheeteditor/mobile/app/controller/Settings'
         ,'spreadsheeteditor/mobile/app/controller/edit/EditContainer'
-        // ,'spreadsheeteditor/mobile/app/controller/edit/EditText'
+        ,'spreadsheeteditor/mobile/app/controller/edit/EditCell'
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditParagraph'
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditTable'
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditImage'

apps/spreadsheeteditor/mobile/app/view/edit/EditCell.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
+ *
+ */
+
+/**
+ *  EditCell.js
+ *  Spreadsheet Editor
+ *
+ *  Created by Alexander Yuzhin on 12/6/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'text!spreadsheeteditor/mobile/app/template/EditCell.template',
+    'jquery',
+    'underscore',
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette'
+], function (editTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.EditCell = Backbone.View.extend(_.extend((function() {
+        // private
+        var _fontsList,
+            _editTextController;
+
+        return {
+            // el: '.view-main',
+
+            template: _.template(editTemplate),
+
+            events: {
+            },
+
+            initialize: function () {
+                _editTextController = SSE.getController('EditCell');
+
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+                this.on('page:show', _.bind(this.updateItemHandlers, this));
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                me.updateItemHandlers();
+
+                // $('#font-fonts').single('click',        _.bind(me.showFonts, me));
+                // $('#font-color').single('click',        _.bind(me.showFontColor, me));
+                // $('#font-background').single('click',   _.bind(me.showBackgroundColor, me));
+                // $('#font-additional').single('click',   _.bind(me.showAdditional, me));
+                // $('#font-line-spacing').single('click', _.bind(me.showLineSpacing, me));
+                // $('#font-bullets').single('click',      _.bind(me.showBullets, me));
+                // $('#font-numbers').single('click',      _.bind(me.showNumbers, me));
+
+                me.initControls();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone'),
+                    scope   : this
+                }));
+
+                return this;
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#edit-cell-root')
+                        .html();
+                }
+
+                return '';
+            },
+
+            initControls: function () {
+                //
+            },
+
+            updateItemHandlers: function () {
+                $('.container-edit a.item-link').single('click', _.bind(this.onItemClick, this));
+            },
+
+            showPage: function (templateId, suspendEvent) {
+                var rootView = SSE.getController('EditContainer').rootView;
+
+                if (rootView && this.layout) {
+                    var $content = this.layout.find(templateId);
+
+                    // Android fix for navigation
+                    if (Framework7.prototype.device.android) {
+                        $content.find('.page').append($content.find('.navbar'));
+                    }
+
+                    rootView.router.load({
+                        content: $content.html()
+                    });
+
+                    if (suspendEvent !== true) {
+                        this.fireEvent('page:show', [this, templateId]);
+                    }
+                }
+            },
+
+            onItemClick: function (e) {
+                var $target = $(e.currentTarget),
+                    page = $target.data('page');
+
+                if (page && page.length > 0 ) {
+                    this.showPage(page);
+                }
+            },
+
+            showFonts: function () {
+                this.showPage('#edit-text-fonts');
+
+                var me = this,
+                    $template = $(
+                        '<div>' +
+                            '<li>' +
+                                '<label class="label-radio item-content">' +
+                                    '<input type="radio" name="font-name" value="{{name}}">' +
+                                    (Framework7.prototype.device.android ? '<div class="item-media"><i class="icon icon-form-radio"></i></div>' : '') +
+                                    '<div class="item-inner">' +
+                                        '<div class="item-title" style="font-family: \'{{name}}\';">{{name}}</div>' +
+                                    '</div>' +
+                                '</label>' +
+                            '</li>' +
+                        '</div>'
+                    );
+
+                _fontsList = uiApp.virtualList('#font-list.virtual-list', {
+                    items: SSE.getController('EditCell').getFonts(),
+                    template: $template.html(),
+                    onItemsAfterInsert: function (list, fragment) {
+                        var fontInfo = _editTextController.getFontInfo();
+                        $('#font-list input[name=font-name]').val([fontInfo.name]);
+
+                        $('#font-list li').single('click', _.buffered(function (e) {
+                            me.fireEvent('font:click', [me, e]);
+                        }, 100));
+                    }
+                });
+            },
+
+            showFontColor: function () {
+                this.showPage('#edit-text-color', true);
+
+                this.paletteTextColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-text-font-color] .page-content')
+                });
+
+                this.fireEvent('page:show', [this, '#edit-text-color']);
+            },
+
+            showBackgroundColor: function () {
+                this.showPage('#edit-text-background', true);
+
+                this.paletteBackgroundColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-text-font-background] .page-content'),
+                    transparent: true
+                });
+
+                this.fireEvent('page:show', [this, '#edit-text-background']);
+            },
+
+            showAdditional: function () {
+                this.showPage('#edit-text-additional');
+            },
+
+            showLineSpacing: function () {
+                this.showPage('#edit-text-linespacing');
+            },
+
+            showBullets: function () {
+                this.showPage('#edit-text-bullets');
+            },
+
+            showNumbers: function () {
+                this.showPage('#edit-text-numbers');
+            },
+
+            textBack: 'Back',
+            textFonts: 'Fonts',
+            textTextColor: 'Text Color',
+            textFillColor: 'Fill Color',
+            textTextFormat: 'Text Format',
+            textBorderStyle: 'Border Style',
+
+            textSize: 'Size',
+            textFontColors: 'Font Colors',
+            textAutomatic: 'Automatic',
+            textHighlightColors: 'Highlight Colors',
+            textAdditional: 'Additional',
+            textStrikethrough: 'Strikethrough',
+            textDblStrikethrough: 'Double Strikethrough',
+            textDblSuperscript: 'Superscript',
+            textSubscript: 'Subscript',
+            textSmallCaps: 'Small Caps',
+            textAllCaps: 'All Caps',
+            textLetterSpacing: 'Letter Spacing',
+            textLineSpacing: 'Line Spacing',
+            textBullets: 'Bullets',
+            textNone: 'None',
+            textNumbers: 'Numbers'
+        }
+    })(), SSE.Views.EditCell || {}))
+});
+ 
\ No newline at end of file