♻️ Remove old color bullet component

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

@@ -5,57 +5,110 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.color-bullet
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.config :as cfg]
    [app.util.color :as uc]
-   [app.util.dom :as dom]
-   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
+(defn- color-title
+  [color-item]
+  (let [name (:name color-item)
+        gradient (:gradient color-item)
+        image (:image color-item)
+        color (:color color-item)]
+
+    (if (some? name)
+      (cond
+        (some? color)
+        (str/ffmt "% (%)" name color)
+
+        (some? gradient)
+        (str/ffmt "% (%)" name (uc/gradient-type->string (:type gradient)))
+
+        (some? image)
+        (str/ffmt "% (%)" name (tr "media.image"))
+
+        :else
+        name)
+
+      (cond
+        (some? color)
+        color
+
+        (some? gradient)
+        (uc/gradient-type->string (:type gradient))
+
+        (some? image)
+        (tr "media.image")))))
+
 (mf/defc color-bullet
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
-  [{:keys [color on-click]}]
-  (let [on-click (mf/use-fn
-                  (mf/deps color on-click)
-                  (fn [event]
-                    (when (fn? on-click)
-                      (^function on-click color event))))]
+  [{:keys [color on-click mini? area]}]
+  (let [read-only? (nil? on-click)
+        on-click
+        (mf/use-fn
+         (mf/deps color on-click)
+         (fn [event]
+           (when (fn? on-click)
+             (^function on-click color event))))]
 
     (if (uc/multiple? color)
-      [:div.color-bullet.multiple {:on-click on-click}]
-
+      [:div {:class (stl/css :color-bullet :multiple)
+             :on-click on-click
+             :title (color-title color)}]
       ;; No multiple selection
-      (let [color (if (string? color) {:color color :opacity 1} color)]
-        [:div.color-bullet
-         {:class (dom/classnames :is-library-color (some? (:id color))
-                                 :is-not-library-color (nil? (:id color))
-                                 :is-gradient (some? (:gradient color)))
+      (let [color    (if (string? color) {:color color :opacity 1} color)
+            id       (:id color)
+            gradient (:gradient color)
+            opacity  (:opacity color)
+            image    (:image color)]
+        [:div
+         {:class (stl/css-case
+                  :color-bullet true
+                  :mini mini?
+                  :is-library-color (some? id)
+                  :is-not-library-color (nil? id)
+                  :is-gradient (some? gradient)
+                  :is-transparent (and opacity (> 1 opacity))
+                  :grid-area area
+                  :read-only read-only?)
+          :data-readonly (str read-only?)
           :on-click on-click
-          :title (uc/get-color-name color)}
-         (cond
-           (:gradient color)
-           [:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
+          :title (color-title color)}
 
-           (:image color)
-           (let [uri (cfg/resolve-file-media (:image color))]
-             [:div.color-bullet-wrapper {:style {:background-size "contain" :background-image (str/ffmt "url(%)" uri)}}])
+         (cond
+           (some? gradient)
+           [:div {:class (stl/css :color-bullet-wrapper)
+                  :style {:background (uc/color->background color)}}]
+
+           (some? image)
+           (let [uri (cfg/resolve-file-media image)]
+             [:div {:class (stl/css :color-bullet-wrapper)
+                    :style {:background-image (str/ffmt "url(%)" uri)}}])
 
            :else
-           [:div.color-bullet-wrapper
-            [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
-            [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))))
+           [:div {:class (stl/css :color-bullet-wrapper)}
+            [:div {:class (stl/css :color-bullet-left)
+                   :style {:background (uc/color->background (assoc color :opacity 1))}}]
+            [:div {:class (stl/css :color-bullet-right)
+                   :style {:background (uc/color->background color)}}]])]))))
 
 (mf/defc color-name
   {::mf/wrap-props false}
-  [{:keys [color size on-click on-double-click]}]
-  (let [{:keys [name color gradient image]} (if (string? color) {:color color :opacity 1} color)]
-    (when (or (not size) (= size :big))
-      [:span.color-text
-       {:on-click on-click
-        :on-double-click on-double-click
-        :title name}
-       (if (some? image)
-         (tr "media.image.short")
-         (or name color (uc/gradient-type->string (:type gradient))))])))
+  [{:keys [color size on-click on-double-click origin]}]
+  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
+    (when (or (not size) (> size 64))
+      [:span {:class (stl/css-case
+                      :color-text (and (= origin :palette) (< size 72))
+                      :small-text (and (= origin :palette) (>= size 64) (< size 72))
+                      :big-text   (and (= origin :palette) (>= size 72))
+                      :gradient   (some? gradient)
+                      :color-row-name (not=  origin :palette))
+              :title name
+              :on-click on-click
+              :on-double-click on-double-click}
+       (or name color (uc/gradient-type->string (:type gradient)))])))

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

@@ -1,114 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.components.color-bullet-new
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.config :as cfg]
-   [app.util.color :as uc]
-   [app.util.i18n :refer [tr]]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(defn- color-title
-  [color-item]
-  (let [name (:name color-item)
-        gradient (:gradient color-item)
-        image (:image color-item)
-        color (:color color-item)]
-
-    (if (some? name)
-      (cond
-        (some? color)
-        (str/ffmt "% (%)" name color)
-
-        (some? gradient)
-        (str/ffmt "% (%)" name (uc/gradient-type->string (:type gradient)))
-
-        (some? image)
-        (str/ffmt "% (%)" name (tr "media.image"))
-
-        :else
-        name)
-
-      (cond
-        (some? color)
-        color
-
-        (some? gradient)
-        (uc/gradient-type->string (:type gradient))
-
-        (some? image)
-        (tr "media.image")))))
-
-(mf/defc color-bullet
-  {::mf/wrap [mf/memo]
-   ::mf/wrap-props false}
-  [{:keys [color on-click mini? area]}]
-  (let [read-only? (nil? on-click)
-        on-click
-        (mf/use-fn
-         (mf/deps color on-click)
-         (fn [event]
-           (when (fn? on-click)
-             (^function on-click color event))))]
-
-    (if (uc/multiple? color)
-      [:div {:class (stl/css :color-bullet :multiple)
-             :on-click on-click
-             :title (color-title color)}]
-      ;; No multiple selection
-      (let [color    (if (string? color) {:color color :opacity 1} color)
-            id       (:id color)
-            gradient (:gradient color)
-            opacity  (:opacity color)
-            image    (:image color)]
-        [:div
-         {:class (stl/css-case
-                  :color-bullet true
-                  :mini mini?
-                  :is-library-color (some? id)
-                  :is-not-library-color (nil? id)
-                  :is-gradient (some? gradient)
-                  :is-transparent (and opacity (> 1 opacity))
-                  :grid-area area
-                  :read-only read-only?)
-          :data-readonly (str read-only?)
-          :on-click on-click
-          :title (color-title color)}
-
-         (cond
-           (some? gradient)
-           [:div {:class (stl/css :color-bullet-wrapper)
-                  :style {:background (uc/color->background color)}}]
-
-           (some? image)
-           (let [uri (cfg/resolve-file-media image)]
-             [:div {:class (stl/css :color-bullet-wrapper)
-                    :style {:background-image (str/ffmt "url(%)" uri)}}])
-
-           :else
-           [:div {:class (stl/css :color-bullet-wrapper)}
-            [:div {:class (stl/css :color-bullet-left)
-                   :style {:background (uc/color->background (assoc color :opacity 1))}}]
-            [:div {:class (stl/css :color-bullet-right)
-                   :style {:background (uc/color->background color)}}]])]))))
-
-(mf/defc color-name
-  {::mf/wrap-props false}
-  [{:keys [color size on-click on-double-click origin]}]
-  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
-    (when (or (not size) (> size 64))
-      [:span {:class (stl/css-case
-                      :color-text (and (= origin :palette) (< size 72))
-                      :small-text (and (= origin :palette) (>= size 64) (< size 72))
-                      :big-text   (and (= origin :palette) (>= size 72))
-                      :gradient   (some? gradient)
-                      :color-row-name (not=  origin :palette))
-              :title name
-              :on-click on-click
-              :on-double-click on-double-click}
-       (or name color (uc/gradient-type->string (:type gradient)))])))

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -163,10 +163,12 @@
                                    (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
                                    (:color color) (:color color)
                                    :else (:value color))]
