From 04f5a6a9f95a052905ad74abb136e047391a3532 Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandroalonsofernandez@gmail.com>
Date: Tue, 11 Jan 2022 08:47:14 +0100
Subject: [PATCH] :sparkles: Show color hex or name on hover

---
 CHANGES.md                                       |  1 +
 .../styles/main/partials/color-bullet.scss       | 16 ++++++++++++++--
 .../styles/main/partials/colorpicker.scss        |  2 --
 .../src/app/main/ui/components/color_bullet.cljs |  7 ++++---
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 05299ba03d..abefc839d6 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -5,6 +5,7 @@
 ### :boom: Breaking changes
 ### :sparkles: New features
 
+- Show color hex or name on hover [Taiga #2413](https://tree.taiga.io/project/penpot/us/2413).
 - Add shortcut to create artboard from selected objects [Taiga #2412](https://tree.taiga.io/project/penpot/us/2412).
 - Add shortcut for opacity [Taiga #2442](https://tree.taiga.io/project/penpot/us/2442).
 - Setting fill automatically for new texts [Taiga #2441](https://tree.taiga.io/project/penpot/us/2441).
diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
index 6ed5815e6d..347a0ae85d 100644
--- a/frontend/resources/styles/main/partials/color-bullet.scss
+++ b/frontend/resources/styles/main/partials/color-bullet.scss
@@ -92,8 +92,6 @@ ul.palette-menu .color-bullet {
 .color-bullet {
   display: flex;
   flex-direction: row;
-  overflow: hidden;
-
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
     left center;
   background-color: $color-white;
@@ -104,6 +102,14 @@ ul.palette-menu .color-bullet {
   }
 }
 
+.color-bullet-left {
+  border-radius: 10px 0 0 10px;
+}
+
+.color-bullet-right {
+  border-radius: 0 10px 10px 0;
+}
+
 .color-data .color-bullet.multiple {
   background: transparent;
 
@@ -155,6 +161,11 @@ ul.palette-menu .color-bullet {
   }
 }
 
+.color-data .color-bullet .color-bullet-left,
+.color-data .color-bullet .color-bullet-right {
+  border-radius: unset;
+}
+
 .colorpicker-content .libraries .selected-colors .color-bullet {
   grid-area: auto;
   margin-bottom: 0.25rem;
@@ -162,6 +173,7 @@ ul.palette-menu .color-bullet {
 
   &:hover {
     border-color: $color-primary;
+    z-index: 10;
   }
 
   &.button {
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 4247ee30f5..dbd3fff3dd 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -343,8 +343,6 @@
       grid-template-columns: repeat(8, 1fr);
       justify-content: space-between;
       margin-right: -8px;
-      overflow-x: hidden;
-      overflow-y: auto;
       max-height: 5.5rem;
     }
 
diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
index 89f22128bb..aef5520d51 100644
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@@ -16,8 +16,9 @@
 
     ;; No multiple selection
     (let [color (if (string? color) {:color color :opacity 1} color)]
-      [:div.color-bullet {:class (when (:id color) "is-library-color")
-                          :on-click #(when on-click (on-click %))}
+      [:div.color-bullet.tooltip.tooltip-right {:class (when (:id color) "is-library-color")
+                          :on-click #(when on-click (on-click %))
+                          :alt (or (:name color) (:color color))}
        (when (not (:gradient color))
          [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])
 
@@ -36,4 +37,4 @@
     (when (or (not size) (= size :big))
       [:span.color-text {:on-click #(when on-click (on-click %))
                          :on-double-click #(when on-double-click (on-double-click %))
-                         :title name } color-str])))
+                         :title name} color-str])))