Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues Activity

Merge pull request #2713 from penpot/palba-show-color-name-inspect

Browse source 
🐛 Show color name on inspect
This commit is contained in:
Alejandro 2023-01-02 10:35:36 +01:00 • committed by GitHub
commit 5f77df1996
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -184,6 +184,7 @@ ul.palette-menu .color-bullet {
.color-bullet.is-not-library-color {
border-radius: $br-small;
overflow: hidden;
& .color-bullet-wrapper {
clip-path: none;

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

@ -31,12 +31,12 @@
;; No multiple selection
(let [color (if (string? color) {:color color :opacity 1} color)]
[:div.color-bullet.tooltip.tooltip-right
[:div.color-bullet
{:class (dom/classnames :is-library-color (some? (:id color))
:is-not-library-color (nil? (:id color))
:is-gradient (some? (:gradient color)))
:on-click on-click
:title (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
:title (or (:color-library-name color) (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
(if (:gradient color)
[:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
[:div.color-bullet-wrapper

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

@ -6,6 +6,7 @@
(ns app.main.ui.viewer.inspect.attributes.common
(:require
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.color-bullet :refer [color-bullet color-name]]
[app.main.ui.components.copy-button :refer [copy-button]]
@ -20,21 +21,31 @@
(def file-colors-ref
(l/derived (l/in [:viewer :file :data :colors]) st/state))
(defn make-colors-library-ref [file-id]
(defn make-colors-library-ref [libraries-place file-id]
(let [get-library
(fn [state]
(get-in state [:viewer-libraries file-id :data :colors]))]
#(l/derived get-library st/state)))
(get-in state [libraries-place file-id :data :colors]))]
(l/derived get-library st/state)))
(defn- get-colors-library [color]
(let [colors-library-v (-> (mf/use-memo
(mf/deps (:file-id color))
#(make-colors-library-ref :viewer-libraries (:file-id color)))
mf/deref)
colors-library-ws (-> (mf/use-memo
(mf/deps (:file-id color))
#(make-colors-library-ref :workspace-libraries (:file-id color)))
mf/deref)]
(or colors-library-v colors-library-ws)))
(defn- get-file-colors []
(or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors)))
(mf/defc color-row [{:keys [color format copy-data on-change-format]}]
(let [colors-library-ref (mf/use-memo
(mf/deps (:file-id color))
(make-colors-library-ref (:file-id color)))
colors-library (mf/deref colors-library-ref)
file-colors (mf/deref file-colors-ref)
color-library-name (get-in (or colors-library file-colors) [(:id color) :name])]
(let [colors-library (get-colors-library color)
file-colors (get-file-colors)
color-library-name (get-in (or colors-library file-colors) [(:id color) :name])
color (assoc color :color-library-name color-library-name)]
[:div.attributes-color-row
(when color-library-name
[:div.attributes-color-id