-                [:div {:class (stl/css :asset-list-item)
+                [:div {:class (stl/css :asset-list-item :color-item)
                        :key (str "assets-color-" (:id color))}
                  [:& bc/color-bullet {:color {:color (:color color)
-                                              :opacity (:opacity color)}}]
+                                              :id (:id color)
+                                              :opacity (:opacity color)}
+                                      :mini? true}]
                  [:div {:class (stl/css :name-block)}
                   [:span {:class (stl/css :color-name)} (:name color)]
                   (when-not (= (:name color) default-name)

frontend/src/app/main/ui/dashboard/grid.scss

@@ -370,3 +370,9 @@ $thumbnail-default-height: $s-168; // Default width
     }
   }
 }
+
+.color-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: $s-8;
+}

frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs

@@ -14,7 +14,7 @@
    [app.config :as cf]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet-new :as cbn]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.formats :as fmt]
@@ -69,8 +69,8 @@
          [:div {:class (stl/css :attributes-color-row)}
           [:div {:class (stl/css :bullet-wrapper)
                  :style #js {"--bullet-size" "16px"}}
-           [:& cbn/color-bullet {:color color
-                                 :mini? true}]]
+           [:& cb/color-bullet {:color color
+                                :mini? true}]]
 
           [:div {:class (stl/css :format-wrapper)}
            [:div {:class (stl/css :image-format)}
@@ -101,8 +101,8 @@
       [:div {:class (stl/css :attributes-color-row)}
        [:div {:class (stl/css :bullet-wrapper)
               :style #js {"--bullet-size" "16px"}}
-        [:& cbn/color-bullet {:color color
-                              :mini? true}]]
+        [:& cb/color-bullet {:color color
+                             :mini? true}]]
 
        [:div {:class (stl/css :format-wrapper)}
         (when-not (and on-change-format (or (:gradient color) image))
@@ -125,9 +125,9 @@
           [:span {:class (stl/css-case :color-value-wrapper true
                                        :gradient-name (:gradient color))}
            (if (:gradient color)
-             [:& cbn/color-name {:color color :size 90}]
+             [:& cb/color-name {:color color :size 90}]
              (case format
-               :hex [:& cbn/color-name {:color color}]
+               :hex [:& cb/color-name {:color color}]
                :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
                        (str/ffmt "%, %, %, %" r g b a))
                :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))

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

@@ -11,7 +11,7 @@
    [app.main.data.workspace.colors :as mdc]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet-new :as cb]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.util.color :as uc]

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

@@ -9,7 +9,7 @@
   (:require
    [app.common.data.macros :as dm]
    [app.main.refs :as refs]
-   [app.main.ui.components.color-bullet-new :as cb]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.icons :as i]
    [app.util.i18n :refer [tr]]

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

@@ -14,7 +14,7 @@
    [app.main.data.workspace.colors :as mdc]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet-new :as cb]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.hooks :as h]
    [app.main.ui.hooks.resize :as r]

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

@@ -9,7 +9,7 @@
   (:require
    [app.common.colors :as cc]
    [app.common.math :as mth]
-   [app.main.ui.components.color-bullet-new :as cb]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))

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

@@ -20,7 +20,7 @@
    [app.main.refs :as refs]
    [app.main.render :refer [component-svg]]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet :as bc]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.link-button :as lb]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
@@ -407,7 +407,8 @@
                     [:div {:class (stl/css :libraries-updates-item)
                            :key (dm/str (:id color))}
                      [:*
-                      [:& bc/color-bullet {:color {:color (:color color)
+                      [:& cb/color-bullet {:color {:color (:color color)
+                                                   :id (:id color)
                                                    :opacity (:opacity color)}}]
                       [:div {:class (stl/css :name-block)}
                        [:span {:class (stl/css :item-name)

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -18,7 +18,7 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet-new :as cb]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -15,7 +15,7 @@
    [app.main.data.workspace.libraries :as dwl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet-new :as cbn]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.color-input :refer [color-input*]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.context :as ctx]
@@ -201,12 +201,12 @@
                                   :editing editing-text?
                                   :gradient-name-wrapper gradient-color?)}
        [:div {:class (stl/css :color-bullet-wrapper)}
-        [:& cbn/color-bullet {:color (cond-> color
-                                       (nil? color-name) (assoc
-                                                          :id nil
-                                                          :file-id nil))
-                              :mini? true
-                              :on-click handle-click-color}]]
+        [:& cb/color-bullet {:color (cond-> color
+                                      (nil? color-name) (assoc
+                                                         :id nil
+                                                         :file-id nil))
+                             :mini? true
+                             :on-click handle-click-color}]]
        (cond
               ;; Rendering a color with ID
          library-color?