From 7d202cb492110656f5dde3494bffbb711bfed042 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Thu, 12 Aug 2021 10:53:31 +0200
Subject: [PATCH] :tada: Add tooltips to color picker tabs

---
 CHANGES.md                                     |  1 +
 .../resources/styles/common/framework.scss     |  8 ++++++++
 .../src/app/main/ui/workspace/colorpicker.cljs | 18 ++++++++++++------
 frontend/translations/en.po                    | 12 ++++++++++++
 frontend/translations/es.po                    | 12 ++++++++++++
 5 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index b1d59eb08b..ffb865d5ab 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -4,6 +4,7 @@
 
 ### :sparkles: New features
 
+- Add tooltips to color picker tabs [Taiga #1814](https://tree.taiga.io/project/penpot/us/1814).
 - Allow to zoom with ctrl + middle button [Taiga #1428](https://tree.taiga.io/project/penpot/us/1428).
 - Auto placement of duplicated objects [Taiga #1386](https://tree.taiga.io/project/penpot/us/1386).
 - Enable penpot SVG metadata only when exporting complete files [Taiga #1914](https://tree.taiga.io/project/penpot/us/1914?milestone=295883).
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index f74c58e25b..6e07312174 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -975,6 +975,14 @@ input[type=range]:focus::-ms-fill-upper {
     }
   }
 
+  &.tooltip-expand {
+    &:hover {
+      &::after {
+        min-width: 100%;
+      }
+    }
+  }
+
   &.tooltip-bottom-left {
     &:hover {
       &::after {
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 96f338b59d..c4a5b96bad 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -291,12 +291,18 @@
                      :on-select-stop handle-change-stop}]
 
       [:div.colorpicker-tabs
-       [:div.colorpicker-tab {:class (when (= @active-tab :ramp) "active")
-                              :on-click (change-tab :ramp)} i/picker-ramp]
-       [:div.colorpicker-tab {:class (when (= @active-tab :harmony) "active")
-                              :on-click (change-tab :harmony)} i/picker-harmony]
-       [:div.colorpicker-tab {:class (when (= @active-tab :hsva) "active")
-                              :on-click (change-tab :hsva)} i/picker-hsv]]
+       [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
+        {:class (when (= @active-tab :ramp) "active")
+         :alt (t locale "workspace.libraries.colors.rgba")
+         :on-click (change-tab :ramp)} i/picker-ramp]
+       [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
+        {:class (when (= @active-tab :harmony) "active")
+         :alt (t locale "workspace.libraries.colors.rgb-complementary")
+         :on-click (change-tab :harmony)} i/picker-harmony]
+       [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
+        {:class (when (= @active-tab :hsva) "active")
+         :alt (t locale "workspace.libraries.colors.hsv")
+         :on-click (change-tab :hsva)} i/picker-hsv]]
 
       (if picking-color?
         [:div.picker-detail-wrapper
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 3c07c0e8a7..f86d710d23 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -1849,6 +1849,18 @@ msgstr "Recent colors"
 msgid "workspace.libraries.colors.save-color"
 msgstr "Save color style"
 
+#: src/app/main/ui/workspace/colorpicker.cljs
+msgid "workspace.libraries.colors.rgba"
+msgstr "RGBA"
+
+#: src/app/main/ui/workspace/colorpicker.cljs
+msgid "workspace.libraries.colors.rgb-complementary"
+msgstr "RGB Complementary"
+
+#: src/app/main/ui/workspace/colorpicker.cljs
+msgid "workspace.libraries.colors.hsv"
+msgstr "HSV"
+
 #: src/app/main/ui/workspace/colorpalette.cljs
 msgid "workspace.libraries.colors.small-thumbnails"
 msgstr "Small thumbnails"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index d6c2bc4e97..12d57eb64d 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -1843,6 +1843,18 @@ msgstr "Colores recientes"
 msgid "workspace.libraries.colors.save-color"
 msgstr "Guardar estilo de color"
 
+#: src/app/main/ui/workspace/colorpicker.cljs
+msgid "workspace.libraries.colors.rgba"
+msgstr "RGBA"
+
+#: src/app/main/ui/workspace/colorpicker.cljs
+msgid "workspace.libraries.colors.rgb-complementary"
+msgstr "RGB Complementario"
+
+#: src/app/main/ui/workspace/colorpicker.cljs
+msgid "workspace.libraries.colors.hsv"
+msgstr "HSV"
+
 #: src/app/main/ui/workspace/colorpalette.cljs
 msgid "workspace.libraries.colors.small-thumbnails"
 msgstr "Miniaturas pequeñas"