Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-26 16:56:11 -05:00
Code Issues Activity

⚡ Improve css handling on color-bullet-new component

Browse source
This commit is contained in:
Andrey Antukh 2023-07-13 15:54:41 +02:00
parent b5dac770d3
commit 62fb9c3cfe
2 changed files with 40 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/ui/components/color_bullet.cljs
View file

@ -11,7 +11,8 @@
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc color-bullet (mf/defc color-bullet
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]
::mf/wrap-props false}
[{:keys [color on-click]}] [{:keys [color on-click]}]
(let [on-click (mf/use-fn (let [on-click (mf/use-fn
(mf/deps color on-click) (mf/deps color on-click)
@ -36,7 +37,9 @@
[:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}] [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
[:div.color-bullet-right {:style {:background (uc/color->background color)}}]])])))) [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))))
(mf/defc color-name [{:keys [color size on-click on-double-click]}] (mf/defc color-name
{::mf/wrap-props false}
[{:keys [color size on-click on-double-click]}]
(let [color (if (string? color) {:color color :opacity 1} color) (let [color (if (string? color) {:color color :opacity 1} color)
{:keys [name color gradient]} color {:keys [name color gradient]} color
color-str (or name color (uc/gradient-type->string (:type gradient)))] color-str (or name color (uc/gradient-type->string (:type gradient)))]

63
frontend/src/app/main/ui/components/color_bullet_new.cljs
View file

@ -5,50 +5,57 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.color-bullet-new (ns app.main.ui.components.color-bullet-new
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.util.color :as uc] [app.util.color :as uc]
[app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc color-bullet (mf/defc color-bullet
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]
::mf/wrap-props false}
[{:keys [color on-click mini?]}] [{:keys [color on-click mini?]}]
(let [on-click (mf/use-fn (let [on-click (mf/use-fn
(mf/deps color on-click) (mf/deps color on-click)
(fn [event] (fn [event]
(when (fn? on-click) (when (fn? on-click)
(^function on-click color event))))] (^function on-click color event))))]
(if (uc/multiple? color) (if (uc/multiple? color)
[:div {:on-click on-click [:div {:on-click on-click :class (stl/css :color-bullet :multiple)}]
:class (dom/classnames (css :color-bullet) true
(css :multiple) true)}]
;; No multiple selection ;; No multiple selection
(let [color (if (string? color) {:color color :opacity 1} color)] (let [color (if (string? color) {:color color :opacity 1} color)
id (:id color)
gradient (:gradient color)
opacity (:opacity color)]
[:div [:div
{:class (dom/classnames (css :color-bullet) true {:class (stl/css-case
(css :mini) mini? :color-bullet true
(css :is-library-color) (some? (:id color)) :mini mini?
(css :is-not-library-color) (nil? (:id color)) :is-library-color (some? id)
(css :is-gradient) (some? (:gradient color)) :is-not-library-color (nil? id)
(css :is-transparent) (and (:opacity color) (> 1 (:opacity color)))) :is-gradient (some? gradient)
:is-transparent (and opacity (> 1 opacity)))
:on-click on-click} :on-click on-click}
(if (:gradient color)
[:div {:class (dom/classnames (css :color-bullet-wrapper) true) (if (some? gradient)
[:div {:class (stl/css :color-bullet-wrapper)
:style {:background (uc/color->background color)}}] :style {:background (uc/color->background color)}}]
[:div {:class (dom/classnames (css :color-bullet-wrapper) true)}
[:div {:class (dom/classnames (css :color-bullet-left) true) [:div {:class (stl/css :color-bullet-wrapper)}
[:div {:class (stl/css :color-bullet-left)
:style {:background (uc/color->background (assoc color :opacity 1))}}] :style {:background (uc/color->background (assoc color :opacity 1))}}]
[:div {:class (dom/classnames (css :color-bullet-right) true) [:div {:class (stl/css :color-bullet-right)
:style {:background (uc/color->background color)}}]])])))) :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 (mf/defc color-name
color-str (or name color (uc/gradient-type->string (:type gradient))) {::mf/wrap-props false}
text-small (and (>= size 64) (< size 72))] [{:keys [color size on-click on-double-click]}]
(let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
(when (or (not size) (> size 64)) (when (or (not size) (> size 64))
[:span {:class (dom/classnames (css :color-text) true [:span {:class (stl/css-case
(css :small-text) text-small) :color-text true
:on-click #(when on-click (on-click %)) :small-text (and (>= size 64) (< size 72)))
:on-double-click #(when on-double-click (on-double-click %))} color-str]))) :on-click on-click
:on-double-click on-double-click}
(or name color (uc/gradient-type->string (:type gradient)))])))