Merge pull request #3023 from ONLYOFFICE/feature/page-color

[DE] Set page color

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) {

apps/documenteditor/main/app/template/Toolbar.template

@@ -171,6 +171,7 @@
                 <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-watermark"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-pagecolor"></span>
                 </div>
                 <div class="separator long"></div>
                 <div class="group">

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.<br>The page will be reloaded.',
+            capBtnPageColor: 'Page Color',
+            tipPageColor: 'Change page color'
         }
     })(), DE.Views.Toolbar || {}));
 });

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",