Merge branches 'feature/new-mobile' and 'feature/new-mobile' of https://github.com/ONLYOFFICE/web-apps into feature/new-mobile

apps/documenteditor/mobile/app/controller/edit/EditParagraph.js

@@ -307,7 +307,7 @@ define([
                     return;
                 }
 
-                _styles = [],
+                _styles = [];
                 _styleTumbSize = {
                     width   : styles.STYLE_THUMBNAIL_WIDTH / uiApp.device.pixelRatio,
                     height  : styles.STYLE_THUMBNAIL_HEIGHT / uiApp.device.pixelRatio

apps/presentationeditor/mobile/app-dev.js

@@ -144,6 +144,7 @@ require([
             'EditTable',
             'EditImage',
             'EditShape',
+            'EditSlide',
             // 'EditChart',
             'EditLink',
             'AddContainer',
@@ -209,6 +210,7 @@ require([
         'presentationeditor/mobile/app/controller/edit/EditTable',
         'presentationeditor/mobile/app/controller/edit/EditImage',
         'presentationeditor/mobile/app/controller/edit/EditShape',
+        'presentationeditor/mobile/app/controller/edit/EditSlide',
         // 'presentationeditor/mobile/app/controller/edit/EditChart',
         'presentationeditor/mobile/app/controller/edit/EditLink',
         'presentationeditor/mobile/app/controller/add/AddContainer',

apps/presentationeditor/mobile/app.js

@@ -155,6 +155,7 @@ require([
             'EditTable',
             'EditImage',
             'EditShape',
+            'EditSlide',
             // 'EditChart',
             'EditLink',
             'AddContainer',
@@ -220,6 +221,7 @@ require([
         'presentationeditor/mobile/app/controller/edit/EditTable',
         'presentationeditor/mobile/app/controller/edit/EditImage',
         'presentationeditor/mobile/app/controller/edit/EditShape',
+        'presentationeditor/mobile/app/controller/edit/EditSlide',
         // 'presentationeditor/mobile/app/controller/edit/EditChart',
         'presentationeditor/mobile/app/controller/edit/EditLink',
         'presentationeditor/mobile/app/controller/add/AddContainer',

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

@@ -423,8 +423,7 @@ define([
                 var zf = (value!==null) ? parseInt(value) : (me.appOptions.customization && me.appOptions.customization.zoom ? parseInt(me.appOptions.customization.zoom) : -1);
                 (zf == -1) ? me.api.zoomFitToPage() : ((zf == -2) ? me.api.zoomFitToWidth() : me.api.zoom(zf>0 ? zf : 100));
 
-
+                Common.localStorage.setItem("pe-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
-                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));

apps/presentationeditor/mobile/app/controller/add/AddSlide.js

@@ -74,10 +74,10 @@ define([
             initEvents: function () {
                 var me = this;
                 me.getView('AddSlide').updateLayouts(_layouts);
-                $('#add-slide .slide-layout li').single('click',  _.buffered(me.onStyleClick, 100, me));
+                $('#add-slide .slide-layout li').single('click',  _.buffered(me.onLayoutClick, 100, me));
             },
 
-            onStyleClick: function (e) {
+            onLayoutClick: function (e) {
                 var me = this,
                     $target = $(e.currentTarget),
                     type = $target.data('type');
@@ -115,7 +115,7 @@ define([
                 Common.NotificationCenter.trigger('slidelayouts:load', _layouts);
 
                 this.getView('AddSlide').updateLayouts(_layouts);
-                $('#add-slide .slide-layout li').single('click',  _.buffered(me.onStyleClick, 100, me));
+                $('#add-slide .slide-layout li').single('click',  _.buffered(me.onLayoutClick, 100, me));
             },
 
             textTableSize: 'Table Size',

apps/presentationeditor/mobile/app/controller/edit/EditContainer.js

@@ -115,7 +115,7 @@ define([
                         editors.push({
                             caption: me.textSlide,
                             id: 'edit-slide',
-                            layout: PE.getController('EditText').getView('EditSlide').rootLayout()
+                            layout: PE.getController('EditSlide').getView('EditSlide').rootLayout()
                         })
                     }
                     if (_.contains(_settings, 'text')) {
@@ -324,7 +324,7 @@ define([
                         _settings.push('table');
                         no_text = false;
                     } else if (Asc.c_oAscTypeSelectElement.Slide == type) {
-                        // _settings.push('slide');
+                        _settings.push('slide');
                     } else if (Asc.c_oAscTypeSelectElement.Image == type) {
                         _settings.push('image');
                     } else if (Asc.c_oAscTypeSelectElement.Chart == type) {

apps/presentationeditor/mobile/app/controller/edit/EditSlide.js

@@ -0,0 +1,286 @@
+/*
+ *
+ * (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
+ *
+ */
+
+/**
+ *  EditSlide.js
+ *  Presentation Editor
+ *
+ *  Created by Julia Radzhabova on 12/07/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'presentationeditor/mobile/app/view/edit/EditSlide'
+], function (core) {
+    'use strict';
+
+    PE.Controllers.EditSlide = Backbone.Controller.extend(_.extend((function() {
+        // Private
+        var _stack = [],
+            _slideObject = undefined,
+            _themes = [],
+            _themeId = -1;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'EditSlide'
+            ],
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+                Common.NotificationCenter.on('slidelayouts:load',  _.bind(this.updateLayouts, this));
+
+                this.addListeners({
+                    'EditSlide': {
+                        'page:show': this.onPageShow
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onApiFocusObject, me));
+                me.api.asc_registerCallback('asc_onInitEditorStyles',   _.bind(me.onApiInitEditorStyles, me));
+                me.api.asc_registerCallback('asc_onUpdateThemeIndex',   _.bind(me.onApiUpdateThemeIndex, me));
+            },
+
+            onLaunch: function () {
+                this.createView('EditSlide').render();
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                $('#slide-remove').single('click', _.bind(me.onRemoveSlide, me));
+                $('#slide-duplicate').single('click', _.bind(me.onDuplicateSlide, me));
+
+                me.initSettings();
+            },
+
+            onPageShow: function (view, pageId) {
+                var me = this;
+                me.initSettings(pageId);
+            },
+
+            initSettings: function (pageId) {
+                var me = this;
+
+                if (_slideObject) {
+                    if (pageId == '#edit-slide-style') {
+                        me._initStyleView();
+
+                        var paletteFillColor = me.getView('EditSlide').paletteFillColor;
+                        paletteFillColor && paletteFillColor.on('select', _.bind(me.onFillColor, me));
+
+                    } else if (pageId == '#edit-slide-layout') {
+                        $('.container-edit .slide-layout li').single('click',  _.buffered(me.onLayoutClick, 100, me));
+                    } else if (pageId == '#edit-slide-theme') {
+                        this.getView('EditSlide').renderThemes();
+
+                        $('.container-edit .slide-theme .row div').removeClass('active').single('click',  _.buffered(me.onThemeClick, 100, me));
+                        $('.container-edit .slide-theme div[data-type=' + _themeId + ']').addClass('active');
+                    }
+                }
+            },
+
+            _initStyleView: function () {
+                var me = this,
+                    paletteFillColor = me.getView('EditSlide').paletteFillColor;
+
+                var sdkColor, color;
+
+                // Init fill color
+                var fill = _slideObject.get_background(),
+                    fillType = fill.get_type();
+
+                color = 'transparent';
+
+                if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
+                    fill = fill.get_fill();
+                    sdkColor = fill.get_color();
+
+                    if (sdkColor) {
+                        if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                            color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
+                        } else {
+                            color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
+                        }
+                    }
+                }
+
+                paletteFillColor && paletteFillColor.select(color);
+            },
+
+            // Public
+
+            getSlide: function () {
+                return _slideObject;
+            },
+
+            getThemes: function () {
+                return _themes || [];
+            },
+
+            // Handlers
+
+            onLayoutClick: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget),
+                    type = $target.data('type');
+
+                me.api.ChangeLayout(type);
+            },
+
+            onThemeClick: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget),
+                    type = $target.data('type');
+
+                $('.container-edit .slide-theme div').removeClass('active');
+                $target.addClass('active');
+
+                me.api.ChangeTheme(type);
+            },
+
+            onRemoveSlide: function () {
+                this.api.DeleteSlide();
+                PE.getController('EditContainer').hideModal();
+            },
+
+            onDuplicateSlide: function () {
+                this.api.DublicateSlide();
+                PE.getController('EditContainer').hideModal();
+            },
+
+            onFillColor: function(palette, color) {
+                var me = this;
+
+                if (me.api) {
+                    var props = new Asc.CAscSlideProps();
+                    var fill = new Asc.asc_CShapeFill();
+
+                    if (color == 'transparent') {
+                        fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
+                        fill.put_fill(null);
+                    } else {
+                        fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
+                        fill.put_fill(new Asc.asc_CFillSolid());
+                        fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
+                    }
+                    props.put_background(fill);
+                    me.api.SetSlideProps(props);
+                }
+            },
+
+            updateLayouts: function(layouts){
+                this.getView('EditSlide').updateLayouts();
+                $('.container-edit .slide-layout li').single('click',  _.buffered(this.onLayoutClick, 100, this));
+            },
+
+            // API handlers
+
+            onApiFocusObject: function (objects) {
+                _stack = objects;
+
+                var slides = [];
+
+                _.each(_stack, function (object) {
+                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Slide) {
+                        slides.push(object);
+                    }
+                });
+
+                if (slides.length > 0) {
+                    var object = slides[slides.length - 1]; // get top slide
+                    _slideObject = object.get_ObjectValue();
+                } else {
+                    _slideObject = undefined;
+                }
+            },
+
+            onApiInitEditorStyles: function(themes) {
+                if (themes) {
+                    window.styles_loaded = false;
+
+                    var me = this,
+                        defaultThemes = themes[0] || [],
+                        docThemes     = themes[1] || [];
+
+                    _themes = [];
+
+                    _.each(defaultThemes.concat(docThemes), function(theme) {
+                        _themes.push({
+                            imageUrl: theme.get_Image(),
+                            themeId : theme.get_Index()
+                        });
+                    });
+
+                    window.styles_loaded = true;
+                }
+            },
+
+            onApiUpdateThemeIndex: function(themeId) {
+                _themeId = themeId;
+                $('.container-edit .slide-theme .row div').removeClass('active');
+                $('.container-edit .slide-theme div[data-type=' + _themeId + ']').addClass('active');
+            },
+
+            // Helpers
+
+            _closeIfNeed: function () {
+                if (!this._isSlideInStack()) {
+                    PE.getController('EditContainer').hideModal();
+                }
+            },
+
+            _isSlideInStack: function () {
+                var slideExist = false;
+
+                _.some(_stack, function(object) {
+                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Slide) {
+                        slideExist = true;
+                        return true;
+                    }
+                });
+
+                return slideExist;
+            }
+        };
+    })(), PE.Controllers.EditSlide || {}))
+});

apps/presentationeditor/mobile/app/template/AddLink.template

@@ -5,7 +5,7 @@
             <li>
                 <div id="add-link-type" class="item-content item-link">
                     <div class="item-inner">
-                        <div class="item-title"><%= scope.textLinkType %></div>
+                        <div class="item-title label"><%= scope.textLinkType %></div>
                         <div class="item-after"><%= scope.textExternalLink %></div>
                     </div>
                 </div>

apps/presentationeditor/mobile/app/template/EditSlide.template

@@ -0,0 +1,166 @@
+<!-- Root view -->
+<div id="edit-slide-root">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="slide-theme" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title"><%= scope.textTheme %></div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="slide-change-layout" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title"><%= scope.textLayout %></div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="slide-transition" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title"><%= scope.textTransition %></div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="slide-style" class="item-link">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title"><%= scope.textStyle %></div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block">
+        <ul>
+            <li>
+                <% if (android) { %>
+                <a id="slide-duplicate" class="button button-raised button-fill" style="margin: 20px 16px;"><%= scope.textDuplicateSlide %></a>
+                <% } else { %>
+                <a id="slide-duplicate" class="item-link list-button" style="text-align: center;"><%= scope.textDuplicateSlide %></a>
+                <% } %>
+            </li>
+            <li>
+                <% if (android) { %>
+                <a id="slide-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveSlide %></a>
+                <% } else { %>
+                <a id="slide-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveSlide %></a>
+                <% } %>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- Reorder view -->
+<div id="edit-slide-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><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textReorder %></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-move-foreground"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title"><%= scope.textToForeground %></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-move-background"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title"><%= scope.textToBackground %></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-move-forward"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title"><%= scope.textForward %></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-move-backward"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title"><%= scope.textBackward %></div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Replace layout -->
+<div id="edit-slide-layout">
+    <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><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textLayout %></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 dataview slide-layout" style="width: 100%;">
+        </div>
+    </div>
+</div>
+
+<!-- Replace view -->
+<div id="edit-slide-theme">
+    <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><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textTheme %></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 dataview slide-theme" style="width: 100%;">
+        </div>
+    </div>
+</div>
+
+<!-- Styles view -->
+<div id="edit-slide-style">
+    <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><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textFill %></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-slide-style">
+        <div class="page-content">
+            <!--Fill colors-->
+        </div>
+    </div>
+</div>

apps/presentationeditor/mobile/app/view/edit/EditSlide.js

@@ -0,0 +1,245 @@
+/*
+ *
+ * (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
+ *
+ */
+
+/**
+ *  EditSlide.js
+ *  Presentation Editor
+ *
+ *  Created by Julia Radzhabova on 12/07/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!presentationeditor/mobile/app/template/EditSlide.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (editTemplate, $, _, Backbone) {
+    'use strict';
+
+    PE.Views.EditSlide = Backbone.View.extend(_.extend((function() {
+        // private
+        var _layouts = [];
+
+        return {
+            // el: '.view-main',
+
+            template: _.template(editTemplate),
+
+            events: {
+            },
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                $('#slide-theme').single('click',                 _.bind(me.showTheme, me));
+                $('#slide-change-layout').single('click',         _.bind(me.showLayout, me));
+                $('#slide-transition').single('click',            _.bind(me.showTransition, me));
+                $('#slide-style').single('click',                 _.bind(me.showStyle, me));
+
+                me.initControls();
+            },
+
+            categoryShow: function(e) {
+                // if ('edit-slide' == $(e.currentTarget).prop('id')) {
+                //     this.initEvents();
+                // }
+            },
+
+            // 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-slide-root')
+                        .html();
+                }
+
+                return '';
+            },
+
+            initControls: function () {
+                //
+            },
+
+            showPage: function (templateId, suspendEvent) {
+                var rootView = PE.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]);
+                    }
+
+                    this.initEvents();
+                }
+            },
+
+            showStyle: function () {
+                this.showPage('#edit-slide-style', true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-slide-style] .page-content'),
+                    transparent: true
+                });
+
+                this.fireEvent('page:show', [this, '#edit-slide-style']);
+            },
+
+            showLayout: function () {
+                this.showPage('#edit-slide-layout', true);
+
+                this.renderLayouts();
+
+                this.fireEvent('page:show', [this, '#edit-slide-layout']);
+            },
+
+            showTheme: function () {
+                this.showPage('#edit-slide-theme');
+            },
+
+            showTransition: function () {
+                this.showPage('#edit-slide-transition');
+            },
+
+            updateLayouts: function () {
+                _layouts = Common.SharedSettings.get('slidelayouts');
+                this.renderLayouts();
+            },
+
+            renderLayouts: function() {
+                var $layoutContainer = $('.container-edit .slide-layout');
+                if ($layoutContainer.length > 0 && _layouts.length>0) {
+                    var columns = parseInt(($layoutContainer.width()-20) / (_layouts[0].itemWidth+2)), // magic
+                        row = -1,
+                        layouts = [];
+
+                    _.each(_layouts, function (layout, index) {
+                        if (0 == index % columns) {
+                            layouts.push([]);
+                            row++
+                        }
+                        layouts[row].push(layout);
+                    });
+
+                    var template = _.template([
+                        '<% _.each(layouts, function(row) { %>',
+                        '<ul class="row">',
+                        '<% _.each(row, function(item) { %>',
+                        '<li data-type="<%= item.idx %>">',
+                        '<img src="<%= item.imageUrl %>" width="<%= item.itemWidth %>" height="<%= item.itemHeight %>">',
+                        '</li>',
+                        '<% }); %>',
+                        '</ul>',
+                        '<% }); %>'
+                    ].join(''), {
+                        layouts: layouts
+                    });
+
+                    $layoutContainer.html(template);
+                }
+            },
+
+            renderThemes: function() {
+                var $themeContainer = $('.container-edit .slide-theme'),
+                    _arr = PE.getController('EditSlide').getThemes();
+
+                if ($themeContainer.length > 0 && _arr.length>0) {
+                    var columns = parseInt(($themeContainer.width()-20) / 95), // magic
+                        row = -1,
+                        themes = [];
+
+                    _.each(_arr, function (theme, index) {
+                        if (0 == index % columns) {
+                            themes.push([]);
+                            row++
+                        }
+                        themes[row].push(theme);
+                    });
+
+                    var template = _.template([
+                        '<% _.each(themes, function(row) { %>',
+                            '<div class="row">',
+                            '<% _.each(row, function(theme) { %>',
+                                '<div data-type="<%= theme.themeId %>"><img src="<%= theme.imageUrl %>"></div>',
+                            '<% }); %>',
+                            '</div>',
+                        '<% }); %>'
+                    ].join(''), {
+                        themes: themes
+                    });
+
+                    $themeContainer.html(template);
+                }
+            },
+
+            textTheme: 'Theme',
+            textStyle: 'Style',
+            textLayout: 'Layout',
+            textTransition: 'Transition',
+            textRemoveSlide: 'Delete Slide',
+            textDuplicateSlide: 'Duplicate Slide',
+            textBack: 'Back',
+            textFill: 'Fill',
+            textEffects: 'Effects',
+            textSize: 'Size',
+            textColor: 'Color',
+            textOpacity: 'Opacity'
+        }
+    })(), PE.Views.EditSlide || {}))
+});

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

@@ -185,9 +185,24 @@ input, textarea {
     padding: 1px;
 
     img {
-      width: 119px;
-      height: 67px;
       box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
     }
   }
 }
+
+// Slide theme
+
+.slide-theme {
+  .row {
+    margin-top: 14px;
+    margin-bottom: 12px;
+
+    div {
+      margin: 0;
+      padding: 3px;
+      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
+      width: 85px;
+      height: 38px;
+    }
+  }
+}

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

@@ -178,9 +178,24 @@ input, textarea {
     padding: 1px;
 
     img {
-      width: 119px;
-      height: 67px;
       box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
     }
   }
 }
+
+// Slide theme
+
+.slide-theme {
+  .row {
+    margin-top: 14px;
+    margin-bottom: 12px;
+
+    div {
+      margin: 0;
+      padding: 3px;
+      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
+      width: 85px;
+      height: 38px;
+    }
+  }
+}