Commit 677af5ae authored by Alexander Yuzhin's avatar Alexander Yuzhin

Merge branches 'feature/new-mobile' and 'feature/new-mobile' of...

Merge branches 'feature/new-mobile' and 'feature/new-mobile' of https://github.com/ONLYOFFICE/web-apps into feature/new-mobile
parents 34657308 0421a689
......@@ -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
......
......@@ -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',
......
......@@ -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',
......
......@@ -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("de-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
Common.localStorage.setItem("pe-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));
......
......@@ -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',
......
......@@ -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) {
......
......@@ -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>
......
<!-- 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>
/*
*
* (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 || {}))
});
\ No newline at end of file
......@@ -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;
}
}
}
\ No newline at end of file
......@@ -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;
}
}
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment