From c2c985738797cc57bc30468084078ea0edde9332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Thu, 17 Feb 2022 13:30:35 +0000
Subject: [PATCH] Start toolbar redesign

---
 .../src/less2/include/colortheme-dark.less    |  3 +-
 customize.dist/src/less2/include/drive.less   | 13 +++-
 .../src/less2/include/dropdown.less           |  7 +-
 .../src/less2/include/toolbar-history.less    |  2 +
 customize.dist/src/less2/include/toolbar.less | 68 +++++++++++++------
 www/common/toolbar.js                         |  6 +-
 6 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index cc05c437e..e16efe02c 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -295,8 +295,9 @@
 @cp_support-header-bg: @cryptpad_color_grey_700;
 
 // Toolbar
-@cp_toolbar-bg: @cryptpad_color_grey_850;
+@cp_toolbar-bg: @cryptpad_color_grey_900;
 @cp_toolbar-fg: @cryptpad_text_col;
+@cp_toolbar-fg-inv: @cryptpad_color_grey_900;
 @cp_toolbar-bottom-fg: @cryptpad_text_col;
 @cp_toolbar-logo-bg: @cryptpad_color_grey_200;
 
diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index cd4592b97..0f3d4b491 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -486,7 +486,7 @@
             position: absolute;
             z-index: 50;
         }
-        &.cp-app-drive-readonly {
+        &.cp-app-drive-readonly { // XXX NOW
             background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
         }
         h1 {
@@ -942,6 +942,17 @@
 
 
     .cp-toolbar-bottom {
+        .cp-toolbar-bottom-left {
+            .cp-app-drive-toolbar-new {
+                border-radius: @variables_radius;
+                color: @cp_toolbar-bottom-fg;
+                border-color: var(--toolbar-bg-color);
+                background-color: var(--toolbar-bg-color);
+                &:hover {
+                    background-color: var(--toolbar-bg-color-fade);
+                }
+            }
+        }
         .cp-toolbar-bottom-right {
             .fa-history { order: 50; }
             // .fa-list, .fa-th-large,
diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less
index 5ce3ee677..0526900ec 100644
--- a/customize.dist/src/less2/include/dropdown.less
+++ b/customize.dist/src/less2/include/dropdown.less
@@ -60,6 +60,8 @@
             position: absolute;
             background-color: @cp_dropdown-bg;
             min-width: 250px;
+            padding: 5px;
+            border-radius: @variables_radius;
             box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
             z-index: 1000; //Z dropdown content
             max-height: 300px;
@@ -77,7 +79,8 @@
 
             & > a, & > span {
                 color: @cp_dropdown-fg;
-                padding: 5px 16px;
+                border-radius: @variables_radius;
+                padding: 5px;
                 text-decoration: none;
                 display: flex;
                 cursor: pointer;
@@ -160,7 +163,7 @@
                 height: 1px;
                 background: @cp_dropdown-bg-active;
                 border: 0 !important;
-                border-top: 1px solid rgba(0,0,0,.1) !important;
+                //border-top: 1px solid rgba(0,0,0,.1) !important; // XXX
                 & + hr {
                     display: none;
                 }
diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less
index 2c97de873..940dea292 100644
--- a/customize.dist/src/less2/include/toolbar-history.less
+++ b/customize.dist/src/less2/include/toolbar-history.less
@@ -1,4 +1,5 @@
 @import (reference) "./colortheme-all.less";
+@import (reference) "./variables.less";
 
 .history_main () {
     --LessLoader_require: LessLoader_currentFile();
@@ -89,6 +90,7 @@
             button {
                 margin: 0 5px;
                 border: 1px solid @cryptpad_text_col;
+                border-radius: @variables_radius;
                 text-transform: uppercase;
                 display: inline-flex;
                 align-items: center;
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 6ccec507d..42ee0d9b6 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -15,6 +15,7 @@
     @bg-color: @colortheme_apps[default], // color of the toolbar background
 ) {
     @toolbar-bg-color: @bg-color;
+    @toolbar-bg-color-fade: fade(@toolbar-bg-color, 70%);
     @desat-color: desaturate(@bg-color, 20%);
     @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%));
     @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
@@ -27,6 +28,7 @@
     .toolbar_vars(@bg-color);
 
     --toolbar-bg-color: @toolbar-bg-color;
+    --toolbar-bg-color-fade: @toolbar-bg-color-fade;
     --toolbar-bg-color-light: @toolbar-bg-color-light;
     --toolbar-bg-color-active: @toolbar-bg-color-active;
 
@@ -392,7 +394,6 @@
             //display: inline-block;
             button {
                 height: 100%;
-                border-radius: 0;
                 margin: 0;
                 background: transparent;
             }
@@ -896,7 +897,7 @@
     }
 
     .cp-toolbar-history, .cp-toolbar-snapshots {
-        background-color: @toolbar-bg-color-light;
+        background-color: @toolbar-bg-color-light; // XXX NOW
         background-color: var(--toolbar-bg-color-light);
         color: @toolbar-color;
     }
@@ -935,24 +936,9 @@
         }
     }
     .cp-toolbar-bottom {
-        background-color: @toolbar-bg-color-light;
-        background-color: var(--toolbar-bg-color-light);
         color: @cp_toolbar-bottom-fg;
-        button:hover, button.cp-toolbar-button-active {
-            background-color: @toolbar-bg-color-active;
-            background-color: var(--toolbar-bg-color-active);
-        }
-        button.cp-toolbar-button-active {
-            border-color: @toolbar-bg-color-active;
-            border-color: var(--toolbar-bg-color-active);
-        }
-        button:hover, button:focus {
-            border-color: @toolbar-bg-color-active;
-            border-color: var(--toolbar-bg-color-active);
-            //border-color: @cryptpad_text_col;
-        }
-
         display: inline-flex;
+        margin: 5px 0px;
         align-items: center;
         justify-content: space-between;
         max-width: 100%;
@@ -967,18 +953,45 @@
                 margin: 5px 0px;
             }
         }
+
         button {
-            border: 1px solid transparent;
+            border: 1px solid @cp_toolbar-bottom-fg;
+            background-color: @cp_toolbar-bottom-fg;
+            color: @cp_toolbar-fg-inv;
+            //border-color: var(--toolbar-bg-color-active);
             box-sizing: border-box;
             position: relative;
             margin: 0px;
-            border-radius: 0;
+            border-radius: @variables_radius;
             height: @toolbar_line-height;
             display: inline-flex;
             align-items: center;
             .fa, .cptools {
                 margin-right: 5px;
             }
+            &:hover {
+                background-color: fade(@cp_toolbar-bottom-fg, 70%);
+            }
+        }
+        button.cp-toolbar-button-active {
+            background-color: @cp_toolbar-bg;
+            border-color: @cp_toolbar-bottom-fg;
+            color: @cp_toolbar-bottom-fg;
+            &:hover {
+                background-color: fade(@cp_toolbar-bottom-fg, 30%);
+            }
+        }
+
+        button.cp-toolbar-button-primary {
+            background-color: @toolbar-bg-color;
+            background-color: var(--toolbar-bg-color);
+            border-color: @toolbar-bg-color;
+            border-color: var(--toolbar-bg-color);
+            color: @cp_toolbar-fg-inv;
+            &:hover {
+                background-color: fade(@toolbar-bg-color, 70%);
+                background-color: var(--toolbar-bg-color-fade);
+            }
         }
         button.cp-toolbar-collapse {
 /*
@@ -1013,14 +1026,25 @@
         .cp-toolbar-bottom-left {
             display: flex;
             order: 1;
+            padding-left: 5px;
+            button {
+                margin-right: 5px;
+            }
         }
         .cp-toolbar-bottom-mid {
             display: flex;
             order: 2;
+            button {
+                margin-right: 5px;
+            }
         }
         .cp-toolbar-bottom-right {
             order: 3;
             display: flex;
+            padding-right: 5px;
+            button {
+                margin-left: 5px;
+            }
             #cp-toolbar-chat-drawer-open { order: 0; }
             #cp-toolbar-userlist-drawer-open { order: 1; }
             & > .cp-dropdown-container {
@@ -1091,11 +1115,11 @@
                 top: @toolbar_line-height;
                 margin: -1px;
                 min-width: 50px;
-                background: @cp_dropdown-bg;
+                background: @cp_dropdown-bg; // XXX not applied
                 display: flex;
                 flex-flow: column;
                 z-index: 10000; //Z cp-toolbar-drawer-content
-                color: @cp_dropdown-fg;
+                color: @cp_dropdown-fg; // XXX not applied
                 .tools_unselectable();
                 .fa {
                     font-size: 17px;
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index 8931c57f5..7dacc4d13 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -574,7 +574,7 @@ MessengerUI, Messages, Pages) {
             throw new Error("You must provide a `metadataMgr` to display the share button");
         }
 
-        var $shareBlock = $(h('button.cp-toolar-share-button', [
+        var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [
             h('i.fa.fa-shhare-alt'),
             h('span.cp-button-name', Messages.shareButton)
         ]));
@@ -605,7 +605,7 @@ MessengerUI, Messages, Pages) {
             throw new Error("You must provide a `metadataMgr` to display the access button");
         }
 
-        var $accessBlock = $(h('button.cp-toolar-access-button', [
+        var $accessBlock = $(h('button.cp-toolar-access-button.cp-toolbar-button-primary', [
             h('i.fa.fa-unlock-alt'),
             h('span.cp-button-name', Messages.accessButton)
         ]));
@@ -632,7 +632,7 @@ MessengerUI, Messages, Pages) {
             throw new Error("You must provide a `metadataMgr` to display the userlist");
         }
 
-        var $shareBlock = $(h('button.cp-toolar-share-button', [
+        var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [
             h('i.fa.fa-shhare-alt'),
             h('span.cp-button-name', Messages.shareButton)
         ]));