mirror of
https://github.com/penpot/penpot.git
synced 2025-07-06 12:47:16 +02:00
♻️ Remove old color bullet component
This commit is contained in:
Eva Marco
Alonso Torres
parent
3e9b2ec5c8
commit
d488d69abc
13 changed files with 120 additions and 172 deletions
|
|
@ -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)))])))
|
||||
|
|
|
|||
|
|
@ -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)))])))
|
||||
Loading…
Add table
Add a link
Reference in a new issue