From 5ed2eb8de164b8606589432c36f4f22e53c96984 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 31 May 2024 22:18:55 +0300 Subject: [PATCH] [DE] Set page color --- .../main/app/controller/Toolbar.js | 52 ++++++++++++++++++- .../main/app/template/Toolbar.template | 1 + apps/documenteditor/main/app/view/Toolbar.js | 33 +++++++++++- apps/documenteditor/main/locale/en.json | 2 + 4 files changed, 85 insertions(+), 3 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 1fe12eebb1..896b8364bb 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -421,6 +421,9 @@ define([ $('#id-toolbar-menu-new-control-color').on('click', _.bind(this.onNewControlsColor, this)); toolbar.listStylesAdditionalMenuItem.on('click', this.onMenuSaveStyle.bind(this)); toolbar.btnPrint.menu && toolbar.btnPrint.menu.on('item:click', _.bind(this.onPrintMenu, this)); + toolbar.btnPageColor.menu.on('show:after', _.bind(this.onPageColorShowAfter, this)); + toolbar.btnPageColor.on('color:select', _.bind(this.onSelectPageColor, this)); + toolbar.mnuPageNoFill.on('click', _.bind(this.onPageNoFillClick, this)); Common.NotificationCenter.on('leftmenu:save', _.bind(this.tryToSave, this)); this.onSetupCopyStyleButton(); this.onBtnChangeState('undo:disabled', toolbar.btnUndo, toolbar.btnUndo.isDisabled()); @@ -972,14 +975,16 @@ define([ onApiLockDocumentProps: function() { if (this._state.lock_doc!==true) { - this.toolbar.lockToolbar(Common.enumLock.docPropsLock, true, {array: [this.toolbar.btnPageOrient, this.toolbar.btnPageSize, this.toolbar.btnPageMargins, this.toolbar.btnColumns, this.toolbar.btnLineNumbers, this.toolbar.btnHyphenation]}); + this.toolbar.lockToolbar(Common.enumLock.docPropsLock, true, {array: [this.toolbar.btnPageOrient, this.toolbar.btnPageSize, this.toolbar.btnPageMargins, + this.toolbar.btnColumns, this.toolbar.btnLineNumbers, this.toolbar.btnHyphenation, this.toolbar.btnPageColor]}); if (this._state.activated) this._state.lock_doc = true; } }, onApiUnLockDocumentProps: function() { if (this._state.lock_doc!==false) { - this.toolbar.lockToolbar(Common.enumLock.docPropsLock, false, {array: [this.toolbar.btnPageOrient, this.toolbar.btnPageSize, this.toolbar.btnPageMargins, this.toolbar.btnColumns, this.toolbar.btnLineNumbers, this.toolbar.btnHyphenation]}); + this.toolbar.lockToolbar(Common.enumLock.docPropsLock, false, {array: [this.toolbar.btnPageOrient, this.toolbar.btnPageSize, this.toolbar.btnPageMargins, + this.toolbar.btnColumns, this.toolbar.btnLineNumbers, this.toolbar.btnHyphenation, this.toolbar.btnPageColor]}); if (this._state.activated) this._state.lock_doc = false; } }, @@ -1471,6 +1476,33 @@ define([ this.showSelectedBulletOnOpen(type, picker); }, + onPageColorShowAfter: function(menu, e) { + if (!(e && e.target===e.currentTarget)) + return; + + var picker = this.toolbar.mnuPageColorPicker, + color = this.api.asc_getPageColor(); + + this.toolbar.mnuPageNoFill.setChecked(!color, true); + picker.clearSelection(); + if (color) { + color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME ? + color = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()} : + color = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + + if ( typeof(color) == 'object' ) { + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue ) { + picker.select(color,true); + break; + } + } + } else { + picker.select(color,true); + } + } + }, + onApiUpdateListPatterns: function(data) { if (!data) return; this._listPatterns = [data.singleBullet, data.singleNumbering, data.multiLevel]; @@ -2785,6 +2817,20 @@ define([ Common.NotificationCenter.trigger('edit:complete', this); }, + onSelectPageColor: function(btn, color) { + if (this.api) + this.api.asc_putPageColor(Common.Utils.ThemeColor.getRgbColor(color)); + + Common.component.Analytics.trackEvent('ToolBar', 'Page Color'); + }, + + onPageNoFillClick: function(item) { + if (this.api && item.checked) + this.api.asc_putPageColor(null); + + Common.component.Analytics.trackEvent('ToolBar', 'Page Color'); + }, + eyedropperStart: function () { if (this.toolbar.btnCopyStyle.pressed) { this.toolbar.btnCopyStyle.toggle(false, true); @@ -3238,6 +3284,8 @@ define([ this.onParagraphColor(this._state.clrshd_asccolor); } this._state.clrshd_asccolor = undefined; + + updateColors(this.toolbar.mnuPageColorPicker, 1); }, _onInitEditorStyles: function(styles) { diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index 8a5a57f083..2fdc08a538 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -171,6 +171,7 @@
+
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 5023d34f37..9bcf1f24a1 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1572,8 +1572,29 @@ define([ dataHintOffset: 'small' }); + me.btnPageColor = new Common.UI.ButtonColored({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-page-color', + lock: [_set.docPropsLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.viewMode], + caption: me.capBtnPageColor, + menu: true, + eyeDropper: false, + hideColorLine: true, + additionalItemsBefore: [ + me.mnuPageNoFill = new Common.UI.MenuItem({ + caption: me.strMenuNoFill, + style: Common.UI.isRTL() ? 'padding-right:20px;' : 'padding-left:20px;', + checkable: true + }), + {caption: '--'} + ], + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'small' + }); + me.toolbarControls.push(me.btnImgAlign, - me.btnImgGroup, me.btnImgForward, me.btnImgBackward, me.btnImgWrapping, me.btnWatermark); + me.btnImgGroup, me.btnImgForward, me.btnImgBackward, me.btnImgWrapping, me.btnWatermark, me.btnPageColor); // // Menus @@ -2048,6 +2069,7 @@ define([ _injectComponent('#slot-spin-space-after', this.numSpacingAfter); _injectComponent('#slot-lbl-space-before', this.lblSpacingBefore); _injectComponent('#slot-lbl-space-after', this.lblSpacingAfter); + _injectComponent('#slot-btn-pagecolor', this.btnPageColor); this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, [Common.enumLock.paragraphLock, Common.enumLock.headerLock, Common.enumLock.richEditLock, Common.enumLock.plainEditLock, Common.enumLock.inEquation, Common.enumLock.richDelLock, @@ -2450,6 +2472,8 @@ define([ this.btnCopyStyle.updateHint(this.tipCopyStyle + Common.Utils.String.platformKey('Alt+Ctrl+C')); this.btnColorSchemas.updateHint(this.tipColorSchemas); this.btnHyphenation.updateHint(this.tipHyphenation); + this.btnPageColor.updateHint(this.tipPageColor); + // set menus @@ -3065,6 +3089,11 @@ define([ }); this.mnuHighlightControls.setInnerMenu([{menu: this.mnuControlsColorPicker, index: 2}]); } + + if (this.btnPageColor.cmpEl) { + this.btnPageColor.setMenu(); + this.mnuPageColorPicker = this.btnPageColor.getPicker(); + } }, updateMetricUnit: function () { @@ -3685,6 +3714,8 @@ define([ txtAutoText: 'Auto', textEditMode: 'Edit PDF', tipEditMode: 'Edit current file.
The page will be reloaded.', + capBtnPageColor: 'Page Color', + tipPageColor: 'Change page color' } })(), DE.Views.Toolbar || {})); }); diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 78a3312c4c..1e6f6eb99b 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -3545,6 +3545,8 @@ "DE.Views.Toolbar.txtMarginAlign": "Align to margin", "DE.Views.Toolbar.txtObjectsAlign": "Align selected objects", "DE.Views.Toolbar.txtPageAlign": "Align to page", + "DE.Views.Toolbar.capBtnPageColor": "Page Color", + "DE.Views.Toolbar.tipPageColor": "Change page color", "DE.Views.ViewTab.textAlwaysShowToolbar": "Always Show Toolbar", "DE.Views.ViewTab.textDarkDocument": "Dark Document", "DE.Views.ViewTab.textFitToPage": "Fit To Page",