Commit 337ee3a6 authored by Julia Radzhabova's avatar Julia Radzhabova

[PE mobile] Added table settings.

parent 23dae4e8
......@@ -74,8 +74,6 @@ define([
$('#table-options').single('click', _.bind(me.showTableOptions, me));
$('#edit-table-style-options').single('click', _.bind(me.showTableStyleOptions, me));
$('#edit-table-bordercolor').single('click', _.bind(me.showBorderColor, me));
$('.edit-table-style .categories a').single('click', _.bind(me.showStyleCategory, me));
me.initControls();
......
......@@ -142,7 +142,7 @@ require([
'EditContainer',
'EditText',
// 'EditParagraph',
// 'EditTable',
'EditTable',
'EditImage',
'EditShape',
// 'EditChart',
......@@ -207,7 +207,7 @@ require([
'presentationeditor/mobile/app/controller/edit/EditContainer',
'presentationeditor/mobile/app/controller/edit/EditText',
// 'presentationeditor/mobile/app/controller/edit/EditParagraph',
// 'presentationeditor/mobile/app/controller/edit/EditTable',
'presentationeditor/mobile/app/controller/edit/EditTable',
'presentationeditor/mobile/app/controller/edit/EditImage',
'presentationeditor/mobile/app/controller/edit/EditShape',
// 'presentationeditor/mobile/app/controller/edit/EditChart',
......
......@@ -153,7 +153,7 @@ require([
// 'EditContainer',
'EditText',
// 'EditParagraph'
// 'EditTable',
'EditTable',
'EditImage',
'EditShape',
// 'EditChart',
......@@ -218,7 +218,7 @@ require([
'presentationeditor/mobile/app/controller/edit/EditContainer',
'presentationeditor/mobile/app/controller/edit/EditText',
// 'presentationeditor/mobile/app/controller/edit/EditParagraph'
// 'presentationeditor/mobile/app/controller/edit/EditTable',
'presentationeditor/mobile/app/controller/edit/EditTable',
'presentationeditor/mobile/app/controller/edit/EditImage',
'presentationeditor/mobile/app/controller/edit/EditShape',
// 'presentationeditor/mobile/app/controller/edit/EditChart',
......
......@@ -156,13 +156,16 @@ define([
// API handlers
onApiInitTemplates: function(templates){
_styles = [];
_.each(templates, function(template){
_styles.push({
imageUrl : template.get_Image(),
templateId : template.get_Id()
if (_styles.length < 1) {
_.each(templates, function(template){
_styles.push({
imageUrl : template.get_Image(),
templateId : template.get_Id()
});
});
});
this.getView('AddTable').render();
}
Common.SharedSettings.set('tablestyles', _styles);
Common.NotificationCenter.trigger('tablestyles:load', _styles);
......
......@@ -326,7 +326,7 @@ define([
if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Table == type) {
// _settings.push('table');
_settings.push('table');
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Slide == type) {
// _settings.push('slide');
......
This diff is collapsed.
......@@ -61,7 +61,6 @@ define([
initialize: function () {
Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('tablestyles:load', _.bind(this.render, this));
},
initEvents: function () {
......@@ -75,10 +74,10 @@ define([
this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
styles : Common.SharedSettings.get('tablestyles')
styles : PE.getController('AddTable').getStyles()
}));
var $tableStyles = $('.table-styles');
var $tableStyles = $('.container-add .table-styles');
if ($tableStyles) {
$tableStyles.replaceWith(this.layout.find('#add-table-root').html());
}
......
/*
*
* (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
*
*/
/**
* EditTable.js
* Presentation Editor
*
* Created by Julia Radzhabova on 11/30/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!presentationeditor/mobile/app/template/EditTable.template',
'jquery',
'underscore',
'backbone',
'common/mobile/lib/component/ThemeColorPalette'
], function (editTemplate, $, _, Backbone) {
'use strict';
PE.Views.EditTable = Backbone.View.extend(_.extend((function() {
// private
var _styles = [];
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;
$('#table-style').single('click', _.bind(me.showTableStyle, me));
$('#edit-table-style-options').single('click', _.bind(me.showTableStyleOptions, me));
$('#edit-table-bordercolor').single('click', _.bind(me.showBorderColor, me));
$('.edit-table-style .categories a').single('click', _.bind(me.showStyleCategory, me));
me.initControls();
me.renderStyles();
},
// 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-table-root')
.html();
}
return '';
},
initControls: function () {
//
},
updateStyles: function (styles) {
_styles = styles;
this.renderStyles();
},
renderStyles: function() {
var $styleContainer = $('#edit-table-styles .item-inner');
if ($styleContainer.length > 0) {
var columns = parseInt($styleContainer.width() / 70), // magic
row = -1,
styles = [];
_.each(_styles, function (style, index) {
if (0 == index % columns) {
styles.push([]);
row++
}
styles[row].push(style);
});
var template = _.template([
'<div class="dataview table-styles" style="width: 100%;">',
'<% _.each(styles, function(row) { %>',
'<div class="row">',
'<% _.each(row, function(style) { %>',
'<div data-type="<%= style.templateId %>">',
'<img src="<%= style.imageUrl %>">',
'</div>',
'<% }); %>',
'</div>',
'<% }); %>',
'</div>'
].join(''), {
styles: styles
});
$styleContainer.html(template);
}
},
categoryShow: function(e) {
// if ('edit-shape' == $(e.currentTarget).prop('id')) {
// this.initEvents();
// }
},
showStyleCategory: function (e) {
// remove android specific style
$('.page[data-page=edit-table-style] .list-block.inputs-list').removeClass('inputs-list');
if ($(e.currentTarget).data('type') == 'fill') {
this.fireEvent('page:show', [this, '#edit-table-style']);
}
},
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();
}
},
showTableStyle: function () {
this.showPage('#edit-table-style', true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('#tab-table-fill'),
transparent: true
});
this.fireEvent('page:show', [this, '#edit-table-style']);
},
showBorderColor: function () {
this.showPage('#edit-table-border-color-view', true);
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-table-border-color] .page-content')
});
this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
},
showTableStyleOptions: function () {
this.showPage('#edit-table-style-options-view');
},
textRemoveTable: 'Remove Table',
textTableOptions: 'Table Options',
textStyle: 'Style',
textBack: 'Back',
textOptions: 'Options',
textCellMargins: 'Cell Margins',
textFill: 'Fill',
textBorder: 'Border',
textStyleOptions: 'Style Options',
textSize: 'Size',
textColor: 'Color',
textHeaderRow: 'Header Row',
textTotalRow: 'Total Row',
textBandedRow: 'Banded Row',
textFirstColumn: 'First Column',
textLastColumn: 'Last Column',
textBandedColumn: 'Banded Column'
}
})(), PE.Views.EditTable || {}))
});
\ No newline at end of file
......@@ -211,6 +211,59 @@ i.icon {
.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><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
}
// Presets of table borders
&.icon-table-borders-all {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
}
&.icon-table-borders-none {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
}
&.icon-table-borders-inner {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
}
&.icon-table-borders-outer {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
}
&.icon-table-borders-left {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
}
&.icon-table-borders-center {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
}
&.icon-table-borders-right {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
}
&.icon-table-borders-top {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
}
&.icon-table-borders-middle {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
}
&.icon-table-borders-bottom {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
}
// Reorder
&.icon-move-backward {
......
......@@ -181,6 +181,59 @@ i.icon {
.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><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
}
// Presets of table borders
&.icon-table-borders-all {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
}
&.icon-table-borders-none {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
}
&.icon-table-borders-inner {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
}
&.icon-table-borders-outer {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
}
&.icon-table-borders-left {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
}
&.icon-table-borders-center {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
}
&.icon-table-borders-right {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
}
&.icon-table-borders-top {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
}
&.icon-table-borders-middle {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
}
&.icon-table-borders-bottom {
width: 28px;
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
}
// Reorder
&.icon-move-backward {
......
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