From 4f85426deb8e97f7468241fd7ddf3322be373e4c Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 22 Apr 2022 21:34:30 +0300
Subject: [PATCH] Change layout for color palette

---
 apps/common/main/lib/component/ColorButton.js |  5 +++--
 .../main/lib/component/ThemeColorPalette.js   | 19 +++++++++++--------
 .../main/resources/less/dropdown-menu.less    |  1 +
 .../main/app/view/ControlSettingsDialog.js    |  1 -
 .../main/app/view/FormSettings.js             |  1 -
 apps/documenteditor/main/app/view/FormsTab.js |  1 -
 apps/documenteditor/main/app/view/Toolbar.js  |  3 ++-
 .../main/app/view/FormatRulesEditDlg.js       |  3 ++-
 .../main/app/view/Statusbar.js                |  3 ++-
 .../main/app/view/Toolbar.js                  |  3 ++-
 10 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index e33631d3b..b14e4c280 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -80,7 +80,7 @@ define([
         getMenu: function(options) {
             if (typeof this.menu !== 'object') {
                 options = options || this.options;
-                var height = options.paletteHeight || 240,
+                var height = options.paletteHeight ? options.paletteHeight + 'px' : 'auto',
                     id = Common.UI.getId(),
                     auto = [];
                 if (options.auto) {
@@ -98,7 +98,8 @@ define([
                     cls: 'shifted-left',
                     additionalAlign: options.additionalAlign,
                     items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
-                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + '; margin: 10px;display: inline-block;"></div>') },
+                        {caption: '--'},
                         {
                             id: id + '-color-new',
                             template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>')
diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js
index 770dc4231..42f1cf928 100644
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@@ -62,7 +62,7 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 8px 12px 12px;">' +
+                '<div style="padding: 4px 12px 12px;">' +
                 '<% var me = this; var idx = 0; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
                     '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
@@ -85,7 +85,9 @@ define([
                 '<% }); %>' +
                 '</div>' +
                 '<% if (me.options.dynamiccolors!==undefined) { %>' +
-                '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">' +
+                '<div style="padding: 12px;">' +
+                    '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
+                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
                     '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
                         '<a class="color-dynamic-<%=i%> dynamic-empty-color" color="" idx="<%=idx++%>">' +
                         '<em><span unselectable="on">&#160;</span></em></a>' +
@@ -483,7 +485,7 @@ define([
             var arr = [],
                 len = (themecolors>0 && effects>0) ? themecolors * effects : 0;
             if (themecolors>0) {
-                arr = [this.textThemeColors, '-'];
+                arr = [this.textThemeColors];
                 for (var i=0; i<themecolors; i++)
                     arr.push({color: 'FFFFFF', effectId: 1});
 
@@ -492,10 +494,10 @@ define([
                     arr.push({color: 'FFFFFF', effectId: 1});
 
                 if (standardcolors)
-                    arr.push('-', '--', '-');
+                    arr.push('-');
             }
             if (standardcolors) {
-                arr.push(this.textStandartColors, '-');
+                arr.push(this.textStandartColors);
                 if (transparent) {
                     arr.push('transparent');
                     standardcolors--;
@@ -503,8 +505,8 @@ define([
                 for (var i=0; i<standardcolors; i++)
                     arr.push('FFFFFF');
             }
-            if (this.options.dynamiccolors && (themecolors || standardcolors))
-                arr.push('-', '--');
+            // if (this.options.dynamiccolors && (themecolors || standardcolors))
+            //     arr.push('-', '--');
             return arr;
         },
 
@@ -640,6 +642,7 @@ define([
         },
 
         textThemeColors         : 'Theme Colors',
-        textStandartColors      : 'Standart Colors'
+        textStandartColors      : 'Standard Colors',
+        textRecentColors        : 'Recent Colors'
     }, Common.UI.ThemeColorPalette || {}));
 });
\ No newline at end of file
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 0b090f8c1..840465c8d 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -159,6 +159,7 @@
         height: @scaled-one-px-value;
         background-color: @border-divider-ie;
         background-color: @border-divider;
+        margin: 4px 0;
     }
 
     .dataview {
diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
index f8c10561a..c0a71b0b6 100644
--- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
@@ -141,7 +141,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                     '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
                     '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
                 ],
-                paletteHeight: 94,
                 cls: 'move-focus',
                 takeFocusOnClose: true
             });
diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js
index 2af5d2f4f..17cfd67b3 100644
--- a/apps/documenteditor/main/app/view/FormSettings.js
+++ b/apps/documenteditor/main/app/view/FormSettings.js
@@ -1150,7 +1150,6 @@ define([
                         '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
                         '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
                     ],
-                    paletteHeight: 94,
                     dataHint: '1',
                     dataHintDirection: 'bottom',
                     dataHintOffset: 'big'
diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js
index 9498a7b43..0e3d01487 100644
--- a/apps/documenteditor/main/app/view/FormsTab.js
+++ b/apps/documenteditor/main/app/view/FormsTab.js
@@ -258,7 +258,6 @@ define([
                                     '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
                                     '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
                                 ],
-                        paletteHeight: 94,
                         dataHint: '1',
                         dataHintDirection: 'left',
                         dataHintOffset: 'small'
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 4276b6948..601b50506 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -898,7 +898,8 @@ define([
                                                 checkable: true
                                             }),
                                             {caption: '--'},
-                                            {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 94px; margin: 10px;"></div>')},
+                                            {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; margin: 10px;display: inline-block;"></div>')},
+                                            {caption: '--'},
                                             {
                                                 id: 'id-toolbar-menu-new-control-color',
                                                 template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>')
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
index bab9b24b5..16c4a82fb 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
@@ -531,7 +531,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
                                 items       : [
-                                    { template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 169px; height: 220px; margin: 10px;"></div>'), stopPropagation: true },
+                                    { template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 169px; margin: 10px;display: inline-block;"></div>'), stopPropagation: true },
+                                    {caption: '--'},
                                     { template: _.template('<a id="format-rules-borders-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'),  stopPropagation: true }
                                 ]
                             })
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 19827c534..70512f416 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -335,7 +335,8 @@ define([
                     menuAlign: 'tl-tr',
                     cls: 'color-tab',
                     items: [
-                        { template: _.template('<div id="id-tab-menu-color" style="width: 169px; height: 240px;"></div>') },
+                        { template: _.template('<div id="id-tab-menu-color" style="width: 169px;display: inline-block;"></div>') },
+                        {caption: '--'},
                         { template: _.template('<a id="id-tab-menu-new-color" style="padding-left:12px;">' + me.textNewColor + '</a>') }
                     ]
                 });
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 0572660fd..5f548d87b 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -2120,7 +2120,8 @@ define([
                                         stopPropagation: true
                                     },
                                     {caption: '--'},
-                                    { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 240px;"></div>'), stopPropagation: true },
+                                    { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px;display: inline-block;"></div>'), stopPropagation: true },
+                                    {caption: '--'},
                                     { template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'),  stopPropagation: true }
                                 ]
                             })