3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-17 07:16:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add code block to layout elements

Browse source
This commit is contained in:
Eva 2022-11-16 12:54:16 +01:00
parent 93bbe1b2f8
commit 2a2b5c7dba
12 changed files with 272 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/main/ui/viewer/handoff/code.cljs
View file

@ -9,9 +9,11 @@
["js-beautify" :as beautify]
[app.common.geom.shapes :as gsh]
[app.main.data.events :as ev]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.code-block :refer [code-block]]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.util.code-gen :as cg]
[app.util.dom :as dom]
@ -40,13 +42,23 @@
(cond-> code
(= type "svg") (beautify/html #js {"indent_size" 2}))))
(defn get-flex-elements [page-id shapes]
(let [ids (mapv :id shapes)
ids (hooks/use-equal-memo ids)
get-layout-children-refs (mf/use-memo (mf/deps ids page-id) #(refs/get-flex-child-viewer ids page-id))]
(mf/deref get-layout-children-refs)))
(mf/defc code
[{:keys [shapes frame on-expand]}]
(let [style-type (mf/use-state "css")
(let [style-type (mf/use-state "css")
markup-type (mf/use-state "svg")
shapes (->> shapes
(map #(gsh/translate-to-frame % frame)))
shapes (->> shapes
(map #(gsh/translate-to-frame % frame)))
route (mf/deref refs/route)
page-id (:page-id (:query-params route))
flex-items (get-flex-elements page-id shapes)
shapes (map #(assoc % :flex-items flex-items) shapes)
style-code (-> (cg/generate-style-code @style-type shapes)
(format-code "css"))
@ -67,15 +79,14 @@
(fn []
(st/emit! (ptk/event ::ev/event
{::ev/name "copy-handoff-style"
:type @style-type}))))
]
:type @style-type}))))]
[:div.element-options
[:div.code-block
[:div.code-row-lang "CSS"
[:button.expand-button
{:on-click on-expand }
{:on-click on-expand}
i/full-screen]
[:& copy-button {:data style-code
@ -96,6 +107,4 @@
:on-copied on-markup-copied}]]
[:div.code-row-display
[:& code-block {:type @markup-type
:code markup-code}]]]
]))
:code markup-code}]]]]))