From defd8e7edb9aebaec61b785aa74a6f2deb740c27 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 27 Sep 2019 16:41:19 +0300 Subject: [PATCH 001/108] [Common mobile] Custom Color --- .../mobile/lib/component/ThemeColorPalette.js | 246 +++++++++++++++++- .../resources/less/ios/_color-palette.less | 67 +++++ .../less/material/_color-palette.less | 67 +++++ .../mobile/resources/css/app-ios.css | 66 ++++- .../mobile/resources/css/app-material.css | 65 ++++- .../mobile/resources/css/app-ios.css | 64 +++++ .../mobile/resources/css/app-material.css | 64 +++++ .../mobile/resources/css/app-ios.css | 64 +++++ .../mobile/resources/css/app-material.css | 64 +++++ 9 files changed, 762 insertions(+), 5 deletions(-) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.js b/apps/common/mobile/lib/component/ThemeColorPalette.js index f183868ba..70687ca51 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.js +++ b/apps/common/mobile/lib/component/ThemeColorPalette.js @@ -97,6 +97,20 @@ define([ '', '', '', + '
  • ', + '
    <%= me.textCustomColors %>
    ', + '
    ', + '
    ', + '
    ', + '<%=circlesColors%>', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '
  • ', '', '' ].join('')), @@ -133,14 +147,41 @@ define([ themeColors[row].push(effect); }); + // custom color + if (!this.currentHsl) + this.currentHsl = []; + if (!this.currentHsb) + this.currentHsb = []; + if (!this.currentHue) + this.currentHue = []; + 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 += ''; + } + $(me.el).append(me.template({ themeColors: themeColors, - standartColors: standartColors + standartColors: standartColors, + circlesColors: circles })); + 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) + }); + }, + isColor: function(val) { return typeof(val) == 'string' && (/[0-9A-Fa-f]{6}/).test(val); }, @@ -190,6 +231,7 @@ define([ } else if (! _.isUndefined(color.effectValue)) { el.find('a[data-effectvalue=' + color.effectValue + '][data-color=' + color.color + ']').addClass('active'); } + this.currentHsl = this.colorHexToRgb(color.color); } else { if (/#?[a-fA-F0-9]{6}/.test(color)) { color = /#?([a-fA-F0-9]{6})/.exec(color)[1]; @@ -200,7 +242,14 @@ define([ } else { el.find('.custom-colors a[data-color=' + color + ']').addClass('active'); } + this.currentHsl = this.colorHexToRgb(color); } + if (!this.currentHsl) { + this.currentHsl = this.colorHexToRgb('000000'); + } + this.currentHsl = this.colorRgbToHsl(...this.currentHsl); + this.currentHsb = this.colorHslToHsb(...this.currentHsl); + this.updateCustomColor(true); }, @@ -208,7 +257,200 @@ define([ $(this.el).find('.color-palette a').removeClass('active'); }, + colorHexToRgb(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(r, g, b) { + r /= 255; // eslint-disable-line + g /= 255; // eslint-disable-line + b /= 255; // eslint-disable-line + 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(h, s, l) { + var HSB = { + h, + s: 0, + b: 0, + }; + var HSL = {h, s, 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(h, s, b) { + var HSL = { + h, + s: 0, + l: 0, + }; + var HSB = { h, s, 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(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(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.currentHsb); + this.updateCustomColor(); + }, + + handleTouchStart: function (e) { + this.clearSelection(); + 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 (firstSelect) { + 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)'}); + } + + if (!firstSelect) { + var color = this.colorHslToRgb(...this.currentHsl); + this.currentColor = this.colorRgbToHex(...color); + this.trigger('select', this, this.currentColor); + } + }, + textThemeColors: 'Theme Colors', - textStandartColors: 'Standard Colors' + textStandartColors: 'Standard Colors', + textCustomColors: 'Custom Colors' }, Common.UI.ThemeColorPalette || {})); }); \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index 2fa543df4..c986a5bef 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -40,4 +40,71 @@ overflow: visible; } } + + .custom-colors { + .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; + 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%); + } + } + } + } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index 49fa72501..14e5e00c3 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -44,4 +44,71 @@ &.list-block:last-child li:last-child a { border-radius: 0; } + + .custom-colors { + .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; + 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%); + } + } + } + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 409d688e1..9fe5f8d7a 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6221,6 +6221,70 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .standart-colors .item-inner { overflow: visible; } +.color-palette .custom-colors .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; +} +.color-palette .custom-colors .color-picker-wheel svg { + width: 100%; + height: auto; +} +.color-palette .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; +} +.color-palette .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; +} +.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; +} +.color-palette .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; +} +.color-palette .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 +7145,6 @@ html.pixel-ratio-3 .numbers li { max-height: 100%; overflow: auto; } - .doc-placeholder { background: #fbfbfb; width: 100%; @@ -7097,7 +7160,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; diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index b89e0c23f..ccec7b046 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5815,6 +5815,70 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } +.color-palette .custom-colors .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; +} +.color-palette .custom-colors .color-picker-wheel svg { + width: 100%; + height: auto; +} +.color-palette .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; +} +.color-palette .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; +} +.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; +} +.color-palette .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; +} +.color-palette .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 +6931,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; diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 79ef64e8c..8af9052b4 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6221,6 +6221,70 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .standart-colors .item-inner { overflow: visible; } +.color-palette .custom-colors .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; +} +.color-palette .custom-colors .color-picker-wheel svg { + width: 100%; + height: auto; +} +.color-palette .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; +} +.color-palette .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; +} +.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; +} +.color-palette .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; +} +.color-palette .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; } diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index b714f1d28..a962db4d8 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5815,6 +5815,70 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } +.color-palette .custom-colors .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; +} +.color-palette .custom-colors .color-picker-wheel svg { + width: 100%; + height: auto; +} +.color-palette .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; +} +.color-palette .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; +} +.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; +} +.color-palette .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; +} +.color-palette .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; } diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 74b26d6ad..05de4bbc3 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6221,6 +6221,70 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .standart-colors .item-inner { overflow: visible; } +.color-palette .custom-colors .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; +} +.color-palette .custom-colors .color-picker-wheel svg { + width: 100%; + height: auto; +} +.color-palette .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; +} +.color-palette .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; +} +.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; +} +.color-palette .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; +} +.color-palette .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; } diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index dd99508dd..27e044769 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -5825,6 +5825,70 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } +.color-palette .custom-colors .color-picker-wheel { + position: relative; + width: 330px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; +} +.color-palette .custom-colors .color-picker-wheel svg { + width: 100%; + height: auto; +} +.color-palette .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; +} +.color-palette .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; +} +.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; +} +.color-palette .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; +} +.color-palette .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; } From cf1476848204b4aa4bf030e9e3fe9cf345eb8499 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 3 Oct 2019 13:40:56 +0300 Subject: [PATCH 002/108] [Common mobile] Custom Color --- .../mobile/lib/component/HsbColorPicker.js | 329 ++++++++++++++++++ .../mobile/lib/component/ThemeColorPalette.js | 302 ++++------------ .../resources/less/ios/_color-palette.less | 131 +++---- .../less/material/_color-palette.less | 130 ++++--- .../mobile/app/template/EditShape.template | 18 +- .../mobile/app/view/edit/EditShape.js | 42 ++- .../mobile/resources/css/app-ios.css | 26 +- .../mobile/resources/css/app-material.css | 26 +- .../mobile/resources/css/app-ios.css | 26 +- .../mobile/resources/css/app-material.css | 26 +- .../mobile/resources/css/app-ios.css | 26 +- .../mobile/resources/css/app-material.css | 26 +- 12 files changed, 695 insertions(+), 413 deletions(-) create mode 100644 apps/common/mobile/lib/component/HsbColorPicker.js diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js new file mode 100644 index 000000000..af2e85c13 --- /dev/null +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -0,0 +1,329 @@ +/* + * + * (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([ + '
    ', + '', + '
    ', + '<%=circlesColors%>', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ' + ].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; + } + 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 += ''; + } + + (me.$el || $(me.el)).html(me.template({ + circlesColors: circles, + scope: me, + phone: Common.SharedSettings.get('phone') + })); + + 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]); + $('.color-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); + } + }, + + textCustomColors: 'Custom Colors', + textAddNewColor: 'Add new color' + }, Common.UI.HsbColorPicker || {})); +}); \ No newline at end of file diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.js b/apps/common/mobile/lib/component/ThemeColorPalette.js index 70687ca51..374637ac0 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.js +++ b/apps/common/mobile/lib/component/ThemeColorPalette.js @@ -97,20 +97,23 @@ define([ '
    ', '', '', - '
  • ', + '<% if (dynamicColors.length > 0) {%>', + '
  • ', '
    <%= me.textCustomColors %>
    ', '
    ', - '
    ', - '
    ', - '<%=circlesColors%>', - '
    ', - '
    ', - '
    ', - '
    ', + '
    ', + '<% _.each(dynamicColors, function(color, index) { %>', + '', + '<% }); %>', + '<% if (dynamicColors.length < me.options.dynamiccolors) { %>', + '<% for(var i = dynamicColors.length; i < me.options.dynamiccolors; i++) { %>', + '', + '<% } %>', + '<% } %>', '
    ', '
    ', - '
    ', '
  • ', + '<% } %>', '', '' ].join('')), @@ -148,40 +151,19 @@ define([ }); // custom color - if (!this.currentHsl) - this.currentHsl = []; - if (!this.currentHsb) - this.currentHsb = []; - if (!this.currentHue) - this.currentHue = []; - 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 += ''; - } + 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, - circlesColors: circles + dynamicColors: me.dynamicColors })); - 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) - }); - }, - isColor: function(val) { return typeof(val) == 'string' && (/[0-9A-Fa-f]{6}/).test(val); }, @@ -198,19 +180,18 @@ 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'); - me.currentColor = color; - - if (effectId) { - me.currentColor = {color: color, effectId: 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); } - - me.trigger('select', me, me.currentColor); }, select: function(color) { @@ -231,25 +212,15 @@ define([ } else if (! _.isUndefined(color.effectValue)) { el.find('a[data-effectvalue=' + color.effectValue + '][data-color=' + color.color + ']').addClass('active'); } - this.currentHsl = this.colorHexToRgb(color.color); } else { if (/#?[a-fA-F0-9]{6}/.test(color)) { 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 + ']').addClass('active'); } - this.currentHsl = this.colorHexToRgb(color); } - if (!this.currentHsl) { - this.currentHsl = this.colorHexToRgb('000000'); - } - this.currentHsl = this.colorRgbToHsl(...this.currentHsl); - this.currentHsb = this.colorHslToHsb(...this.currentHsl); - this.updateCustomColor(true); }, @@ -257,195 +228,52 @@ define([ $(this.el).find('.color-palette a').removeClass('active'); }, - colorHexToRgb(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; + saveDynamicColor: function(color) { + this.isDynamicColors = false; + var key_name = 'asc.'+Common.localStorage.getId()+'.colors.custom'; + var colors = Common.localStorage.getItem(key_name); + colors = colors ? colors.split(',') : []; + if (colors.length > 0) { + this.isDynamicColors = true; + } + if (colors.push(color) > this.options.dynamiccolors) colors.shift(); + this.dynamicColors = colors; + Common.localStorage.setItem(key_name, colors.join().toUpperCase()); }, - colorRgbToHsl(r, g, b) { - r /= 255; // eslint-disable-line - g /= 255; // eslint-disable-line - b /= 255; // eslint-disable-line - 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(h, s, l) { - var HSB = { - h, - s: 0, - b: 0, - }; - var HSL = {h, s, 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(h, s, b) { - var HSL = { - h, - s: 0, - l: 0, - }; - var HSB = { h, s, 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(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)))); + updateDynamicColors: function() { + var me = this; + var dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom'); + dynamicColors = dynamicColors ? dynamicColors.toLowerCase().split(',') : []; + if (!this.isDynamicColors) { + var template = _.template(['
  • ', + '
    ' + me.textCustomColors + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '
  • '].join('')); + $(this.el).find('.color-palette ul').append(template); + } + var templateColors = ''; + _.each(dynamicColors, function(color) { + templateColors += ''; }); - return result; - }, - - colorRgbToHex(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.currentHsb); - this.updateCustomColor(); - }, - - handleTouchStart: function (e) { - this.clearSelection(); - 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 (dynamicColors.length < this.options.dynamiccolors) { + for (var i = dynamicColors.length; i < this.options.dynamiccolors; i++) { + templateColors += ''; } } - if (this.wheelIsTouched || this.wheelHandleIsTouched) { - this.setHueFromWheelCoords(this.touchCurrentX, this.touchCurrentY); - } - if (this.specterIsTouched || this.specterHandleIsTouched) { - this.setSBFromSpecterCoords(this.touchCurrentX, this.touchCurrentY); - } + $('.dynamic-colors .item-inner').html(_.template(templateColors)); + $(this.el).find('.color-palette .dynamic-colors a').on('click', _.bind(this.onColorClick, this)); }, - 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 (firstSelect) { - 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)'}); - } - - if (!firstSelect) { - var color = this.colorHslToRgb(...this.currentHsl); - this.currentColor = this.colorRgbToHex(...color); - this.trigger('select', this, this.currentColor); + addNewDynamicColor: function(colorPicker, color) { + if (color) { + this.saveDynamicColor(color); + this.updateDynamicColors(); + this.trigger('select', this, color); + this.select(color); } }, diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index c986a5bef..0a8e9997a 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -35,76 +35,89 @@ } } - .standart-colors { + .standart-colors, .dynamic-colors { .item-inner { overflow: visible; } } +} - .custom-colors { - .color-picker-wheel { - position: relative; - width: 330px; - max-width: 100%; +.custom-colors { + .item-link .item-inner { + background-image: none; + padding-right: 15px; + } + .color-picker-wheel { + position: relative; + width: 290px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; + &.phone { + width: 210px; + } + + svg { + width: 100%; height: auto; - font-size: 0; - margin-left: auto; - margin-right: auto; - svg { - width: 100%; - height: auto; - } - .color-picker-wheel-handle { - width: calc(100% / 6); - height: calc(100% / 6); + } + + .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; - box-sizing: border-box; - border: 2px solid #fff; - box-shadow: 0px 0px 5px rgba(0,0,0,0.5); - background: red; + width: 16px; + height: 16px; + border: 1px solid #fff; 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%; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); + box-sizing: border-box; left: 50%; top: 50%; - transform: translate3d(-50%, -50%, 0); - position: absolute; + transform: translate(-50%, -50%); + transition: 150ms; + transition-property: transform; + transform-origin: center; } - .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%); - } + + &.color-picker-sb-spectrum-handle-pressed:after { + transform: scale(1.5) translate(-33.333%, -33.333%); } } } -} \ No newline at end of file +} diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index 14e5e00c3..3316cc0c9 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -35,7 +35,7 @@ } } - .standart-colors { + .standart-colors, .dynamic-colors { .item-inner { overflow: visible; } @@ -45,69 +45,83 @@ border-radius: 0; } - .custom-colors { - .color-picker-wheel { - position: relative; - width: 330px; - max-width: 100%; +} + +.custom-colors { + .item-link .item-inner { + background-image: none; + padding-right: 15px; + } + .color-picker-wheel { + position: relative; + width: 290px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; + &.phone { + width: 210px; + } + + svg { + width: 100%; height: auto; - font-size: 0; - margin-left: auto; - margin-right: auto; - svg { - width: 100%; - height: auto; - } - .color-picker-wheel-handle { - width: calc(100% / 6); - height: calc(100% / 6); + } + + .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; - box-sizing: border-box; - border: 2px solid #fff; - box-shadow: 0px 0px 5px rgba(0,0,0,0.5); - background: red; + width: 16px; + height: 16px; + border: 1px solid #fff; 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%; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); + box-sizing: border-box; left: 50%; top: 50%; - transform: translate3d(-50%, -50%, 0); - position: absolute; + transform: translate(-50%, -50%); + transition: 150ms; + transition-property: transform; + transform-origin: center; } - .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%); - } + + &.color-picker-sb-spectrum-handle-pressed:after { + transform: scale(1.5) translate(-33.333%, -33.333%); } } } diff --git a/apps/documenteditor/mobile/app/template/EditShape.template b/apps/documenteditor/mobile/app/template/EditShape.template index f9bb94f59..27f48849b 100644 --- a/apps/documenteditor/mobile/app/template/EditShape.template +++ b/apps/documenteditor/mobile/app/template/EditShape.template @@ -448,4 +448,20 @@ - \ No newline at end of file + + + +
    + +
    +
    + +
    +
    +
    diff --git a/apps/documenteditor/mobile/app/view/edit/EditShape.js b/apps/documenteditor/mobile/app/view/edit/EditShape.js index 85f601b0e..53a51b683 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditShape.js +++ b/apps/documenteditor/mobile/app/view/edit/EditShape.js @@ -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,22 @@ 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'); + var template = _.template([''].join('')); + $('#tab-shape-fill').append(template({scope: this})); + $('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomColor, this)); + Common.Utils.addScrollIfNeed('.page.shape-style', '.page.shape-style .page-content'); this.fireEvent('page:show', [this, selector]); }, @@ -185,6 +201,22 @@ define([ this.fireEvent('page:show', [this, selector]); }, + showCustomColor: 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); + }); + + me.fireEvent('page:show', [me, selector]); + }, + textStyle: 'Style', textWrap: 'Wrap', textReplace: 'Replace', @@ -211,7 +243,9 @@ define([ textEffects: 'Effects', textSize: 'Size', textColor: 'Color', - textOpacity: 'Opacity' + textOpacity: 'Opacity', + textAddCustomColor: 'Add Custom Color', + textCustomColor: 'Custom Color' } })(), DE.Views.EditShape || {})) }); \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 9fe5f8d7a..9a6db93ee 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6218,23 +6218,31 @@ 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; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -6246,7 +6254,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.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; @@ -6257,7 +6265,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -6265,7 +6273,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -6282,7 +6290,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.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 { diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index ccec7b046..203aef742 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5809,26 +5809,34 @@ 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; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -5840,7 +5848,7 @@ html.phone .document-menu .list-block .item-link { left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.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; @@ -5851,7 +5859,7 @@ html.phone .document-menu .list-block .item-link { transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -5859,7 +5867,7 @@ html.phone .document-menu .list-block .item-link { top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -5876,7 +5884,7 @@ html.phone .document-menu .list-block .item-link { transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.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 { diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 8af9052b4..0b9e4729f 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6218,23 +6218,31 @@ 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; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -6246,7 +6254,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.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; @@ -6257,7 +6265,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -6265,7 +6273,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -6282,7 +6290,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.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 { diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index a962db4d8..3a42eef46 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5809,26 +5809,34 @@ 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; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -5840,7 +5848,7 @@ html.phone .document-menu .list-block .item-link { left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.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; @@ -5851,7 +5859,7 @@ html.phone .document-menu .list-block .item-link { transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -5859,7 +5867,7 @@ html.phone .document-menu .list-block .item-link { top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -5876,7 +5884,7 @@ html.phone .document-menu .list-block .item-link { transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.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 { diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 05de4bbc3..022df9ff5 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6218,23 +6218,31 @@ 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; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -6246,7 +6254,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.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; @@ -6257,7 +6265,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -6265,7 +6273,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -6282,7 +6290,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.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 { diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index 27e044769..0ed5f42de 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -5819,26 +5819,34 @@ 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; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -5850,7 +5858,7 @@ html.phone .document-menu .list-block .item-link { left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.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; @@ -5861,7 +5869,7 @@ html.phone .document-menu .list-block .item-link { transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -5869,7 +5877,7 @@ html.phone .document-menu .list-block .item-link { top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -5886,7 +5894,7 @@ html.phone .document-menu .list-block .item-link { transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.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 { From 7b11701a7b7c9076dac2552423d146211dc33e38 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 4 Oct 2019 15:12:57 +0300 Subject: [PATCH 003/108] [Common mobile] Custom Color --- .../mobile/lib/component/HsbColorPicker.js | 29 ++++++++++--------- .../mobile/lib/component/ThemeColorPalette.js | 21 +++----------- .../resources/less/ios/_color-palette.less | 12 ++++++-- .../less/material/_color-palette.less | 6 ++-- .../mobile/app/view/edit/EditShape.js | 3 ++ .../mobile/resources/css/app-ios.css | 13 +++++++-- .../mobile/resources/css/app-material.css | 6 ++-- .../mobile/resources/css/app-ios.css | 13 +++++++-- .../mobile/resources/css/app-material.css | 6 ++-- .../mobile/resources/css/app-ios.css | 13 +++++++-- .../mobile/resources/css/app-material.css | 6 ++-- 11 files changed, 73 insertions(+), 55 deletions(-) diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js index af2e85c13..fa6c3a985 100644 --- a/apps/common/mobile/lib/component/HsbColorPicker.js +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -57,19 +57,19 @@ define([ }, template: _.template([ '
    ', - '
    ', - '
      ', - '
    • ', - '', - '
      ', - '
      ', - '
      <%= scope.textAddNewColor %>
      ', - '
      ', - '
      ', - '
      ', - '
      ', - '
    • ', - '
        ', + '
        ', + '
        ', + '<% if (android) { %>', + '<%= scope.textAddNewColor %>', + '<% } else { %>', + '
        ', + '', + '
        ', + '<% } %>', '
        ', '
        ', '<%=circlesColors%>', @@ -113,7 +113,8 @@ define([ (me.$el || $(me.el)).html(me.template({ circlesColors: circles, scope: me, - phone: Common.SharedSettings.get('phone') + phone: Common.SharedSettings.get('phone'), + android: Common.SharedSettings.get('android') })); this.afterRender(); diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.js b/apps/common/mobile/lib/component/ThemeColorPalette.js index 374637ac0..284f4f03b 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.js +++ b/apps/common/mobile/lib/component/ThemeColorPalette.js @@ -97,7 +97,6 @@ define([ '
        ', '
    ', '', - '<% if (dynamicColors.length > 0) {%>', '
  • ', '
    <%= me.textCustomColors %>
    ', '
    ', @@ -113,7 +112,6 @@ define([ '
    ', '
  • ', '', - '<% } %>', '', '' ].join('')), @@ -191,6 +189,8 @@ define([ me.currentColor = {color: color, effectId: effectId}; } me.trigger('select', me, me.currentColor); + } else { + me.fireEvent('customcolor', me); } }, @@ -198,10 +198,6 @@ define([ var me = this, el = $(me.el); - if (color == me.currentColor) { - return; - } - me.currentColor = color; me.clearSelection(); @@ -218,8 +214,9 @@ define([ } 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 + ']').addClass('active'); + el.find('.color-palette a[data-color=' + color + ']').first().addClass('active'); } + } }, @@ -245,16 +242,6 @@ define([ var me = this; var dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom'); dynamicColors = dynamicColors ? dynamicColors.toLowerCase().split(',') : []; - if (!this.isDynamicColors) { - var template = _.template(['
  • ', - '
    ' + me.textCustomColors + '
    ', - '
    ', - '
    ', - '
    ', - '
    ', - '
  • '].join('')); - $(this.el).find('.color-palette ul').append(template); - } var templateColors = ''; _.each(dynamicColors, function(color) { templateColors += ''; diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index 0a8e9997a..8e0201f4b 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -43,9 +43,15 @@ } .custom-colors { - .item-link .item-inner { - background-image: none; - padding-right: 15px; + .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); + } + .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; diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index 3316cc0c9..a902305c4 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -48,9 +48,9 @@ } .custom-colors { - .item-link .item-inner { - background-image: none; - padding-right: 15px; + .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); } .color-picker-wheel { position: relative; diff --git a/apps/documenteditor/mobile/app/view/edit/EditShape.js b/apps/documenteditor/mobile/app/view/edit/EditShape.js index 53a51b683..b49b37de6 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditShape.js +++ b/apps/documenteditor/mobile/app/view/edit/EditShape.js @@ -156,6 +156,9 @@ define([ el: $('#tab-shape-fill'), transparent: true }); + this.paletteFillColor.on('customcolor', function () { + me.showCustomColor(); + }); var template = _.template(['
    ', '
      ', '
    • ', diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 9a6db93ee..483b1d233 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6222,9 +6222,16 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .dynamic-colors .item-inner { overflow: visible; } -.custom-colors .item-link .item-inner { - background-image: none; - padding-right: 15px; +.custom-colors .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); +} +.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; diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index 203aef742..6cb2fe283 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5816,9 +5816,9 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.custom-colors .item-link .item-inner { - background-image: none; - padding-right: 15px; +.custom-colors .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); } .custom-colors .color-picker-wheel { position: relative; diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 0b9e4729f..aa763b7f1 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6222,9 +6222,16 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .dynamic-colors .item-inner { overflow: visible; } -.custom-colors .item-link .item-inner { - background-image: none; - padding-right: 15px; +.custom-colors .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); +} +.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; diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index 3a42eef46..7ea8c95b5 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5816,9 +5816,9 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.custom-colors .item-link .item-inner { - background-image: none; - padding-right: 15px; +.custom-colors .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); } .custom-colors .color-picker-wheel { position: relative; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 022df9ff5..c83f2a4aa 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6222,9 +6222,16 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .dynamic-colors .item-inner { overflow: visible; } -.custom-colors .item-link .item-inner { - background-image: none; - padding-right: 15px; +.custom-colors .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); +} +.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; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index 0ed5f42de..ce3d48218 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -5826,9 +5826,9 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.custom-colors .item-link .item-inner { - background-image: none; - padding-right: 15px; +.custom-colors .color-preview { + width: 75px; + border: 1px solid rgba(0, 0, 0, 0.3); } .custom-colors .color-picker-wheel { position: relative; From 3f97b8af7950d3b263ccd69fe745e53d04c938ed Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 7 Oct 2019 10:15:35 +0300 Subject: [PATCH 004/108] [DE mobile] Custom Color (shape fill, border color) --- .../mobile/lib/component/HsbColorPicker.js | 4 +- .../mobile/lib/component/ThemeColorPalette.js | 6 +-- .../resources/less/ios/_color-palette.less | 2 +- .../less/material/_color-palette.less | 2 +- .../mobile/app/view/edit/EditShape.js | 40 +++++++++++++++++-- .../mobile/resources/css/app-ios.css | 2 +- .../mobile/resources/css/app-material.css | 2 +- .../mobile/resources/css/app-ios.css | 2 +- .../mobile/resources/css/app-material.css | 2 +- .../mobile/resources/css/app-ios.css | 2 +- .../mobile/resources/css/app-material.css | 2 +- 11 files changed, 48 insertions(+), 18 deletions(-) diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js index fa6c3a985..0d313fecc 100644 --- a/apps/common/mobile/lib/component/HsbColorPicker.js +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -58,7 +58,7 @@ define([ template: _.template([ '
      ', '
      ', - '
      ', + '
      ', '<% if (android) { %>', '<%= scope.textAddNewColor %>', '<% } else { %>', @@ -310,7 +310,7 @@ define([ } var color = this.colorHslToRgb(this.currentHsl[0], this.currentHsl[1], this.currentHsl[2]); this.currentColor = this.colorRgbToHex(color[0], color[1], color[2]); - $('.color-preview').css({'background-color': this.currentColor}); + $('.color-hsb-preview').css({'background-color': this.currentColor}); }, diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.js b/apps/common/mobile/lib/component/ThemeColorPalette.js index 284f4f03b..81476d4f6 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.js +++ b/apps/common/mobile/lib/component/ThemeColorPalette.js @@ -226,13 +226,9 @@ define([ }, saveDynamicColor: function(color) { - this.isDynamicColors = false; var key_name = 'asc.'+Common.localStorage.getId()+'.colors.custom'; var colors = Common.localStorage.getItem(key_name); colors = colors ? colors.split(',') : []; - if (colors.length > 0) { - this.isDynamicColors = true; - } if (colors.push(color) > this.options.dynamiccolors) colors.shift(); this.dynamicColors = colors; Common.localStorage.setItem(key_name, colors.join().toUpperCase()); @@ -251,7 +247,7 @@ define([ templateColors += ''; } } - $('.dynamic-colors .item-inner').html(_.template(templateColors)); + $(this.el).find('.dynamic-colors .item-inner').html(_.template(templateColors)); $(this.el).find('.color-palette .dynamic-colors a').on('click', _.bind(this.onColorClick, this)); }, diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index 8e0201f4b..2f3d12cd1 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -43,7 +43,7 @@ } .custom-colors { - .color-preview { + .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index a902305c4..0a2470663 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -48,7 +48,7 @@ } .custom-colors { - .color-preview { + .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } diff --git a/apps/documenteditor/mobile/app/view/edit/EditShape.js b/apps/documenteditor/mobile/app/view/edit/EditShape.js index b49b37de6..9ffbab093 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditShape.js +++ b/apps/documenteditor/mobile/app/view/edit/EditShape.js @@ -157,7 +157,7 @@ define([ transparent: true }); this.paletteFillColor.on('customcolor', function () { - me.showCustomColor(); + me.showCustomFillColor(); }); var template = _.template(['
      ', '
        ', @@ -173,7 +173,7 @@ define([ '
      ', '
      '].join('')); $('#tab-shape-fill').append(template({scope: this})); - $('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomColor, 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]); }, @@ -200,11 +200,29 @@ 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([''].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]); }, - showCustomColor: function() { + showCustomFillColor: function() { var me = this, selector = '#edit-shape-custom-color-view'; me.showPage(selector, true); @@ -220,6 +238,22 @@ define([ 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.fireEvent('page:show', [me, selector]); + }, + textStyle: 'Style', textWrap: 'Wrap', textReplace: 'Replace', diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 483b1d233..5171ba1ab 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6222,7 +6222,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .dynamic-colors .item-inner { overflow: visible; } -.custom-colors .color-preview { +.custom-colors .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index 6cb2fe283..c6d20d0f1 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5816,7 +5816,7 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.custom-colors .color-preview { +.custom-colors .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index aa763b7f1..7e405ca8f 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6222,7 +6222,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .dynamic-colors .item-inner { overflow: visible; } -.custom-colors .color-preview { +.custom-colors .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index 7ea8c95b5..4624594da 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5816,7 +5816,7 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.custom-colors .color-preview { +.custom-colors .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index c83f2a4aa..5d9144e18 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6222,7 +6222,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .color-palette .dynamic-colors .item-inner { overflow: visible; } -.custom-colors .color-preview { +.custom-colors .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index ce3d48218..e0f3fa264 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -5826,7 +5826,7 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.custom-colors .color-preview { +.custom-colors .color-hsb-preview { width: 75px; border: 1px solid rgba(0, 0, 0, 0.3); } From bf25a214553d6d9d2b7252050613b66c1ea59bef Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 7 Oct 2019 17:42:36 +0300 Subject: [PATCH 005/108] [DE mobile] Custom Color --- .../mobile/lib/component/HsbColorPicker.js | 35 +++++------- .../resources/less/ios/_color-palette.less | 50 +++++++++++++--- .../less/material/_color-palette.less | 54 ++++++++++++++++-- .../mobile/app/template/EditShape.template | 2 +- .../mobile/app/view/edit/EditShape.js | 4 ++ .../mobile/resources/css/app-ios.css | 52 ++++++++++++++--- .../mobile/resources/css/app-material.css | 57 +++++++++++++++++-- .../mobile/resources/css/app-ios.css | 52 ++++++++++++++--- .../mobile/resources/css/app-material.css | 57 +++++++++++++++++-- .../mobile/resources/css/app-ios.css | 52 ++++++++++++++--- .../mobile/resources/css/app-material.css | 57 +++++++++++++++++-- 11 files changed, 399 insertions(+), 73 deletions(-) diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js index 0d313fecc..27327ec7f 100644 --- a/apps/common/mobile/lib/component/HsbColorPicker.js +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -56,26 +56,20 @@ define([ color: '#000000' }, template: _.template([ - '
      ', - '
      ', - '
      ', - '<% if (android) { %>', - '<%= scope.textAddNewColor %>', - '<% } else { %>', - '
      ', - '', - '
      ', - '<% } %>', - '
      ', - '
      ', + '
      ', + '
      ', '<%=circlesColors%>', '
      ', '
      ', - '
      ', + '
      ', + '
      ', + '
      ', + '
      ', + '
      ', + '
      ', + '
      ', + '
      ', + '', '
      ', '
      ' ].join('')), @@ -117,6 +111,8 @@ define([ android: Common.SharedSettings.get('android') })); + $('.current-color-hsb-preview').css({'background-color': '#' + me.currentColor}); + this.afterRender(); return me; @@ -310,7 +306,7 @@ define([ } var color = this.colorHslToRgb(this.currentHsl[0], this.currentHsl[1], this.currentHsl[2]); this.currentColor = this.colorRgbToHex(color[0], color[1], color[2]); - $('.color-hsb-preview').css({'background-color': this.currentColor}); + $('.new-color-hsb-preview').css({'background-color': this.currentColor}); }, @@ -324,7 +320,6 @@ define([ } }, - textCustomColors: 'Custom Colors', - textAddNewColor: 'Add new color' + textCustomColors: 'Custom Colors' }, Common.UI.HsbColorPicker || {})); }); \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index 2f3d12cd1..1533ff2d4 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -43,9 +43,50 @@ } .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: 75px; - border: 1px solid rgba(0, 0, 0, 0.3); + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; + } + .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; @@ -59,11 +100,6 @@ max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; - &.phone { - width: 210px; - } svg { width: 100%; diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index 0a2470663..3e7b7d1b4 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -48,8 +48,55 @@ } .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: 75px; + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; + } + .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 { @@ -58,11 +105,6 @@ max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; - &.phone { - width: 210px; - } svg { width: 100%; diff --git a/apps/documenteditor/mobile/app/template/EditShape.template b/apps/documenteditor/mobile/app/template/EditShape.template index 27f48849b..06c6c5dee 100644 --- a/apps/documenteditor/mobile/app/template/EditShape.template +++ b/apps/documenteditor/mobile/app/template/EditShape.template @@ -454,7 +454,7 @@
      +
      + + +
      + +
      +
      + +
      +
      \ No newline at end of file diff --git a/apps/documenteditor/mobile/app/view/edit/EditTable.js b/apps/documenteditor/mobile/app/view/edit/EditTable.js index 279ddd11d..85c19ed9e 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditTable.js +++ b/apps/documenteditor/mobile/app/view/edit/EditTable.js @@ -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([''].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([''].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 || {})) }); \ No newline at end of file From d3a039f6b04fb6c9f6e29f1f839dab09d9ffbdf5 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 8 Oct 2019 14:16:46 +0300 Subject: [PATCH 007/108] [DE mobile] Custom Color (paragraph) --- .../app/template/EditParagraph.template | 16 ++++++++ .../mobile/app/view/edit/EditParagraph.js | 39 ++++++++++++++++++- 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/mobile/app/template/EditParagraph.template b/apps/documenteditor/mobile/app/template/EditParagraph.template index 5abd3fcf1..b655baa3b 100644 --- a/apps/documenteditor/mobile/app/template/EditParagraph.template +++ b/apps/documenteditor/mobile/app/template/EditParagraph.template @@ -184,4 +184,20 @@
      +
    + + +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/apps/documenteditor/mobile/app/view/edit/EditParagraph.js b/apps/documenteditor/mobile/app/view/edit/EditParagraph.js index dde7c7158..b1b163da7 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditParagraph.js +++ b/apps/documenteditor/mobile/app/view/edit/EditParagraph.js @@ -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([''].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 || {})) }); \ No newline at end of file From a78b3202475c056da5081f021e640ad980a0f0ef Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 8 Oct 2019 14:42:21 +0300 Subject: [PATCH 008/108] [DE mobile] Custom Color (chart) --- .../mobile/app/template/EditChart.template | 16 ++++ .../mobile/app/view/edit/EditChart.js | 76 ++++++++++++++++++- 2 files changed, 91 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/mobile/app/template/EditChart.template b/apps/documenteditor/mobile/app/template/EditChart.template index 538bb8d1e..c420cb543 100644 --- a/apps/documenteditor/mobile/app/template/EditChart.template +++ b/apps/documenteditor/mobile/app/template/EditChart.template @@ -371,4 +371,20 @@ + + + +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/apps/documenteditor/mobile/app/view/edit/EditChart.js b/apps/documenteditor/mobile/app/view/edit/EditChart.js index 001a33c7c..8e31eab8d 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditChart.js +++ b/apps/documenteditor/mobile/app/view/edit/EditChart.js @@ -220,6 +220,24 @@ define([ el: $('#tab-chart-fill'), transparent: true }); + this.paletteFillColor.on('customcolor', function () { + me.showCustomFillColor(); + }); + var template = _.template([''].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]); @@ -242,10 +260,64 @@ define([ 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([''].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 +342,9 @@ define([ textFill: 'Fill', textBorder: 'Border', textSize: 'Size', - textColor: 'Color' + textColor: 'Color', + textAddCustomColor: 'Add Custom Color', + textCustomColor: 'Custom Color' } })(), DE.Views.EditChart || {})) }); \ No newline at end of file From ebad13534ab2c1b1437391498e2900c59f6e1b38 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 8 Oct 2019 16:52:37 +0300 Subject: [PATCH 009/108] [DE mobile] Custom Color (text) --- .../mobile/app/template/EditText.template | 16 ++++ .../mobile/app/view/edit/EditText.js | 74 ++++++++++++++++++- 2 files changed, 89 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/mobile/app/template/EditText.template b/apps/documenteditor/mobile/app/template/EditText.template index 75c5898ef..76080e08e 100644 --- a/apps/documenteditor/mobile/app/template/EditText.template +++ b/apps/documenteditor/mobile/app/template/EditText.template @@ -408,3 +408,19 @@ + + +
    + +
    +
    + +
    +
    +
    \ No newline at end of file diff --git a/apps/documenteditor/mobile/app/view/edit/EditText.js b/apps/documenteditor/mobile/app/view/edit/EditText.js index bc299bd80..d131843ed 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditText.js +++ b/apps/documenteditor/mobile/app/view/edit/EditText.js @@ -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([''].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([''].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 || {})) }); \ No newline at end of file From 99affc5cfdf3a6905daa40f8fc72970c6aa1ba1e Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Wed, 9 Oct 2019 14:24:26 +0300 Subject: [PATCH 010/108] [SSE] Custom Color (Edit Cell) --- .../mobile/lib/component/HsbColorPicker.js | 3 + .../mobile/app/controller/edit/EditCell.js | 8 +- .../mobile/app/template/EditCell.template | 17 +++ .../mobile/app/view/edit/EditCell.js | 121 +++++++++++++++++- 4 files changed, 142 insertions(+), 7 deletions(-) diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js index 27327ec7f..1f201187a 100644 --- a/apps/common/mobile/lib/component/HsbColorPicker.js +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -84,6 +84,9 @@ define([ 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]); diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js index 204c4be27..b34602d99 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js +++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js @@ -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) { diff --git a/apps/spreadsheeteditor/mobile/app/template/EditCell.template b/apps/spreadsheeteditor/mobile/app/template/EditCell.template index 93435f351..765b5be16 100644 --- a/apps/spreadsheeteditor/mobile/app/template/EditCell.template +++ b/apps/spreadsheeteditor/mobile/app/template/EditCell.template @@ -845,4 +845,21 @@ + + + + +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js index 9cd75d3a9..4d31ef663 100644 --- a/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js +++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js @@ -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([''].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([''].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([''].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 || {})) }); From 8558e8407a757c0b4d985f552e3c285f3a9e464b Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 10 Oct 2019 13:54:38 +0300 Subject: [PATCH 011/108] [SSE] Custom Color --- .../mobile/app/view/edit/EditChart.js | 1 + .../mobile/app/controller/edit/EditChart.js | 9 +- .../mobile/app/controller/edit/EditShape.js | 10 +- .../mobile/app/controller/edit/EditText.js | 4 +- .../mobile/app/template/EditChart.template | 16 +++ .../mobile/app/template/EditShape.template | 16 +++ .../mobile/app/template/EditText.template | 17 +++ .../mobile/app/view/edit/EditChart.js | 107 ++++++++++++++- .../mobile/app/view/edit/EditShape.js | 124 ++++++++++++++++-- .../mobile/app/view/edit/EditText.js | 59 ++++++++- 10 files changed, 332 insertions(+), 31 deletions(-) diff --git a/apps/documenteditor/mobile/app/view/edit/EditChart.js b/apps/documenteditor/mobile/app/view/edit/EditChart.js index 8e31eab8d..e134d9128 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditChart.js +++ b/apps/documenteditor/mobile/app/view/edit/EditChart.js @@ -254,6 +254,7 @@ define([ }, showBorderColor: function () { + var me = this; var selector = '#edit-chart-border-color-view'; this.showPage(selector, true); diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js index 7c396b240..dcdcfccf9 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js +++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js @@ -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); diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js index d5b0afd6d..292e98b35 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js +++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js @@ -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); diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js index d9befaa83..cdd296b61 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js +++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js @@ -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); diff --git a/apps/spreadsheeteditor/mobile/app/template/EditChart.template b/apps/spreadsheeteditor/mobile/app/template/EditChart.template index 264e72092..54c2da199 100644 --- a/apps/spreadsheeteditor/mobile/app/template/EditChart.template +++ b/apps/spreadsheeteditor/mobile/app/template/EditChart.template @@ -623,4 +623,20 @@ + + + +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditShape.template b/apps/spreadsheeteditor/mobile/app/template/EditShape.template index c99a04526..30844ae54 100644 --- a/apps/spreadsheeteditor/mobile/app/template/EditShape.template +++ b/apps/spreadsheeteditor/mobile/app/template/EditShape.template @@ -266,4 +266,20 @@ + + + +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditText.template b/apps/spreadsheeteditor/mobile/app/template/EditText.template index 006a81b32..9191abcdc 100644 --- a/apps/spreadsheeteditor/mobile/app/template/EditText.template +++ b/apps/spreadsheeteditor/mobile/app/template/EditText.template @@ -117,3 +117,20 @@ + + + +
    + +
    +
    + +
    +
    +
    \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js index b8b89edd1..782889856 100644 --- a/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js +++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js @@ -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([''].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([''].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 || {})) }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js index 2912ca048..f05651271 100644 --- a/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js +++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js @@ -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([''].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([''].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 || {})) }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js index 459bf5d92..9db866c27 100644 --- a/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js +++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js @@ -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([''].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 || {})) }); \ No newline at end of file From 909077f97c4614091b32da02e14d9c4a328150b6 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 11 Oct 2019 15:55:06 +0300 Subject: [PATCH 012/108] [PE mobile] Custom Color --- .../mobile/app/template/EditChart.template | 16 ++++ .../mobile/app/template/EditShape.template | 16 ++++ .../mobile/app/template/EditSlide.template | 16 ++++ .../mobile/app/template/EditTable.template | 16 ++++ .../mobile/app/template/EditText.template | 16 ++++ .../mobile/app/view/edit/EditChart.js | 83 ++++++++++++++++++- .../mobile/app/view/edit/EditShape.js | 82 +++++++++++++++++- .../mobile/app/view/edit/EditSlide.js | 44 +++++++++- .../mobile/app/view/edit/EditTable.js | 81 +++++++++++++++++- .../mobile/app/view/edit/EditText.js | 43 +++++++++- 10 files changed, 403 insertions(+), 10 deletions(-) diff --git a/apps/presentationeditor/mobile/app/template/EditChart.template b/apps/presentationeditor/mobile/app/template/EditChart.template index e157fd443..6c9ec42f5 100644 --- a/apps/presentationeditor/mobile/app/template/EditChart.template +++ b/apps/presentationeditor/mobile/app/template/EditChart.template @@ -302,3 +302,19 @@ + + +
    + +
    +
    + +
    +
    +
    diff --git a/apps/presentationeditor/mobile/app/template/EditShape.template b/apps/presentationeditor/mobile/app/template/EditShape.template index 16ed68947..e8a7579af 100644 --- a/apps/presentationeditor/mobile/app/template/EditShape.template +++ b/apps/presentationeditor/mobile/app/template/EditShape.template @@ -379,3 +379,19 @@ + + +
    + +
    +
    + +
    +
    +
    diff --git a/apps/presentationeditor/mobile/app/template/EditSlide.template b/apps/presentationeditor/mobile/app/template/EditSlide.template index 9e14876a9..88d2f351a 100644 --- a/apps/presentationeditor/mobile/app/template/EditSlide.template +++ b/apps/presentationeditor/mobile/app/template/EditSlide.template @@ -321,3 +321,19 @@ + + +
    + +
    +
    + +
    +
    +
    \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/template/EditTable.template b/apps/presentationeditor/mobile/app/template/EditTable.template index ec812ba73..8b6d3b379 100644 --- a/apps/presentationeditor/mobile/app/template/EditTable.template +++ b/apps/presentationeditor/mobile/app/template/EditTable.template @@ -473,3 +473,19 @@ + + +
    + +
    +
    + +
    +
    +
    \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/template/EditText.template b/apps/presentationeditor/mobile/app/template/EditText.template index dfecf30b2..adaa89127 100644 --- a/apps/presentationeditor/mobile/app/template/EditText.template +++ b/apps/presentationeditor/mobile/app/template/EditText.template @@ -407,3 +407,19 @@ + + +
    + +
    +
    + +
    +
    +
    \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/edit/EditChart.js b/apps/presentationeditor/mobile/app/view/edit/EditChart.js index 15cf6af1e..c9569baa2 100644 --- a/apps/presentationeditor/mobile/app/view/edit/EditChart.js +++ b/apps/presentationeditor/mobile/app/view/edit/EditChart.js @@ -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([''].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([''].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 || {})) }); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/edit/EditShape.js b/apps/presentationeditor/mobile/app/view/edit/EditShape.js index b34f11112..532e581bc 100644 --- a/apps/presentationeditor/mobile/app/view/edit/EditShape.js +++ b/apps/presentationeditor/mobile/app/view/edit/EditShape.js @@ -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([''].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([''].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 || {})) }); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/edit/EditSlide.js b/apps/presentationeditor/mobile/app/view/edit/EditSlide.js index ed2d90c24..d311e7b91 100644 --- a/apps/presentationeditor/mobile/app/view/edit/EditSlide.js +++ b/apps/presentationeditor/mobile/app/view/edit/EditSlide.js @@ -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([''].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 || {})) }); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/edit/EditTable.js b/apps/presentationeditor/mobile/app/view/edit/EditTable.js index 6ab8913c7..98c3345f7 100644 --- a/apps/presentationeditor/mobile/app/view/edit/EditTable.js +++ b/apps/presentationeditor/mobile/app/view/edit/EditTable.js @@ -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([''].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([''].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 || {})) }); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/edit/EditText.js b/apps/presentationeditor/mobile/app/view/edit/EditText.js index b142eae7e..6fb609736 100644 --- a/apps/presentationeditor/mobile/app/view/edit/EditText.js +++ b/apps/presentationeditor/mobile/app/view/edit/EditText.js @@ -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([''].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 || {})) }); \ No newline at end of file From 7854a22764e11bd20ffcb0798f1e6335f1364882 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 15 Oct 2019 12:54:37 +0300 Subject: [PATCH 013/108] [SSE] Update translation --- apps/spreadsheeteditor/main/app/view/Toolbar.js | 2 +- apps/spreadsheeteditor/main/locale/en.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 14173f21d..c11ec7bee 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -2481,7 +2481,7 @@ define([ textSetPrintArea: 'Set Print Area', textClearPrintArea: 'Clear Print Area', textAddPrintArea: 'Add to Print Area', - tipPrintArea: 'Print Area', + tipPrintArea: 'Print area', capBtnInsHeader: 'Header/Footer', tipEditHeader: 'Edit header or footer', textTabData: 'Data', diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index bac17e95b..78cee7fe3 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -2329,7 +2329,7 @@ "SSE.Views.Toolbar.tipPaste": "Paste", "SSE.Views.Toolbar.tipPrColor": "Background color", "SSE.Views.Toolbar.tipPrint": "Print", - "SSE.Views.Toolbar.tipPrintArea": "Print Area", + "SSE.Views.Toolbar.tipPrintArea": "Print area", "SSE.Views.Toolbar.tipRedo": "Redo", "SSE.Views.Toolbar.tipSave": "Save", "SSE.Views.Toolbar.tipSaveCoauth": "Save your changes for the other users to see them.", From e424611cfee704b019c0f0f291ffc9df098b47fe Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 15 Oct 2019 15:07:03 +0300 Subject: [PATCH 014/108] [SSE] Fix scale --- .../main/app/controller/Print.js | 16 +- .../main/app/controller/Toolbar.js | 139 ++++++++++-------- .../main/app/view/FileMenuPanels.js | 37 ++++- .../main/app/view/PrintSettings.js | 37 ++++- .../main/app/view/Toolbar.js | 95 +++++++----- apps/spreadsheeteditor/main/locale/en.json | 9 ++ 6 files changed, 222 insertions(+), 111 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Print.js b/apps/spreadsheeteditor/main/app/controller/Print.js index 6a66e9270..532047783 100644 --- a/apps/spreadsheeteditor/main/app/controller/Print.js +++ b/apps/spreadsheeteditor/main/app/controller/Print.js @@ -198,6 +198,7 @@ define([ opt.asc_setFitToWidth(fitToWidth); opt.asc_setFitToHeight(fitToHeight); !fitToWidth && !fitToHeight && opt.asc_setScale(100); + this.setScaling(panel, fitToWidth, fitToHeight, 100); } else { opt.asc_setFitToWidth(this.fitWidth); opt.asc_setFitToHeight(this.fitHeight); @@ -355,7 +356,7 @@ define([ }, propertyChange: function(panel, scale, combo, record) { - if (scale === 'scale' && record.value === 4) { + if (scale === 'scale' && record.value === 'customoptions') { var me = this, props = (me._changedProps.length > 0 && me._changedProps[panel.cmbSheet.getValue()]) ? me._changedProps[panel.cmbSheet.getValue()] : me.api.asc_getPageOptions(panel.cmbSheet.getValue()); var win = new SSE.Views.ScaleDialog({ @@ -396,11 +397,14 @@ define([ }, setScaling: function (panel, width, height, scale) { - if (!width && !height && scale === 100) panel.cmbLayout.setValue(0, true); - else if (width === 1 && height === 1) panel.cmbLayout.setValue(1, true); - else if (width === 1 && !height) panel.cmbLayout.setValue(2, true); - else if (!width && height === 1) panel.cmbLayout.setValue(3, true); - else panel.cmbLayout.setValue(4, true); + var value; + if (!width && !height && scale === 100) value = 0; + else if (width === 1 && height === 1) value = 1; + else if (width === 1 && !height) value = 2; + else if (!width && height === 1) value = 3; + else value = 4; + panel.addCustomScale(value === 4); + panel.cmbLayout.setValue(value, true); }, warnCheckMargings: 'Margins are incorrect', diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index e886614c7..4e3147eae 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -362,7 +362,9 @@ define([ toolbar.btnPageOrient.menu.on('item:click', _.bind(this.onPageOrientSelect, this)); toolbar.btnPageMargins.menu.on('item:click', _.bind(this.onPageMarginsSelect, this)); toolbar.mnuPageSize.on('item:click', _.bind(this.onPageSizeClick, this)); - toolbar.mnuScale.on('item:click', _.bind(this.onScaleClick, this)); + toolbar.mnuScale.on('item:click', _.bind(this.onScaleClick, this, 'scale')); + toolbar.menuWidthScale.on('item:click', _.bind(this.onScaleClick, this, 'width')); + toolbar.menuHeightScale.on('item:click', _.bind(this.onScaleClick, this, 'height')); toolbar.btnPrintArea.menu.on('item:click', _.bind(this.onPrintAreaClick, this)); toolbar.btnPrintArea.menu.on('show:after', _.bind(this.onPrintAreaMenuOpen, this)); toolbar.btnImgGroup.menu.on('item:click', _.bind(this.onImgGroupSelect, this)); @@ -1845,33 +1847,52 @@ define([ }, onChangeScaleSettings: function(width, height, scale) { - var me = this; if (this.toolbar.btnScale.menu) { - this.toolbar.btnScale.menu.clearAll(); if (width !== undefined) { - if ((width === 0 || width === null) && (height === 0 || height === null) && scale === 100) { - this._state.scale = 0; - } else if (width === 1 && height === 1) { - this._state.scale = 1; - } else if (width === 1 && (height === 0 || height === null)) { - this._state.scale = 2; - } else if ((width === 0 || width === null) && height === 1) { - this._state.scale = 3; - } else if ((width === 0 || width === null) && (height === 0 || height === null)) { - this._state.scale = 4; + var isWidth = false, + isHeight = false; + var width = width || 0, + height = height || 0; + if (scale !== undefined) { + this.toolbar.setValueCustomScale(scale); } else { - this._state.scale = 5; + this.toolbar.setValueCustomScale(this.api.asc_getPageOptions().asc_getPageSetup().asc_getScale()); + } + this.toolbar.menuWidthScale.clearAll(); + this.toolbar.menuWidthScale.items.forEach(function (item) { + if (item.value === width) { + item.setChecked(true); + isWidth = true; + return false; + } + }); + if (!isWidth) { + this.toolbar.menuWidthScale.items[11].setChecked(true); + } + this.toolbar.menuHeightScale.clearAll(); + this.toolbar.menuHeightScale.items.forEach(function (item) { + if (item.value === height) { + item.setChecked(true); + isHeight = true; + return false; + } + }); + if (!isHeight) { + this.toolbar.menuHeightScale.items[11].setChecked(true); + } + if (this.toolbar.btnCustomScaleUp && this.toolbar.btnCustomScaleDown) { + this.toolbar.btnCustomScaleUp.setDisabled(!(!width && !height)); + this.toolbar.btnCustomScaleDown.setDisabled(!(!width && !height)); + } + this._state.scaleWidth = width; + this._state.scaleHeight = height; + this._state.scale = scale; + } else { + if (this.toolbar.btnCustomScaleUp && this.toolbar.btnCustomScaleDown) { + this.toolbar.btnCustomScaleUp.setDisabled(!(!this._state.scaleWidth && !this._state.scaleHeight)); + this.toolbar.btnCustomScaleDown.setDisabled(!(!this._state.scaleWidth && !this._state.scaleHeight)); } - this.toolbar.setValueCustomScale(scale); - } else if (scale === undefined) { - this.toolbar.setValueCustomScale(this.api.asc_getPageOptions().asc_getPageSetup().asc_getScale()); } - _.each(this.toolbar.btnScale.menu.items, function(item){ - if (item.value === me._state.scale) { - item.setChecked(true); - return false; - } - }, this); } }, @@ -3390,50 +3411,40 @@ define([ } }, - onScaleClick: function(menu, item, event, scale) { + onScaleClick: function(type, menu, item, event, scale) { var me = this; if (me.api) { - if (scale !== undefined) { - me.api.asc_SetPrintScale(0, 0, scale); - me._state.scale = 4; - } else { - switch (item.value) { - case 0: - me.api.asc_SetPrintScale(0, 0, 100); - me._state.scale = 0; - break; - case 1: - me.api.asc_SetPrintScale(1, 1, 100); - me._state.scale = 1; - break; - case 2: - me.api.asc_SetPrintScale(1, 0, 100); - me._state.scale = 2; - break; - case 3: - me.api.asc_SetPrintScale(0, 1, 100); - me._state.scale = 3; - break; - case 5: - var win = new SSE.Views.ScaleDialog({ - api: me.api, - props: null, - handler: function (dlg, result) { - if (dlg == 'ok') { - if (me.api && result) { - me.api.asc_SetPrintScale(result.width, result.height, result.scale); - me.onChangeScaleSettings(result.width, result.height, result.scale); - } - me._state.scale = 5; - } else { - me.onChangeScaleSettings(); - } - Common.NotificationCenter.trigger('edit:complete'); - } - }); - win.show(); - break; + if (type === 'width' && item.value !== 'more') { + if (me._state.scaleHeight === undefined || me._state.scaleHeight === null) { + me._state.scaleHeight = 0; } + me.api.asc_SetPrintScale(item.value, me._state.scaleHeight, 100); + me.onChangeScaleSettings(item.value, me._state.scaleHeight, 100); + } else if (type === 'height' && item.value !== 'more') { + if (me._state.scaleWidth === undefined || me._state.scaleWidth === null) { + me._state.scaleWidth = 0; + } + me.api.asc_SetPrintScale(me._state.scaleWidth, item.value, 100); + me.onChangeScaleSettings(me._state.scaleWidth, item.value, 100); + } else if (type === 'scale' && scale !== undefined) { + me.api.asc_SetPrintScale(0, 0, scale); + } else if (item.value === 'custom' || item.value === 'more') { + var win = new SSE.Views.ScaleDialog({ + api: me.api, + props: null, + handler: function (dlg, result) { + if (dlg == 'ok') { + if (me.api && result) { + me.api.asc_SetPrintScale(result.width, result.height, result.scale); + me.onChangeScaleSettings(result.width, result.height, result.scale); + } + } else { + me.onChangeScaleSettings(me._state.scaleWidth, me._state.scaleHeight, me._state.scale); + } + Common.NotificationCenter.trigger('edit:complete'); + } + }); + win.show(); } } diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js index cbbed6958..bfadf0008 100644 --- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js +++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js @@ -350,6 +350,14 @@ define([ ] }); + var itemsTemplate = + _.template([ + '<% _.each(items, function(item) { %>', + '
  • style="border-top: 1px solid #e5e5e5;margin-top: 5px;" <% } %> >', + '<%= scope.getDisplayValue(item) %>', + '
  • ', + '<% }); %>' + ].join('')); this.cmbLayout = new Common.UI.ComboBox({ el : $markup.findById('#advsettings-print-combo-layout'), style : 'width: 242px;', @@ -361,8 +369,9 @@ define([ { value: 1, displayValue: this.textFitPage }, { value: 2, displayValue: this.textFitCols }, { value: 3, displayValue: this.textFitRows }, - { value: 4, displayValue: this.textCustomOptions} - ] + { value: 'customoptions', displayValue: this.textCustomOptions } + ], + itemsTemplate: itemsTemplate }); this.chPrintGrid = new Common.UI.CheckBox({ @@ -438,6 +447,27 @@ define([ return this; }, + addCustomScale: function (add) { + if (add) { + this.cmbLayout.setData([ + { value: 0, displayValue: this.textActualSize }, + { value: 1, displayValue: this.textFitPage }, + { value: 2, displayValue: this.textFitCols }, + { value: 3, displayValue: this.textFitRows }, + { value: 4, displayValue: this.textCustom }, + { value: 'customoptions', displayValue: this.textCustomOptions } + ]); + } else { + this.cmbLayout.setData([ + { value: 0, displayValue: this.textActualSize }, + { value: 1, displayValue: this.textFitPage }, + { value: 2, displayValue: this.textFitCols }, + { value: 3, displayValue: this.textFitRows }, + { value: 'customoptions', displayValue: this.textCustomOptions } + ]); + } + }, + updateMetricUnit: function() { if (this.spinners) { for (var i=0; i', + '
  • style="border-top: 1px solid #e5e5e5;margin-top: 5px;" <% } %> >', + '<%= scope.getDisplayValue(item) %>', + '
  • ', + '<% }); %>' + ].join('')); this.cmbLayout = new Common.UI.ComboBox({ el : $('#printadv-dlg-combo-layout'), style : 'width: 242px;', @@ -215,8 +223,9 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template', { value: 1, displayValue: this.textFitPage }, { value: 2, displayValue: this.textFitCols }, { value: 3, displayValue: this.textFitRows }, - { value: 4, displayValue: this.textCustomOptions} - ] + { value: 'customoptions', displayValue: this.textCustomOptions } + ], + itemsTemplate: itemsTemplate }); this.btnHide = new Common.UI.Button({ @@ -233,6 +242,27 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template', this.handlerShowDetails(this.btnHide); }, + addCustomScale: function (add) { + if (add) { + this.cmbLayout.setData([ + { value: 0, displayValue: this.textActualSize }, + { value: 1, displayValue: this.textFitPage }, + { value: 2, displayValue: this.textFitCols }, + { value: 3, displayValue: this.textFitRows }, + { value: 4, displayValue: this.textCustom }, + { value: 'customoptions', displayValue: this.textCustomOptions } + ]); + } else { + this.cmbLayout.setData([ + { value: 0, displayValue: this.textActualSize }, + { value: 1, displayValue: this.textFitPage }, + { value: 2, displayValue: this.textFitCols }, + { value: 3, displayValue: this.textFitRows }, + { value: 'customoptions', displayValue: this.textCustomOptions } + ]); + } + }, + setRange: function(value) { this.cmbRange.setValue(value); }, @@ -324,7 +354,8 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template', btnDownload: 'Save & Download', textRange: 'Range', textIgnore: 'Ignore Print Area', - textCustomOptions: 'Custom Options' + textCustomOptions: 'Custom Options', + textCustom: 'Custom' }, SSE.Views.PrintSettings || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 14173f21d..b96eac788 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -1345,8 +1345,6 @@ define([ '' ].join('')), stopPropagation: true, - toggleGroup: 'menuScale', - checkable: true, value: 4 }); @@ -1358,39 +1356,58 @@ define([ lock: [_set.docPropsLock, _set.lostConnect, _set.coAuth], menu: new Common.UI.Menu({ items: [ - { - caption: me.textActualSize, - checkable: true, - toggleGroup: 'menuScale', - value: 0 - }, - { - caption: me.textFitSheetOnOnePage, - checkable: true, - toggleGroup: 'menuScale', - value: 1 - }, - { - caption: me.textFitAllColumnsOnOnePage, - checkable: true, - toggleGroup: 'menuScale', - value: 2 - }, - { - caption: me.textFitAllRowsOnOnePage, - checkable: true, - toggleGroup: 'menuScale', - value: 3 - }, - me.mnuCustomScale, - {caption: '--'}, - { caption: me.textScaleCustom, - checkable: true, - toggleGroup: 'menuScale', - value: 5 - } ]}) }); + var menuWidthItem = new Common.UI.MenuItem({ + caption: me.textWidth, + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + items: [ + {caption: this.textAuto, value: 0, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '1 ' + this.textOnePage, value: 1, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '2 ' + this.textFewPages, value: 2, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '3 ' + this.textFewPages, value: 3, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '4 ' + this.textFewPages, value: 4, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '5 ' + this.textManyPages, value: 5, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '6 ' + this.textManyPages, value: 6, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '7 ' + this.textManyPages, value: 7, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '8 ' + this.textManyPages, value: 8, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '9 ' + this.textManyPages, value: 9, checkable: true, toggleGroup : 'scaleWidth'}, + {caption: '--'}, + {caption: this.textMorePages, value: 'more', checkable: true, toggleGroup : 'scaleWidth'} + ] + }) + }); + var menuHeightItem = new Common.UI.MenuItem({ + caption: me.textHeight, + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + items: [ + {caption: this.textAuto, value: 0, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '1 ' + this.textOnePage, value: 1, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '2 ' + this.textFewPages, value: 2, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '3 ' + this.textFewPages, value: 3, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '4 ' + this.textFewPages, value: 4, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '5 ' + this.textManyPages, value: 5, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '6 ' + this.textManyPages, value: 6, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '7 ' + this.textManyPages, value: 7, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '8 ' + this.textManyPages, value: 8, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '9 ' + this.textManyPages, value: 9, checkable: true, toggleGroup : 'scaleHeight'}, + {caption: '--'}, + {caption: this.textMorePages, value: 'more', checkable: true, toggleGroup : 'scaleHeight'} + ] + }) + }); + me.btnScale.menu.addItem(menuWidthItem); + me.btnScale.menu.addItem(menuHeightItem); + me.btnScale.menu.addItem(me.mnuCustomScale); + me.btnScale.menu.addItem({caption: '--'}); + me.btnScale.menu.addItem( + { caption: me.textScaleCustom, value: 'custom' + }); + me.menuWidthScale = me.btnScale.menu.items[0].menu; + me.menuHeightScale = me.btnScale.menu.items[1].menu; + me.mnuScale = me.btnScale.menu; me.mnuScale.on('show:after', _.bind(me.onAfterShowMenuScale, me)); @@ -1472,7 +1489,7 @@ define([ } if (!me.itemCustomScale) { me.itemCustomScale = $('.custom-scale', me.mnuCustomScale.$el).on('click', _.bind(function () { - me.fireEvent('click:customscale', [undefined, undefined, undefined, me.valueCustomScale], this); + me.fireEvent('click:customscale', ['scale', undefined, undefined, undefined, me.valueCustomScale], this); }, this)); } if (!me.btnCustomScaleUp) { @@ -1491,6 +1508,7 @@ define([ me.fireEvent('change:scalespn', ['down', me.valueCustomScale], this); }, this)); } + SSE.getController('Toolbar').onChangeScaleSettings(); }, setValueCustomScale: function(val) { @@ -2495,6 +2513,13 @@ define([ textFitAllColumnsOnOnePage: 'Fit All Columns on One Page', textFitAllRowsOnOnePage: 'Fit All Rows on One Page', textScaleCustom: 'Custom', - textScale: 'Scale' + textScale: 'Scale', + textAuto: 'Auto', + textOnePage: 'page', + textFewPages: 'pages', + textManyPages: 'pages', + textHeight: 'Height', + textWidth: 'Width', + textMorePages: 'More pages' }, SSE.Views.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index bac17e95b..77ebe8dd2 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -1751,6 +1751,7 @@ "SSE.Views.MainSettingsPrint.textPrintHeadings": "Print Row and Column Headings", "SSE.Views.MainSettingsPrint.textSettings": "Settings for", "SSE.Views.MainSettingsPrint.textCustomOptions": "Custom Options", + "SSE.Views.MainSettingsPrint.textCustom": "Custom", "SSE.Views.NamedRangeEditDlg.errorCreateDefName": "The existing named ranges cannot be edited and the new ones cannot be created
    at the moment as some of them are being edited.", "SSE.Views.NamedRangeEditDlg.namePlaceholder": "Defined name", "SSE.Views.NamedRangeEditDlg.notcriticalErrorTitle": "Warning", @@ -1927,6 +1928,7 @@ "SSE.Views.PrintSettings.textTitle": "Print Settings", "SSE.Views.PrintSettings.textTitlePDF": "PDF Settings", "SSE.Views.PrintSettings.textCustomOptions": "Custom Options", + "SSE.Views.PrintSettings.textCustom": "Custom", "SSE.Views.RightMenu.txtCellSettings": "Cell settings", "SSE.Views.RightMenu.txtChartSettings": "Chart settings", "SSE.Views.RightMenu.txtImageSettings": "Image settings", @@ -2410,6 +2412,13 @@ "SSE.Views.Toolbar.txtYen": "¥ Yen", "SSE.Views.Toolbar.capBtnScale": "Scale to Fit", "SSE.Views.Toolbar.tipScale": "Scale to Fit", + "SSE.Views.Toolbar.textAuto": "Auto", + "SSE.Views.Toolbar.textOnePage": "page", + "SSE.Views.Toolbar.textFewPages": "pages", + "SSE.Views.Toolbar.textManyPages": "pages", + "SSE.Views.Toolbar.textHeight": "Height", + "SSE.Views.Toolbar.textWidth": "Width", + "SSE.Views.Toolbar.textMorePages": "More pages", "SSE.Views.Top10FilterDialog.textType": "Show", "SSE.Views.Top10FilterDialog.txtBottom": "Bottom", "SSE.Views.Top10FilterDialog.txtItems": "Item", From 373a69cb2e325363103587044917505da747e53a Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 15 Oct 2019 15:42:19 +0300 Subject: [PATCH 015/108] [SSE] Fix close of scale --- apps/spreadsheeteditor/main/app/view/ScaleDialog.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js index c49e2704c..3b5f71c68 100644 --- a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js @@ -169,10 +169,10 @@ define([ }, _handleInput: function(state) { - if (this.options.handler) { - this.options.handler.call(this, state, (state == 'ok') ? this.getSettings() : undefined); + if (this.options.handler && state === 'ok') { + this.options.handler.call(this, 'ok', this.getSettings()); } - this.close(); + this.close(state); }, onBtnClick: function(event) { @@ -316,6 +316,13 @@ define([ } }, + close: function(state) { + if (this.options.handler && state !== 'ok') { + this.options.handler.call(this, 'cancel', undefined); + } + Common.UI.Window.prototype.close.call(this); + }, + textTitle: 'Scale Settings', textWidth: 'Width', textHeight: 'Height', From a869f7e283c919cf71c139c0d957fc52dee57f12 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 15 Oct 2019 16:19:07 +0300 Subject: [PATCH 016/108] [DE] Fix Bug 43190 --- apps/documenteditor/main/app/view/CaptionDialog.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/documenteditor/main/app/view/CaptionDialog.js b/apps/documenteditor/main/app/view/CaptionDialog.js index 8073f2075..7ca482cf3 100644 --- a/apps/documenteditor/main/app/view/CaptionDialog.js +++ b/apps/documenteditor/main/app/view/CaptionDialog.js @@ -255,6 +255,7 @@ define([ me.props.put_ExcludeLabel(newValue=='checked'); me.props.updateName(); me.txtCaption.setValue(me.props.get_Name()); + me.positionCaption = me.txtCaption.getValue().length; }); this.cmbNumbering = new Common.UI.ComboBox({ @@ -285,6 +286,7 @@ define([ me.props.put_IncludeChapterNumber(newValue=='checked'); me.props.updateName(); me.txtCaption.setValue(me.props.get_Name()); + me.positionCaption = me.txtCaption.getValue().length; me.cmbChapter.setDisabled(newValue!=='checked'); me.cmbSeparator.setDisabled(newValue!=='checked'); }); From 5d882431992e5c32183695ab30c1ea564f628813 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 15 Oct 2019 17:18:13 +0300 Subject: [PATCH 017/108] [SSE] Change warning before deleting several sheets --- apps/spreadsheeteditor/main/locale/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 31000a212..753d94221 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -744,7 +744,7 @@ "SSE.Controllers.Statusbar.errorLastSheet": "Workbook must have at least one visible worksheet.", "SSE.Controllers.Statusbar.errorRemoveSheet": "Cannot delete the worksheet.", "SSE.Controllers.Statusbar.strSheet": "Sheet", - "SSE.Controllers.Statusbar.warnDeleteSheet": "The worksheet might contain data. Are you sure you want to proceed?", + "SSE.Controllers.Statusbar.warnDeleteSheet": "The selected worksheets might contain data. Are you sure you want to proceed?", "SSE.Controllers.Statusbar.zoomText": "Zoom {0}%", "SSE.Controllers.Toolbar.confirmAddFontName": "The font you are going to save is not available on the current device.
    The text style will be displayed using one of the system fonts, the saved font will be used when it is available.
    Do you want to continue?", "SSE.Controllers.Toolbar.errorMaxRows": "ERROR! The maximum number of data series per chart is 255", From 9d0f639fda6ce811cc676b2e4ae4c29ae7311e72 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 15 Oct 2019 17:30:19 +0300 Subject: [PATCH 018/108] [Mentions] Fix template for email list --- apps/common/main/lib/view/ReviewPopover.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/common/main/lib/view/ReviewPopover.js b/apps/common/main/lib/view/ReviewPopover.js index a3f507da5..a8ff64285 100644 --- a/apps/common/main/lib/view/ReviewPopover.js +++ b/apps/common/main/lib/view/ReviewPopover.js @@ -1121,7 +1121,10 @@ define([ return (item.email && 0 === item.email.toLowerCase().indexOf(str) || item.name && 0 === item.name.toLowerCase().indexOf(str)) }); } - var tpl = _.template('
    <%= Common.Utils.String.htmlEncode(caption) %>
    <%= Common.Utils.String.htmlEncode(options.value) %>
    '), + var tpl = _.template('' + + '
    <%= Common.Utils.String.htmlEncode(caption) %>
    ' + + '
    <%= Common.Utils.String.htmlEncode(options.value) %>
    ' + + '
    '), divider = false; _.each(users, function(menuItem, index) { if (divider && !menuItem.hasAccess) { From a505981d8925063eff4c4fb4cd2a85a5739ae428 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 16 Oct 2019 11:18:22 +0300 Subject: [PATCH 019/108] Fix Bug 43160 --- apps/common/main/lib/view/ReviewPopover.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/common/main/lib/view/ReviewPopover.js b/apps/common/main/lib/view/ReviewPopover.js index a8ff64285..56c06bb6a 100644 --- a/apps/common/main/lib/view/ReviewPopover.js +++ b/apps/common/main/lib/view/ReviewPopover.js @@ -1014,6 +1014,8 @@ define([ }); } }, this); + if (this.emailMenu && this.emailMenu.rendered) + this.emailMenu.cmpEl.css('display', 'none'); }, isCommentsViewMouseOver: function () { @@ -1163,8 +1165,10 @@ define([ }, insertEmailToTextbox: function(str, left, right) { - var textBox = this.commentsView.getTextBox(), - val = textBox.val(); + var textBox = this.commentsView.getTextBox(); + if (!textBox) return; + + var val = textBox.val(); textBox.val(val.substring(0, left) + '+' + str + ' ' + val.substring(right+1, val.length)); setTimeout(function(){ textBox[0].selectionStart = textBox[0].selectionEnd = left + str.length + 2; From d8da495bc8f5f2f82599cad519b1375d2b2783c8 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 16 Oct 2019 17:27:33 +0300 Subject: [PATCH 020/108] Refactoring menu scroll: some items was not fully displayed (user list in mentions, page size in [de]) --- apps/common/main/lib/component/Menu.js | 16 ++++++++++++---- apps/common/main/lib/view/ReviewPopover.js | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index a0664d062..e1accaddc 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -380,9 +380,15 @@ define([ onAfterShowMenu: function(e) { this.trigger('show:after', this, e); if (this.scroller) { - this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); - var menuRoot = this.menuRoot, - $selected = menuRoot.find('> li .checked'); + var menuRoot = this.menuRoot; + if (this.wheelSpeed===undefined) { + var item = menuRoot.find('> li:first'), + itemHeight = (item.length) ? item.outerHeight() : 1; + this.wheelSpeed = Math.min((Math.floor(menuRoot.height()/itemHeight) * itemHeight)/10, 20); + } + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed}); + + var $selected = menuRoot.find('> li .checked'); if ($selected.length) { var itemTop = $selected.position().top, itemHeight = $selected.height(), @@ -469,7 +475,7 @@ define([ this._search.index = idxCandidate; var item = itemCandidate.cmpEl.find('a'); if (this.scroller) { - this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed}); var itemTop = item.position().top, itemHeight = item.height(), listHeight = this.menuRoot.height(); @@ -552,8 +558,10 @@ define([ suppressScrollX: true, alwaysVisibleY: this.scrollAlwaysVisible })); + this.wheelSpeed = undefined; } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) { menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px'); + this.wheelSpeed = undefined; } } } else { diff --git a/apps/common/main/lib/view/ReviewPopover.js b/apps/common/main/lib/view/ReviewPopover.js index 56c06bb6a..aba4efc0b 100644 --- a/apps/common/main/lib/view/ReviewPopover.js +++ b/apps/common/main/lib/view/ReviewPopover.js @@ -469,7 +469,7 @@ define([ }); this.emailMenu = new Common.UI.Menu({ - maxHeight: 190, + maxHeight: 200, cyclic: false, items: [] }).on('render:after', function(mnu) { From f54bd052e75f186e83aef3d0a733a97a29c2cc8f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 16 Oct 2019 17:45:14 +0300 Subject: [PATCH 021/108] ComboBox, Menu: refactoring scrolling to element on opening and searching item by keypress. --- apps/common/main/lib/component/ComboBox.js | 16 +++++++---- apps/common/main/lib/component/Menu.js | 33 +++++++++++++--------- 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js index 5b7a7f4cc..7da1a35b5 100644 --- a/apps/common/main/lib/component/ComboBox.js +++ b/apps/common/main/lib/component/ComboBox.js @@ -300,11 +300,13 @@ define([ if ($selected.length) { var itemTop = $selected.position().top, - itemHeight = $selected.height(), - listHeight = $list.height(); + itemHeight = $selected.outerHeight(), + listHeight = $list.outerHeight(); if (itemTop < 0 || itemTop + itemHeight > listHeight) { - $list.scrollTop($list.scrollTop() + itemTop + itemHeight - (listHeight/2)); + var height = $list.scrollTop() + itemTop + (itemHeight - listHeight)/2; + height = (Math.floor(height/itemHeight) * itemHeight); + $list.scrollTop(height); } setTimeout(function(){$selected.find('a').focus();}, 1); } @@ -389,10 +391,12 @@ define([ this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); var $list = $(this.el).find('ul'); var itemTop = item.position().top, - itemHeight = item.height(), - listHeight = $list.height(); + itemHeight = item.outerHeight(), + listHeight = $list.outerHeight(); if (itemTop < 0 || itemTop + itemHeight > listHeight) { - $list.scrollTop($list.scrollTop() + itemTop + itemHeight - (listHeight/2)); + var height = $list.scrollTop() + itemTop; + height = (Math.floor(height/itemHeight) * itemHeight); + $list.scrollTop(height); } } item.focus(); diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index e1accaddc..95b35b4e9 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -391,10 +391,12 @@ define([ var $selected = menuRoot.find('> li .checked'); if ($selected.length) { var itemTop = $selected.position().top, - itemHeight = $selected.height(), - listHeight = menuRoot.height(); + itemHeight = $selected.outerHeight(), + listHeight = menuRoot.outerHeight(); if (itemTop < 0 || itemTop + itemHeight > listHeight) { - menuRoot.scrollTop(menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2)); + var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2; + height = (Math.floor(height/itemHeight) * itemHeight); + menuRoot.scrollTop(height); } setTimeout(function(){$selected.focus();}, 1); } @@ -477,10 +479,12 @@ define([ if (this.scroller) { this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed}); var itemTop = item.position().top, - itemHeight = item.height(), - listHeight = this.menuRoot.height(); + itemHeight = item.outerHeight(), + listHeight = this.menuRoot.outerHeight(); if (itemTop < 0 || itemTop + itemHeight > listHeight) { - this.menuRoot.scrollTop(this.menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2)); + var height = this.menuRoot.scrollTop() + itemTop; + height = (Math.floor(height/itemHeight) * itemHeight); + this.menuRoot.scrollTop(height); } } item.focus(); @@ -576,7 +580,6 @@ define([ if (top < 0) top = 0; } - if (this.options.additionalAlign) this.options.additionalAlign.call(this, menuRoot, left, top); else @@ -856,10 +859,12 @@ define([ $selected = menuRoot.find('> li .checked'); if ($selected.length) { var itemTop = $selected.position().top, - itemHeight = $selected.height(), - listHeight = menuRoot.height(); + itemHeight = $selected.outerHeight(), + listHeight = menuRoot.outerHeight(); if (itemTop < 0 || itemTop + itemHeight > listHeight) { - menuRoot.scrollTop(menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2)); + var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2; + height = (Math.floor(height/itemHeight) * itemHeight); + menuRoot.scrollTop(height); } setTimeout(function(){$selected.focus();}, 1); } @@ -944,10 +949,12 @@ define([ if (this.scroller) { this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); var itemTop = item.position().top, - itemHeight = item.height(), - listHeight = this.menuRoot.height(); + itemHeight = item.outerHeight(), + listHeight = this.menuRoot.outerHeight(); if (itemTop < 0 || itemTop + itemHeight > listHeight) { - this.menuRoot.scrollTop(this.menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2)); + var height = this.menuRoot.scrollTop() + itemTop; + height = (Math.floor(height/itemHeight) * itemHeight); + this.menuRoot.scrollTop(height); } } item.focus(); From 7ee0cc863ef260a1fc5c1e64b383c7a525e6a624 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Thu, 17 Oct 2019 10:46:35 +0300 Subject: [PATCH 022/108] [pe] Fixed skeleton layout --- apps/presentationeditor/main/index.html | 2 +- apps/presentationeditor/main/resources/less/app.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html index 301b18e40..4ff43a80c 100644 --- a/apps/presentationeditor/main/index.html +++ b/apps/presentationeditor/main/index.html @@ -162,7 +162,7 @@ .loadmask > .placeholder .slide-container > .line:nth-child(1) { height: 30%; - margin: 120px 80px 0; + margin: 10% 80px 0; } @keyframes flickerAnimation { diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 1d61cbaea..00ff17b78 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -221,7 +221,7 @@ &:nth-child(1) { height: 30%; - margin: 120px 80px 0; + margin: 10% 80px 0; } &.empty { From 5014b3fca1b171aa2e09f5264b2823c8db9304d1 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 17 Oct 2019 11:20:57 +0300 Subject: [PATCH 023/108] [pe] Fixed skeleton layout --- apps/presentationeditor/main/index.html.deploy | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy index 158e07bbf..bc3e55ebc 100644 --- a/apps/presentationeditor/main/index.html.deploy +++ b/apps/presentationeditor/main/index.html.deploy @@ -164,7 +164,7 @@ .loadmask > .placeholder .slide-container > .line:nth-child(1) { height: 30%; - margin: 120px 80px 0; + margin: 10% 80px 0; } @keyframes flickerAnimation { From f5ff22a2bc8b81bc7b8bf5d14c494e1352b9688a Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 17 Oct 2019 11:29:37 +0300 Subject: [PATCH 024/108] [SSE] Add hyperlink: set default value for internal range --- apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js index bfe086a30..bad05e98b 100644 --- a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js @@ -152,6 +152,7 @@ define([ style : 'width: 100%;', validateOnChange: true, validateOnBlur: false, + value: Common.Utils.InternalSettings.get("sse-settings-r1c1") ? 'R1C1' : 'A1', validation : function(value) { var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.FormatTable, value, false); if (isvalid == Asc.c_oAscError.ID.No) { From 163e0e26dcbcb963ace079248ff661932cf763c1 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 17 Oct 2019 13:09:58 +0300 Subject: [PATCH 025/108] [mobile] Custom color (add border, add translations) --- apps/common/mobile/lib/component/HsbColorPicker.js | 3 +-- .../mobile/resources/less/ios/_color-palette.less | 1 + .../resources/less/material/_color-palette.less | 1 + apps/documenteditor/mobile/locale/en.json | 11 +++++++++++ apps/documenteditor/mobile/resources/css/app-ios.css | 1 + .../mobile/resources/css/app-material.css | 1 + apps/presentationeditor/mobile/locale/en.json | 11 +++++++++++ .../mobile/resources/css/app-ios.css | 1 + .../mobile/resources/css/app-material.css | 1 + apps/spreadsheeteditor/mobile/locale/en.json | 9 +++++++++ .../mobile/resources/css/app-ios.css | 1 + .../mobile/resources/css/app-material.css | 1 + 12 files changed, 40 insertions(+), 2 deletions(-) diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js index 1f201187a..22d461934 100644 --- a/apps/common/mobile/lib/component/HsbColorPicker.js +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -321,8 +321,7 @@ define([ } this.trigger('addcustomcolor', this, color); } - }, + } - textCustomColors: 'Custom Colors' }, Common.UI.HsbColorPicker || {})); }); \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index 1533ff2d4..f243b1ef6 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -79,6 +79,7 @@ height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #c4c4c4; } .new-color-hsb-preview { width: 100%; diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index 3e7b7d1b4..511765221 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -84,6 +84,7 @@ height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #ededed; } .new-color-hsb-preview { width: 100%; diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 96ecafa44..97469cecc 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -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", diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index d094f347b..974bae797 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6260,6 +6260,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #c4c4c4; } .custom-colors .new-color-hsb-preview { width: 100%; diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index 2f040a533..450682feb 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5854,6 +5854,7 @@ html.phone .document-menu .list-block .item-link { height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #ededed; } .custom-colors .new-color-hsb-preview { width: 100%; diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index d55aa3c0a..42ca143eb 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -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", diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index d2e85d0d2..ad0ef6905 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6260,6 +6260,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #c4c4c4; } .custom-colors .new-color-hsb-preview { width: 100%; diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index 8293d97da..645479deb 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5854,6 +5854,7 @@ html.phone .document-menu .list-block .item-link { height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #ededed; } .custom-colors .new-color-hsb-preview { width: 100%; diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 138513d20..a2dfeeeb3 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -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", diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index f6cdb073f..fd37673e5 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6260,6 +6260,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #c4c4c4; } .custom-colors .new-color-hsb-preview { width: 100%; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index 954150958..61264eaf2 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -5864,6 +5864,7 @@ html.phone .document-menu .list-block .item-link { height: 72px; border-radius: 100px; overflow: hidden; + border: 1px solid #ededed; } .custom-colors .new-color-hsb-preview { width: 100%; From ea251e41ca946b6843d7724d0c4a9121f606acaa Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 17 Oct 2019 15:45:28 +0300 Subject: [PATCH 026/108] [SSE] Fix Bug 43232 --- apps/spreadsheeteditor/main/app/controller/Statusbar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index 64bc4b9a5..794fc91da 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -290,7 +290,8 @@ define([ } var index = 0, name; - while(++index < 1000) { + while(true) { + index++; name = this.strSheet + index; if (items.indexOf(name.toLowerCase()) < 0) break; } @@ -319,7 +320,8 @@ define([ var first = re ? re[1] : orig + ' '; var index = 1, name; - while(++index < 1000) { + while(true) { + index++; name = first + '(' + index + ')'; if (names.indexOf(name.toLowerCase()) < 0) break; } From d895ecde62514bfcfd89f44bcb6008ae2860c96b Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 17 Oct 2019 17:03:31 +0300 Subject: [PATCH 027/108] [SSE] Save height of the formula bar in the browser local storage --- .../main/app/controller/CellEditor.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/apps/spreadsheeteditor/main/app/controller/CellEditor.js b/apps/spreadsheeteditor/main/app/controller/CellEditor.js index 0530a7316..4afe73ad0 100644 --- a/apps/spreadsheeteditor/main/app/controller/CellEditor.js +++ b/apps/spreadsheeteditor/main/app/controller/CellEditor.js @@ -119,6 +119,14 @@ define([ this.bindViewEvents(this.editor, this.events); this.editor.$el.parent().find('.after').css({zIndex: '4'}); // for spreadsheets - bug 23127 + + var val = Common.localStorage.getItem('sse-celleditor-height'); + this.editor.keep_height = (val!==null && parseInt(val)>0) ? parseInt(val) : 74; + if (Common.localStorage.getBool('sse-celleditor-expand')) { + this.editor.$el.height(this.editor.keep_height); + this.onLayoutResize(undefined, 'cell:edit'); + } + this.editor.btnNamedRanges.menu.on('item:click', _.bind(this.onNamedRangesMenu, this)) .on('show:before', _.bind(this.onNameBeforeShow, this)); this.namedrange_locked = false; @@ -180,8 +188,11 @@ define([ if (this.editor.$el.height() > 19) { if (!this.editor.$btnexpand.hasClass('btn-collapse')) this.editor.$btnexpand['addClass']('btn-collapse'); + o && Common.localStorage.setItem('sse-celleditor-height', this.editor.$el.height()); + o && Common.localStorage.setBool('sse-celleditor-expand', true); } else { this.editor.$btnexpand['removeClass']('btn-collapse'); + o && Common.localStorage.setBool('sse-celleditor-expand', false); } } }, @@ -218,9 +229,11 @@ define([ this.editor.keep_height = this.editor.$el.height(); this.editor.$el.height(19); this.editor.$btnexpand['removeClass']('btn-collapse'); + Common.localStorage.setBool('sse-celleditor-expand', false); } else { - this.editor.$el.height(this.editor.keep_height||74); + this.editor.$el.height(this.editor.keep_height); this.editor.$btnexpand['addClass']('btn-collapse'); + Common.localStorage.setBool('sse-celleditor-expand', true); } Common.NotificationCenter.trigger('layout:changed', 'celleditor'); From 4da866952b98fea80e63b70c560ab20927497610 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 18 Oct 2019 10:37:32 +0300 Subject: [PATCH 028/108] Revert "[SSE] Remove locking when moving tabs". For Bug 43206 This reverts commit e94e6e226841fe7ab03632f6e9ba5c13e6726667. --- apps/common/main/lib/component/TabBar.js | 10 ++++++---- .../spreadsheeteditor/main/app/controller/Statusbar.js | 4 ++-- apps/spreadsheeteditor/main/app/view/Statusbar.js | 8 ++++---- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index 85c1dafde..27d120875 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -391,10 +391,12 @@ define([ }, this.bar), mousedown: $.proxy(function (e) { if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) { - if (this.bar.selectTabs.length > 1) { - dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs); - } else { - dragHelper.setHook(e, this.bar, tab); + if (!tab.isLockTheDrag) { + if (this.bar.selectTabs.length > 1) { + dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs); + } else { + dragHelper.setHook(e, this.bar, tab); + } } } }, this) diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index 794fc91da..6b4d37ad2 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -169,7 +169,7 @@ define([ tab = this.statusbar.tabbar.getAt(i); if (index == tab.sheetindex) { tab[locked?'addClass':'removeClass']('coauth-locked'); - //tab.isLockTheDrag = locked || (this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable); + tab.isLockTheDrag = locked || (this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable); break; } } @@ -241,7 +241,7 @@ define([ if (item.sheetindex !== currentIdx) { item.disable(mode==Asc.c_oAscSelectionDialogType.FormatTable); } - //item.isLockTheDrag = (item.hasClass('coauth-locked') || (mode!=Asc.c_oAscSelectionDialogType.None)); + item.isLockTheDrag = (item.hasClass('coauth-locked') || (mode!=Asc.c_oAscSelectionDialogType.None)); } this.statusbar.rangeSelectionMode = mode; }, diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 420ebda83..49385a5c7 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -330,7 +330,7 @@ define([ label : me.api.asc_getWorksheetName(i), // reorderable : !locked, cls : locked ? 'coauth-locked':'', -// isLockTheDrag : locked + isLockTheDrag : locked }; this.api.asc_isWorksheetHidden(i)? hidentems.push(tab) : items.push(tab); @@ -435,7 +435,7 @@ define([ this.tabMenu.items[1].setDisabled(issheetlocked); this.tabMenu.items[2].setDisabled(issheetlocked); this.tabMenu.items[3].setDisabled(issheetlocked); - this.tabMenu.items[4].setDisabled(isdoclocked); + this.tabMenu.items[4].setDisabled(issheetlocked); this.tabMenu.items[5].setDisabled(issheetlocked); this.tabMenu.items[6].setDisabled(isdoclocked); this.tabMenu.items[7].setDisabled(issheetlocked); @@ -446,8 +446,8 @@ define([ this.tabMenu.items[10].show(); } - this.tabMenu.items[9].setDisabled(isdoclocked); - this.tabMenu.items[10].setDisabled(isdoclocked); + this.tabMenu.items[9].setDisabled(issheetlocked); + this.tabMenu.items[10].setDisabled(issheetlocked); this.api.asc_closeCellEditor(); this.api.asc_enableKeyEvents(false); From 6b993485e21580fec2fd35a4e901d1f5bdd7ec6e Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Mon, 21 Oct 2019 16:58:34 +0300 Subject: [PATCH 029/108] [DE][SSE][PE] Skeleton improvement --- apps/documenteditor/main/index.html | 34 ++++++--------- apps/documenteditor/main/index.html.deploy | 41 +++++++------------ apps/presentationeditor/main/index.html | 26 ++++-------- .../presentationeditor/main/index.html.deploy | 26 ++++-------- apps/spreadsheeteditor/main/index.html | 22 ++++------ apps/spreadsheeteditor/main/index.html.deploy | 22 ++++------ 6 files changed, 59 insertions(+), 112 deletions(-) diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index 41d1ff210..48fe2d650 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -18,7 +18,7 @@ width: 100%; overflow: hidden; border: none; - background-color: #f4f4f4; + background: #f1f1f1; z-index: 1001; } @@ -31,6 +31,7 @@ .loadmask > .brendpanel > div { display: flex; align-items: center; + height: 28px; } .loadmask > .brendpanel .spacer { @@ -50,15 +51,6 @@ opacity: 0; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 12px; - margin: 4px 10px; - background: rgba(255, 255, 255, 0.2); - } - .loadmask > .brendpanel .rect { vertical-align: middle; width: 50px; @@ -69,8 +61,8 @@ } .loadmask > .sktoolbar { - background: #fafafa; - border-bottom: 1px solid #e2e2e2; + background: #f1f1f1; + border-bottom: 1px solid #cfcfcf; height: 46px; padding: 10px 12px; box-sizing: content-box; @@ -130,24 +122,24 @@ } @keyframes flickerAnimation { - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @-o-keyframes flickerAnimation{ - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @-moz-keyframes flickerAnimation{ - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @-webkit-keyframes flickerAnimation{ - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @@ -217,7 +209,7 @@
    -
    +
    diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy index b83e79fed..ee8e63733 100644 --- a/apps/documenteditor/main/index.html.deploy +++ b/apps/documenteditor/main/index.html.deploy @@ -19,19 +19,20 @@ width: 100%; overflow: hidden; border: none; - background-color: #f4f4f4; + background: #f1f1f1; z-index: 1001; } .loadmask > .brendpanel { width: 100%; - height: 56px; + min-height: 32px; background: #446995; } .loadmask > .brendpanel > div { display: flex; align-items: center; + height: 28px; } .loadmask > .brendpanel .spacer { @@ -51,15 +52,6 @@ opacity: 0; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 12px; - margin: 4px 10px; - background: rgba(255, 255, 255, 0.2); - } - .loadmask > .brendpanel .rect { vertical-align: middle; width: 50px; @@ -70,8 +62,8 @@ } .loadmask > .sktoolbar { - background: #fafafa; - border-bottom: 1px solid #e2e2e2; + background: #f1f1f1; + border-bottom: 1px solid #cfcfcf; height: 46px; padding: 10px 12px; box-sizing: content-box; @@ -82,11 +74,6 @@ padding: 0; white-space: nowrap; 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; - animation: flickerAnimation 2s infinite ease-in-out; } .loadmask > .sktoolbar li { @@ -136,24 +123,24 @@ } @keyframes flickerAnimation { - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @-o-keyframes flickerAnimation{ - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @-moz-keyframes flickerAnimation{ - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @-webkit-keyframes flickerAnimation{ - 0% { opacity:0.1; } + 0% { opacity:0.5; } 50% { opacity:1; } - 100% { opacity:0.1; } + 100% { opacity:0.5; } } @@ -217,7 +204,7 @@ -
    +