✨ Fixing show color hex or name on hover

frontend/resources/styles/main/partials/color-bullet.scss

@@ -6,7 +6,6 @@
 
 .color-cell {
   .color-bullet {
-    background-color: transparent;
     // Creates strange artifacts
     border: 2px solid $color-gray-60;
     // box-shadow: 0 0 0 2px $color-gray-60;
@@ -102,14 +101,28 @@ ul.palette-menu .color-bullet {
   }
 }
 
-.color-bullet-left {
+.color-bullet.is-library-color .color-bullet-left,
+.selected-colors .color-bullet .color-bullet-left {
   border-radius: 10px 0 0 10px;
 }
 
-.color-bullet-right {
+.color-bullet.is-library-color .color-bullet-right,
+.selected-colors .color-bullet .color-bullet-right {
   border-radius: 0 10px 10px 0;
 }
 
+.color-palette .color-bullet .color-bullet-left {
+  border-radius: 25px 0 0 25px;
+}
+
+.color-palette .color-bullet .color-bullet-right {
+  border-radius: 0 25px 25px 0;
+}
+
+.color-data .color-bullet.is-library-color {
+  border-radius: 50%;
+}
+
 .color-data .color-bullet.multiple {
   background: transparent;
 
@@ -118,12 +131,7 @@ ul.palette-menu .color-bullet {
   }
 }
 
-.color-data .color-bullet.is-library-color {
-  border-radius: 50%;
-}
-
 .color-data .color-bullet {
-  background-color: $color-gray-30;
   border: 1px solid $color-gray-30;
   border-radius: $br-small;
   cursor: pointer;
@@ -161,11 +169,6 @@ 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;

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -10,26 +10,29 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
-(mf/defc color-bullet [{:keys [color on-click]}]
-  (if (uc/multiple? color)
-    [:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
-
-    ;; No multiple selection
-    (let [color (if (string? color) {:color color :opacity 1} color)]
-      [: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))}}])
-
-       [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])))
-
 (defn gradient-type->string [type]
   (case type
     :linear (tr "workspace.gradients.linear")
     :radial (tr "workspace.gradients.radial")
     (str "???" type)))
 
+(mf/defc color-bullet [{:keys [color on-click]}]
+  (if (uc/multiple? color)
+    [:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
+
+    ;; No multiple selection
+    (let [color       (if (string? color) {:color color :opacity 1} color)
+          background  (if (:gradient color) (uc/color->background color) "auto")]
+      [:div.color-bullet.tooltip.tooltip-right {:class (if (:id color) "is-library-color" "is-not-library-color")
+                          :on-click #(when on-click (on-click %))
+                          :alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))
+                          :style {:background background}}
+       (when (not(:gradient color))
+         [:*
+          [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
+          [:div.color-bullet-right {:style {:background (uc/color->background color)}}]]
+         )])))
+
 (mf/defc color-name [{:keys [color size on-click on-double-click]}]
   (let [color (if (string? color) {:color color :opacity 1} color)
         {:keys [name color gradient]} color

frontend/src/app/main/ui/workspace/colorpicker.cljs

@@ -133,7 +133,8 @@
 
         handle-change-color
         (fn [changes]
-          (let [editing-stop (:editing-stop @state)]
+          (let [editing-stop (:editing-stop @state)
+                _ (println "handle-change-color" changes)]
             (swap! state #(cond-> %
                             true (update :current-color merge changes)
                             editing-stop (update-in [:stops editing-stop] merge changes)))
@@ -158,12 +159,14 @@
 
         on-select-library-color
         (fn [color]
-          (let [editing-stop (:editing-stop @state)
+          ;; TODO: FIXME
-                is-gradient? (some? (:gradient color))]
+          (on-change color))
-            (if (and (some? editing-stop) (not is-gradient?))
+          ;; (let [editing-stop (:editing-stop @state)
-              (handle-change-color (color->components (:color color) (:opacity color)))
+          ;;       is-gradient? (some? (:gradient color))]
-              (do (reset! state (data->state color))
+          ;;   (if (and (some? editing-stop) (not is-gradient?))
-                  (on-change color)))))
+          ;;     (handle-change-color (color->components (:color color) (:opacity color)))
+          ;;     (do (reset! state (data->state color))
+          ;;         (on-change color)))))
 
         on-add-library-color
         (fn [_]