mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
🎉 Changes options to display the color name
This commit is contained in:
alonso.torres
Andrey Antukh
parent
6c74f74bb5
commit
73dbad9c58
7 changed files with 84 additions and 222 deletions
|
|
@ -68,6 +68,8 @@
|
|||
(s/def :internal.shape/collapsed boolean?)
|
||||
(s/def :internal.shape/content any?)
|
||||
(s/def :internal.shape/fill-color string?)
|
||||
(s/def :internal.shape/fill-color-ref-file uuid?)
|
||||
(s/def :internal.shape/fill-color-ref-id uuid?)
|
||||
(s/def :internal.shape/fill-opacity number?)
|
||||
(s/def :internal.shape/font-family string?)
|
||||
(s/def :internal.shape/font-size number?)
|
||||
|
|
@ -83,6 +85,8 @@
|
|||
(s/def :internal.shape/rx number?)
|
||||
(s/def :internal.shape/ry number?)
|
||||
(s/def :internal.shape/stroke-color string?)
|
||||
(s/def :internal.shape/stroke-color-ref-file uuid?)
|
||||
(s/def :internal.shape/stroke-color-ref-id uuid?)
|
||||
(s/def :internal.shape/stroke-opacity number?)
|
||||
(s/def :internal.shape/stroke-style #{:solid :dotted :dashed :mixed :none})
|
||||
(s/def :internal.shape/stroke-width number?)
|
||||
|
|
@ -133,6 +137,8 @@
|
|||
:internal.shape/collapsed
|
||||
:internal.shape/content
|
||||
:internal.shape/fill-color
|
||||
:internal.shape/fill-color-ref-file
|
||||
:internal.shape/fill-color-ref-id
|
||||
:internal.shape/fill-opacity
|
||||
:internal.shape/font-family
|
||||
:internal.shape/font-size
|
||||
|
|
@ -152,6 +158,8 @@
|
|||
:internal.shape/y
|
||||
:internal.shape/exports
|
||||
:internal.shape/stroke-color
|
||||
:internal.shape/stroke-color-ref-file
|
||||
:internal.shape/stroke-color-ref-id
|
||||
:internal.shape/stroke-opacity
|
||||
:internal.shape/stroke-style
|
||||
:internal.shape/stroke-width
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.colorpicker-v2 {
|
||||
.colorpicker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 13rem;
|
||||
|
|
@ -215,153 +215,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.picker-area {
|
||||
display: flex;
|
||||
|
||||
/* Common stuff */
|
||||
.picker-wrapper,
|
||||
.slide-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.picker-indicator,
|
||||
.slide-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
transition: none;
|
||||
}
|
||||
.picker,
|
||||
.slide {
|
||||
cursor: crosshair;
|
||||
svg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inputs-area {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 200px;
|
||||
|
||||
.row-flex{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> input {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs13;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
|
||||
/* Default skin */
|
||||
|
||||
&.theme-default {
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
width: 230px;
|
||||
|
||||
.picker {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
}
|
||||
.slide-wrapper {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.picker-indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border: 2px solid darkblue;
|
||||
border-radius: 4px;
|
||||
opacity: .5;
|
||||
background-color: white;
|
||||
}
|
||||
.slide-indicator {
|
||||
width: 28px;
|
||||
height: 10px;
|
||||
left: -4px;
|
||||
opacity: .6;
|
||||
border: 4px solid lightblue;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.inputs-area {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Small skin */
|
||||
|
||||
&.theme-small {
|
||||
border-radius: 2px;
|
||||
|
||||
.picker {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 20px;
|
||||
height: 170px;
|
||||
}
|
||||
.slide-wrapper {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.picker-indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border: 2px solid darkblue;
|
||||
border-radius: 4px;
|
||||
opacity: .5;
|
||||
background-color: white;
|
||||
}
|
||||
.slide-indicator {
|
||||
width: 28px;
|
||||
height: 10px;
|
||||
left: -4px;
|
||||
opacity: .6;
|
||||
border: 4px solid lightblue;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* NEW COLOR PICKER */
|
||||
/* color th */
|
||||
.color-data {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.color-name {
|
||||
font-size: $fs13;
|
||||
margin: 5px 6px 0px 6px;
|
||||
}
|
||||
|
||||
.color-info {
|
||||
input {
|
||||
background-color: $color-gray-50;
|
||||
|
|
@ -430,11 +293,3 @@
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
.chrome-picker {
|
||||
font-family: inherit !important;
|
||||
|
||||
input {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@
|
|||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.colorpicker :as cp]
|
||||
|
||||
[cuerdas.core :as str]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.color :as uc]
|
||||
|
|
@ -97,8 +95,9 @@
|
|||
:left (str (* opacity 100) "%")}}]]))
|
||||
|
||||
(defn as-color-components [value opacity]
|
||||
(let [[r g b] (uc/hex->rgb (or value "000000"))
|
||||
[h s v] (uc/hex->hsv (or value "000000"))]
|
||||
(let [value (if (uc/hex? value) value "#000000")
|
||||
[r g b] (uc/hex->rgb value)
|
||||
[h s v] (uc/hex->hsv value)]
|
||||
{:hex (or value "000000")
|
||||
:alpha (or opacity 1)
|
||||
:r r :g g :b b
|
||||
|
|
@ -137,11 +136,19 @@
|
|||
;; Load library colors when the select is changed
|
||||
(mf/use-effect
|
||||
(mf/deps @selected-library)
|
||||
(fn [] (cond
|
||||
(= @selected-library "recent") (reset! current-library-colors (reverse (or recent-colors [])))
|
||||
(= @selected-library "file") (reset! current-library-colors (into [] (map :value (vals file-colors))))
|
||||
:else ;; Library UUID
|
||||
(reset! current-library-colors (into [] (map :value (vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))))))
|
||||
(fn []
|
||||
(let [mapped-colors
|
||||
(cond
|
||||
(= @selected-library "recent")
|
||||
(map #(hash-map :value %) (reverse (or recent-colors [])))
|
||||
|
||||
(= @selected-library "file")
|
||||
(map #(select-keys % [:id :value]) (vals file-colors))
|
||||
|
||||
:else ;; Library UUID
|
||||
(map #(merge {:file-id (uuid @selected-library)} (select-keys % [:id :value]))
|
||||
(vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))]
|
||||
(reset! current-library-colors (into [] mapped-colors)))))
|
||||
|
||||
;; If the file colors change and the file option is selected updates the state
|
||||
(mf/use-effect
|
||||
|
|
@ -153,7 +160,7 @@
|
|||
(mf/use-effect
|
||||
(fn [] #(st/emit! (dwl/add-recent-color @value-ref))))
|
||||
|
||||
[:div.colorpicker-v2 {:ref ref-picker}
|
||||
[:div.colorpicker {:ref ref-picker}
|
||||
[:& value-selector {:hue (:h @current-color)
|
||||
:saturation (:s @current-color)
|
||||
:value (:v @current-color)
|
||||
|
|
@ -285,18 +292,18 @@
|
|||
[:div.color-bullet.button {:style {:background-color "white"}}
|
||||
i/palette]
|
||||
|
||||
(for [[idx color] (map-indexed vector @current-library-colors)]
|
||||
(for [[idx {:keys [id file-id value]}] (map-indexed vector @current-library-colors)]
|
||||
[:div.color-bullet {:key (str "color-" idx)
|
||||
:on-click (fn []
|
||||
(swap! current-color assoc :hex color)
|
||||
(reset! value-ref color)
|
||||
(let [[r g b] (uc/hex->rgb color)
|
||||
[h s v] (uc/hex->hsv color)]
|
||||
(swap! current-color assoc :hex value)
|
||||
(reset! value-ref value)
|
||||
(let [[r g b] (uc/hex->rgb value)
|
||||
[h s v] (uc/hex->hsv value)]
|
||||
(swap! current-color assoc
|
||||
:r r :g g :b b
|
||||
:h h :s s :v v)
|
||||
(on-change color (:alpha @current-color))))
|
||||
:style {:background-color color}}])]
|
||||
(on-change value (:alpha @current-color) id file-id)))
|
||||
:style {:background-color value}}])]
|
||||
|
||||
]
|
||||
(when on-accept
|
||||
|
|
@ -319,13 +326,9 @@
|
|||
[:div.modal-overlay.transparent
|
||||
[:div.colorpicker-tooltip
|
||||
{:style (clj->js style)}
|
||||
#_[:& cp/colorpicker {:value (or value default)
|
||||
:opacity (or opacity 1)
|
||||
:colors (into-array @cp/most-used-colors)
|
||||
:on-change on-change
|
||||
:disable-opacity disable-opacity}]
|
||||
[:& colorpicker {:value (or value default)
|
||||
:opacity (or opacity 1)
|
||||
:on-change on-change
|
||||
:on-accept on-accept
|
||||
:disable-opacity disable-opacity}]]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.colorpicker :refer [colorpicker most-used-colors]]
|
||||
[app.main.ui.components.context-menu :refer [context-menu]]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
|
|
@ -40,33 +39,6 @@
|
|||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
#_(mf/defc modal-edit-color
|
||||
[{:keys [color-value on-accept on-cancel] :as ctx}]
|
||||
(let [state (mf/use-state {:current-color color-value})]
|
||||
(letfn [(accept [event]
|
||||
(dom/prevent-default event)
|
||||
(modal/hide!)
|
||||
(when on-accept (on-accept (:current-color @state))))
|
||||
|
||||
(cancel [event]
|
||||
(dom/prevent-default event)
|
||||
(modal/hide!)
|
||||
(when on-cancel (on-cancel)))]
|
||||
|
||||
[:div.modal-overlay.transparent
|
||||
[:div.modal-create-color
|
||||
[:h3.modal-create-color-title (tr "modal.create-color.new-color")]
|
||||
[:& colorpicker {:value (:current-color @state)
|
||||
:colors (into-array @most-used-colors)
|
||||
:disable-opacity true
|
||||
:on-change #(swap! state assoc :current-color %)}]
|
||||
|
||||
[:input.btn-primary {:type "button"
|
||||
:value (tr "ds.button.save")
|
||||
:on-click accept}]
|
||||
|
||||
[:a.close {:href "#" :on-click cancel} i/close]]])))
|
||||
|
||||
(mf/defc graphics-box
|
||||
[{:keys [file-id local? objects] :as props}]
|
||||
(let [input-ref (mf/use-ref nil)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
[app.util.i18n :as i18n :refer [tr t]]
|
||||
[app.util.object :as obj]))
|
||||
|
||||
(def fill-attrs [:fill-color :fill-opacity])
|
||||
(def fill-attrs [:fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file])
|
||||
|
||||
(defn- fill-menu-props-equals?
|
||||
[np op]
|
||||
|
|
@ -52,7 +52,9 @@
|
|||
(t locale "workspace.options.fill"))
|
||||
|
||||
color {:value (:fill-color values)
|
||||
:opacity (:fill-opacity values)}
|
||||
:opacity (:fill-opacity values)
|
||||
:id (:fill-color-ref-id values)
|
||||
:file-id (:fill-color-ref-file values)}
|
||||
|
||||
on-add
|
||||
(mf/use-callback
|
||||
|
|
@ -70,9 +72,11 @@
|
|||
on-change
|
||||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
(fn [value opacity]
|
||||
(fn [value opacity id file-id]
|
||||
(let [change #(cond-> %
|
||||
value (assoc :fill-color value)
|
||||
value (assoc :fill-color value
|
||||
:fill-color-ref-id id
|
||||
:fill-color-ref-file file-id)
|
||||
opacity (assoc :fill-opacity opacity))
|
||||
converted-attrs (cond-> {}
|
||||
value (assoc :fill value)
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.main.ui.modal :as modal]
|
||||
[app.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||
[app.common.data :as d]))
|
||||
[app.common.data :as d]
|
||||
[app.main.refs :as refs]))
|
||||
|
||||
(defn color-picker-callback
|
||||
[color handle-change-color disable-opacity]
|
||||
|
|
@ -56,8 +57,18 @@
|
|||
(defn remove-multiple [v]
|
||||
(if (= v :multiple) nil v))
|
||||
|
||||
(mf/defc color-row [{:keys [color on-change disable-opacity]}]
|
||||
(let [default-color {:value "#000000" :opacity 1}
|
||||
(mf/defc color-row
|
||||
[{:keys [color on-change disable-opacity]}]
|
||||
(let [;;
|
||||
file-colors (mf/deref refs/workspace-file-colors)
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
|
||||
get-color-name (fn [{:keys [id file-id]}]
|
||||
(let [src-colors (if file-id (get-in shared-libs [file-id :data :colors]) file-colors)]
|
||||
(get-in src-colors [id :name])))
|
||||
;;
|
||||
|
||||
default-color {:value "#000000" :opacity 1}
|
||||
|
||||
parse-color (fn [color]
|
||||
(-> (merge default-color color)
|
||||
|
|
@ -77,9 +88,9 @@
|
|||
(swap! state assoc :opacity new-opacity)
|
||||
(when on-change (on-change (remove-multiple value) new-opacity)))
|
||||
|
||||
handle-pick-color (fn [new-value new-opacity]
|
||||
handle-pick-color (fn [new-value new-opacity id file-id]
|
||||
(reset! state {:value new-value :opacity new-opacity})
|
||||
(when on-change (on-change new-value new-opacity)))
|
||||
(when on-change (on-change new-value new-opacity id file-id)))
|
||||
|
||||
handle-value-change (fn [event]
|
||||
(let [target (dom/get-target event)]
|
||||
|
|
@ -107,16 +118,20 @@
|
|||
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th
|
||||
{:style {:background-color (-> value value-to-background)}
|
||||
{:style {:background-color (-> value value-to-background)
|
||||
:border-radius (if (:id color) "10px" "inherit")}
|
||||
:on-click (color-picker-callback @state handle-pick-color disable-opacity)}
|
||||
(when (= value :multiple) "?")]
|
||||
|
||||
[:div.color-info
|
||||
[:input {:value (-> value remove-hash)
|
||||
:pattern "^[0-9a-fA-F]{0,6}$"
|
||||
:placeholder (tr "settings.multiple")
|
||||
:on-click select-all
|
||||
:on-change handle-value-change}]]
|
||||
(if (:id color)
|
||||
[:div.color-info
|
||||
[:div.color-name (str (get-color-name color))]]
|
||||
[:div.color-info
|
||||
[:input {:value (-> value remove-hash)
|
||||
:pattern "^[0-9a-fA-F]{0,6}$"
|
||||
:placeholder (tr "settings.multiple")
|
||||
:on-click select-all
|
||||
:on-change handle-value-change}]])
|
||||
|
||||
(when (not disable-opacity)
|
||||
[:div.input-element
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.modal :as modal]
|
||||
[app.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||
[app.util.data :refer [classnames]]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -29,6 +28,8 @@
|
|||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity])
|
||||
|
||||
(defn- stroke-menu-props-equals?
|
||||
|
|
@ -73,13 +74,17 @@
|
|||
show-options (not= (or (:stroke-style values) :none) :none)
|
||||
|
||||
current-stroke-color {:value (:stroke-color values)
|
||||
:opacity (:stroke-opacity values)}
|
||||
:opacity (:stroke-opacity values)
|
||||
:id (:stroke-color-ref-id values)
|
||||
:file-id (:stroke-color-ref-file values)}
|
||||
|
||||
handle-change-stroke-color
|
||||
(fn [value opacity]
|
||||
(fn [value opacity id file-id]
|
||||
(let [change #(cond-> %
|
||||
value (assoc :stroke-color value)
|
||||
opacity (assoc :stroke-opacity opacity))]
|
||||
value (assoc :stroke-color value
|
||||
:stroke-color-ref-id id
|
||||
:stroke-color-ref-file file-id)
|
||||
opacity (assoc :stroke-opacity opacity))]
|
||||
(st/emit! (dwc/update-shapes ids change))))
|
||||
|
||||
on-stroke-style-change
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue