From dfa807f4b11166df3bf8877234720cdda22a6509 Mon Sep 17 00:00:00 2001 From: Sergey Luzyanin Date: Tue, 13 Aug 2019 14:34:20 +0300 Subject: [PATCH 001/258] [comapre] Add scripts --- apps/documenteditor/sdk_dev_scripts.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/documenteditor/sdk_dev_scripts.js b/apps/documenteditor/sdk_dev_scripts.js index 7eb434600..6e1046429 100644 --- a/apps/documenteditor/sdk_dev_scripts.js +++ b/apps/documenteditor/sdk_dev_scripts.js @@ -13,6 +13,7 @@ var sdk_dev_scrpipts = [ "../../../../sdkjs/common/TableId.js", "../../../../sdkjs/common/TableIdChanges.js", "../../../../sdkjs/common/macros.js", + "../../../../sdkjs/common/delta.js", "../../../../sdkjs/common/NumFormat.js", "../../../../sdkjs/common/SerializeChart.js", "../../../../sdkjs/common/AdvancedOptions.js", @@ -91,6 +92,7 @@ var sdk_dev_scrpipts = [ "../../../../sdkjs/word/Editor/GraphicObjects/WrapManager.js", "../../../../sdkjs/word/Editor/CollaborativeEditing.js", "../../../../sdkjs/word/Editor/DocumentContentElementBase.js", + "../../../../sdkjs/word/Editor/DocumentComparison.js", "../../../../sdkjs/word/Editor/ParagraphContentBase.js", "../../../../sdkjs/word/Editor/Comments.js", "../../../../sdkjs/word/Editor/CommentsChanges.js", From 9b0047189df3920013de45579a3e1bcfbf0f3f68 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 13 Aug 2019 17:40:52 +0300 Subject: [PATCH 002/258] [DE] Compare two documents --- .../main/lib/controller/ReviewChanges.js | 53 ++++++++++++++++++- .../main/lib/view/ImageFromUrlDialog.js | 2 +- apps/common/main/lib/view/ReviewChanges.js | 47 +++++++++++++++- apps/documenteditor/main/app/view/Toolbar.js | 4 +- apps/documenteditor/main/locale/en.json | 7 +++ 5 files changed, 106 insertions(+), 7 deletions(-) diff --git a/apps/common/main/lib/controller/ReviewChanges.js b/apps/common/main/lib/controller/ReviewChanges.js index 9fe50e74d..b1aa9de10 100644 --- a/apps/common/main/lib/controller/ReviewChanges.js +++ b/apps/common/main/lib/controller/ReviewChanges.js @@ -74,7 +74,8 @@ define([ 'reviewchange:reject': _.bind(this.onRejectClick, this), 'reviewchange:delete': _.bind(this.onDeleteClick, this), 'reviewchange:preview': _.bind(this.onBtnPreviewClick, this), - 'reviewchanges:view': _.bind(this.onReviewViewClick, this), + 'reviewchange:view': _.bind(this.onReviewViewClick, this), + 'reviewchange:compare': _.bind(this.onCompareClick, this), 'lang:document': _.bind(this.onDocLanguage, this), 'collaboration:coauthmode': _.bind(this.onCoAuthMode, this) }, @@ -554,6 +555,53 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.view); }, + onCompareClick: function(item) { + if (this.api) { + if (item === 'file') { + // if (this.api) + // this.api.asc_addDocument(); + Common.NotificationCenter.trigger('edit:complete', this.view); + } else if (item === 'url') { + var me = this; + (new Common.Views.ImageFromUrlDialog({ + title: me.textUrl, + handler: function(result, value) { + if (result == 'ok') { + if (me.api) { + var checkUrl = value.replace(/ /g, ''); + if (!_.isEmpty(checkUrl)) { + // me.api.AddDocumentUrl(checkUrl); + } + } + Common.NotificationCenter.trigger('edit:complete', me.view); + } + } + })).show(); + } else if (item === 'storage') { + // if (this.toolbar.mode.canRequestInsertImage) { + // Common.Gateway.requestInsertImage(); + // } else { + // (new Common.Views.SelectFileDlg({ + // fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly") + // })).on('selectfile', function(obj, file){ + // me.insertImage(file); + // }).show(); + // } + } else if (item === 'settings') { + // show settings dialog + } + } + Common.NotificationCenter.trigger('edit:complete', this.view); + }, + + insertImage: function(data) { + if (data && data.url) { + this.toolbar.fireEvent('insertimage', this.toolbar); + this.api.AddImageUrl(data.url, undefined, data.token);// for loading from storage + Common.component.Analytics.trackEvent('ToolBar', 'Image'); + } + }, + turnDisplayMode: function(mode) { if (this.api) { if (mode === 'final') @@ -797,6 +845,7 @@ define([ textTableRowsDel: 'Table Rows Deleted', textParaMoveTo: 'Moved:', textParaMoveFromUp: 'Moved Up:', - textParaMoveFromDown: 'Moved Down:' + textParaMoveFromDown: 'Moved Down:', + textUrl: 'Paste a document URL' }, Common.Controllers.ReviewChanges || {})); }); \ No newline at end of file diff --git a/apps/common/main/lib/view/ImageFromUrlDialog.js b/apps/common/main/lib/view/ImageFromUrlDialog.js index 63b0ea685..9f25ef434 100644 --- a/apps/common/main/lib/view/ImageFromUrlDialog.js +++ b/apps/common/main/lib/view/ImageFromUrlDialog.js @@ -55,7 +55,7 @@ define([ this.template = [ '
', '
', - '', + '', '
', '
', '
', diff --git a/apps/common/main/lib/view/ReviewChanges.js b/apps/common/main/lib/view/ReviewChanges.js index 2325f1b31..5e5f4daaf 100644 --- a/apps/common/main/lib/view/ReviewChanges.js +++ b/apps/common/main/lib/view/ReviewChanges.js @@ -79,6 +79,10 @@ define([ '' + '' + '
' + + '
' + + '' + + '
' + + '
' + '
' + '' + '
' + @@ -115,6 +119,14 @@ define([ me.fireEvent('reviewchange:reject', [menu, item]); }); + this.btnCompare.on('click', function (e) { + me.fireEvent('reviewchange:compare', ['file']); + }); + + this.btnCompare.menu.on('item:click', function (menu, item, e) { + me.fireEvent('reviewchange:compare', [item.value]); + }); + this.btnsTurnReview.forEach(function (button) { button.on('click', _click_turnpreview.bind(me)); }); @@ -129,7 +141,7 @@ define([ }); this.btnReviewView && this.btnReviewView.menu.on('item:click', function (menu, item, e) { - me.fireEvent('reviewchanges:view', [menu, item]); + me.fireEvent('reviewchange:view', [menu, item]); }); } @@ -188,6 +200,13 @@ define([ iconCls: 'review-deny' }); + this.btnCompare = new Common.UI.Button({ + cls : 'btn-toolbar x-huge icon-top', + caption : this.txtCompare, + split : true, + iconCls: 'review-deny' + }); + this.btnTurnOn = new Common.UI.Button({ cls: 'btn-toolbar x-huge icon-top', iconCls: 'btn-ic-review', @@ -348,6 +367,17 @@ define([ ); me.btnReject.updateHint([me.tipRejectCurrent, me.txtRejectChanges]); + me.btnCompare.setMenu(new Common.UI.Menu({ + items: [ + {caption: me.mniFromFile, value: 'file'}, + {caption: me.mniFromUrl, value: 'url'}, + {caption: me.mniFromStorage, value: 'storage'}, + {caption: '--'}, + {caption: me.mniSettings, value: 'settings'} + ] + })); + me.btnCompare.updateHint(me.tipCompare); + me.btnAccept.setDisabled(config.isReviewOnly); me.btnReject.setDisabled(config.isReviewOnly); } @@ -400,6 +430,7 @@ define([ var separator_sharing = !(me.btnSharing || me.btnCoAuthMode) ? me.$el.find('.separator.sharing') : '.separator.sharing', separator_comments = !(config.canComments && config.canCoAuthoring) ? me.$el.find('.separator.comments') : '.separator.comments', separator_review = !(config.canReview || config.canViewReview) ? me.$el.find('.separator.review') : '.separator.review', + separator_compare = !config.canReview ? me.$el.find('.separator.compare') : '.separator.compare', separator_chat = !me.btnChat ? me.$el.find('.separator.chat') : '.separator.chat', separator_last; @@ -418,6 +449,11 @@ define([ else separator_last = separator_review; + if (typeof separator_compare == 'object') + separator_compare.hide().prev('.group').hide(); + else + separator_last = separator_compare; + if (typeof separator_chat == 'object') separator_chat.hide().prev('.group').hide(); else @@ -438,6 +474,7 @@ define([ if ( this.appConfig.canReview ) { this.btnAccept.render(this.$el.find('#btn-change-accept')); this.btnReject.render(this.$el.find('#btn-change-reject')); + this.btnCompare.render(this.$el.find('#btn-compare')); this.btnTurnOn.render(this.$el.find('#btn-review-on')); } this.btnPrev && this.btnPrev.render(this.$el.find('#btn-change-prev')); @@ -609,7 +646,13 @@ define([ txtFinalCap: 'Final', txtOriginalCap: 'Original', strFastDesc: 'Real-time co-editing. All changes are saved automatically.', - strStrictDesc: 'Use the \'Save\' button to sync the changes you and others make.' + strStrictDesc: 'Use the \'Save\' button to sync the changes you and others make.', + txtCompare: 'Compare', + tipCompare: 'Compare current document with another one', + mniFromFile: 'Document from File', + mniFromUrl: 'Document from URL', + mniFromStorage: 'Document from Storage', + mniSettings: 'Comparison Settings' } }()), Common.Views.ReviewChanges || {})); diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 6a1ee4caa..9a4365729 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -2272,8 +2272,8 @@ define([ tipBack: 'Back', tipInsertShape: 'Insert Autoshape', tipInsertEquation: 'Insert Equation', - mniImageFromFile: 'Image from file', - mniImageFromUrl: 'Image from url', + mniImageFromFile: 'Image from File', + mniImageFromUrl: 'Image from URL', mniCustomTable: 'Insert Custom Table', textTitleError: 'Error', textInsertPageNumber: 'Insert page number', diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 135c39df3..e8842a041 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -69,6 +69,7 @@ "Common.Controllers.ReviewChanges.textTabs": "Change tabs", "Common.Controllers.ReviewChanges.textUnderline": "Underline", "Common.Controllers.ReviewChanges.textWidow": "Widow control", + "Common.Controllers.ReviewChanges.textUrl": "Paste a document URL", "Common.UI.ComboBorderSize.txtNoBorders": "No borders", "Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders", "Common.UI.ComboDataView.emptyComboText": "No styles", @@ -268,6 +269,12 @@ "Common.Views.ReviewChanges.txtSpelling": "Spell Checking", "Common.Views.ReviewChanges.txtTurnon": "Track Changes", "Common.Views.ReviewChanges.txtView": "Display Mode", + "Common.Views.ReviewChanges.txtCompare": "Compare", + "Common.Views.ReviewChanges.tipCompare": "Compare current document with another one", + "Common.Views.ReviewChanges.mniFromFile": "Document from File", + "Common.Views.ReviewChanges.mniFromUrl": "Document from URL", + "Common.Views.ReviewChanges.mniFromStorage": "Document from Storage", + "Common.Views.ReviewChanges.mniSettings": "Comparison Settings", "Common.Views.ReviewChangesDialog.textTitle": "Review Changes", "Common.Views.ReviewChangesDialog.txtAccept": "Accept", "Common.Views.ReviewChangesDialog.txtAcceptAll": "Accept All Changes", From 8ae13a7fdecc50325a3f02c293d80c23cad61e13 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 14 Aug 2019 11:07:24 +0300 Subject: [PATCH 003/258] [DE] Add settings for comparison of documents --- .../main/lib/controller/ReviewChanges.js | 26 ++- .../main/app/controller/Toolbar.js | 3 +- .../main/app/view/CompareSettingsDialog.js | 154 ++++++++++++++++++ apps/documenteditor/main/locale/en.json | 4 + 4 files changed, 177 insertions(+), 10 deletions(-) create mode 100644 apps/documenteditor/main/app/view/CompareSettingsDialog.js diff --git a/apps/common/main/lib/controller/ReviewChanges.js b/apps/common/main/lib/controller/ReviewChanges.js index b1aa9de10..3eff2a871 100644 --- a/apps/common/main/lib/controller/ReviewChanges.js +++ b/apps/common/main/lib/controller/ReviewChanges.js @@ -96,7 +96,7 @@ define([ this.collection = this.getApplication().getCollection('Common.Collections.ReviewChanges'); this.userCollection = this.getApplication().getCollection('Common.Collections.Users'); - this._state = {posx: -1000, posy: -1000, popoverVisible: false, previewMode: false}; + this._state = {posx: -1000, posy: -1000, popoverVisible: false, previewMode: false, compareSettings: null /*new AscCommon.CComparisonPr()*/}; Common.NotificationCenter.on('reviewchanges:turn', this.onTurnPreview.bind(this)); Common.NotificationCenter.on('spelling:turn', this.onTurnSpelling.bind(this)); @@ -559,7 +559,7 @@ define([ if (this.api) { if (item === 'file') { // if (this.api) - // this.api.asc_addDocument(); + // this.api.asc_addDocument(me._state.compareSettings); Common.NotificationCenter.trigger('edit:complete', this.view); } else if (item === 'url') { var me = this; @@ -570,7 +570,7 @@ define([ if (me.api) { var checkUrl = value.replace(/ /g, ''); if (!_.isEmpty(checkUrl)) { - // me.api.AddDocumentUrl(checkUrl); + // me.api.AddDocumentUrl(checkUrl, me._state.compareSettings); } } Common.NotificationCenter.trigger('edit:complete', me.view); @@ -584,21 +584,29 @@ define([ // (new Common.Views.SelectFileDlg({ // fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly") // })).on('selectfile', function(obj, file){ - // me.insertImage(file); + // me.selectFile(file, me._state.compareSettings); // }).show(); // } } else if (item === 'settings') { - // show settings dialog + var me = this; + (new DE.Views.CompareSettingsDialog({ + props: me._state.compareSettings, + handler: function(result, value) { + if (result == 'ok') { + me._state.compareSettings = value; + } + + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + } + })).show(); } } Common.NotificationCenter.trigger('edit:complete', this.view); }, - insertImage: function(data) { + selectFile: function(data) { if (data && data.url) { - this.toolbar.fireEvent('insertimage', this.toolbar); - this.api.AddImageUrl(data.url, undefined, data.token);// for loading from storage - Common.component.Analytics.trackEvent('ToolBar', 'Image'); + // this.api.AddDocumentUrl(data.url, this._state.compareSettings, data.token);// for loading from storage } }, diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index f093edef4..ff10841e2 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -56,7 +56,8 @@ define([ 'documenteditor/main/app/controller/PageLayout', 'documenteditor/main/app/view/CustomColumnsDialog', 'documenteditor/main/app/view/ControlSettingsDialog', - 'documenteditor/main/app/view/WatermarkSettingsDialog' + 'documenteditor/main/app/view/WatermarkSettingsDialog', + 'documenteditor/main/app/view/CompareSettingsDialog' ], function () { 'use strict'; diff --git a/apps/documenteditor/main/app/view/CompareSettingsDialog.js b/apps/documenteditor/main/app/view/CompareSettingsDialog.js new file mode 100644 index 000000000..20fc1bc1b --- /dev/null +++ b/apps/documenteditor/main/app/view/CompareSettingsDialog.js @@ -0,0 +1,154 @@ +/* + * + * (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 + * + */ + +/** + * CompareSettingsDialog.js.js + * + * Created by Julia Radzhabova on 14.08.2019 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/util/utils', + 'common/main/lib/component/CheckBox', + 'common/main/lib/component/InputField', + 'common/main/lib/view/AdvancedSettingsWindow' +], function () { 'use strict'; + + DE.Views.CompareSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ + options: { + contentWidth: 220, + height: 160 + }, + + initialize : function(options) { + var me = this; + + _.extend(this.options, { + title: this.textTitle, + template: [ + '
', + '
', + '
', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '
', + '', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '', + '', + '
' + ].join('') + }, options); + + this.handler = options.handler; + this.props = options.props; + + Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); + }, + + render: function() { + Common.Views.AdvancedSettingsWindow.prototype.render.call(this); + var me = this; + + this.radioChar = new Common.UI.RadioBox({ + el: $('#compare-settings-radio-char'), + labelText: this.textChar, + name: 'asc-radio-compare-show' + }); + + this.radioWord = new Common.UI.RadioBox({ + el: $('#compare-settings-radio-word'), + labelText: this.textWord, + name: 'asc-radio-compare-show', + checked: true + }); + + this.afterRender(); + }, + + afterRender: function() { + this._setDefaults(this.props); + }, + + show: function() { + Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); + }, + + _setDefaults: function (props) { + if (props) { + // var val = props.get_ShowAt(); + // val ? this.radioChar.setValue(true, true) : this.radioWord.setValue(true, true); + } + }, + + getSettings: function () { + // var props = new AscCommon.CComparisonPr(); + // props.put_ShowAt(this.radioChar.getValue()); + // return props; + }, + + onDlgBtnClick: function(event) { + var me = this; + var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event; + if (state == 'ok') { + this.handler && this.handler.call(this, state, this.getSettings()); + } + + this.close(); + }, + + textTitle: 'Comparison Settings', + textShow: 'Show changes at', + textChar: 'Character level', + textWord: 'Word level' + + }, DE.Views.CompareSettingsDialog || {})) +}); \ No newline at end of file diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index e8842a041..082b4f28b 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -1054,6 +1054,10 @@ "DE.Views.ChartSettings.txtTight": "Tight", "DE.Views.ChartSettings.txtTitle": "Chart", "DE.Views.ChartSettings.txtTopAndBottom": "Top and bottom", + "DE.Views.CompareSettingsDialog.textTitle": "Comparison Settings", + "DE.Views.CompareSettingsDialog.textShow": "Show changes at", + "DE.Views.CompareSettingsDialog.textChar": "Character level", + "DE.Views.CompareSettingsDialog.textWord": "Word level", "DE.Views.ControlSettingsDialog.cancelButtonText": "Cancel", "DE.Views.ControlSettingsDialog.okButtonText": "OK", "DE.Views.ControlSettingsDialog.textAppearance": "Appearance", From 322888f37d32df875df95660a08f5891529b2e8c Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 14 Aug 2019 16:18:57 +0300 Subject: [PATCH 004/258] [DE] Compare documents: use sdk methods --- apps/common/main/lib/controller/ReviewChanges.js | 10 +++++++--- .../main/app/view/CompareSettingsDialog.js | 14 +++++++------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/apps/common/main/lib/controller/ReviewChanges.js b/apps/common/main/lib/controller/ReviewChanges.js index 3eff2a871..5eea76e1f 100644 --- a/apps/common/main/lib/controller/ReviewChanges.js +++ b/apps/common/main/lib/controller/ReviewChanges.js @@ -557,9 +557,13 @@ define([ onCompareClick: function(item) { if (this.api) { + if (!this._state.compareSettings) { + this._state.compareSettings = new AscCommonWord.ComparisonOptions(); + this._state.compareSettings.putWords(!Common.localStorage.getBool("de-compare-char")); + } if (item === 'file') { - // if (this.api) - // this.api.asc_addDocument(me._state.compareSettings); + if (this.api) + this.api.asc_CompareDocumentFile(this._state.compareSettings); Common.NotificationCenter.trigger('edit:complete', this.view); } else if (item === 'url') { var me = this; @@ -570,7 +574,7 @@ define([ if (me.api) { var checkUrl = value.replace(/ /g, ''); if (!_.isEmpty(checkUrl)) { - // me.api.AddDocumentUrl(checkUrl, me._state.compareSettings); + me.api.asc_CompareDocumentUrl(checkUrl, me._state.compareSettings); } } Common.NotificationCenter.trigger('edit:complete', me.view); diff --git a/apps/documenteditor/main/app/view/CompareSettingsDialog.js b/apps/documenteditor/main/app/view/CompareSettingsDialog.js index 20fc1bc1b..dbf6f5c46 100644 --- a/apps/documenteditor/main/app/view/CompareSettingsDialog.js +++ b/apps/documenteditor/main/app/view/CompareSettingsDialog.js @@ -107,8 +107,7 @@ define([ this.radioWord = new Common.UI.RadioBox({ el: $('#compare-settings-radio-word'), labelText: this.textWord, - name: 'asc-radio-compare-show', - checked: true + name: 'asc-radio-compare-show' }); this.afterRender(); @@ -124,15 +123,15 @@ define([ _setDefaults: function (props) { if (props) { - // var val = props.get_ShowAt(); - // val ? this.radioChar.setValue(true, true) : this.radioWord.setValue(true, true); + var value = props.getWords(); + (value==false) ? this.radioChar.setValue(true, true) : this.radioWord.setValue(true, true); } }, getSettings: function () { - // var props = new AscCommon.CComparisonPr(); - // props.put_ShowAt(this.radioChar.getValue()); - // return props; + var props = new AscCommonWord.ComparisonOptions(); + props.putWords(this.radioWord.getValue()); + return props; }, onDlgBtnClick: function(event) { @@ -140,6 +139,7 @@ define([ var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event; if (state == 'ok') { this.handler && this.handler.call(this, state, this.getSettings()); + Common.localStorage.setItem("de-compare-char", this.radioChar.getValue()); } this.close(); From c708c550566a85055599d5acadb660991201eb0b Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 30 Aug 2019 16:34:11 +0300 Subject: [PATCH 005/258] [SSE] Bug 37388 --- apps/common/main/lib/component/Tab.js | 9 ++++++ apps/common/main/lib/component/TabBar.js | 32 +++++++++++++++---- .../main/resources/less/statusbar.less | 8 +++++ 3 files changed, 43 insertions(+), 6 deletions(-) diff --git a/apps/common/main/lib/component/Tab.js b/apps/common/main/lib/component/Tab.js index 29e93b32c..89f6f28e3 100644 --- a/apps/common/main/lib/component/Tab.js +++ b/apps/common/main/lib/component/Tab.js @@ -82,6 +82,10 @@ define([ this.$el.addClass('active'); }, + isSelected: function() { + return this.$el.hasClass('selected'); + }, + deactivate: function(){ this.$el.removeClass('active'); }, @@ -110,6 +114,11 @@ define([ this.$el.removeClass(cls); }, + toggleClass: function(cls) { + if (cls.length) + this.$el.toggleClass(cls); + }, + hasClass: function(cls) { return this.$el.hasClass(cls); }, diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index 0c6868add..b4d3f7803 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -69,12 +69,20 @@ define([ }; StateManager.prototype.attach = function (tab) { - tab.changeState = $.proxy(function () { - this.trigger('tab:change', tab); - this.bar.$el.find('ul > li.active').removeClass('active'); - tab.activate(); + tab.changeState = $.proxy(function (select) { + if (select) { + tab.toggleClass('selected'); + } else { + if (!tab.isSelected()) { + this.bar.$el.find('ul > li.selected').removeClass('selected'); + tab.addClass('selected'); + } + this.trigger('tab:change', tab); + this.bar.$el.find('ul > li.active').removeClass('active'); + tab.activate(); - this.bar.trigger('tab:changed', this.bar, this.bar.tabs.indexOf(tab), tab); + this.bar.trigger('tab:changed', this.bar, this.bar.tabs.indexOf(tab), tab); + } }, this); var dragHelper = new (function() { @@ -283,10 +291,22 @@ define([ }); tab.$el.on({ - click: $.proxy(function () { + click: $.proxy(function (event) { if (!tab.disabled && !tab.$el.hasClass('active')) { if (tab.control == 'manual') { this.bar.trigger('tab:manual', this.bar, this.bar.tabs.indexOf(tab), tab); + } else if (event.ctrlKey || event.metaKey) { + tab.changeState(true); + } else if (event.shiftKey) { + this.bar.$el.find('ul > li.selected').removeClass('selected'); + var $active = this.bar.$el.find('ul > li.active'), + indexAct = $active.index(), + indexCur = tab.sheetindex; + var startIndex = (indexCur > indexAct) ? indexAct : indexCur, + endIndex = (indexCur > indexAct) ? indexCur : indexAct; + for(var i = startIndex; i <= endIndex; i++) { + this.bar.tabs[i].changeState(true); + } } else { tab.changeState(); } diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index da2c0b79d..58dfef726 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -194,6 +194,14 @@ } } + &.selected { + > a { + border-bottom-color: @body-bg; + background-color: @body-bg; + box-shadow: 0px 2px 0 @gray-deep inset; + } + } + &.coauth-locked { > a { outline: none; From 0cc3ddfca64fa9d9be224b4f1306d2fb57fbb540 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 2 Sep 2019 13:52:16 +0300 Subject: [PATCH 006/258] [SSE] Bug 37388 --- apps/common/main/lib/component/Tab.js | 2 +- apps/common/main/lib/component/TabBar.js | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/apps/common/main/lib/component/Tab.js b/apps/common/main/lib/component/Tab.js index 89f6f28e3..b3b5644ef 100644 --- a/apps/common/main/lib/component/Tab.js +++ b/apps/common/main/lib/component/Tab.js @@ -51,7 +51,7 @@ define([ this.active = false; this.label = 'Tab'; this.cls = ''; - this.template = _.template(['
  • ', + this.template = _.template(['
  • ', '<%- label %>', '
    • '].join('')); diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index b4d3f7803..8e5ff01a3 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -292,10 +292,8 @@ define([ tab.$el.on({ click: $.proxy(function (event) { - if (!tab.disabled && !tab.$el.hasClass('active')) { - if (tab.control == 'manual') { - this.bar.trigger('tab:manual', this.bar, this.bar.tabs.indexOf(tab), tab); - } else if (event.ctrlKey || event.metaKey) { + if (!tab.disabled) { + if (event.ctrlKey || event.metaKey) { tab.changeState(true); } else if (event.shiftKey) { this.bar.$el.find('ul > li.selected').removeClass('selected'); @@ -304,11 +302,15 @@ define([ indexCur = tab.sheetindex; var startIndex = (indexCur > indexAct) ? indexAct : indexCur, endIndex = (indexCur > indexAct) ? indexCur : indexAct; - for(var i = startIndex; i <= endIndex; i++) { + for (var i = startIndex; i <= endIndex; i++) { this.bar.tabs[i].changeState(true); } - } else { - tab.changeState(); + } else if (!tab.$el.hasClass('active')) { + if (tab.control == 'manual') { + this.bar.trigger('tab:manual', this.bar, this.bar.tabs.indexOf(tab), tab); + } else { + tab.changeState(); + } } } !tab.disabled && Common.NotificationCenter.trigger('edit:complete', this.bar); From db5e747c3671bafbabf7c7d75fc55ca812bbbbe2 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 3 Sep 2019 14:09:22 +0300 Subject: [PATCH 007/258] [SSE] Bug 37388 --- apps/common/main/lib/component/TabBar.js | 27 +++++- .../main/app/controller/Statusbar.js | 83 +++++++++++++++---- .../main/app/view/Statusbar.js | 2 +- 3 files changed, 95 insertions(+), 17 deletions(-) diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index 8e5ff01a3..62dd31ee7 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -72,10 +72,18 @@ define([ tab.changeState = $.proxy(function (select) { if (select) { tab.toggleClass('selected'); + var selectTab = _.find(this.bar.selectTabs, function (item) {return item.sheetindex === tab.sheetindex;}); + if (selectTab) { + this.bar.selectTabs = _.without(this.bar.selectTabs, selectTab); + } else { + this.bar.selectTabs.push(tab); + } } else { if (!tab.isSelected()) { this.bar.$el.find('ul > li.selected').removeClass('selected'); tab.addClass('selected'); + this.bar.selectTabs.length = 0; + this.bar.selectTabs.push(tab); } this.trigger('tab:change', tab); this.bar.$el.find('ul > li.active').removeClass('active'); @@ -297,9 +305,10 @@ define([ tab.changeState(true); } else if (event.shiftKey) { this.bar.$el.find('ul > li.selected').removeClass('selected'); + this.bar.selectTabs.length = 0; var $active = this.bar.$el.find('ul > li.active'), indexAct = $active.index(), - indexCur = tab.sheetindex; + indexCur = this.bar.tabs.indexOf(tab); var startIndex = (indexCur > indexAct) ? indexAct : indexCur, endIndex = (indexCur > indexAct) ? indexCur : indexAct; for (var i = startIndex; i <= endIndex; i++) { @@ -319,7 +328,11 @@ define([ this.trigger('tab:dblclick', this, this.tabs.indexOf(tab), tab); }, this.bar), contextmenu: $.proxy(function () { - this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab); + if (this.selectTabs.length > 1) { + this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs); + } else { + this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab); + } }, this.bar), mousedown: $.proxy(function (e) { if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) { @@ -344,6 +357,7 @@ define([ tabs: [], template: _.template('
      '), + selectTabs: [], initialize : function (options) { _.extend(this.config, options); @@ -419,6 +433,10 @@ define([ me.$bar.append(tab.render().$el); me.tabs.push(tab); me.manager.attach(tab); + if (tab.isActive()) { + me.selectTabs.length = 0; + me.selectTabs.push(tab); + } } } else { for (i = tabs.length; i-- > 0 ; ) { @@ -432,6 +450,11 @@ define([ me.tabs.splice(index, 0, tab); } + if (tab.isActive()) { + me.selectTabs.length = 0; + me.selectTabs.push(tab); + } + me.manager.attach(tab); } } diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index b88aee8a8..ca3aeec10 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -247,20 +247,54 @@ define([ onTabMenu: function(obj, item, e) { var me = this; - switch (item.value){ - case 'ins': - setTimeout(function(){ - me.api.asc_insertWorksheet(me.createSheetName()); - }, 1); - break; - case 'del': this.deleteWorksheet(); break; - case 'ren': this.renameWorksheet(); break; - case 'copy': this.moveWorksheet(false); break; - case 'move': this.moveWorksheet(true); break; - case 'hide': - setTimeout(function(){ - me.hideWorksheet(true);}, 1); - break; + var selectTabs = this.statusbar.tabbar.selectTabs; + if (selectTabs.length > 1) { + switch (item.value) { + case 'ins': + setTimeout(function () { + //me.api.asc_insertWorksheets(); + }, 1); + break; + case 'del': + this.deleteWorksheets(); + break; + case 'copy': + this.moveWorksheets(false); + break; + case 'move': + this.moveWorksheets(true); + break; + case 'hide': + setTimeout(function () { + me.hideWorksheets(selectTabs); + }, 1,); + break; + } + } else { + switch (item.value) { + case 'ins': + setTimeout(function () { + me.api.asc_insertWorksheet(me.createSheetName()); + }, 1); + break; + case 'del': + this.deleteWorksheet(); + break; + case 'ren': + this.renameWorksheet(); + break; + case 'copy': + this.moveWorksheet(false); + break; + case 'move': + this.moveWorksheet(true); + break; + case 'hide': + setTimeout(function () { + me.hideWorksheet(true); + }, 1); + break; + } } }, @@ -297,6 +331,10 @@ define([ return name; }, + deleteWorksheets: function() { + + }, + deleteWorksheet: function() { var me = this; @@ -317,6 +355,19 @@ define([ } }, + hideWorksheets: function(selectTabs) { + var me = this; + if (selectTabs) { + if (selectTabs.length === me.statusbar.tabbar.tabs.length) { + Common.UI.warning({msg: me.errorLastSheet}); + } else { + me.statusbar.tabbar.selectTabs.forEach(function (item) { + //me.hideWorksheet(true, item.sheetindex); + }); + } + } + }, + hideWorksheet: function(hide, index) { if ( hide ) { this.statusbar.tabbar.tabs.length == 1 ? @@ -376,6 +427,10 @@ define([ } }, + moveWorksheets: function() { + + }, + moveWorksheet: function(cut, silent, index, destPos) { var me = this; var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1; diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 247da69e5..d4117fb93 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -409,7 +409,7 @@ define([ // Common.NotificationCenter.trigger('comments:updatefilter', ['doc', 'sheet' + this.api.asc_getActiveWorksheetId()], false); // hide popover }, - onTabMenu: function (o, index, tab) { + onTabMenu: function (o, index, tab, select) { if (this.mode.isEdit && !this.isEditFormula && (this.rangeSelectionMode !== Asc.c_oAscSelectionDialogType.Chart) && (this.rangeSelectionMode !== Asc.c_oAscSelectionDialogType.FormatTable) && !this.mode.isDisconnected ) { From b7364f56315da73633e64f93baf89be5116e5829 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 6 Sep 2019 13:07:47 +0300 Subject: [PATCH 008/258] [SSE] Bug 37388 (Add Ungroup Sheets, Select All Sheets) --- apps/common/main/lib/component/TabBar.js | 31 +++++++++++++++--- .../main/app/controller/Statusbar.js | 32 ------------------- .../main/app/view/Statusbar.js | 23 +++++++++++-- 3 files changed, 47 insertions(+), 39 deletions(-) diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index 62dd31ee7..e572730e1 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -315,6 +315,10 @@ define([ this.bar.tabs[i].changeState(true); } } else if (!tab.$el.hasClass('active')) { + if (this.bar.tabs.length === this.bar.selectTabs.length) { + this.bar.$el.find('ul > li.selected').removeClass('selected'); + this.bar.selectTabs.length = 0; + } if (tab.control == 'manual') { this.bar.trigger('tab:manual', this.bar, this.bar.tabs.indexOf(tab), tab); } else { @@ -328,11 +332,7 @@ define([ this.trigger('tab:dblclick', this, this.tabs.indexOf(tab), tab); }, this.bar), contextmenu: $.proxy(function () { - if (this.selectTabs.length > 1) { - this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs); - } else { - this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab); - } + this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs); }, this.bar), mousedown: $.proxy(function (e) { if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) { @@ -507,6 +507,27 @@ define([ this.checkInvisible(); }, + setSelectAll: function(isSelect) { + var me = this; + me.selectTabs.length = 0; + if (isSelect) { + me.tabs.forEach(function(tab){ + if (!tab.isSelected()) { + tab.addClass('selected'); + } + me.selectTabs.push(tab); + }); + } else { + me.tabs.forEach(function(tab){ + if (tab.isActive()) { + me.selectTabs.push(tab); + } else if (tab.isSelected()) { + tab.removeClass('selected'); + } + }); + } + }, + getActive: function(iselem) { return iselem ? this.$bar.find('> li.active') : this.$bar.find('> li.active').index(); }, diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index ca3aeec10..96420bede 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -248,29 +248,6 @@ define([ onTabMenu: function(obj, item, e) { var me = this; var selectTabs = this.statusbar.tabbar.selectTabs; - if (selectTabs.length > 1) { - switch (item.value) { - case 'ins': - setTimeout(function () { - //me.api.asc_insertWorksheets(); - }, 1); - break; - case 'del': - this.deleteWorksheets(); - break; - case 'copy': - this.moveWorksheets(false); - break; - case 'move': - this.moveWorksheets(true); - break; - case 'hide': - setTimeout(function () { - me.hideWorksheets(selectTabs); - }, 1,); - break; - } - } else { switch (item.value) { case 'ins': setTimeout(function () { @@ -295,7 +272,6 @@ define([ }, 1); break; } - } }, createSheetName: function() { @@ -331,10 +307,6 @@ define([ return name; }, - deleteWorksheets: function() { - - }, - deleteWorksheet: function() { var me = this; @@ -427,10 +399,6 @@ define([ } }, - moveWorksheets: function() { - - }, - moveWorksheet: function(cut, silent, index, destPos) { var me = this; var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1; diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index d4117fb93..fd1f65930 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -241,7 +241,10 @@ define([ { caption: this.itemTabColor, menu: menuColorItems - } + }, + { caption: '--' }, + {caption: this.selectAllSheets, value: 'selectall'}, + {caption: this.ungroupSheets, value: 'noselect'} ] }).on('render:after', function(btn) { var colorVal = $('
      '); @@ -432,6 +435,15 @@ define([ this.tabMenu.items[6].setDisabled(isdoclocked); this.tabMenu.items[7].setDisabled(issheetlocked); + if (select.length === 1) { + this.tabMenu.items[10].hide(); + } else { + this.tabMenu.items[10].show(); + } + + this.tabMenu.items[9].setDisabled(issheetlocked); + this.tabMenu.items[10].setDisabled(issheetlocked); + this.api.asc_closeCellEditor(); this.api.asc_enableKeyEvents(false); @@ -473,6 +485,11 @@ define([ onTabMenuClick: function (o, item) { if (item && this.api) { this.enableKeyEvents = (item.value === 'ins' || item.value === 'hide'); + if (item.value === 'selectall') { + this.tabbar.setSelectAll(true); + } else if (item.value === 'noselect') { + this.tabbar.setSelectAll(false); + } } }, @@ -544,7 +561,9 @@ define([ textMin : 'MIN', textMax : 'MAX', filteredRecordsText : '{0} of {1} records filtered', - filteredText : 'Filter mode' + filteredText : 'Filter mode', + selectAllSheets : 'Select All Sheets', + ungroupSheets : 'Ungroup Sheets' }, SSE.Views.Statusbar || {})); SSE.Views.Statusbar.RenameDialog = Common.UI.Window.extend(_.extend({ From e744a710e322d22226df721845dabe89e0b2c1e5 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 26 Sep 2019 11:35:29 +0300 Subject: [PATCH 009/258] [SSE] Bug 37388 (delete, hide select tabs) --- .../main/app/controller/Statusbar.js | 75 ++++++++----------- 1 file changed, 33 insertions(+), 42 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index 96420bede..3c6b35802 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -247,31 +247,35 @@ define([ onTabMenu: function(obj, item, e) { var me = this; - var selectTabs = this.statusbar.tabbar.selectTabs; - switch (item.value) { - case 'ins': - setTimeout(function () { - me.api.asc_insertWorksheet(me.createSheetName()); - }, 1); - break; - case 'del': - this.deleteWorksheet(); - break; - case 'ren': - this.renameWorksheet(); - break; - case 'copy': - this.moveWorksheet(false); - break; - case 'move': - this.moveWorksheet(true); - break; - case 'hide': - setTimeout(function () { - me.hideWorksheet(true); - }, 1); - break; - } + var selectTabs = this.statusbar.tabbar.selectTabs, + arrIndex = []; + selectTabs.forEach(function (item) { + arrIndex.push(item.sheetindex); + }); + switch (item.value) { + case 'ins': + setTimeout(function () { + me.api.asc_insertWorksheet(me.createSheetName()); + }, 1); + break; + case 'del': + this.deleteWorksheet(arrIndex); + break; + case 'ren': + this.renameWorksheet(); + break; + case 'copy': + this.moveWorksheet(false); + break; + case 'move': + this.moveWorksheet(true); + break; + case 'hide': + setTimeout(function () { + me.hideWorksheet(true, arrIndex); + }, 1); + break; + } }, createSheetName: function() { @@ -307,17 +311,17 @@ define([ return name; }, - deleteWorksheet: function() { + deleteWorksheet: function(selectTabs) { var me = this; - if (this.statusbar.tabbar.tabs.length == 1) { + if (this.statusbar.tabbar.tabs.length == 1 || selectTabs.length === this.statusbar.tabbar.tabs.length) { Common.UI.warning({msg: this.errorLastSheet}); } else { Common.UI.warning({ msg: this.warnDeleteSheet, buttons: ['ok','cancel'], callback: function(btn) { - if (btn == 'ok' && !me.api.asc_deleteWorksheet()) { + if (btn == 'ok' && !me.api.asc_deleteWorksheet(selectTabs)) { _.delay(function(){ Common.UI.error({msg: me.errorRemoveSheet}); },10); @@ -327,22 +331,9 @@ define([ } }, - hideWorksheets: function(selectTabs) { - var me = this; - if (selectTabs) { - if (selectTabs.length === me.statusbar.tabbar.tabs.length) { - Common.UI.warning({msg: me.errorLastSheet}); - } else { - me.statusbar.tabbar.selectTabs.forEach(function (item) { - //me.hideWorksheet(true, item.sheetindex); - }); - } - } - }, - hideWorksheet: function(hide, index) { if ( hide ) { - this.statusbar.tabbar.tabs.length == 1 ? + (this.statusbar.tabbar.tabs.length == 1 || index.length === this.statusbar.tabbar.tabs.length) ? Common.UI.warning({msg: this.errorLastSheet}) : this.api['asc_hideWorksheet'](index); } else { From 8f4537a22a7277f4d9736a2b81412b0ee9d1c80d Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 26 Sep 2019 14:24:33 +0300 Subject: [PATCH 010/258] [SSE] Bug 37388 (set worksheet color) --- .../main/app/controller/Statusbar.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index 3c6b35802..2774ad85b 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -495,18 +495,26 @@ define([ }, setWorksheetColor: function (color) { + var me = this; if (this.api) { - var sindex = this.api.asc_getActiveWorksheetIndex(); - var tab = _.findWhere(this.statusbar.tabbar.tabs, {sheetindex: sindex}); - if (tab) { + var selectTabs = this.statusbar.tabbar.selectTabs, + arrIndex = []; + selectTabs.forEach(function (item) { + arrIndex.push(item.sheetindex); + }); + if (arrIndex) { if ('transparent' === color) { - this.api.asc_setWorksheetTabColor(sindex, null); - tab.$el.find('a').css('box-shadow', ''); + this.api.asc_setWorksheetTabColor(null, arrIndex); + selectTabs.forEach(function (tab) { + tab.$el.find('a').css('box-shadow', ''); + }); } else { var asc_clr = Common.Utils.ThemeColor.getRgbColor(color); if (asc_clr) { - this.api.asc_setWorksheetTabColor(sindex, asc_clr); - this.setTabLineColor(tab, asc_clr); + this.api.asc_setWorksheetTabColor(asc_clr, arrIndex); + selectTabs.forEach(function (tab) { + me.setTabLineColor(tab, asc_clr); + }); } } } From defd8e7edb9aebaec61b785aa74a6f2deb740c27 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 27 Sep 2019 16:41:19 +0300 Subject: [PATCH 011/258] [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 9df4e5f763eec4e436b69ef7f88f10e946c2402c Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 1 Oct 2019 11:49:43 +0300 Subject: [PATCH 012/258] [SSE] Bug 37388 (move worksheet) --- apps/common/main/lib/component/TabBar.js | 61 ++++++++++++++++++- .../main/app/controller/Statusbar.js | 36 +++++++---- .../main/app/view/Statusbar.js | 18 +++--- .../main/resources/less/statusbar.less | 11 ++++ 4 files changed, 106 insertions(+), 20 deletions(-) diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index e572730e1..1a3e3b518 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -294,6 +294,61 @@ define([ document.removeEventListener('dragstart',dragDropText); }); } + }, + + setHookTabs: function (e, bar, tabs) { + var me = this; + function dragComplete() { + if (!_.isUndefined(me.drag)) { + bar.dragging = false; + bar.$el.find('li.mousemove').removeClass('mousemove right'); + var arrSelectIndex = []; + tabs.forEach(function (item) { + arrSelectIndex.push(item.sheetindex); + }); + if (!_.isUndefined(me.drag.place)) { + me.bar.trigger('tab:move', arrSelectIndex, me.drag.place); + me.bar.$bar.scrollLeft(me.scrollLeft); + me.bar.scrollX = undefined; + } else { + me.bar.trigger('tab:move', arrSelectIndex); + me.bar.$bar.scrollLeft(me.scrollLeft); + me.bar.scrollX = undefined; + } + + me.drag = undefined; + } + } + function dragMove (event) { + if (!_.isUndefined(me.drag)) { + me.drag.moveX = event.clientX*Common.Utils.zoom(); + if (me.drag.moveX > me.tabBarRight) { + bar.tabs[bar.tabs.length - 1].$el.addClass('mousemove right'); + me.drag.place = bar.tabs.length; + } else { + $(event.target).parent().parent().find('li.mousemove').removeClass('mousemove right'); + $(event.target).parent().addClass('mousemove'); + var name = event.target.parentElement.dataset.label, + currentTab = _.findWhere(bar.tabs, {label: name}); + if (!_.isUndefined(currentTab)) { + me.drag.place = currentTab.sheetindex; + } + } + } + } + if (!_.isUndefined(bar) && !_.isUndefined(tabs) && bar.tabs.length > 1) { + me.bar = bar; + me.drag = {tabs: tabs}; + bar.dragging = true; + this.calculateBounds(); + + $(document).on('mousemove.tabbar', dragMove); + $(document).on('mouseup.tabbar', function (e) { + dragComplete(e); + $(document).off('mouseup.tabbar'); + $(document).off('mousemove.tabbar', dragMove); + }); + } } } }); @@ -337,7 +392,11 @@ define([ mousedown: $.proxy(function (e) { if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) { if (!tab.isLockTheDrag) { - dragHelper.setHook(e, this.bar, tab); + 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 2774ad85b..fe25994f2 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -265,10 +265,10 @@ define([ this.renameWorksheet(); break; case 'copy': - this.moveWorksheet(false); + this.moveWorksheet(arrIndex, false); break; case 'move': - this.moveWorksheet(true); + this.moveWorksheet(arrIndex, true); break; case 'hide': setTimeout(function () { @@ -390,26 +390,38 @@ define([ } }, - moveWorksheet: function(cut, silent, index, destPos) { + moveWorksheet: function(selectArr, cut, silent, index, destPos) { var me = this; - var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1; + var wc = me.api.asc_getWorksheetsCount(), items = [], arrIndex = [], i = -1; while (++i < wc) { if (!this.api.asc_isWorksheetHidden(i)) { items.push({ - value : me.api.asc_getWorksheetName(i), - inindex : i + value: me.api.asc_getWorksheetName(i), + inindex: i }); } } + if (!_.isUndefined(selectArr)) { + items.forEach(function (item) { + if (selectArr.indexOf(item.inindex) !== -1) { + arrIndex.push(item.inindex); + } + }); + } if (!_.isUndefined(silent)) { - me.api.asc_showWorksheet(items[index].inindex); + if (_.isUndefined(selectArr)) { + me.api.asc_showWorksheet(items[index].inindex); - Common.NotificationCenter.trigger('comments:updatefilter', ['doc', 'sheet' + this.api.asc_getActiveWorksheetId()]); + Common.NotificationCenter.trigger('comments:updatefilter', ['doc', 'sheet' + this.api.asc_getActiveWorksheetId()]); - if (!_.isUndefined(destPos)) { - me.api.asc_moveWorksheet(items.length === destPos ? wc : items[destPos].inindex); + if (!_.isUndefined(destPos)) { + me.api.asc_moveWorksheet(items.length === destPos ? wc : items[destPos].inindex); + } + } else { + if (!_.isUndefined(destPos)) { + me.api.asc_moveWorksheet(destPos, arrIndex); + } } - return; } @@ -420,7 +432,7 @@ define([ handler : function(btn, i) { if (btn == 'ok') { if (cut) { - me.api.asc_moveWorksheet(i == -255 ? wc : i); + me.api.asc_moveWorksheet(i == -255 ? wc : i, arrIndex); } else { var new_text = me.createCopyName(me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex())); me.api.asc_copyWorksheet(i == -255 ? wc : i, new_text); diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index fd1f65930..d3fcb5db6 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -182,19 +182,23 @@ define([ me.fireEvent('sheet:changename'); } }, this), - 'tab:move' : _.bind(function (tabIndex, index) { + 'tab:move' : _.bind(function (selectTabs, index) { me.tabBarScroll = {scrollLeft: me.tabbar.scrollX}; - - if (_.isUndefined(index) || tabIndex === index) { + if (_.isUndefined(selectTabs) || _.isUndefined(index) || selectTabs === index) { return; } + if (_.isArray(selectTabs)) { + me.fireEvent('sheet:move', [selectTabs, false, true, undefined, index]); + } else { + var tabIndex = selectTabs; - if (tabIndex < index) { - ++index; + if (tabIndex < index) { + ++index; + } + + me.fireEvent('sheet:move', [undefined, false, true, tabIndex, index]); } - me.fireEvent('sheet:move', [false, true, tabIndex, index]); - }, this) }); diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index 58dfef726..d11f7533b 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -232,6 +232,17 @@ color: @gray-darker; } } + + &.mousemove { + > a { + background: linear-gradient(to right, @black, @gray-light 1px); + } + &.right { + > a { + background: linear-gradient(to left, @black, @gray-light 1px); + } + } + } } } From cf1476848204b4aa4bf030e9e3fe9cf345eb8499 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 3 Oct 2019 13:40:56 +0300 Subject: [PATCH 013/258] [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 + + + +
    +
    +
    +
    <% if (!android) { %><%= scope.textBack %><% } %>
    +
    <%= scope.textCustomColor %>
    +
    <% if (phone) { %><% } %>
    +
    +
    +
    +
    + +
    +
    +
    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 014/258] [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 015/258] [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 016/258] [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 @@
      -
      <% if (!android) { %><%= scope.textBack %><% } %>
      +
      <% if (!android) { %><%= scope.textBack %><% } %>
      <%= scope.textCustomColor %>
      <% if (phone) { %><% } %>
      diff --git a/apps/documenteditor/mobile/app/view/edit/EditShape.js b/apps/documenteditor/mobile/app/view/edit/EditShape.js index 9ffbab093..2e54952ff 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditShape.js +++ b/apps/documenteditor/mobile/app/view/edit/EditShape.js @@ -233,6 +233,7 @@ define([ }); me.customColorPicker.on('addcustomcolor', function (colorPicker, color) { me.paletteFillColor.addNewDynamicColor(colorPicker, color); + DE.getController('EditContainer').rootView.router.back(); }); me.fireEvent('page:show', [me, selector]); @@ -249,6 +250,9 @@ define([ }); 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]); diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 5171ba1ab..d094f347b 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6222,9 +6222,52 @@ 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 { + display: flex; + justify-content: space-around; + align-items: center; + margin: 15px; +} +.custom-colors.phone { + max-width: 300px; + margin: 0 auto; + margin-top: 4px; +} +.custom-colors.phone .button-round { + margin-top: 20px; +} +.custom-colors .right-block { + margin-left: 20px; +} +.custom-colors .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: #ffffff; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-color: transparent; + margin-top: 25px; +} +.custom-colors .button-round.active-state { + background-color: rgba(0, 0, 0, 0.1); +} .custom-colors .color-hsb-preview { - width: 75px; - border: 1px solid rgba(0, 0, 0, 0.3); + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; +} +.custom-colors .new-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .current-color-hsb-preview { + width: 100%; + height: 36px; } .custom-colors .list-block ul:before, .custom-colors .list-block ul:after { @@ -6239,11 +6282,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; -} -.custom-colors .color-picker-wheel.phone { - width: 210px; } .custom-colors .color-picker-wheel svg { width: 100%; diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index c6d20d0f1..2f040a533 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5816,8 +5816,58 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } +.custom-colors { + display: flex; + justify-content: space-around; + align-items: center; + margin: 15px; +} +.custom-colors.phone { + max-width: 300px; + margin: 0 auto; + margin-top: 4px; +} +.custom-colors.phone .button-round { + margin-top: 20px; +} +.custom-colors .right-block { + margin-left: 20px; +} +.custom-colors .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: #446995; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-color: transparent; + margin-top: 25px; +} +.custom-colors .button-round.active-state { + background-color: rgba(0, 0, 0, 0.1); +} .custom-colors .color-hsb-preview { - width: 75px; + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; +} +.custom-colors .new-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .current-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .list-block ul:before, +.custom-colors .list-block ul:after { + content: none; +} +.custom-colors .list-block ul li { border: 1px solid rgba(0, 0, 0, 0.3); } .custom-colors .color-picker-wheel { @@ -5826,11 +5876,6 @@ html.phone .document-menu .list-block .item-link { max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; -} -.custom-colors .color-picker-wheel.phone { - width: 210px; } .custom-colors .color-picker-wheel svg { width: 100%; diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 7e405ca8f..d2e85d0d2 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6222,9 +6222,52 @@ 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 { + display: flex; + justify-content: space-around; + align-items: center; + margin: 15px; +} +.custom-colors.phone { + max-width: 300px; + margin: 0 auto; + margin-top: 4px; +} +.custom-colors.phone .button-round { + margin-top: 20px; +} +.custom-colors .right-block { + margin-left: 20px; +} +.custom-colors .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: #ffffff; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-color: transparent; + margin-top: 25px; +} +.custom-colors .button-round.active-state { + background-color: rgba(0, 0, 0, 0.1); +} .custom-colors .color-hsb-preview { - width: 75px; - border: 1px solid rgba(0, 0, 0, 0.3); + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; +} +.custom-colors .new-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .current-color-hsb-preview { + width: 100%; + height: 36px; } .custom-colors .list-block ul:before, .custom-colors .list-block ul:after { @@ -6239,11 +6282,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; -} -.custom-colors .color-picker-wheel.phone { - width: 210px; } .custom-colors .color-picker-wheel svg { width: 100%; diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index 4624594da..8293d97da 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5816,8 +5816,58 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } +.custom-colors { + display: flex; + justify-content: space-around; + align-items: center; + margin: 15px; +} +.custom-colors.phone { + max-width: 300px; + margin: 0 auto; + margin-top: 4px; +} +.custom-colors.phone .button-round { + margin-top: 20px; +} +.custom-colors .right-block { + margin-left: 20px; +} +.custom-colors .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: #aa5252; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-color: transparent; + margin-top: 25px; +} +.custom-colors .button-round.active-state { + background-color: rgba(0, 0, 0, 0.1); +} .custom-colors .color-hsb-preview { - width: 75px; + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; +} +.custom-colors .new-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .current-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .list-block ul:before, +.custom-colors .list-block ul:after { + content: none; +} +.custom-colors .list-block ul li { border: 1px solid rgba(0, 0, 0, 0.3); } .custom-colors .color-picker-wheel { @@ -5826,11 +5876,6 @@ html.phone .document-menu .list-block .item-link { max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; -} -.custom-colors .color-picker-wheel.phone { - width: 210px; } .custom-colors .color-picker-wheel svg { width: 100%; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 5d9144e18..f6cdb073f 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6222,9 +6222,52 @@ 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 { + display: flex; + justify-content: space-around; + align-items: center; + margin: 15px; +} +.custom-colors.phone { + max-width: 300px; + margin: 0 auto; + margin-top: 4px; +} +.custom-colors.phone .button-round { + margin-top: 20px; +} +.custom-colors .right-block { + margin-left: 20px; +} +.custom-colors .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: #ffffff; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-color: transparent; + margin-top: 25px; +} +.custom-colors .button-round.active-state { + background-color: rgba(0, 0, 0, 0.1); +} .custom-colors .color-hsb-preview { - width: 75px; - border: 1px solid rgba(0, 0, 0, 0.3); + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; +} +.custom-colors .new-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .current-color-hsb-preview { + width: 100%; + height: 36px; } .custom-colors .list-block ul:before, .custom-colors .list-block ul:after { @@ -6239,11 +6282,6 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; -} -.custom-colors .color-picker-wheel.phone { - width: 210px; } .custom-colors .color-picker-wheel svg { width: 100%; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index e0f3fa264..954150958 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -5826,8 +5826,58 @@ html.phone .document-menu .list-block .item-link { .color-palette.list-block:last-child li:last-child a { border-radius: 0; } +.custom-colors { + display: flex; + justify-content: space-around; + align-items: center; + margin: 15px; +} +.custom-colors.phone { + max-width: 300px; + margin: 0 auto; + margin-top: 4px; +} +.custom-colors.phone .button-round { + margin-top: 20px; +} +.custom-colors .right-block { + margin-left: 20px; +} +.custom-colors .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: #40865c; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-color: transparent; + margin-top: 25px; +} +.custom-colors .button-round.active-state { + background-color: rgba(0, 0, 0, 0.1); +} .custom-colors .color-hsb-preview { - width: 75px; + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; +} +.custom-colors .new-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .current-color-hsb-preview { + width: 100%; + height: 36px; +} +.custom-colors .list-block ul:before, +.custom-colors .list-block ul:after { + content: none; +} +.custom-colors .list-block ul li { border: 1px solid rgba(0, 0, 0, 0.3); } .custom-colors .color-picker-wheel { @@ -5836,11 +5886,6 @@ html.phone .document-menu .list-block .item-link { max-width: 100%; height: auto; font-size: 0; - margin-left: auto; - margin-right: auto; -} -.custom-colors .color-picker-wheel.phone { - width: 210px; } .custom-colors .color-picker-wheel svg { width: 100%; From 035143f6446afe28d97cdb3309e52a08928bc95b Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 8 Oct 2019 11:20:45 +0300 Subject: [PATCH 017/258] [SSE] Bug 37388 (copy worksheet) --- .../main/app/controller/Statusbar.js | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index fe25994f2..784565ac5 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -293,7 +293,7 @@ define([ return name; }, - createCopyName: function(orig) { + createCopyName: function(orig, curArrNames) { var wc = this.api.asc_getWorksheetsCount(), names = []; while (wc--) { names.push(this.api.asc_getWorksheetName(wc).toLowerCase()); @@ -308,6 +308,17 @@ define([ if (names.indexOf(name.toLowerCase()) < 0) break; } + if (curArrNames && curArrNames.length > 0) { + var arr = []; + curArrNames.forEach(function (item) { + arr.push(item.toLowerCase()); + }); + while(arr.indexOf(name.toLowerCase()) !== -1) { + index++; + name = first + '(' + index + ')'; + } + } + return name; }, @@ -434,8 +445,11 @@ define([ if (cut) { me.api.asc_moveWorksheet(i == -255 ? wc : i, arrIndex); } else { - var new_text = me.createCopyName(me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex())); - me.api.asc_copyWorksheet(i == -255 ? wc : i, new_text); + var arrNames = []; + arrIndex.forEach(function (item) { + arrNames.push(me.createCopyName(me.api.asc_getWorksheetName(item), arrNames)); + }); + me.api.asc_copyWorksheet(i == -255 ? wc : i, arrNames, arrIndex); } } me.api.asc_enableKeyEvents(true); From 098f8995b7d76a745005018c13c133fdcc6560ac Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 8 Oct 2019 13:59:47 +0300 Subject: [PATCH 018/258] [DE mobile] Custom Color (table) --- .../mobile/app/template/EditTable.template | 16 ++++ .../mobile/app/view/edit/EditTable.js | 77 ++++++++++++++++++- 2 files changed, 92 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/mobile/app/template/EditTable.template b/apps/documenteditor/mobile/app/template/EditTable.template index 7347774d9..825b2fdff 100644 --- a/apps/documenteditor/mobile/app/template/EditTable.template +++ b/apps/documenteditor/mobile/app/template/EditTable.template @@ -450,4 +450,20 @@
      +
      + + +
      +
      +
      +
      <% if (!android) { %><%= scope.textBack %><% } %>
      +
      <%= scope.textCustomColor %>
      +
      <% if (phone) { %><% } %>
      +
      +
      +
      +
      + +
      +
      \ 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 019/258] [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 @@
      +
    + + +
    +
    +
    +
    <% if (!android) { %><%= scope.textBack %><% } %>
    +
    <%= scope.textCustomColor %>
    +
    <% if (phone) { %><% } %>
    +
    +
    +
    +
    + +
    +
    \ 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 020/258] [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 @@ + + + +
    +
    +
    +
    <% if (!android) { %><%= scope.textBack %><% } %>
    +
    <%= scope.textCustomColor %>
    +
    <% if (phone) { %><% } %>
    +
    +
    +
    +
    + +
    +
    \ 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 f588e9b67a3d513d8541a33a20f5e223cd5e8b3a Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 8 Oct 2019 15:12:15 +0300 Subject: [PATCH 021/258] [SSE] Internal mode --- apps/api/documents/api.js | 3 +++ apps/spreadsheeteditor/main/index.html | 3 +-- apps/spreadsheeteditor/main/index.html.deploy | 11 +++++++++-- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/apps/api/documents/api.js b/apps/api/documents/api.js index ed34a79cb..59985afe8 100644 --- a/apps/api/documents/api.js +++ b/apps/api/documents/api.js @@ -770,6 +770,9 @@ } } + if (config.editorConfig && (config.editorConfig.mode == 'editdiagram' || config.editorConfig.mode == 'editmerge')) + params += "&internal=true"; + if (config.frameEditorId) params += "&frameEditorId=" + config.frameEditorId; diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index 6eadc7fbc..479573391 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -238,8 +238,7 @@
    -
    -
    +
    diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy index 41e28c0e1..2d0c9373b 100644 --- a/apps/spreadsheeteditor/main/index.html.deploy +++ b/apps/spreadsheeteditor/main/index.html.deploy @@ -243,14 +243,21 @@
    -
    -
    +