From c1cf352dd1f38b6ee38a57004ca19007fb81da87 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 30 Oct 2018 17:07:48 +0300
Subject: [PATCH] [SSE] Add text color to header/footer

---
 .../main/app/view/HeaderFooterDialog.js       | 51 +++++++++++++++++--
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
index be5f7fd0d..164658d30 100644
--- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
@@ -70,9 +70,10 @@ define([
 
             this.template = [
                 '<div class="box" style="height: 210px;">',
-                    '<div id="id-dlg-hf-fonts" class="input-row" style="display: inline-block;"></div>',
-                    '<div id="id-dlg-hf-font-size" class="input-row" style="display: inline-block;margin-left: 3px;"></div>',
-                    '<div id="id-dlg-hf-bold" style="display: inline-block;margin-left: 3px;"></div>','<div id="id-dlg-hf-italic" style="display: inline-block;margin-left: 2px;"></div>',
+                    '<div id="id-dlg-hf-fonts" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-hf-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 3px;"></div>',
+                    '<div id="id-dlg-hf-textcolor" style="display: inline-block;margin-left: 3px;"></div>',
+                    '<div id="id-dlg-hf-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-hf-italic" style="display: inline-block;margin-left: 2px;"></div>',
                     '<div id="id-dlg-hf-underline" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-hf-strikeout" style="display: inline-block;margin-left: 2px;"></div>',
                     '<div id="id-dlg-hf-subscript" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-hf-superscript" style="display: inline-block;margin-left: 2px;"></div>',
                     '<div id="id-dlg-hf-pagenum" style="display: inline-block;margin-left: 10px;"></div>','<div id="id-dlg-hf-pagecount" style="display: inline-block;margin-left: 2px;"></div>',
@@ -119,7 +120,7 @@ define([
             me.cmbFonts = new Common.UI.ComboBoxFonts({
                 el          : $('#id-dlg-hf-fonts'),
                 cls         : 'input-group-nr',
-                style       : 'width: 234px;',
+                style       : 'width: 220px;',
                 menuCls     : 'scrollable-menu',
                 menuStyle   : 'min-width: 234px;max-height: 270px;',
                 store       : new Common.Collections.Fonts(),
@@ -251,6 +252,39 @@ define([
                 }
             });
 
+            me.btnTextColor = new Common.UI.Button({
+                cls         : 'btn-toolbar',
+                iconCls     : 'btn-fontcolor',
+                hint        : me.textColor,
+                menu        : new Common.UI.Menu({
+                    items: [
+                        { template: _.template('<div id="id-dlg-hf-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<a id="id-dlg-hf-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>') }
+                    ]
+                })
+            });
+            me.btnTextColor.render($('#id-dlg-hf-textcolor'));
+            if (me.btnTextColor && me.btnTextColor.cmpEl) {
+                var colorVal = $('<div class="btn-color-value-line"></div>');
+                $('button:first-child', this.btnTextColor.cmpEl).append(colorVal);
+                colorVal.css('background-color', this.btnTextColor.currentColor || '#000000');
+                me.mnuTextColorPicker = new Common.UI.ThemeColorPalette({
+                    el: $('#id-dlg-hf-menu-fontcolor')
+                });
+            }
+            this.btnTextColor.menu.cmpEl.on('click', '#id-dlg-hf-menu-new-fontcolor', _.bind(function() {
+                me.mnuTextColorPicker.addNewColor((typeof(me.btnTextColor.color) == 'object') ? me.btnTextColor.color.color : me.btnTextColor.color);
+            }, me));
+            me.mnuTextColorPicker.on('select', function(picker, color, fromBtn) {
+                var clr = (typeof(color) == 'object') ? color.color : color;
+
+                me.btnTextColor.currentColor = color;
+                $('.btn-color-value-line', me.btnTextColor.cmpEl).css('background-color', '#' + clr);
+
+                me.mnuTextColorPicker.currentColor = color;
+                if (me.HFObject)
+                    me.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color));
+            });
 
             var onHeaderFooterFieldClick = function(btn){
                 if (me.HFObject)
@@ -363,10 +397,15 @@ define([
         afterRender: function () {
             this.cmbFonts.fillFonts(this.fontStore);
             this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.font.name}) || this.fontStore.at(0));
+            this.updateThemeColors();
 
             this.HFObject = new AscCommonExcel.CHeaderFooterEditor('headerfooter-left-img', 'headerfooter-center-img', 'headerfooter-right-img', 190);
         },
 
+        updateThemeColors: function() {
+            this.mnuTextColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
+        },
+
         getSettings: function () {
             var props = {};
             return props;
@@ -425,7 +464,9 @@ define([
         textTime: 'Insert time',
         textFilePath: 'Insert file path',
         textFileName: 'Insert file name',
-        textSheet: 'Insert sheet name'
+        textSheet: 'Insert sheet name',
+        textColor: 'Text color',
+        textNewColor: 'Add New Custom Color'
 
     }, SSE.Views.HeaderFooterDialog || {}))
 });
\ No newline at end of file