[PE mobile] Added table settings.
This commit is contained in:
Julia Radzhabova
parent
23dae4e89b
commit
337ee3a697
|
|
@ -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');
|
||||
|
|
|
|||
514
apps/presentationeditor/mobile/app/controller/edit/EditTable.js
Normal file
514
apps/presentationeditor/mobile/app/controller/edit/EditTable.js
Normal file
|
|
@ -0,0 +1,514 @@
|
|||
/*
|
||||
*
|
||||
* (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([
|
||||
'core',
|
||||
'presentationeditor/mobile/app/view/edit/EditTable'
|
||||
], function (core) {
|
||||
'use strict';
|
||||
|
||||
PE.Controllers.EditTable = Backbone.Controller.extend(_.extend((function() {
|
||||
// Private
|
||||
var _stack = [],
|
||||
_metricText = Common.Utils.Metric.getCurrentMetricName(),
|
||||
_tableObject = undefined,
|
||||
_tableLook = {},
|
||||
_cellBorders = new Asc.CBorders(),
|
||||
_cellBorderColor = '000000',
|
||||
_cellBorderWidth = 0.5;
|
||||
|
||||
var borderSizeTransform = (function() {
|
||||
var _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
|
||||
|
||||
return {
|
||||
sizeByIndex: function (index) {
|
||||
if (index < 1) return _sizes[0];
|
||||
if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
|
||||
return _sizes[index];
|
||||
},
|
||||
|
||||
sizeByValue: function (value) {
|
||||
var index = 0;
|
||||
_.each(_sizes, function (size, idx) {
|
||||
if (Math.abs(size - value) < 0.25) {
|
||||
index = idx;
|
||||
}
|
||||
});
|
||||
return _sizes[index];
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return {
|
||||
models: [],
|
||||
collections: [],
|
||||
views: [
|
||||
'EditTable'
|
||||
],
|
||||
|
||||
initialize: function () {
|
||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||
|
||||
this.addListeners({
|
||||
'EditTable': {
|
||||
'page:show' : this.onPageShow
|
||||
}
|
||||
});
|
||||
|
||||
var me = this;
|
||||
uiApp.onPageBack('edit-table-style-options', function (page) {
|
||||
$('.dataview.table-styles .row div').single('click', _.bind(me.onStyleClick, me));
|
||||
me.initSettings('#edit-table-style');
|
||||
});
|
||||
},
|
||||
|
||||
setApi: function (api) {
|
||||
var me = this;
|
||||
me.api = api;
|
||||
|
||||
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
|
||||
me.api.asc_registerCallback('asc_onInitTableTemplates', _.bind(me.onApiInitTemplates, me));
|
||||
},
|
||||
|
||||
onLaunch: function () {
|
||||
this.createView('EditTable').render();
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
var me = this;
|
||||
|
||||
$('#table-remove-all').single('click', _.bind(function(){me.api.remTable(); me._closeIfNeed()}, me));
|
||||
$('#insert-column-left').single('click', _.bind(function(){me.api.addColumnLeft(); me._closeIfNeed()}, me));
|
||||
$('#insert-column-right').single('click', _.bind(function(){me.api.addColumnRight(); me._closeIfNeed()}, me));
|
||||
$('#insert-row-above').single('click', _.bind(function(){me.api.addRowAbove(); me._closeIfNeed()}, me));
|
||||
$('#insert-row-below').single('click', _.bind(function(){me.api.addRowBelow(); me._closeIfNeed()}, me));
|
||||
$('#remove-column').single('click', _.bind(function(){me.api.remColumn(); me._closeIfNeed()}, me));
|
||||
$('#remove-row').single('click', _.bind(function(){me.api.remRow(); me._closeIfNeed()}, me));
|
||||
$('#table-options-margins input').single('change touchend', _.buffered(me.onOptionMargin, 100, me));
|
||||
$('#table-options-margins input').single('input', _.bind(me.onOptionMarginChanging, me));
|
||||
|
||||
me.initSettings();
|
||||
},
|
||||
|
||||
onPageShow: function (view, pageId) {
|
||||
var me = this,
|
||||
paletteFillColor = me.getView('EditTable').paletteFillColor,
|
||||
paletteBorderColor = me.getView('EditTable').paletteBorderColor;
|
||||
|
||||
$('#table-options-header-row input').single('click', _.bind(me.onCheckTemplateChange, me, 0));
|
||||
$('#table-options-total-row input').single('click', _.bind(me.onCheckTemplateChange, me, 1));
|
||||
$('#table-options-banded-row input').single('click', _.bind(me.onCheckTemplateChange, me, 2));
|
||||
$('#table-options-first-column input').single('click', _.bind(me.onCheckTemplateChange, me, 3));
|
||||
$('#table-options-last-column input').single('click', _.bind(me.onCheckTemplateChange, me, 4));
|
||||
$('#table-options-banded-column input').single('click', _.bind(me.onCheckTemplateChange, me, 5));
|
||||
|
||||
$('#edit-table-bordertypes a').single('click', _.bind(me.onBorderTypeClick, me));
|
||||
|
||||
$('.dataview.table-styles .row div').single('click', _.bind(me.onStyleClick, me));
|
||||
$('#edit-table-bordersize input').single('change touchend', _.buffered(me.onBorderSize, 100, me));
|
||||
$('#edit-table-bordersize input').single('input', _.bind(me.onBorderSizeChanging, me));
|
||||
|
||||
paletteFillColor && paletteFillColor.on('select', _.bind(me.onFillColor, me));
|
||||
paletteBorderColor && paletteBorderColor.on('select', _.bind(me.onBorderColor, me));
|
||||
|
||||
me.initSettings(pageId);
|
||||
},
|
||||
|
||||
initSettings: function (pageId) {
|
||||
var me = this;
|
||||
|
||||
if (_tableObject) {
|
||||
if (pageId == "#edit-table-style" || pageId == '#edit-table-border-color-view') {
|
||||
me._initStyleView();
|
||||
} else if (pageId == '#edit-table-style-options-view') {
|
||||
me._initStyleOptionsView();
|
||||
} else
|
||||
me._initTableOptionsView();
|
||||
}
|
||||
},
|
||||
|
||||
_initStyleOptionsView: function() {
|
||||
$('#table-options-header-row input').prop('checked', _tableLook.get_FirstRow());
|
||||
$('#table-options-total-row input').prop('checked', _tableLook.get_LastRow());
|
||||
$('#table-options-banded-row input').prop('checked', _tableLook.get_BandHor());
|
||||
$('#table-options-first-column input').prop('checked', _tableLook.get_FirstCol());
|
||||
$('#table-options-last-column input').prop('checked', _tableLook.get_LastCol());
|
||||
$('#table-options-banded-column input').prop('checked', _tableLook.get_BandVer());
|
||||
},
|
||||
|
||||
_initTableOptionsView: function() {
|
||||
var margins = _tableObject.get_DefaultMargins();
|
||||
if (margins) {
|
||||
var distance = Common.Utils.Metric.fnRecalcFromMM(margins.get_Left());
|
||||
$('#table-options-margins input').val(distance);
|
||||
$('#table-options-margins .item-after').text(distance + ' ' + _metricText);
|
||||
}
|
||||
},
|
||||
|
||||
_initStyleView: function() {
|
||||
var me = this;
|
||||
|
||||
/**
|
||||
* Style
|
||||
*/
|
||||
|
||||
var styleId = _tableObject.get_TableStyle();
|
||||
$('#edit-table-styles .table-styles div').removeClass('active');
|
||||
$('#edit-table-styles .table-styles div[data-type=' + styleId + ']').addClass('active');
|
||||
|
||||
/**
|
||||
* Fill
|
||||
*/
|
||||
|
||||
var background = _tableObject.get_CellsBackground(),
|
||||
fillColor = 'transparent';
|
||||
|
||||
if (background) {
|
||||
if (background.get_Value()==0) {
|
||||
var color = background.get_Color();
|
||||
if (color) {
|
||||
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||
fillColor = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
|
||||
} else {
|
||||
fillColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var palette = me.getView('EditTable').paletteFillColor;
|
||||
|
||||
if (palette) {
|
||||
palette.select(fillColor);
|
||||
}
|
||||
|
||||
/**
|
||||
* Border
|
||||
*/
|
||||
|
||||
// if (_.isUndefined(_cellBorderColor) || _.isUndefined(_cellBorderWidth)) {
|
||||
// _cellBorders = _tableObject.get_CellBorders();
|
||||
//
|
||||
// _.some([
|
||||
// _cellBorders.get_Left(),
|
||||
// _cellBorders.get_Top(),
|
||||
// _cellBorders.get_Right(),
|
||||
// _cellBorders.get_Bottom(),
|
||||
// _cellBorders.get_InsideV(),
|
||||
// _cellBorders.get_InsideH()
|
||||
// ], function (border) {
|
||||
// if (border.get_Value() > 0) {
|
||||
// var borderColor = border.get_Color();
|
||||
//
|
||||
// if (borderColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||
// borderColor = {
|
||||
// color: Common.Utils.ThemeColor.getHexColor(borderColor.get_r(), borderColor.get_g(), borderColor.get_b()),
|
||||
// effectValue: borderColor.get_value()
|
||||
// };
|
||||
// } else {
|
||||
// borderColor = Common.Utils.ThemeColor.getHexColor(borderColor.get_r(), borderColor.get_g(), borderColor.get_b());
|
||||
// }
|
||||
//
|
||||
// _cellBorderWidth = border.get_Size();
|
||||
// _cellBorderColor = borderColor;
|
||||
//
|
||||
// return true;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
$('#edit-table-bordersize input').val([borderSizeTransform.sizeByIndex(_cellBorderWidth)]);
|
||||
$('#edit-table-bordersize .item-after').text(borderSizeTransform.sizeByValue(_cellBorderWidth) + ' ' + _metricText);
|
||||
|
||||
var borderPalette = me.getView('EditTable').paletteBorderColor;
|
||||
|
||||
if (borderPalette) {
|
||||
borderPalette.select(_cellBorderColor);
|
||||
}
|
||||
|
||||
$('#edit-table-bordercolor .color-preview').css('background-color', ('transparent' == _cellBorderColor) ? _cellBorderColor : ('#' + (_.isObject(_cellBorderColor) ? _cellBorderColor.color : _cellBorderColor)));
|
||||
},
|
||||
|
||||
_updateBordersStyle: function(border) {
|
||||
_cellBorders = new Asc.CBorders();
|
||||
var updateBorders = _cellBorders;
|
||||
|
||||
var visible = (border != '');
|
||||
|
||||
if (border.indexOf('l') > -1 || !visible) {
|
||||
if (updateBorders.get_Left()===null || updateBorders.get_Left()===undefined)
|
||||
updateBorders.put_Left(new Asc.asc_CTextBorder());
|
||||
this._updateBorderStyle (updateBorders.get_Left(), visible);
|
||||
}
|
||||
if (border.indexOf('t') > -1 || !visible) {
|
||||
if (updateBorders.get_Top()===null || updateBorders.get_Top()===undefined)
|
||||
updateBorders.put_Top(new Asc.asc_CTextBorder());
|
||||
this._updateBorderStyle (updateBorders.get_Top(), visible);
|
||||
}
|
||||
if (border.indexOf('r') > -1 || !visible) {
|
||||
if (updateBorders.get_Right()===null || updateBorders.get_Right()===undefined)
|
||||
updateBorders.put_Right(new Asc.asc_CTextBorder());
|
||||
this._updateBorderStyle (updateBorders.get_Right(), visible);
|
||||
}
|
||||
if (border.indexOf('b') > -1 || !visible) {
|
||||
if (updateBorders.get_Bottom()===null || updateBorders.get_Bottom()===undefined)
|
||||
updateBorders.put_Bottom(new Asc.asc_CTextBorder());
|
||||
this._updateBorderStyle (updateBorders.get_Bottom(), visible);
|
||||
}
|
||||
if (border.indexOf('c') > -1 || !visible) {
|
||||
if (updateBorders.get_InsideV()===null || updateBorders.get_InsideV()===undefined)
|
||||
updateBorders.put_InsideV(new Asc.asc_CTextBorder());
|
||||
this._updateBorderStyle (updateBorders.get_InsideV(), visible);
|
||||
}
|
||||
if (border.indexOf('m') > -1 || !visible) {
|
||||
if (updateBorders.get_InsideH()===null || updateBorders.get_InsideH()===undefined)
|
||||
updateBorders.put_InsideH(new Asc.asc_CTextBorder());
|
||||
this._updateBorderStyle (updateBorders.get_InsideH(), visible);
|
||||
}
|
||||
},
|
||||
|
||||
_updateBorderStyle: function(border, visible) {
|
||||
if (_.isNull(border)) {
|
||||
border = new Asc.asc_CTextBorder();
|
||||
}
|
||||
|
||||
if (visible && _cellBorderWidth > 0){
|
||||
var size = parseFloat(_cellBorderWidth);
|
||||
border.put_Value(1);
|
||||
border.put_Size(size * 25.4 / 72.0);
|
||||
var color = Common.Utils.ThemeColor.getRgbColor(_cellBorderColor);
|
||||
border.put_Color(color);
|
||||
}
|
||||
else {
|
||||
border.put_Value(0);
|
||||
}
|
||||
},
|
||||
|
||||
// Public
|
||||
|
||||
getTable: function() {
|
||||
return _tableObject;
|
||||
},
|
||||
|
||||
// Handlers
|
||||
|
||||
onOptionMargin: function (e) {
|
||||
var me = this,
|
||||
$target = $(e.currentTarget),
|
||||
value = $target.val(),
|
||||
properties = new Asc.CTableProp(),
|
||||
margins = new Asc.asc_CPaddings();
|
||||
|
||||
$('#table-options-margins .item-after').text(value + ' ' + _metricText);
|
||||
|
||||
value = Common.Utils.Metric.fnRecalcToMM(value);
|
||||
|
||||
margins.put_Top(value);
|
||||
margins.put_Right(value);
|
||||
margins.put_Bottom(value);
|
||||
margins.put_Left(value);
|
||||
|
||||
properties.put_DefaultMargins(margins);
|
||||
|
||||
me.api.tblApply(properties);
|
||||
},
|
||||
|
||||
onOptionMarginChanging: function (e) {
|
||||
var $target = $(e.currentTarget);
|
||||
$('#table-options-margins .item-after').text($target.val() + ' ' + _metricText);
|
||||
},
|
||||
|
||||
onCheckTemplateChange: function(type, e) {
|
||||
if (this.api) {
|
||||
var properties = new Asc.CTableProp();
|
||||
|
||||
switch (type) {
|
||||
case 0:
|
||||
_tableLook.put_FirstRow($('#table-options-header-row input').is(':checked'));
|
||||
break;
|
||||
case 1:
|
||||
_tableLook.put_LastRow($('#table-options-total-row input').is(':checked'));
|
||||
break;
|
||||
case 2:
|
||||
_tableLook.put_BandHor($('#table-options-banded-row input').is(':checked'));
|
||||
break;
|
||||
case 3:
|
||||
_tableLook.put_FirstCol($('#table-options-first-column input').is(':checked'));
|
||||
break;
|
||||
case 4:
|
||||
_tableLook.put_LastCol($('#table-options-last-column input').is(':checked'));
|
||||
break;
|
||||
case 5:
|
||||
_tableLook.put_BandVer($('#table-options-banded-column input').is(':checked'));
|
||||
break;
|
||||
}
|
||||
|
||||
properties.put_TableLook(_tableLook);
|
||||
this.api.tblApply(properties);
|
||||
}
|
||||
},
|
||||
|
||||
onBorderTypeClick: function (e) {
|
||||
var me = this,
|
||||
$target = $(e.currentTarget),
|
||||
type = $target.data('type');
|
||||
|
||||
this._updateBordersStyle(type);
|
||||
|
||||
if (me.api) {
|
||||
var properties = new Asc.CTableProp();
|
||||
properties.put_CellBorders(_cellBorders);
|
||||
properties.put_CellSelect(true);
|
||||
|
||||
me.api.tblApply(properties);
|
||||
}
|
||||
},
|
||||
|
||||
onFillColor: function(palette, color) {
|
||||
if (this.api) {
|
||||
var properties = new Asc.CTableProp(),
|
||||
background = new Asc.CBackground();
|
||||
|
||||
properties.put_CellsBackground(background);
|
||||
|
||||
if ('transparent' == color) {
|
||||
background.put_Value(1);
|
||||
} else {
|
||||
background.put_Value(0);
|
||||
background.put_Color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
}
|
||||
|
||||
properties.put_CellSelect(true);
|
||||
|
||||
this.api.tblApply(properties);
|
||||
}
|
||||
},
|
||||
|
||||
onBorderColor: function (palette, color) {
|
||||
_cellBorderColor = color;
|
||||
$('#edit-table-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
|
||||
},
|
||||
|
||||
onStyleClick: function (e) {
|
||||
var me = this,
|
||||
$target = $(e.currentTarget),
|
||||
type = $target.data('type'),
|
||||
properties = new Asc.CTableProp();
|
||||
|
||||
$('#edit-table-styles .table-styles div').removeClass('active');
|
||||
$target.addClass('active');
|
||||
|
||||
properties.put_TableStyle(type);
|
||||
me.api.tblApply(properties);
|
||||
},
|
||||
|
||||
onBorderSize: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
value = $target.val();
|
||||
|
||||
_cellBorderWidth = borderSizeTransform.sizeByIndex(parseInt(value));
|
||||
},
|
||||
|
||||
onBorderSizeChanging: function (e) {
|
||||
var $target = $(e.currentTarget);
|
||||
$('#edit-table-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + _metricText);
|
||||
},
|
||||
|
||||
// API handlers
|
||||
|
||||
onApiFocusObject: function (objects) {
|
||||
_stack = objects;
|
||||
|
||||
var tables = [];
|
||||
|
||||
_.each(_stack, function(object) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
|
||||
tables.push(object);
|
||||
}
|
||||
});
|
||||
|
||||
if (tables.length > 0) {
|
||||
var object = tables[tables.length - 1]; // get top table
|
||||
|
||||
_tableObject = object.get_ObjectValue();
|
||||
_tableLook = _tableObject.get_TableLook();
|
||||
} else {
|
||||
_tableObject = undefined;
|
||||
}
|
||||
},
|
||||
|
||||
// Helpers
|
||||
|
||||
_closeIfNeed: function () {
|
||||
if (!this._isTableInStack()) {
|
||||
PE.getController('EditContainer').hideModal();
|
||||
}
|
||||
},
|
||||
|
||||
_isTableInStack: function () {
|
||||
var tableExist = false;
|
||||
|
||||
_.some(_stack, function(object) {
|
||||
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
|
||||
tableExist = true;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
return tableExist;
|
||||
},
|
||||
|
||||
onApiInitTemplates: function(templates) {
|
||||
var styles = [];
|
||||
|
||||
_.each(templates, function(template){
|
||||
styles.push({
|
||||
imageUrl : template.get_Image(),
|
||||
templateId : template.get_Id()
|
||||
});
|
||||
});
|
||||
|
||||
this.getView('EditTable').updateStyles(styles);
|
||||
}
|
||||
}
|
||||
})(), PE.Controllers.EditTable || {}))
|
||||
});
|
||||
295
apps/presentationeditor/mobile/app/template/EditTable.template
Normal file
295
apps/presentationeditor/mobile/app/template/EditTable.template
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
<!-- 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"><%= scope.textRemoveTable %></a>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
<% if (android) { %>
|
||||
<a id="table-remove-all" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveTable %></a>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<ul>
|
||||
<li>
|
||||
<a id="table-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="content-block-title"><%= scope.textCellMargins %></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>
|
||||
|
||||
<!-- 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><%= scope.textBack %></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"><%= scope.textStyle %></a>
|
||||
<a href="#tab-table-fill" data-type="fill" class="tab-link"><%= scope.textFill %></a>
|
||||
<a href="#tab-table-border" data-type="border" class="tab-link"><%= scope.textBorder %></a>
|
||||
</div>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="buttons-row">
|
||||
<a href="#tab-table-style" data-type="style" class="tab-link button active"><%= scope.textStyle %></a>
|
||||
<a href="#tab-table-fill" data-type="fill" class="tab-link button"><%= scope.textFill %></a>
|
||||
<a href="#tab-table-border" data-type="border" class="tab-link button"><%= scope.textBorder %></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"><%= scope.textStyleOptions %></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;"><%= scope.textSize %></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"><%= scope.textColor %></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-table-borders-all"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type=""><i class="icon icon-table-borders-none"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="cm"><i class="icon icon-table-borders-inner"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="lrtb"><i class="icon icon-table-borders-outer"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="l"><i class="icon icon-table-borders-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-table-borders-center"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="r"><i class="icon icon-table-borders-right"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="t"><i class="icon icon-table-borders-top"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="m"><i class="icon icon-table-borders-middle"></i></a>
|
||||
<a class="button no-ripple" style="min-width:0;" data-type="b"><i class="icon icon-table-borders-bottom"></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><%= scope.textBack %></span><% } %></a></div>
|
||||
<div class="center sliding"><%= scope.textOptions %></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"><%= scope.textHeaderRow %></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"><%= scope.textTotalRow %></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"><%= scope.textBandedRow %></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"><%= scope.textFirstColumn %></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"><%= scope.textLastColumn %></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"><%= scope.textBandedColumn %></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><%= scope.textBack %></span><% } %></a></div>
|
||||
<div class="center sliding"><%= scope.textColor %></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>
|
||||
|
|
@ -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());
|
||||
}
|
||||
|
|
|
|||
228
apps/presentationeditor/mobile/app/view/edit/EditTable.js
Normal file
228
apps/presentationeditor/mobile/app/view/edit/EditTable.js
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/*
|
||||
*
|
||||
* (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 || {}))
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue