Merge pull request #253 from ONLYOFFICE/feature/mobile-color-picker
Feature/mobile color picker
This commit is contained in:
Julia Radzhabova
GitHub
commit
f6c7e70390
327
apps/common/mobile/lib/component/HsbColorPicker.js
Normal file
327
apps/common/mobile/lib/component/HsbColorPicker.js
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System SIA 2010-2019
|
||||
*
|
||||
* 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 20A-12 Ernesta Birznieka-Upisha
|
||||
* street, Riga, Latvia, EU, LV-1050.
|
||||
*
|
||||
* 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
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* HsbColorPicker.js
|
||||
*
|
||||
* Created by Julia Svinareva on 02/10/19
|
||||
* Copyright (c) 2019 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
if (Common === undefined)
|
||||
var Common = {};
|
||||
|
||||
Common.UI = Common.UI || {};
|
||||
|
||||
define([
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
], function ($, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
Common.UI.HsbColorPicker = Backbone.View.extend(_.extend({
|
||||
options: {
|
||||
color: '#000000'
|
||||
},
|
||||
template: _.template([
|
||||
'<div class="custom-colors <% if (phone) { %> phone <% } %>">',
|
||||
'<div class="color-picker-wheel">',
|
||||
'<svg id="id-wheel" viewBox="0 0 300 300" width="300" height="300"><%=circlesColors%></svg>',
|
||||
'<div class="color-picker-wheel-handle"></div>',
|
||||
'<div class="color-picker-sb-spectrum" style="background-color: hsl(0, 100%, 50%)">',
|
||||
'<div class="color-picker-sb-spectrum-handle"></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="right-block">',
|
||||
'<div class="color-hsb-preview">',
|
||||
'<div class="new-color-hsb-preview" style=""></div>',
|
||||
'<div class="current-color-hsb-preview" style=""></div>',
|
||||
'</div>',
|
||||
'<a href="#" class="button button-round" id="add-new-color"><i class="icon icon-plus" style="height: 30px;width: 30px;"></i></a>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
|
||||
initialize : function(options) {
|
||||
var me = this,
|
||||
el = $(me.el);
|
||||
me.currentColor = options.color;
|
||||
if(_.isObject(me.currentColor)) {
|
||||
me.currentColor = me.currentColor.color;
|
||||
}
|
||||
if (!me.currentColor) {
|
||||
me.currentColor = me.options.color;
|
||||
}
|
||||
if (me.currentColor === 'transparent') {
|
||||
me.currentColor = 'ffffff';
|
||||
}
|
||||
var colorRgb = me.colorHexToRgb(me.currentColor);
|
||||
me.currentHsl = me.colorRgbToHsl(colorRgb[0],colorRgb[1],colorRgb[2]);
|
||||
me.currentHsb = me.colorHslToHsb(me.currentHsl[0],me.currentHsl[1],me.currentHsl[2]);
|
||||
me.currentHue = [];
|
||||
|
||||
me.options = _({}).extend(me.options, options);
|
||||
me.render();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var me = this;
|
||||
|
||||
var total = 256,
|
||||
circles = '';
|
||||
for (var i = total; i > 0; i -= 1) {
|
||||
var angle = i * Math.PI / (total / 2);
|
||||
var hue = 360 / total * i;
|
||||
circles += '<circle cx="' + (150 - Math.sin(angle) * 125) + '" cy="' + (150 - Math.cos(angle) * 125) + '" r="25" fill="hsl( ' + hue + ', 100%, 50%)"></circle>';
|
||||
}
|
||||
|
||||
(me.$el || $(me.el)).html(me.template({
|
||||
circlesColors: circles,
|
||||
scope: me,
|
||||
phone: Common.SharedSettings.get('phone'),
|
||||
android: Common.SharedSettings.get('android')
|
||||
}));
|
||||
|
||||
$('.current-color-hsb-preview').css({'background-color': '#' + me.currentColor});
|
||||
|
||||
this.afterRender();
|
||||
|
||||
return me;
|
||||
},
|
||||
|
||||
afterRender: function () {
|
||||
this.$colorPicker = $('.color-picker-wheel');
|
||||
this.$colorPicker.on({
|
||||
'touchstart': this.handleTouchStart.bind(this),
|
||||
'touchmove': this.handleTouchMove.bind(this),
|
||||
'touchend': this.handleTouchEnd.bind(this)
|
||||
});
|
||||
$('#add-new-color').single('click', _.bind(this.onClickAddNewColor, this));
|
||||
this.updateCustomColor();
|
||||
},
|
||||
|
||||
colorHexToRgb: function(hex) {
|
||||
var h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) { return (r + r + g + g + b + b)});
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
|
||||
return result
|
||||
? result.slice(1).map(function (n) { return parseInt(n, 16)})
|
||||
: null;
|
||||
},
|
||||
|
||||
colorRgbToHsl: function(r, g, b) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
var max = Math.max(r, g, b);
|
||||
var min = Math.min(r, g, b);
|
||||
var d = max - min;
|
||||
var h;
|
||||
if (d === 0) h = 0;
|
||||
else if (max === r) h = ((g - b) / d) % 6;
|
||||
else if (max === g) h = (b - r) / d + 2;
|
||||
else if (max === b) h = (r - g) / d + 4;
|
||||
var l = (min + max) / 2;
|
||||
var s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
|
||||
if (h < 0) h = 360 / 60 + h;
|
||||
return [h * 60, s, l];
|
||||
},
|
||||
|
||||
colorHslToHsb: function(h, s, l) {
|
||||
var HSB = {h: h, s: 0, b: 0};
|
||||
var HSL = {h: h, s: s, l: l};
|
||||
var t = HSL.s * (HSL.l < 0.5 ? HSL.l : 1 - HSL.l);
|
||||
HSB.b = HSL.l + t;
|
||||
HSB.s = HSL.l > 0 ? 2 * t / HSB.b : HSB.s;
|
||||
return [HSB.h, HSB.s, HSB.b];
|
||||
},
|
||||
|
||||
colorHsbToHsl: function(h, s, b) {
|
||||
var HSL = {h: h, s: 0, l: 0};
|
||||
var HSB = { h: h, s: s, b: b };
|
||||
HSL.l = (2 - HSB.s) * HSB.b / 2;
|
||||
HSL.s = HSL.l && HSL.l < 1 ? HSB.s * HSB.b / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s;
|
||||
return [HSL.h, HSL.s, HSL.l];
|
||||
},
|
||||
|
||||
colorHslToRgb: function(h, s, l) {
|
||||
var c = (1 - Math.abs(2 * l - 1)) * s;
|
||||
var hp = h / 60;
|
||||
var x = c * (1 - Math.abs((hp % 2) - 1));
|
||||
var rgb1;
|
||||
if (Number.isNaN(h) || typeof h === 'undefined') {
|
||||
rgb1 = [0, 0, 0];
|
||||
} else if (hp <= 1) rgb1 = [c, x, 0];
|
||||
else if (hp <= 2) rgb1 = [x, c, 0];
|
||||
else if (hp <= 3) rgb1 = [0, c, x];
|
||||
else if (hp <= 4) rgb1 = [0, x, c];
|
||||
else if (hp <= 5) rgb1 = [x, 0, c];
|
||||
else if (hp <= 6) rgb1 = [c, 0, x];
|
||||
var m = l - (c / 2);
|
||||
var result = rgb1.map(function (n) {
|
||||
return Math.max(0, Math.min(255, Math.round(255 * (n + m))));
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
colorRgbToHex: function(r, g, b) {
|
||||
var result = [r, g, b].map( function (n) {
|
||||
var hex = n.toString(16);
|
||||
return hex.length === 1 ? ('0' + hex) : hex;
|
||||
}).join('');
|
||||
return ('#' + result);
|
||||
},
|
||||
|
||||
setHueFromWheelCoords: function (x, y) {
|
||||
var wheelCenterX = this.wheelRect.left + this.wheelRect.width / 2;
|
||||
var wheelCenterY = this.wheelRect.top + this.wheelRect.height / 2;
|
||||
var angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX);
|
||||
var angleDeg = angleRad * 180 / Math.PI + 90;
|
||||
if (angleDeg < 0) angleDeg += 360;
|
||||
angleDeg = 360 - angleDeg;
|
||||
this.currentHsl[0] = angleDeg;
|
||||
this.updateCustomColor();
|
||||
},
|
||||
|
||||
setSBFromSpecterCoords: function (x, y) {
|
||||
var s = (x - this.specterRect.left) / this.specterRect.width;
|
||||
var b = (y - this.specterRect.top) / this.specterRect.height;
|
||||
s = Math.max(0, Math.min(1, s));
|
||||
b = 1 - Math.max(0, Math.min(1, b));
|
||||
|
||||
this.currentHsb = [this.currentHsl[0], s, b];
|
||||
this.currentHsl = this.colorHsbToHsl(this.currentHsl[0], s, b);
|
||||
this.updateCustomColor();
|
||||
},
|
||||
|
||||
handleTouchStart: function (e) {
|
||||
if (this.isMoved || this.isTouched) return;
|
||||
this.touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
|
||||
this.touchCurrentX = this.touchStartX;
|
||||
this.touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
|
||||
this.touchCurrentY = this.touchStartY;
|
||||
var $targetEl = $(e.target);
|
||||
this.wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0;
|
||||
this.wheelIsTouched = $targetEl.closest('circle').length > 0;
|
||||
this.specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0;
|
||||
if (!this.specterHandleIsTouched) {
|
||||
this.specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0;
|
||||
}
|
||||
if (this.wheelIsTouched) {
|
||||
this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect();
|
||||
this.setHueFromWheelCoords(this.touchStartX, this.touchStartY);
|
||||
}
|
||||
if (this.specterIsTouched) {
|
||||
this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
|
||||
this.setSBFromSpecterCoords(this.touchStartX, this.touchStartY);
|
||||
}
|
||||
if (this.specterHandleIsTouched || this.specterIsTouched) {
|
||||
this.$el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed');
|
||||
}
|
||||
},
|
||||
|
||||
handleTouchMove: function (e) {
|
||||
if (!(this.wheelIsTouched || this.wheelHandleIsTouched) && !(this.specterIsTouched || this.specterHandleIsTouched)) return;
|
||||
this.touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
|
||||
this.touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
|
||||
e.preventDefault();
|
||||
if (!this.isMoved) {
|
||||
// First move
|
||||
this.isMoved = true;
|
||||
if (this.wheelHandleIsTouched) {
|
||||
this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect();
|
||||
}
|
||||
if (this.specterHandleIsTouched) {
|
||||
this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
if (this.wheelIsTouched || this.wheelHandleIsTouched) {
|
||||
this.setHueFromWheelCoords(this.touchCurrentX, this.touchCurrentY);
|
||||
}
|
||||
if (this.specterIsTouched || this.specterHandleIsTouched) {
|
||||
this.setSBFromSpecterCoords(this.touchCurrentX, this.touchCurrentY);
|
||||
}
|
||||
},
|
||||
|
||||
handleTouchEnd: function () {
|
||||
this.isMoved = false;
|
||||
if (this.specterIsTouched || this.specterHandleIsTouched) {
|
||||
this.$el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed');
|
||||
}
|
||||
this.wheelIsTouched = false;
|
||||
this.wheelHandleIsTouched = false;
|
||||
this.specterIsTouched = false;
|
||||
this.specterHandleIsTouched = false;
|
||||
},
|
||||
|
||||
updateCustomColor: function (first) {
|
||||
var specterWidth = this.$el.find('.color-picker-sb-spectrum')[0].offsetWidth,
|
||||
specterHeight = this.$el.find('.color-picker-sb-spectrum')[0].offsetHeight,
|
||||
wheelSize = this.$el.find('.color-picker-wheel')[0].offsetWidth,
|
||||
wheelHalfSize = wheelSize / 2,
|
||||
angleRad = this.currentHsl[0] * Math.PI / 180,
|
||||
handleSize = wheelSize / 6,
|
||||
handleHalfSize = handleSize / 2,
|
||||
tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize,
|
||||
tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
|
||||
this.$el.find('.color-picker-wheel-handle')
|
||||
.css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'})
|
||||
.css({transform: 'translate(' + tX + 'px,' + tY + 'px)'});
|
||||
|
||||
this.$el.find('.color-picker-sb-spectrum')
|
||||
.css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'});
|
||||
|
||||
if (this.currentHsb && this.currentHsl) {
|
||||
this.$el.find('.color-picker-sb-spectrum-handle')
|
||||
.css({'background-color': 'hsl(' + this.currentHsl[0] + ', ' + (this.currentHsl[1] * 100) + '%,' + (this.currentHsl[2] * 100) + '%)'})
|
||||
.css({transform: 'translate(' + specterWidth * this.currentHsb[1] + 'px, ' + specterHeight * (1 - this.currentHsb[2]) + 'px)'});
|
||||
}
|
||||
var color = this.colorHslToRgb(this.currentHsl[0], this.currentHsl[1], this.currentHsl[2]);
|
||||
this.currentColor = this.colorRgbToHex(color[0], color[1], color[2]);
|
||||
$('.new-color-hsb-preview').css({'background-color': this.currentColor});
|
||||
|
||||
},
|
||||
|
||||
onClickAddNewColor: function() {
|
||||
var color = this.currentColor;
|
||||
if (color) {
|
||||
if (color.charAt(0) === '#') {
|
||||
color = color.substr(1);
|
||||
}
|
||||
this.trigger('addcustomcolor', this, color);
|
||||
}
|
||||
}
|
||||
|
||||
}, Common.UI.HsbColorPicker || {}));
|
||||
});
|
||||
|
|
@ -97,6 +97,21 @@ define([
|
|||
'</div>',
|
||||
'</div>',
|
||||
'</li>',
|
||||
'<li class="dynamic-colors">',
|
||||
'<div style="padding: 15px 0 0 15px;"><%= me.textCustomColors %></div>',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<% _.each(dynamicColors, function(color, index) { %>',
|
||||
'<a data-color="<%=color%>" style="background:#<%=color%>"></a>',
|
||||
'<% }); %>',
|
||||
'<% if (dynamicColors.length < me.options.dynamiccolors) { %>',
|
||||
'<% for(var i = dynamicColors.length; i < me.options.dynamiccolors; i++) { %>',
|
||||
'<a data-color="empty" style="background:#ffffff"></a>',
|
||||
'<% } %>',
|
||||
'<% } %>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
|
|
@ -133,9 +148,15 @@ define([
|
|||
themeColors[row].push(effect);
|
||||
});
|
||||
|
||||
// custom color
|
||||
this.dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
|
||||
this.dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : [];
|
||||
|
||||
|
||||
$(me.el).append(me.template({
|
||||
themeColors: themeColors,
|
||||
standartColors: standartColors
|
||||
standartColors: standartColors,
|
||||
dynamicColors: me.dynamicColors
|
||||
}));
|
||||
|
||||
return me;
|
||||
|
|
@ -157,29 +178,26 @@ define([
|
|||
el = $(me.el),
|
||||
$target = $(e.currentTarget);
|
||||
|
||||
el.find('.color-palette a').removeClass('active');
|
||||
$target.addClass('active');
|
||||
|
||||
var color = $target.data('color').toString(),
|
||||
effectId = $target.data('effectid');
|
||||
|
||||
if (color !== 'empty') {
|
||||
el.find('.color-palette a').removeClass('active');
|
||||
$target.addClass('active');
|
||||
me.currentColor = color;
|
||||
|
||||
if (effectId) {
|
||||
me.currentColor = {color: color, effectId: effectId};
|
||||
}
|
||||
|
||||
me.trigger('select', me, me.currentColor);
|
||||
} else {
|
||||
me.fireEvent('customcolor', me);
|
||||
}
|
||||
},
|
||||
|
||||
select: function(color) {
|
||||
var me = this,
|
||||
el = $(me.el);
|
||||
|
||||
if (color == me.currentColor) {
|
||||
return;
|
||||
}
|
||||
|
||||
me.currentColor = color;
|
||||
|
||||
me.clearSelection();
|
||||
|
|
@ -195,11 +213,10 @@ define([
|
|||
color = /#?([a-fA-F0-9]{6})/.exec(color)[1];
|
||||
}
|
||||
|
||||
if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1) {
|
||||
el.find('.standart-colors a[data-color=' + color + ']').addClass('active');
|
||||
} else {
|
||||
el.find('.custom-colors a[data-color=' + color + ']').addClass('active');
|
||||
if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1 || _.indexOf(this.dynamicColors, color) > -1) {
|
||||
el.find('.color-palette a[data-color=' + color + ']').first().addClass('active');
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -208,7 +225,43 @@ define([
|
|||
$(this.el).find('.color-palette a').removeClass('active');
|
||||
},
|
||||
|
||||
saveDynamicColor: function(color) {
|
||||
var key_name = 'asc.'+Common.localStorage.getId()+'.colors.custom';
|
||||
var colors = Common.localStorage.getItem(key_name);
|
||||
colors = colors ? colors.split(',') : [];
|
||||
if (colors.push(color) > this.options.dynamiccolors) colors.shift();
|
||||
this.dynamicColors = colors;
|
||||
Common.localStorage.setItem(key_name, colors.join().toUpperCase());
|
||||
},
|
||||
|
||||
updateDynamicColors: function() {
|
||||
var me = this;
|
||||
var dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
|
||||
dynamicColors = dynamicColors ? dynamicColors.toLowerCase().split(',') : [];
|
||||
var templateColors = '';
|
||||
_.each(dynamicColors, function(color) {
|
||||
templateColors += '<a data-color="' + color + '" style="background:#' + color + '"></a>';
|
||||
});
|
||||
if (dynamicColors.length < this.options.dynamiccolors) {
|
||||
for (var i = dynamicColors.length; i < this.options.dynamiccolors; i++) {
|
||||
templateColors += '<a data-color="empty" style="background-color: #ffffff;"></a>';
|
||||
}
|
||||
}
|
||||
$(this.el).find('.dynamic-colors .item-inner').html(_.template(templateColors));
|
||||
$(this.el).find('.color-palette .dynamic-colors a').on('click', _.bind(this.onColorClick, this));
|
||||
},
|
||||
|
||||
addNewDynamicColor: function(colorPicker, color) {
|
||||
if (color) {
|
||||
this.saveDynamicColor(color);
|
||||
this.updateDynamicColors();
|
||||
this.trigger('select', this, color);
|
||||
this.select(color);
|
||||
}
|
||||
},
|
||||
|
||||
textThemeColors: 'Theme Colors',
|
||||
textStandartColors: 'Standard Colors'
|
||||
textStandartColors: 'Standard Colors',
|
||||
textCustomColors: 'Custom Colors'
|
||||
}, Common.UI.ThemeColorPalette || {}));
|
||||
});
|
||||
|
|
@ -35,9 +35,132 @@
|
|||
}
|
||||
}
|
||||
|
||||
.standart-colors {
|
||||
.standart-colors, .dynamic-colors {
|
||||
.item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
&.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
.button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
&.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
.new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.list-block ul:before, .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.color-picker-wheel-handle {
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 6);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
&.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.standart-colors {
|
||||
.standart-colors, .dynamic-colors {
|
||||
.item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -44,4 +44,128 @@
|
|||
&.list-block:last-child li:last-child a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
&.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
.button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: @themeColor;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
&.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.list-block ul:before, .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.color-picker-wheel-handle {
|
||||
width: calc(100% / 6);
|
||||
height: calc(100% / 6);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
&.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -372,3 +372,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-chart-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-chart-custom-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.textCustomColor %></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-chart-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -185,3 +185,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-paragraph-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-paragraph-custom-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.textCustomColor %></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-paragraph-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -449,3 +449,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-shape-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-shape-custom-color">
|
||||
<div class="left sliding back-fill"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
|
||||
<div class="center sliding"><%= scope.textCustomColor %></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-shape-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -451,3 +451,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-table-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-table-custom-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.textCustomColor %></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-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -408,3 +408,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-text-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-text-custom-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.textCustomColor %></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-text-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -220,6 +220,24 @@ define([
|
|||
el: $('#tab-chart-fill'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-chart-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-chart-fill').append(template({scope: this}));
|
||||
$('#edit-chart-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
|
|
@ -236,16 +254,71 @@ define([
|
|||
},
|
||||
|
||||
showBorderColor: function () {
|
||||
var me = this;
|
||||
var selector = '#edit-chart-border-color-view';
|
||||
this.showPage(selector, true);
|
||||
|
||||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-chart-border-color] .page-content')
|
||||
});
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-chart-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-chart-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showCustomFillColor: function() {
|
||||
var me = this,
|
||||
selector = '#edit-chart-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-chart-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showCustomBorderColor: function() {
|
||||
var me = this,
|
||||
selector = '#edit-chart-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-chart-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
textStyle: 'Style',
|
||||
textWrap: 'Wrap',
|
||||
textReorder: 'Reorder',
|
||||
|
|
@ -270,7 +343,9 @@ define([
|
|||
textFill: 'Fill',
|
||||
textBorder: 'Border',
|
||||
textSize: 'Size',
|
||||
textColor: 'Color'
|
||||
textColor: 'Color',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), DE.Views.EditChart || {}))
|
||||
});
|
||||
|
|
@ -150,6 +150,24 @@ define([
|
|||
el: $('.page[data-page=edit-paragraph-color] .page-content'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteBackgroundColor.on('customcolor', function () {
|
||||
me.showCustomColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-paragraph-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-paragraph-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-paragraph-add-custom-color').single('click', _.bind(this.showCustomColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-paragraph-color]', '.page[data-page=edit-paragraph-color] .page-content');
|
||||
this.fireEvent('page:show', [this, '#edit-paragraph-color']);
|
||||
|
|
@ -160,6 +178,23 @@ define([
|
|||
Common.Utils.addScrollIfNeed('.page[data-page=edit-paragraph-advanced]', '.page[data-page=edit-paragraph-advanced] .page-content');
|
||||
},
|
||||
|
||||
showCustomColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-paragraph-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-paragraph-custom-color] .page-content'),
|
||||
color: me.paletteBackgroundColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
textBackground: 'Background',
|
||||
textAdvSettings: 'Advanced settings',
|
||||
textPrgStyles: 'Paragraph styles',
|
||||
|
|
@ -174,7 +209,9 @@ define([
|
|||
textPageBreak: 'Page Break Before',
|
||||
textOrphan: 'Orphan Control',
|
||||
textKeepLines: 'Keep Lines Together',
|
||||
textKeepNext: 'Keep with Next'
|
||||
textKeepNext: 'Keep with Next',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), DE.Views.EditParagraph || {}))
|
||||
});
|
||||
|
|
@ -44,7 +44,8 @@ define([
|
|||
'text!documenteditor/mobile/app/template/EditShape.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
'backbone',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -144,6 +145,7 @@ define([
|
|||
},
|
||||
|
||||
showStyle: function () {
|
||||
var me = this;
|
||||
var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill';
|
||||
this.showPage(selector, true);
|
||||
|
||||
|
|
@ -154,8 +156,25 @@ define([
|
|||
el: $('#tab-shape-fill'),
|
||||
transparent: true
|
||||
});
|
||||
|
||||
// Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-shape-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-shape-fill').append(template({scope: this}));
|
||||
$('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
Common.Utils.addScrollIfNeed('.page.shape-style', '.page.shape-style .page-content');
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
|
|
@ -181,10 +200,64 @@ define([
|
|||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-shape-border-color] .page-content')
|
||||
});
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-shape-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-shape-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showCustomFillColor: function() {
|
||||
var me = this,
|
||||
selector = '#edit-shape-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-shape-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showCustomBorderColor: function() {
|
||||
var me = this,
|
||||
selector = '#edit-shape-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-shape-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
textStyle: 'Style',
|
||||
textWrap: 'Wrap',
|
||||
textReplace: 'Replace',
|
||||
|
|
@ -211,7 +284,9 @@ define([
|
|||
textEffects: 'Effects',
|
||||
textSize: 'Size',
|
||||
textColor: 'Color',
|
||||
textOpacity: 'Opacity'
|
||||
textOpacity: 'Opacity',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), DE.Views.EditShape || {}))
|
||||
});
|
||||
|
|
@ -190,12 +190,31 @@ define([
|
|||
},
|
||||
|
||||
showTableStyle: function () {
|
||||
var me = this;
|
||||
this.showPage('#edit-table-style', true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#tab-table-fill'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-table-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-table-fill').append(template({scope: this}));
|
||||
$('#edit-table-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, '#edit-table-style']);
|
||||
},
|
||||
|
|
@ -206,6 +225,24 @@ define([
|
|||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-table-border-color] .page-content')
|
||||
});
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-table-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-table-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-table-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
|
||||
},
|
||||
|
|
@ -218,6 +255,42 @@ define([
|
|||
this.showPage('#edit-table-style-options-view');
|
||||
},
|
||||
|
||||
showCustomFillColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-table-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-table-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showCustomBorderColor: function() {
|
||||
var me = this,
|
||||
selector = '#edit-table-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-table-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
textRemoveTable: 'Remove Table',
|
||||
textTableOptions: 'Table Options',
|
||||
textStyle: 'Style',
|
||||
|
|
@ -242,7 +315,9 @@ define([
|
|||
textBandedRow: 'Banded Row',
|
||||
textFirstColumn: 'First Column',
|
||||
textLastColumn: 'Last Column',
|
||||
textBandedColumn: 'Banded Column'
|
||||
textBandedColumn: 'Banded Column',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), DE.Views.EditTable || {}))
|
||||
});
|
||||
|
|
@ -200,11 +200,46 @@ define([
|
|||
this.paletteTextColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-text-font-color] .page-content')
|
||||
});
|
||||
this.paletteTextColor.on('customcolor', function () {
|
||||
me.showCustomFontColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-text-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-text-font-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-text-add-custom-color').single('click', _.bind(this.showCustomFontColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
|
||||
this.fireEvent('page:show', [this, '#edit-text-color']);
|
||||
},
|
||||
|
||||
showCustomFontColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-text-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-text-custom-color] .page-content'),
|
||||
color: me.paletteTextColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteTextColor.addNewDynamicColor(colorPicker, color);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showBackgroundColor: function () {
|
||||
this.showPage('#edit-text-background', true);
|
||||
|
||||
|
|
@ -212,11 +247,46 @@ define([
|
|||
el: $('.page[data-page=edit-text-font-background] .page-content'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteBackgroundColor.on('customcolor', function () {
|
||||
me.showCustomBackgroundColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-text-add-custom-background-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-text-font-background] .page-content').append(template({scope: this}));
|
||||
$('#edit-text-add-custom-background-color').single('click', _.bind(this.showCustomBackgroundColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-background]', '.page[data-page=edit-text-font-background] .page-content');
|
||||
this.fireEvent('page:show', [this, '#edit-text-background']);
|
||||
},
|
||||
|
||||
showCustomBackgroundColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-text-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBackgroundColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-text-custom-color] .page-content'),
|
||||
color: me.paletteBackgroundColor.currentColor
|
||||
});
|
||||
me.customBackgroundColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
|
||||
DE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showAdditional: function () {
|
||||
this.showPage('#edit-text-additional');
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-additional]', '.page[data-page=edit-text-additional] .page-content');
|
||||
|
|
@ -259,7 +329,9 @@ define([
|
|||
textCharacterBold: 'B',
|
||||
textCharacterItalic: 'I',
|
||||
textCharacterUnderline: 'U',
|
||||
textCharacterStrikethrough: 'S'
|
||||
textCharacterStrikethrough: 'S',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), DE.Views.EditText || {}))
|
||||
});
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
"Common.Controllers.Collaboration.textWidow": "Widow control",
|
||||
"Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
|
||||
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
|
||||
"Common.UI.ThemeColorPalette.textCustomColors": "Custom Colors",
|
||||
"Common.Utils.Metric.txtCm": "cm",
|
||||
"Common.Utils.Metric.txtPt": "pt",
|
||||
"Common.Views.Collaboration.textAcceptAllChanges": "Accept All Changes",
|
||||
|
|
@ -318,6 +319,8 @@
|
|||
"DE.Views.EditChart.textTopBottom": "Top and Bottom",
|
||||
"DE.Views.EditChart.textType": "Type",
|
||||
"DE.Views.EditChart.textWrap": "Wrap",
|
||||
"DE.Views.EditChart.textAddCustomColor": "Add Custom Color",
|
||||
"DE.Views.EditChart.textCustomColor": "Custom Color",
|
||||
"DE.Views.EditHeader.textDiffFirst": "Different first page",
|
||||
"DE.Views.EditHeader.textDiffOdd": "Different odd and even pages",
|
||||
"DE.Views.EditHeader.textFrom": "Start at",
|
||||
|
|
@ -371,6 +374,8 @@
|
|||
"DE.Views.EditParagraph.textPageBreak": "Page Break Before",
|
||||
"DE.Views.EditParagraph.textPrgStyles": "Paragraph styles",
|
||||
"DE.Views.EditParagraph.textSpaceBetween": "Space Between Paragraphs",
|
||||
"DE.Views.EditParagraph.textAddCustomColor": "Add Custom Color",
|
||||
"DE.Views.EditParagraph.textCustomColor": "Custom Color",
|
||||
"DE.Views.EditShape.textAlign": "Align",
|
||||
"DE.Views.EditShape.textBack": "Back",
|
||||
"DE.Views.EditShape.textBackward": "Move Backward",
|
||||
|
|
@ -398,6 +403,8 @@
|
|||
"DE.Views.EditShape.textTopAndBottom": "Top and Bottom",
|
||||
"DE.Views.EditShape.textWithText": "Move with Text",
|
||||
"DE.Views.EditShape.textWrap": "Wrap",
|
||||
"DE.Views.EditShape.textAddCustomColor": "Add Custom Color",
|
||||
"DE.Views.EditShape.textCustomColor": "Custom Color",
|
||||
"DE.Views.EditTable.textAlign": "Align",
|
||||
"DE.Views.EditTable.textBack": "Back",
|
||||
"DE.Views.EditTable.textBandedColumn": "Banded Column",
|
||||
|
|
@ -423,6 +430,8 @@
|
|||
"DE.Views.EditTable.textTotalRow": "Total Row",
|
||||
"DE.Views.EditTable.textWithText": "Move with Text",
|
||||
"DE.Views.EditTable.textWrap": "Wrap",
|
||||
"DE.Views.EditTable.textAddCustomColor": "Add Custom Color",
|
||||
"DE.Views.EditTable.textCustomColor": "Custom Color",
|
||||
"DE.Views.EditText.textAdditional": "Additional",
|
||||
"DE.Views.EditText.textAdditionalFormat": "Additional Formatting",
|
||||
"DE.Views.EditText.textAllCaps": "All Caps",
|
||||
|
|
@ -448,6 +457,8 @@
|
|||
"DE.Views.EditText.textSmallCaps": "Small Caps",
|
||||
"DE.Views.EditText.textStrikethrough": "Strikethrough",
|
||||
"DE.Views.EditText.textSubscript": "Subscript",
|
||||
"DE.Views.EditText.textAddCustomColor": "Add Custom Color",
|
||||
"DE.Views.EditText.textCustomColor": "Custom Color",
|
||||
"DE.Views.Search.textCase": "Case sensitive",
|
||||
"DE.Views.Search.textDone": "Done",
|
||||
"DE.Views.Search.textFind": "Find",
|
||||
|
|
|
|||
|
|
@ -6218,9 +6218,127 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
|
|||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette .standart-colors .item-inner {
|
||||
.color-palette .standart-colors .item-inner,
|
||||
.color-palette .dynamic-colors .item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
}
|
||||
.custom-colors.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.custom-colors.phone .button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.custom-colors .right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.custom-colors .button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.custom-colors .button-round.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-colors .color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
.custom-colors .new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .list-block ul:before,
|
||||
.custom-colors .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.custom-colors .list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.custom-colors .color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||
width: calc(16.66666667%);
|
||||
height: calc(16.66666667%);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
.about .page-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -7081,7 +7199,6 @@ html.pixel-ratio-3 .numbers li {
|
|||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.doc-placeholder {
|
||||
background: #fbfbfb;
|
||||
width: 100%;
|
||||
|
|
@ -7097,7 +7214,6 @@ html.pixel-ratio-3 .numbers li {
|
|||
background: #e2e2e2;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
|
|
|
|||
|
|
@ -5809,12 +5809,130 @@ html.phone .document-menu .list-block .item-link {
|
|||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette .standart-colors .item-inner {
|
||||
.color-palette .standart-colors .item-inner,
|
||||
.color-palette .dynamic-colors .item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette.list-block:last-child li:last-child a {
|
||||
border-radius: 0;
|
||||
}
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
}
|
||||
.custom-colors.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.custom-colors.phone .button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.custom-colors .right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.custom-colors .button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: #446995;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.custom-colors .button-round.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-colors .color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.custom-colors .new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .list-block ul:before,
|
||||
.custom-colors .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.custom-colors .list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.custom-colors .color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||
width: calc(16.66666667%);
|
||||
height: calc(16.66666667%);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
.about .page-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -6867,7 +6985,6 @@ html.pixel-ratio-3 .numbers li {
|
|||
background: #e2e2e2;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
||||
|
|
|
|||
|
|
@ -302,3 +302,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-chart-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-chart-custom-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.textCustomColor %></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-chart-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -379,3 +379,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-shape-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-shape-custom-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.textCustomColor %></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-shape-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -321,3 +321,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-slide-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-slide-custom-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.textCustomColor %></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-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -473,3 +473,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-table-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-table-custom-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.textCustomColor %></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-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -407,3 +407,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-text-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-text-custom-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.textCustomColor %></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-text-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,7 +45,9 @@ define([
|
|||
'text!presentationeditor/mobile/app/template/EditChart.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -220,6 +222,7 @@ define([
|
|||
},
|
||||
|
||||
showStyle: function () {
|
||||
var me = this;
|
||||
var selector = '#edit-chart-style';
|
||||
this.showPage(selector, true);
|
||||
|
||||
|
|
@ -227,16 +230,52 @@ define([
|
|||
el: $('#tab-chart-fill'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-chart-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-chart-fill').append(template({scope: this}));
|
||||
$('#edit-chart-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showCustomFillColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-chart-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-chart-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showReorder: function () {
|
||||
this.showPage('#edit-chart-reorder');
|
||||
Common.Utils.addScrollIfNeed('.page.chart-reorder', '.page.chart-reorder .page-content');
|
||||
},
|
||||
|
||||
showBorderColor: function () {
|
||||
var me = this;
|
||||
var selector = '#edit-chart-border-color-view';
|
||||
this.showPage(selector, true);
|
||||
|
||||
|
|
@ -244,9 +283,47 @@ define([
|
|||
el: $('.page[data-page=edit-chart-border-color] .page-content')
|
||||
});
|
||||
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-chart-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-chart-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showCustomBorderColor: function() {
|
||||
var me = this,
|
||||
selector = '#edit-chart-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-chart-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showAlign: function () {
|
||||
this.showPage('#edit-chart-align');
|
||||
Common.Utils.addScrollIfNeed('.page.chart-align', '.page.chart-align .page-content');
|
||||
|
|
@ -273,7 +350,9 @@ define([
|
|||
textAlignBottom: 'Align Bottom',
|
||||
textAlignMiddle: 'Align Middle',
|
||||
txtDistribHor: 'Distribute Horizontally',
|
||||
txtDistribVert: 'Distribute Vertically'
|
||||
txtDistribVert: 'Distribute Vertically',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), PE.Views.EditChart || {}))
|
||||
});
|
||||
|
|
@ -44,7 +44,9 @@ define([
|
|||
'text!presentationeditor/mobile/app/template/EditShape.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -144,6 +146,7 @@ define([
|
|||
},
|
||||
|
||||
showStyle: function () {
|
||||
var me = this;
|
||||
var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill';
|
||||
this.showPage(selector, true);
|
||||
|
||||
|
|
@ -154,11 +157,46 @@ define([
|
|||
el: $('#tab-shape-fill'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-shape-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-shape-fill').append(template({scope: this}));
|
||||
$('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showCustomFillColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-shape-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-shape-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showReplace: function () {
|
||||
this.showPage('#edit-shape-replace');
|
||||
Common.Utils.addScrollIfNeed('.page.shape-replace', '.page.shape-replace .page-content');
|
||||
|
|
@ -175,16 +213,54 @@ define([
|
|||
},
|
||||
|
||||
showBorderColor: function () {
|
||||
var me = this;
|
||||
var selector = '#edit-shape-border-color-view';
|
||||
this.showPage(selector, true);
|
||||
|
||||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-shape-border-color] .page-content')
|
||||
});
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-shape-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-shape-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showCustomBorderColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-shape-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-shape-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
textStyle: 'Style',
|
||||
textReplace: 'Replace',
|
||||
textReorder: 'Reorder',
|
||||
|
|
@ -208,7 +284,9 @@ define([
|
|||
textAlignBottom: 'Align Bottom',
|
||||
textAlignMiddle: 'Align Middle',
|
||||
txtDistribHor: 'Distribute Horizontally',
|
||||
txtDistribVert: 'Distribute Vertically'
|
||||
txtDistribVert: 'Distribute Vertically',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), PE.Views.EditShape || {}))
|
||||
});
|
||||
|
|
@ -44,7 +44,9 @@ define([
|
|||
'text!presentationeditor/mobile/app/template/EditSlide.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -173,16 +175,52 @@ define([
|
|||
},
|
||||
|
||||
showStyle: function () {
|
||||
var me = this;
|
||||
this.showPage('#edit-slide-style', true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-slide-style] .page-content'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomSlideColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-slide-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-slide-style] .page-content').append(template({scope: this}));
|
||||
$('#edit-slide-add-custom-color').single('click', _.bind(this.showCustomSlideColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, '#edit-slide-style']);
|
||||
},
|
||||
|
||||
showCustomSlideColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-slide-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-slide-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showLayout: function () {
|
||||
this.showPage('#edit-slide-layout', true);
|
||||
|
||||
|
|
@ -397,7 +435,9 @@ define([
|
|||
textZoomRotate: 'Zoom and Rotate',
|
||||
textStartOnClick: 'Start On Click',
|
||||
textDelay: 'Delay',
|
||||
textApplyAll: 'Apply to All Slides'
|
||||
textApplyAll: 'Apply to All Slides',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), PE.Views.EditSlide || {}))
|
||||
});
|
||||
|
|
@ -45,7 +45,8 @@ define([
|
|||
'jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette'
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -193,26 +194,100 @@ define([
|
|||
},
|
||||
|
||||
showTableStyle: function () {
|
||||
var me = this;
|
||||
this.showPage('#edit-table-style', true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#tab-table-fill'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-table-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-table-fill').append(template({scope: this}));
|
||||
$('#edit-table-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, '#edit-table-style']);
|
||||
},
|
||||
|
||||
showCustomFillColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-table-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-table-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showBorderColor: function () {
|
||||
var me = this;
|
||||
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.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-table-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-table-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-table-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
|
||||
},
|
||||
|
||||
showCustomBorderColor: function() {
|
||||
var me = this,
|
||||
selector = '#edit-table-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-table-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showTableStyleOptions: function () {
|
||||
this.showPage('#edit-table-style-options-view');
|
||||
},
|
||||
|
|
@ -257,7 +332,9 @@ define([
|
|||
textAlignBottom: 'Align Bottom',
|
||||
textAlignMiddle: 'Align Middle',
|
||||
txtDistribHor: 'Distribute Horizontally',
|
||||
txtDistribVert: 'Distribute Vertically'
|
||||
txtDistribVert: 'Distribute Vertically',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), PE.Views.EditTable || {}))
|
||||
});
|
||||
|
|
@ -45,7 +45,8 @@ define([
|
|||
'jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette'
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -196,16 +197,52 @@ define([
|
|||
},
|
||||
|
||||
showFontColor: function () {
|
||||
var me = this;
|
||||
this.showPage('#edit-text-color', true);
|
||||
|
||||
this.paletteTextColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-text-font-color] .page-content')
|
||||
});
|
||||
this.paletteTextColor.on('customcolor', function () {
|
||||
me.showCustomFontColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-text-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-text-font-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-text-add-custom-color').single('click', _.bind(this.showCustomFontColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
|
||||
this.fireEvent('page:show', [this, '#edit-text-color']);
|
||||
},
|
||||
|
||||
showCustomFontColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-text-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-text-custom-color] .page-content'),
|
||||
color: me.paletteTextColor.currentColor
|
||||
});
|
||||
me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteTextColor.addNewDynamicColor(colorPicker, color);
|
||||
PE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showAdditional: function () {
|
||||
this.showPage('#edit-text-additional');
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-additional]', '.page[data-page=edit-text-additional] .page-content');
|
||||
|
|
@ -249,7 +286,9 @@ define([
|
|||
textCharacterBold: 'B',
|
||||
textCharacterItalic: 'I',
|
||||
textCharacterUnderline: 'U',
|
||||
textCharacterStrikethrough: 'S'
|
||||
textCharacterStrikethrough: 'S',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), PE.Views.EditText || {}))
|
||||
});
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
"Common.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
|
||||
"Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
|
||||
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
|
||||
"Common.UI.ThemeColorPalette.textCustomColors": "Custom Colors",
|
||||
"Common.Utils.Metric.txtCm": "cm",
|
||||
"Common.Utils.Metric.txtPt": "pt",
|
||||
"Common.Views.Collaboration.textBack": "Back",
|
||||
|
|
@ -275,6 +276,8 @@
|
|||
"PE.Views.EditChart.textType": "Type",
|
||||
"PE.Views.EditChart.txtDistribHor": "Distribute Horizontally",
|
||||
"PE.Views.EditChart.txtDistribVert": "Distribute Vertically",
|
||||
"PE.Views.EditChart.textAddCustomColor": "Add Custom Color",
|
||||
"PE.Views.EditChart.textCustomColor": "Custom Color",
|
||||
"PE.Views.EditImage.textAddress": "Address",
|
||||
"PE.Views.EditImage.textAlign": "Align",
|
||||
"PE.Views.EditImage.textAlignBottom": "Align Bottom",
|
||||
|
|
@ -338,6 +341,8 @@
|
|||
"PE.Views.EditShape.textToForeground": "Bring to Foreground",
|
||||
"PE.Views.EditShape.txtDistribHor": "Distribute Horizontally",
|
||||
"PE.Views.EditShape.txtDistribVert": "Distribute Vertically",
|
||||
"PE.Views.EditShape.textAddCustomColor": "Add Custom Color",
|
||||
"PE.Views.EditShape.textCustomColor": "Custom Color",
|
||||
"PE.Views.EditSlide.textApplyAll": "Apply to All Slides",
|
||||
"PE.Views.EditSlide.textBack": "Back",
|
||||
"PE.Views.EditSlide.textBlack": "Through Black",
|
||||
|
|
@ -383,6 +388,8 @@
|
|||
"PE.Views.EditSlide.textZoomIn": "Zoom In",
|
||||
"PE.Views.EditSlide.textZoomOut": "Zoom Out",
|
||||
"PE.Views.EditSlide.textZoomRotate": "Zoom and Rotate",
|
||||
"PE.Views.EditSlide.textAddCustomColor": "Add Custom Color",
|
||||
"PE.Views.EditSlide.textCustomColor": "Custom Color",
|
||||
"PE.Views.EditTable.textAlign": "Align",
|
||||
"PE.Views.EditTable.textAlignBottom": "Align Bottom",
|
||||
"PE.Views.EditTable.textAlignCenter": "Align Center",
|
||||
|
|
@ -414,6 +421,8 @@
|
|||
"PE.Views.EditTable.textTotalRow": "Total Row",
|
||||
"PE.Views.EditTable.txtDistribHor": "Distribute Horizontally",
|
||||
"PE.Views.EditTable.txtDistribVert": "Distribute Vertically",
|
||||
"PE.Views.EditTable.textAddCustomColor": "Add Custom Color",
|
||||
"PE.Views.EditTable.textCustomColor": "Custom Color",
|
||||
"PE.Views.EditText.textAdditional": "Additional",
|
||||
"PE.Views.EditText.textAdditionalFormat": "Additional Formatting",
|
||||
"PE.Views.EditText.textAfter": "After",
|
||||
|
|
@ -440,6 +449,8 @@
|
|||
"PE.Views.EditText.textSmallCaps": "Small Caps",
|
||||
"PE.Views.EditText.textStrikethrough": "Strikethrough",
|
||||
"PE.Views.EditText.textSubscript": "Subscript",
|
||||
"PE.Views.EditText.textAddCustomColor": "Add Custom Color",
|
||||
"PE.Views.EditText.textCustomColor": "Custom Color",
|
||||
"PE.Views.Search.textCase": "Case sensitive",
|
||||
"PE.Views.Search.textDone": "Done",
|
||||
"PE.Views.Search.textFind": "Find",
|
||||
|
|
|
|||
|
|
@ -6218,9 +6218,127 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
|
|||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette .standart-colors .item-inner {
|
||||
.color-palette .standart-colors .item-inner,
|
||||
.color-palette .dynamic-colors .item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
}
|
||||
.custom-colors.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.custom-colors.phone .button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.custom-colors .right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.custom-colors .button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.custom-colors .button-round.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-colors .color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
.custom-colors .new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .list-block ul:before,
|
||||
.custom-colors .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.custom-colors .list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.custom-colors .color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||
width: calc(16.66666667%);
|
||||
height: calc(16.66666667%);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
.about .page-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5809,12 +5809,130 @@ html.phone .document-menu .list-block .item-link {
|
|||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette .standart-colors .item-inner {
|
||||
.color-palette .standart-colors .item-inner,
|
||||
.color-palette .dynamic-colors .item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette.list-block:last-child li:last-child a {
|
||||
border-radius: 0;
|
||||
}
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
}
|
||||
.custom-colors.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.custom-colors.phone .button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.custom-colors .right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.custom-colors .button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: #aa5252;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.custom-colors .button-round.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-colors .color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.custom-colors .new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .list-block ul:before,
|
||||
.custom-colors .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.custom-colors .list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.custom-colors .color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||
width: calc(16.66666667%);
|
||||
height: calc(16.66666667%);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
.about .page-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -215,11 +215,9 @@ define([
|
|||
},
|
||||
|
||||
initBorderColorPage: function () {
|
||||
var me = this,
|
||||
palette = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-border-color] .page-content')
|
||||
});
|
||||
|
||||
var me = this;
|
||||
me.getView('EditCell').showBorderColorPage();
|
||||
var palette = me.getView('EditCell').paletteBorderColor;
|
||||
if (palette) {
|
||||
palette.select(_borderInfo.color);
|
||||
palette.on('select', _.bind(function (palette, color) {
|
||||
|
|
|
|||
|
|
@ -204,10 +204,7 @@ define([
|
|||
|
||||
// Fill
|
||||
|
||||
var paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#tab-chart-fill'),
|
||||
transparent: true
|
||||
});
|
||||
var paletteFillColor = this.getView('EditChart').paletteFillColor;
|
||||
|
||||
paletteFillColor.on('select', _.bind(me.onFillColor, me));
|
||||
|
||||
|
|
@ -533,9 +530,7 @@ define([
|
|||
|
||||
initBorderColorPage: function () {
|
||||
var me = this,
|
||||
palette = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-chart-border-color] .page-content')
|
||||
});
|
||||
palette = me.getView('EditChart').paletteBorderColor;
|
||||
|
||||
if (palette) {
|
||||
palette.select(_borderInfo.color);
|
||||
|
|
|
|||
|
|
@ -161,11 +161,7 @@ define([
|
|||
|
||||
// Fill
|
||||
|
||||
var paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#tab-shape-fill'),
|
||||
transparent: true
|
||||
});
|
||||
|
||||
var paletteFillColor = me.getView('EditShape').paletteFillColor;
|
||||
paletteFillColor.on('select', _.bind(me.onFillColor, me));
|
||||
|
||||
var fill = shapeProperties.asc_getFill(),
|
||||
|
|
@ -223,9 +219,7 @@ define([
|
|||
|
||||
initBorderColorPage: function () {
|
||||
var me = this,
|
||||
palette = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-shape-border-color-view] .page-content')
|
||||
});
|
||||
palette = me.getView('EditShape').paletteBorderColor;
|
||||
|
||||
if (palette) {
|
||||
palette.select(_borderInfo.color);
|
||||
|
|
|
|||
|
|
@ -197,9 +197,7 @@ define([
|
|||
initTextColorPage: function () {
|
||||
var me = this,
|
||||
color = me._sdkToThemeColor(_fontInfo.color),
|
||||
palette = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-text-color] .page-content')
|
||||
});
|
||||
palette = me.getView('EditText').paletteTextColor;
|
||||
|
||||
if (palette) {
|
||||
palette.select(color);
|
||||
|
|
|
|||
|
|
@ -846,3 +846,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-cell-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-cell-custom-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.textCustomColor %></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-cell-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -624,3 +624,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-chart-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-chart-custom-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.textCustomColor %></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-chart-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -267,3 +267,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-shape-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-shape-custom-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.textCustomColor %></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-shape-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,3 +117,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Custom color view -->
|
||||
<div id="edit-text-custom-color-view">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner" data-page="edit-text-custom-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.textCustomColor %></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-text-custom-color">
|
||||
<div class="page-content">
|
||||
<!--Color HSB palette-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,7 +45,8 @@ define([
|
|||
'jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette'
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -234,28 +235,142 @@ define([
|
|||
},
|
||||
|
||||
showTextColor: function () {
|
||||
var me = this;
|
||||
this.showPage('#edit-text-color', true);
|
||||
|
||||
this.paletteTextColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-text-color] .page-content')
|
||||
});
|
||||
this.paletteTextColor.on('customcolor', function () {
|
||||
me.showCustomTextColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-cell-add-custom-text-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-text-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-cell-add-custom-text-color').single('click', _.bind(this.showCustomTextColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-color]', '.page[data-page=edit-text-color] .page-content');
|
||||
this.fireEvent('page:show', [this, '#edit-text-color']);
|
||||
},
|
||||
|
||||
showCustomTextColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-cell-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customTextColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-cell-custom-color] .page-content'),
|
||||
color: me.paletteTextColor.currentColor
|
||||
});
|
||||
me.customTextColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteTextColor.addNewDynamicColor(colorPicker, color);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showFillColor: function () {
|
||||
var me = this;
|
||||
this.showPage('#edit-fill-color', true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-fill-color] .page-content'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-cell-add-custom-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-fill-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-cell-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-fill-color]', '.page[data-page=edit-fill-color] .page-content');
|
||||
this.fireEvent('page:show', [this, '#edit-fill-color']);
|
||||
},
|
||||
|
||||
showCustomFillColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-cell-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customFillColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-cell-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showBorderColorPage: function () {
|
||||
var me = this;
|
||||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-border-color] .page-content')
|
||||
});
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-cell-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-cell-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
},
|
||||
|
||||
showCustomBorderColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-cell-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-cell-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
textBack: 'Back',
|
||||
textFonts: 'Fonts',
|
||||
textTextColor: 'Text Color',
|
||||
|
|
@ -305,7 +420,9 @@ define([
|
|||
textYen: 'Yen',
|
||||
textCharacterBold: 'B',
|
||||
textCharacterItalic: 'I',
|
||||
textCharacterUnderline: 'U'
|
||||
textCharacterUnderline: 'U',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), SSE.Views.EditCell || {}))
|
||||
});
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@ define([
|
|||
'jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette'
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -179,6 +180,8 @@ define([
|
|||
}).join(', ');
|
||||
|
||||
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
|
||||
$('#chart-style').single('click', _.bind(this.showStyle, this));
|
||||
$('#edit-chart-bordercolor').single('click', _.bind(this.showBorderColor, this));
|
||||
|
||||
$('.edit-chart-style.subnavbar.categories a').single('click', function () {
|
||||
$('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
|
||||
|
|
@ -206,6 +209,104 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
showStyle: function () {
|
||||
var me = this;
|
||||
var page = '#edit-chart-style';
|
||||
this.showPage(page, true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#tab-chart-fill'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-chart-add-custom-fill-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-chart-fill').append(template({scope: this}));
|
||||
$('#edit-chart-add-custom-fill-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-chart-style]', '.page[data-page=edit-chart-style] .page-content');
|
||||
this.fireEvent('page:show', [this, page]);
|
||||
},
|
||||
|
||||
showCustomFillColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-chart-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customFillColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-chart-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showBorderColor: function () {
|
||||
var me = this;
|
||||
var selector = '#edit-chart-border-color-view';
|
||||
this.showPage(selector, true);
|
||||
|
||||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-chart-border-color] .page-content')
|
||||
});
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-chart-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-chart-border-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
},
|
||||
|
||||
showCustomBorderColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-chart-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-chart-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
onItemClick: function (e) {
|
||||
var $target = $(e.currentTarget),
|
||||
page = $target.data('page');
|
||||
|
|
@ -266,7 +367,9 @@ define([
|
|||
textLabelPos: 'Label Position',
|
||||
textAxisPosition: 'Axis Position',
|
||||
textNone: 'None',
|
||||
textGridlines: 'Gridlines'
|
||||
textGridlines: 'Gridlines',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), SSE.Views.EditChart || {}))
|
||||
});
|
||||
|
|
@ -43,7 +43,9 @@ define([
|
|||
'text!spreadsheeteditor/mobile/app/template/EditShape.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -61,17 +63,18 @@ define([
|
|||
initialize: function () {
|
||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
|
||||
this.on('page:show', _.bind(this.updateItemHandlers, this));
|
||||
//this.on('page:show', _.bind(this.updateItemHandlers, this));
|
||||
this.isShapeCanFill = true;
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
var me = this;
|
||||
|
||||
me.updateItemHandlers();
|
||||
|
||||
$('.edit-shape-style .categories a').single('click', _.bind(me.showStyleCategory, me));
|
||||
|
||||
Common.Utils.addScrollIfNeed('#edit-shape .pages', '#edit-shape .page');
|
||||
me.updateItemHandlers();
|
||||
me.initControls();
|
||||
},
|
||||
|
||||
|
|
@ -121,6 +124,8 @@ define([
|
|||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-border-color-view]', '.page[data-page=edit-shape-border-color-view] .page-content');
|
||||
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
|
||||
$('#shape-style').single('click', _.bind(this.showStyle, this));
|
||||
$('#edit-shape-bordercolor').single('click', _.bind(this.showBorderColor, this));
|
||||
},
|
||||
|
||||
showPage: function (templateId, suspendEvent) {
|
||||
|
|
@ -146,6 +151,111 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
showStyle: function () {
|
||||
var me = this;
|
||||
var page = '#edit-shape-style';
|
||||
if (!this.isShapeCanFill) {
|
||||
page = '#edit-shape-style-nofill';
|
||||
}
|
||||
this.showPage(page, true);
|
||||
|
||||
this.paletteFillColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#tab-shape-fill'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteFillColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-cell-add-custom-fill-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('#tab-shape-fill').append(template({scope: this}));
|
||||
$('#edit-cell-add-custom-fill-color').single('click', _.bind(this.showCustomFillColor, this));
|
||||
|
||||
if (!this.isShapeCanFill)
|
||||
this.showStyleCategory();
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
|
||||
this.fireEvent('page:show', [this, page]);
|
||||
},
|
||||
|
||||
showCustomFillColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-shape-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customFillColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-shape-custom-color] .page-content'),
|
||||
color: me.paletteFillColor.currentColor
|
||||
});
|
||||
me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteFillColor.addNewDynamicColor(colorPicker, color);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showBorderColor: function () {
|
||||
var me = this;
|
||||
var selector = '#edit-shape-border-color-view';
|
||||
this.showPage(selector, true);
|
||||
|
||||
this.paletteBorderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-shape-border-color-view] .page-content')
|
||||
});
|
||||
this.paletteBorderColor.on('customcolor', function () {
|
||||
me.showCustomBorderColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-shape-add-custom-border-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-shape-border-color-view] .page-content').append(template({scope: this}));
|
||||
$('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
|
||||
|
||||
this.fireEvent('page:show', [this, selector]);
|
||||
|
||||
},
|
||||
|
||||
showCustomBorderColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-shape-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customBorderColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-shape-custom-color] .page-content'),
|
||||
color: me.paletteBorderColor.currentColor
|
||||
});
|
||||
me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
|
||||
me.paletteFillColor.updateDynamicColors();
|
||||
me.paletteFillColor.select(me.paletteFillColor.currentColor);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
showStyleCategory: function (e) {
|
||||
// remove android specific style
|
||||
$('.page[data-page=edit-shape-style] .list-block.inputs-list').removeClass('inputs-list');
|
||||
|
|
@ -156,13 +266,9 @@ define([
|
|||
page = $target.data('page');
|
||||
|
||||
if (page && page.length > 0 ) {
|
||||
if (page == '#edit-shape-style' && !this.isShapeCanFill)
|
||||
page = '#edit-shape-style-nofill';
|
||||
|
||||
this.showPage(page);
|
||||
|
||||
if (!this.isShapeCanFill)
|
||||
this.showStyleCategory();
|
||||
}
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
|
||||
|
|
@ -184,7 +290,9 @@ define([
|
|||
textEffects: 'Effects',
|
||||
textSize: 'Size',
|
||||
textColor: 'Color',
|
||||
textOpacity: 'Opacity'
|
||||
textOpacity: 'Opacity',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), SSE.Views.EditShape || {}))
|
||||
});
|
||||
|
|
@ -44,7 +44,9 @@ define([
|
|||
'text!spreadsheeteditor/mobile/app/template/EditText.template',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'backbone'
|
||||
'backbone',
|
||||
'common/mobile/lib/component/ThemeColorPalette',
|
||||
'common/mobile/lib/component/HsbColorPicker'
|
||||
], function (editTemplate, $, _, Backbone) {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -62,7 +64,6 @@ define([
|
|||
initialize: function () {
|
||||
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
|
||||
Common.NotificationCenter.on('fonts:load', _.bind(this.onApiFontsLoad, this));
|
||||
this.on('page:show', _.bind(this.updateItemHandlers, this));
|
||||
},
|
||||
|
||||
initEvents: function () {
|
||||
|
|
@ -105,6 +106,7 @@ define([
|
|||
}).join(', ');
|
||||
|
||||
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
|
||||
$('#font-color').single('click', _.bind(this.showFontColor, this));
|
||||
},
|
||||
|
||||
showPage: function (templateId, suspendEvent) {
|
||||
|
|
@ -130,6 +132,55 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
showFontColor: function () {
|
||||
var me = this;
|
||||
var page = '#edit-text-color';
|
||||
this.showPage(page, true);
|
||||
|
||||
this.paletteTextColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('.page[data-page=edit-text-color] .page-content'),
|
||||
transparent: true
|
||||
});
|
||||
this.paletteTextColor.on('customcolor', function () {
|
||||
me.showCustomFillColor();
|
||||
});
|
||||
var template = _.template(['<div class="list-block">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<a id="edit-text-add-custom-fill-color" class="item-link">',
|
||||
'<div class="item-content">',
|
||||
'<div class="item-inner">',
|
||||
'<div class="item-title"><%= scope.textAddCustomColor %></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</a>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>'].join(''));
|
||||
$('.page[data-page=edit-text-color] .page-content').append(template({scope: this}));
|
||||
$('#edit-text-add-custom-fill-color').single('click', _.bind(this.showCustomTextColor, this));
|
||||
|
||||
Common.Utils.addScrollIfNeed('.page[data-page=edit-text]', '.page[data-page=edit-text] .page-content');
|
||||
this.fireEvent('page:show', [this, page]);
|
||||
},
|
||||
|
||||
showCustomTextColor: function () {
|
||||
var me = this,
|
||||
selector = '#edit-text-custom-color-view';
|
||||
me.showPage(selector, true);
|
||||
|
||||
me.customTextColorPicker = new Common.UI.HsbColorPicker({
|
||||
el: $('.page[data-page=edit-text-custom-color] .page-content'),
|
||||
color: me.paletteTextColor.currentColor
|
||||
});
|
||||
me.customTextColorPicker.on('addcustomcolor', function (colorPicker, color) {
|
||||
me.paletteTextColor.addNewDynamicColor(colorPicker, color);
|
||||
SSE.getController('EditContainer').rootView.router.back();
|
||||
});
|
||||
|
||||
me.fireEvent('page:show', [me, selector]);
|
||||
},
|
||||
|
||||
renderFonts: function () {
|
||||
var me = this,
|
||||
$template = $(
|
||||
|
|
@ -180,7 +231,9 @@ define([
|
|||
textSize: 'Size',
|
||||
textCharacterBold: 'B',
|
||||
textCharacterItalic: 'I',
|
||||
textCharacterUnderline: 'U'
|
||||
textCharacterUnderline: 'U',
|
||||
textAddCustomColor: 'Add Custom Color',
|
||||
textCustomColor: 'Custom Color'
|
||||
}
|
||||
})(), SSE.Views.EditText || {}))
|
||||
});
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
"Common.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
|
||||
"Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
|
||||
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
|
||||
"Common.UI.ThemeColorPalette.textCustomColors": "Custom Colors",
|
||||
"Common.Utils.Metric.txtCm": "cm",
|
||||
"Common.Utils.Metric.txtPt": "pt",
|
||||
"Common.Views.Collaboration.textBack": "Back",
|
||||
|
|
@ -395,6 +396,8 @@
|
|||
"SSE.Views.EditCell.textTopBorder": "Top Border",
|
||||
"SSE.Views.EditCell.textWrapText": "Wrap Text",
|
||||
"SSE.Views.EditCell.textYen": "Yen",
|
||||
"SSE.Views.EditCell.textAddCustomColor": "Add Custom Color",
|
||||
"SSE.Views.EditCell.textCustomColor": "Custom Color",
|
||||
"SSE.Views.EditChart.textAuto": "Auto",
|
||||
"SSE.Views.EditChart.textAxisCrosses": "Axis Crosses",
|
||||
"SSE.Views.EditChart.textAxisOptions": "Axis Options",
|
||||
|
|
@ -447,6 +450,8 @@
|
|||
"SSE.Views.EditChart.textValReverseOrder": "Values in Reverse Order",
|
||||
"SSE.Views.EditChart.textVerAxis": "Vertical Axis",
|
||||
"SSE.Views.EditChart.textVertical": "Vertical",
|
||||
"SSE.Views.EditChart.textAddCustomColor": "Add Custom Color",
|
||||
"SSE.Views.EditChart.textCustomColor": "Custom Color",
|
||||
"SSE.Views.EditHyperlink.textBack": "Back",
|
||||
"SSE.Views.EditHyperlink.textDisplay": "Display",
|
||||
"SSE.Views.EditHyperlink.textEditLink": "Edit Link",
|
||||
|
|
@ -488,6 +493,8 @@
|
|||
"SSE.Views.EditShape.textStyle": "Style",
|
||||
"SSE.Views.EditShape.textToBackground": "Send to Background",
|
||||
"SSE.Views.EditShape.textToForeground": "Bring to Foreground",
|
||||
"SSE.Views.EditShape.textAddCustomColor": "Add Custom Color",
|
||||
"SSE.Views.EditShape.textCustomColor": "Custom Color",
|
||||
"SSE.Views.EditText.textBack": "Back",
|
||||
"SSE.Views.EditText.textCharacterBold": "B",
|
||||
"SSE.Views.EditText.textCharacterItalic": "I",
|
||||
|
|
@ -496,6 +503,8 @@
|
|||
"SSE.Views.EditText.textFonts": "Fonts",
|
||||
"SSE.Views.EditText.textSize": "Size",
|
||||
"SSE.Views.EditText.textTextColor": "Text Color",
|
||||
"SSE.Views.EditText.textAddCustomColor": "Add Custom Color",
|
||||
"SSE.Views.EditText.textCustomColor": "Custom Color",
|
||||
"SSE.Views.FilterOptions.textClearFilter": "Clear Filter",
|
||||
"SSE.Views.FilterOptions.textDeleteFilter": "Delete Filter",
|
||||
"SSE.Views.FilterOptions.textFilter": "Filter Options",
|
||||
|
|
|
|||
|
|
@ -6218,9 +6218,127 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
|
|||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette .standart-colors .item-inner {
|
||||
.color-palette .standart-colors .item-inner,
|
||||
.color-palette .dynamic-colors .item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
}
|
||||
.custom-colors.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.custom-colors.phone .button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.custom-colors .right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.custom-colors .button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.custom-colors .button-round.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-colors .color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
.custom-colors .new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .list-block ul:before,
|
||||
.custom-colors .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.custom-colors .list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.custom-colors .color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||
width: calc(16.66666667%);
|
||||
height: calc(16.66666667%);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
.about .page-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5819,12 +5819,130 @@ html.phone .document-menu .list-block .item-link {
|
|||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette .standart-colors .item-inner {
|
||||
.color-palette .standart-colors .item-inner,
|
||||
.color-palette .dynamic-colors .item-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
.color-palette.list-block:last-child li:last-child a {
|
||||
border-radius: 0;
|
||||
}
|
||||
.custom-colors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
}
|
||||
.custom-colors.phone {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.custom-colors.phone .button-round {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.custom-colors .right-block {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.custom-colors .button-round {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
background-color: #40865c;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-color: transparent;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.custom-colors .button-round.active-state {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-colors .color-hsb-preview {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.custom-colors .new-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .current-color-hsb-preview {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
.custom-colors .list-block ul:before,
|
||||
.custom-colors .list-block ul:after {
|
||||
content: none;
|
||||
}
|
||||
.custom-colors .list-block ul li {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.custom-colors .color-picker-wheel {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||
width: calc(16.66666667%);
|
||||
height: calc(16.66666667%);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||
background-color: #000;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
position: absolute;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 150ms;
|
||||
transition-property: transform;
|
||||
transform-origin: center;
|
||||
}
|
||||
.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||
}
|
||||
.about .page-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue