3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-05 23:51:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Changes options to display the color name

Browse source
This commit is contained in:
alonso.torres 2020-09-07 11:33:16 +02:00 • committed by Andrey Antukh
parent 6c74f74bb5
commit 73dbad9c58
7 changed files with 84 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

8
common/app/common/pages.cljc
View file

@ -68,6 +68,8 @@
(s/def :internal.shape/collapsed boolean?) (s/def :internal.shape/collapsed boolean?)
(s/def :internal.shape/content any?) (s/def :internal.shape/content any?)
(s/def :internal.shape/fill-color string?) (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/fill-opacity number?)
(s/def :internal.shape/font-family string?) (s/def :internal.shape/font-family string?)
(s/def :internal.shape/font-size number?) (s/def :internal.shape/font-size number?)
@ -83,6 +85,8 @@
(s/def :internal.shape/rx number?) (s/def :internal.shape/rx number?)
(s/def :internal.shape/ry number?) (s/def :internal.shape/ry number?)
(s/def :internal.shape/stroke-color string?) (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-opacity number?)
(s/def :internal.shape/stroke-style #{:solid :dotted :dashed :mixed :none}) (s/def :internal.shape/stroke-style #{:solid :dotted :dashed :mixed :none})
(s/def :internal.shape/stroke-width number?) (s/def :internal.shape/stroke-width number?)
@ -133,6 +137,8 @@
:internal.shape/collapsed :internal.shape/collapsed
:internal.shape/content :internal.shape/content
:internal.shape/fill-color :internal.shape/fill-color
:internal.shape/fill-color-ref-file
:internal.shape/fill-color-ref-id
:internal.shape/fill-opacity :internal.shape/fill-opacity
:internal.shape/font-family :internal.shape/font-family
:internal.shape/font-size :internal.shape/font-size
@ -152,6 +158,8 @@
:internal.shape/y :internal.shape/y
:internal.shape/exports :internal.shape/exports
:internal.shape/stroke-color :internal.shape/stroke-color
:internal.shape/stroke-color-ref-file
:internal.shape/stroke-color-ref-id
:internal.shape/stroke-opacity :internal.shape/stroke-opacity
:internal.shape/stroke-style :internal.shape/stroke-style
:internal.shape/stroke-width :internal.shape/stroke-width

157
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -5,7 +5,7 @@
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> // Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.colorpicker-v2 { .colorpicker {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 13rem; 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 { .color-data {
align-items: center; align-items: center;
display: flex; display: flex;
position: relative; position: relative;
.color-name {
font-size: $fs13;
margin: 5px 6px 0px 6px;
}
.color-info { .color-info {
input { input {
background-color: $color-gray-50; background-color: $color-gray-50;
@ -430,11 +293,3 @@
} }
} }
.chrome-picker {
font-family: inherit !important;
input {
margin-bottom: auto;
}
}

47
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -11,8 +11,6 @@
(:require (:require
[rumext.alpha :as mf] [rumext.alpha :as mf]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.colorpicker :as cp]
[cuerdas.core :as str] [cuerdas.core :as str]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.color :as uc] [app.util.color :as uc]
@ -97,8 +95,9 @@
:left (str (* opacity 100) "%")}}]])) :left (str (* opacity 100) "%")}}]]))
(defn as-color-components [value opacity] (defn as-color-components [value opacity]
(let [[r g b] (uc/hex->rgb (or value "000000")) (let [value (if (uc/hex? value) value "#000000")
[h s v] (uc/hex->hsv (or value "000000"))] [r g b] (uc/hex->rgb value)
[h s v] (uc/hex->hsv value)]
{:hex (or value "000000") {:hex (or value "000000")
:alpha (or opacity 1) :alpha (or opacity 1)
:r r :g g :b b :r r :g g :b b
@ -137,11 +136,19 @@
;; Load library colors when the select is changed ;; Load library colors when the select is changed
(mf/use-effect (mf/use-effect
(mf/deps @selected-library) (mf/deps @selected-library)
(fn [] (cond (fn []
(= @selected-library "recent") (reset! current-library-colors (reverse (or recent-colors []))) (let [mapped-colors
(= @selected-library "file") (reset! current-library-colors (into [] (map :value (vals file-colors)))) (cond
:else ;; Library UUID (= @selected-library "recent")
(reset! current-library-colors (into [] (map :value (vals (get-in shared-libs [(uuid @selected-library) :data :colors])))))))) (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 ;; If the file colors change and the file option is selected updates the state
(mf/use-effect (mf/use-effect
@ -153,7 +160,7 @@
(mf/use-effect (mf/use-effect
(fn [] #(st/emit! (dwl/add-recent-color @value-ref)))) (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) [:& value-selector {:hue (:h @current-color)
:saturation (:s @current-color) :saturation (:s @current-color)
:value (:v @current-color) :value (:v @current-color)
@ -285,18 +292,18 @@
[:div.color-bullet.button {:style {:background-color "white"}} [:div.color-bullet.button {:style {:background-color "white"}}
i/palette] 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) [:div.color-bullet {:key (str "color-" idx)
:on-click (fn [] :on-click (fn []
(swap! current-color assoc :hex color) (swap! current-color assoc :hex value)
(reset! value-ref color) (reset! value-ref value)
(let [[r g b] (uc/hex->rgb color) (let [[r g b] (uc/hex->rgb value)
[h s v] (uc/hex->hsv color)] [h s v] (uc/hex->hsv value)]
(swap! current-color assoc (swap! current-color assoc
:r r :g g :b b :r r :g g :b b
:h h :s s :v v) :h h :s s :v v)
(on-change color (:alpha @current-color)))) (on-change value (:alpha @current-color) id file-id)))
:style {:background-color color}}])] :style {:background-color value}}])]
] ]
(when on-accept (when on-accept
@ -319,13 +326,9 @@
[:div.modal-overlay.transparent [:div.modal-overlay.transparent
[:div.colorpicker-tooltip [:div.colorpicker-tooltip
{:style (clj->js style)} {: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) [:& colorpicker {:value (or value default)
:opacity (or opacity 1) :opacity (or opacity 1)
:on-change on-change :on-change on-change
:on-accept on-accept :on-accept on-accept
:disable-opacity disable-opacity}]]])) :disable-opacity disable-opacity}]]]))

28
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -20,7 +20,6 @@
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [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.context-menu :refer [context-menu]]
[app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.components.tab-container :refer [tab-container tab-element]]
@ -40,33 +39,6 @@
[okulary.core :as l] [okulary.core :as l]
[rumext.alpha :as mf])) [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 (mf/defc graphics-box
[{:keys [file-id local? objects] :as props}] [{:keys [file-id local? objects] :as props}]
(let [input-ref (mf/use-ref nil) (let [input-ref (mf/use-ref nil)

12
frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
View file

@ -20,7 +20,7 @@
[app.util.i18n :as i18n :refer [tr t]] [app.util.i18n :as i18n :refer [tr t]]
[app.util.object :as obj])) [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? (defn- fill-menu-props-equals?
[np op] [np op]
@ -52,7 +52,9 @@
(t locale "workspace.options.fill")) (t locale "workspace.options.fill"))
color {:value (:fill-color values) 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 on-add
(mf/use-callback (mf/use-callback
@ -70,9 +72,11 @@
on-change on-change
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value opacity] (fn [value opacity id file-id]
(let [change #(cond-> % (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)) opacity (assoc :fill-opacity opacity))
converted-attrs (cond-> {} converted-attrs (cond-> {}
value (assoc :fill value) value (assoc :fill value)

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

@ -16,7 +16,8 @@
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.main.ui.modal :as modal] [app.main.ui.modal :as modal]
[app.main.ui.workspace.colorpicker :refer [colorpicker-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 (defn color-picker-callback
[color handle-change-color disable-opacity] [color handle-change-color disable-opacity]
@ -56,8 +57,18 @@
(defn remove-multiple [v] (defn remove-multiple [v]
(if (= v :multiple) nil v)) (if (= v :multiple) nil v))
(mf/defc color-row [{:keys [color on-change disable-opacity]}] (mf/defc color-row
(let [default-color {:value "#000000" :opacity 1} [{: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] parse-color (fn [color]
(-> (merge default-color color) (-> (merge default-color color)
@ -77,9 +88,9 @@
(swap! state assoc :opacity new-opacity) (swap! state assoc :opacity new-opacity)
(when on-change (on-change (remove-multiple value) 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}) (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] handle-value-change (fn [event]
(let [target (dom/get-target event)] (let [target (dom/get-target event)]
@ -107,16 +118,20 @@
[:div.row-flex.color-data [:div.row-flex.color-data
[:span.color-th [: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)} :on-click (color-picker-callback @state handle-pick-color disable-opacity)}
(when (= value :multiple) "?")] (when (= value :multiple) "?")]
[:div.color-info (if (:id color)
[:input {:value (-> value remove-hash) [:div.color-info
:pattern "^[0-9a-fA-F]{0,6}$" [:div.color-name (str (get-color-name color))]]
:placeholder (tr "settings.multiple") [:div.color-info
:on-click select-all [:input {:value (-> value remove-hash)
:on-change handle-value-change}]] :pattern "^[0-9a-fA-F]{0,6}$"
:placeholder (tr "settings.multiple")
:on-click select-all
:on-change handle-value-change}]])
(when (not disable-opacity) (when (not disable-opacity)
[:div.input-element [:div.input-element

15
frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
View file

@ -17,7 +17,6 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.modal :as modal] [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.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.data :refer [classnames]] [app.util.data :refer [classnames]]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -29,6 +28,8 @@
:stroke-alignment :stroke-alignment
:stroke-width :stroke-width
:stroke-color :stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity]) :stroke-opacity])
(defn- stroke-menu-props-equals? (defn- stroke-menu-props-equals?
@ -73,13 +74,17 @@
show-options (not= (or (:stroke-style values) :none) :none) show-options (not= (or (:stroke-style values) :none) :none)
current-stroke-color {:value (:stroke-color values) 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 handle-change-stroke-color
(fn [value opacity] (fn [value opacity id file-id]
(let [change #(cond-> % (let [change #(cond-> %
value (assoc :stroke-color value) value (assoc :stroke-color value
opacity (assoc :stroke-opacity opacity))] :stroke-color-ref-id id
:stroke-color-ref-file file-id)
opacity (assoc :stroke-opacity opacity))]
(st/emit! (dwc/update-shapes ids change)))) (st/emit! (dwc/update-shapes ids change))))
on-stroke-style-change on-stroke-style-change