Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00
Code Issues Activity

✨ Add library names to handoff views

Browse source
This commit is contained in:
alonso.torres 2020-11-03 10:54:37 +01:00 • committed by Hirunatan
parent 833a53f131
commit 8ae52be773
9 changed files with 169 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
backend/src/app/services/queries/viewer.clj
View file

@ -49,9 +49,12 @@
project (retrieve-project conn (:project-id file))
page (get-in file [:data :pages-index page-id])
bundle {:file (dissoc file :data)
file-library (select-keys (:data file) [:colors :media :typographies])
bundle {:file (-> (dissoc file :data)
(merge file-library))
:page (get-in file [:data :pages-index page-id])
:project project}]
:project project}
]
(if (string? share-token)
(do
(check-shared-token! conn file-id page-id share-token)

59
frontend/resources/styles/main/partials/handoff.scss
View file

@ -104,9 +104,32 @@
.attributes-color-row {
display: flex;
flex-direction: column;
padding: 1rem 0;
position: relative;
align-items: center;
.attributes-color-id {
display: flex;
align-items: center;
& > * {
margin: 0 0.5rem;
}
margin-bottom: 0.5rem;
}
.attributes-color-value {
display: flex;
align-items: center;
& > * {
margin: 0 0.5rem;
}
& :last-child {
margin-right: 0;
}
}
.color-text {
width: 3rem;
@ -123,19 +146,15 @@
border-radius: $br-small;
border: 1px solid $color-gray-60;
}
.hide-color .color-bullet {
visibility: hidden;
}
.copy-button {
padding: 1rem 0.5rem;
margin-top: 0.25rem;
}
& > * {
margin: 0 0.5rem;
}
& :last-child {
margin-right: 0;
}
select {
font-size: $fs12;
margin: 0;
@ -226,6 +245,22 @@
justify-content: space-between;
}
.attributes-typography-name-row {
position: relative;
margin-top: 0.5rem;
border: 1px solid $color-black;
border-radius: 4px;
margin: 0.5rem;
display: flex;
flex-direction: row;
align-items: center;
.copy-button {
padding: 0.5rem;
margin-top: 0.25rem;
}
}
.attributes-typography-row {
position: relative;
margin: 0.5rem;
@ -234,6 +269,7 @@
.typography-sample {
font-size: $fs16;
}
}
.download-button {
@ -260,7 +296,8 @@
.attributes-shadow-row,
.attributes-stroke-row,
.attributes-typography-row,
.attributes-content-row {
.attributes-content-row,
.attributes-typography-name-row {
&:hover {
.expand-button,
.copy-button {
@ -343,6 +380,6 @@
}
}
.element-options :first-child {
.element-options > :first-child {
border-top: none;
}

11
frontend/src/app/main/data/viewer.cljs
View file

@ -72,8 +72,10 @@
(let [params (cond-> {:page-id page-id
:file-id file-id}
(string? token) (assoc :share-token token))]
(->> (rp/query :viewer-bundle params)
(rx/map bundle-fetched)
(->> (rx/zip (rp/query :viewer-bundle params)
(rp/query :file-libraries {:file-id file-id}))
(rx/first)
(rx/map #(apply bundle-fetched %))
#_(rx/catch (fn [error-data]
(rx/of (rt/nav :not-found)))))))))
@ -87,7 +89,7 @@
(vec))))
(defn bundle-fetched
[{:keys [project file page share-token] :as bundle}]
[{:keys [project file page share-token] :as bundle} libraries]
(us/verify ::bundle bundle)
(ptk/reify ::file-fetched
ptk/UpdateEvent
@ -95,7 +97,8 @@
(let [objects (:objects page)
frames (extract-frames objects)]
(-> state
(assoc :viewer-data {:project project
(assoc :viewer-libraries (into {} (map #(vector (:id %) %) libraries))
:viewer-data {:project project
:objects objects
:file file
:page page

2
frontend/src/app/main/ui/components/copy_button.cljs
View file

@ -22,7 +22,7 @@
(fn []
(when @just-copied
(let [sub (timers/schedule 1000 #(reset! just-copied false))]
;; On umounto we dispose the timer
;; On unmount we dispose the timer
#(rx/-dispose sub)))))
[:button.copy-button

70
frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs
View file

@ -11,43 +11,69 @@
(:require
[rumext.alpha :as mf]
[cuerdas.core :as str]
[okulary.core :as l]
[app.common.math :as mth]
[app.util.dom :as dom]
[app.util.i18n :refer [t] :as i18n]
[app.util.color :as uc]
[app.common.math :as mth]
[app.main.ui.icons :as i]
[app.util.code-gen :as cg]
[app.util.webapi :as wapi]
[app.main.ui.icons :as i]
[app.main.store :as st]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.color-bullet :refer [color-bullet color-name]]))
(def file-colors-ref
(l/derived (l/in [:viewer-data :file :colors]) st/state))
(defn make-colors-library-ref [file-id]
(let [get-library
(fn [state]
(get-in state [:viewer-libraries file-id :data :colors]))]
#(l/derived get-library st/state)))
(mf/defc color-row [{:keys [color format copy-data on-change-format]}]
(let [locale (mf/deref i18n/locale)]
(let [locale (mf/deref i18n/locale)
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])]
[:div.attributes-color-row
[:& color-bullet {:color color}]
(when color-library-name
[:div.attributes-color-id
[:& color-bullet {:color color}]
[:div color-library-name]])
(if (:gradient color)
[:& color-name {:color color}]
(case format
:rgba (let [[r g b a] (->> (uc/hex->rgba (:color color) (:opacity color)) (map #(mth/precision % 2)))]
[:div (str/fmt "%s, %s, %s, %s" r g b a)])
:hsla (let [[h s l a] (->> (uc/hex->hsla (:color color) (:opacity color)) (map #(mth/precision % 2)))]
[:div (str/fmt "%s, %s, %s, %s" h s l a)])
[:*
[:& color-name {:color color}]
(when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])]))
[:div.attributes-color-value {:class (when color-library-name "hide-color")}
[:& color-bullet {:color color}]
(when-not (and on-change-format (:gradient color))
[:select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
[:option {:value "hex"}
(t locale "handoff.attributes.color.hex")]
(if (:gradient color)
[:& color-name {:color color}]
(case format
:rgba (let [[r g b a] (->> (uc/hex->rgba (:color color) (:opacity color)) (map #(mth/precision % 2)))]
[:div (str/fmt "%s, %s, %s, %s" r g b a)])
:hsla (let [[h s l a] (->> (uc/hex->hsla (:color color) (:opacity color)) (map #(mth/precision % 2)))]
[:div (str/fmt "%s, %s, %s, %s" h s l a)])
[:*
[:& color-name {:color color}]
(when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])]))
[:option {:value "rgba"}
(t locale "handoff.attributes.color.rgba")]
(when-not (and on-change-format (:gradient color))
[:select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
[:option {:value "hex"}
(t locale "handoff.attributes.color.hex")]
[:option {:value "hsla"}
(t locale "handoff.attributes.color.hsla")]])
[:option {:value "rgba"}
(t locale "handoff.attributes.color.rgba")]
[:option {:value "hsla"}
(t locale "handoff.attributes.color.hsla")]])]
(when copy-data
[:& copy-button {:data copy-data}])]))

4
frontend/src/app/main/ui/viewer/handoff/attributes/fill.cljs
View file

@ -23,8 +23,8 @@
{:color (:fill-color shape)
:opacity (:fill-opacity shape)
:gradient (:fill-color-gradient shape)
:id (:fill-ref-id shape)
:file-id (:fill-ref-file-id shape)})
:id (:fill-color-ref-id shape)
:file-id (:fill-color-ref-file shape)})
(defn has-color? [shape]
(and

4
frontend/src/app/main/ui/viewer/handoff/attributes/stroke.cljs
View file

@ -22,8 +22,8 @@
{:color (:stroke-color shape)
:opacity (:stroke-opacity shape)
:gradient (:stroke-color-gradient shape)
:id (:stroke-ref-id shape)
:file-id (:stroke-ref-file-id shape)})
:id (:stroke-color-ref-id shape)
:file-id (:stroke-color-ref-file shape)})
(defn format-stroke [shape]
(let [width (:stroke-width shape)

74
frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs
View file

@ -11,6 +11,7 @@
(:require
[rumext.alpha :as mf]
[cuerdas.core :as str]
[okulary.core :as l]
[app.util.data :as d]
[app.util.i18n :refer [t]]
[app.util.color :as uc]
@ -20,11 +21,22 @@
[app.util.webapi :as wapi]
[app.main.ui.viewer.handoff.attributes.common :refer [color-row]]
[app.util.code-gen :as cg]
[app.main.store :as st]
[app.main.ui.components.copy-button :refer [copy-button]]))
(defn has-text? [shape]
(:content shape))
(def file-typographies-ref
(l/derived (l/in [:viewer-data :file :typographies]) st/state))
(defn make-typographies-library-ref [file-id]
(let [get-library
(fn [state]
(get-in state [:viewer-libraries file-id :data :typographies]))]
#(l/derived get-library st/state)))
(def properties [:fill-color
:fill-color-gradient
:font-family
@ -39,21 +51,21 @@
{:color (:fill-color shape)
:opacity (:fill-opacity shape)
:gradient (:fill-color-gradient shape)
:id (:fill-ref-id shape)
:file-id (:fill-ref-file-id shape)})
:id (:fill-color-ref-id shape)
:file-id (:fill-color-ref-file shape)})
(def params
{:to-prop {:fill-color "color"
:fill-color-gradient "color"}
:format {:font-family #(str "'" % "'")
:font-style #(str "'" % "'")
:font-size #(str % "px")
:line-height #(str % "px")
:letter-spacing #(str % "px")
:text-decoration name
:text-transform name
:fill-color #(-> %2 shape->color uc/color->background)
:fill-color-gradient #(-> %2 shape->color uc/color->background)}})
:format {:font-family #(str "'" % "'")
:font-style #(str "'" % "'")
:font-size #(str % "px")
:line-height #(str % "px")
:letter-spacing #(str % "px")
:text-decoration name
:text-transform name
:fill-color #(-> %2 shape->color uc/color->background)
:fill-color-gradient #(-> %2 shape->color uc/color->background)}})
(defn copy-style-data
([style]
@ -62,16 +74,37 @@
(cg/generate-css-props style properties params)))
(mf/defc typography-block [{:keys [shape locale text style full-style]}]
(let [color-format (mf/use-state :hex)
color (shape->color style)]
(let [typography-library-ref (mf/use-memo
(mf/deps (:typography-ref-file style))
(make-typographies-library-ref (:typography-ref-file style)))
typography-library (mf/deref typography-library-ref)
file-typographies (mf/deref file-typographies-ref)
color-format (mf/use-state :hex)
color (shape->color style)
typography (get (or typography-library file-typographies) (:typography-ref-id style))]
[:div.attributes-text-block
[:div.attributes-typography-row
[:div.typography-sample
{:style {:font-family (:font-family full-style)
:font-weight (:font-weight full-style)
:font-style (:font-style full-style)}}
(t locale "workspace.assets.typography.sample")]
[:& copy-button {:data (copy-style-data style)}]]
(if (:typography-ref-id style)
[:div.attributes-typography-name-row
[:div.typography-entry
[:div.typography-sample
{:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
(t locale "workspace.assets.typography.sample")]]
[:div.typography-entry-name (:name typography)]
[:& copy-button {:data (copy-style-data typography)}]]
[:div.attributes-typography-row
[:div.typography-sample
{:style {:font-family (:font-family full-style)
:font-weight (:font-weight full-style)
:font-style (:font-style full-style)}}
(t locale "workspace.assets.typography.sample")]
[:& copy-button {:data (copy-style-data style)}]])
[:div.attributes-content-row
[:pre.attributes-content (str/trim text)]
@ -129,7 +162,6 @@
(mf/defc text-block [{:keys [shape locale]}]
(let [font (ut/search-text-attrs (:content shape)
(keys ut/default-text-attrs))
style-text-blocks (->> (keys ut/default-text-attrs)
(ut/parse-style-text-blocks (:content shape))
(remove (fn [[style text]] (str/empty? (str/trim text))))

4
frontend/src/app/util/text.cljs
View file

@ -3,7 +3,9 @@
[cuerdas.core :as str]))
(defonce default-text-attrs
{:font-id "sourcesanspro"
{:typography-ref-file nil
:typography-ref-id nil
:font-id "sourcesanspro"
:font-family "sourcesanspro"
:font-variant-id "regular"
:font-size "14"