Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-04 13:29:14 -05:00
Code Issues Activity

✨ Add copy all code button

Browse source
This commit is contained in:
alonso.torres 2023-06-14 12:24:40 +02:00
parent 600b1a6d8d
commit e01af790f3
6 changed files with 64 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/main/partials/inspect.scss
View file

@ -332,6 +332,10 @@
margin-top: 0.5rem; margin-top: 0.5rem;
border-top: 1px solid $color-gray-60; border-top: 1px solid $color-gray-60;
&:last-child {
margin-bottom: 18px;
}
&:hover { &:hover {
.code-row-lang { .code-row-lang {
.expand-button, .expand-button,

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

@ -27,7 +27,7 @@
[:button.copy-button [:button.copy-button
{:on-click #(when-not @just-copied {:on-click #(when-not @just-copied
(reset! just-copied true) (reset! just-copied true)
(wapi/write-to-clipboard data))} (wapi/write-to-clipboard (if (fn? data) (data) data)))}
(if @just-copied (if @just-copied
i/tick i/tick
i/copy)])) i/copy)]))

2
frontend/src/app/main/ui/shapes/text/fo_text.cljs
View file

@ -197,7 +197,7 @@
;; We use a class here because react has a bug that won't use the appropriate selector for ;; We use a class here because react has a bug that won't use the appropriate selector for
;; `background-clip` ;; `background-clip`
[:style ".text-node { background-clip: text; [:style ".text-node { background-clip: text;
-webkit-background-clip: text;" ] -webkit-background-clip: text; }" ]
[:& render-node {:index 0 [:& render-node {:index 0
:shape shape :shape shape
:node content}]])) :node content}]]))

2
frontend/src/app/main/ui/shapes/text/html_text.cljs
View file

@ -104,7 +104,7 @@
;; We use a class here because react has a bug that won't use the appropriate selector for ;; We use a class here because react has a bug that won't use the appropriate selector for
;; `background-clip` ;; `background-clip`
[:style ".text-node { background-clip: text; [:style ".text-node { background-clip: text;
-webkit-background-clip: text;" ] -webkit-background-clip: text; }" ]
[:& render-node {:index 0 [:& render-node {:index 0
:shape shape :shape shape
:node content}]])) :node content}]]))

72
frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -26,11 +26,25 @@
[app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]] [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
[app.util.code-gen :as cg] [app.util.code-gen :as cg]
[app.util.http :as http] [app.util.http :as http]
[app.util.webapi :as wapi]
[beicon.core :as rx] [beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
[potok.core :as ptk] [potok.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def page-template
"<!DOCTYPE html>
<html>
<head>
<style>
%s
</style>
</head>
<body>
%s
</body>
</html>")
(defn format-code [code type] (defn format-code [code type]
(let [code (-> code (let [code (-> code
(str/replace "<defs></defs>" "") (str/replace "<defs></defs>" "")
@ -41,9 +55,13 @@
(defn get-flex-elements [page-id shapes from] (defn get-flex-elements [page-id shapes from]
(let [ids (mapv :id shapes) (let [ids (mapv :id shapes)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
get-layout-children-refs (mf/use-memo (mf/deps ids page-id from) #(if (= from :workspace)
(refs/workspace-get-flex-child ids) get-layout-children-refs
(refs/get-flex-child-viewer ids page-id)))] (mf/use-memo
(mf/deps ids page-id from)
#(if (= from :workspace)
(refs/workspace-get-flex-child ids)
(refs/get-flex-child-viewer ids page-id)))]
(mf/deref get-layout-children-refs))) (mf/deref get-layout-children-refs)))
@ -145,10 +163,16 @@
{::ev/name "copy-inspect-style" {::ev/name "copy-inspect-style"
:type style-type})))) :type style-type}))))
{on-code-pointer-down :on-pointer-down {on-markup-pointer-down :on-pointer-down
on-code-lost-pointer-capture :on-lost-pointer-capture on-markup-lost-pointer-capture :on-lost-pointer-capture
on-code-pointer-move :on-pointer-move on-markup-pointer-move :on-pointer-move
code-size :size} markup-size :size}
(use-resize-hook :code 400 100 800 :y false :bottom)
{on-style-pointer-down :on-pointer-down
on-style-lost-pointer-capture :on-lost-pointer-capture
on-style-pointer-move :on-pointer-move
style-size :size}
(use-resize-hook :code 400 100 800 :y false :bottom) (use-resize-hook :code 400 100 800 :y false :bottom)
set-style set-style
@ -159,7 +183,15 @@
set-markup set-markup
(mf/use-callback (mf/use-callback
(fn [value] (fn [value]
(reset! markup-type* value)))] (reset! markup-type* value)))
handle-copy-all-code
(mf/use-callback
(mf/deps style-code markup-code images-data)
(fn []
(let [markup-code (replace-map markup-code images-data)
data (str/format page-template style-code markup-code)]
(wapi/write-to-clipboard data))))]
(mf/use-effect (mf/use-effect
(mf/deps fonts) (mf/deps fonts)
@ -184,6 +216,10 @@
(reset! images-data* result))))) (reset! images-data* result)))))
[:div.element-options [:div.element-options
[:div.attributes-block
[:button.download-button {:on-click handle-copy-all-code}
"Copy all code"]]
[:div.code-block [:div.code-block
[:div.code-row-lang [:div.code-row-lang
[:& select {:default-value style-type [:& select {:default-value style-type
@ -197,14 +233,13 @@
[:& copy-button {:data style-code [:& copy-button {:data style-code
:on-copied on-style-copied}]] :on-copied on-style-copied}]]
[:div.code-row-display {:style #js {"--code-height" (str (or code-size 400) "px")}} [:div.code-row-display {:style #js {"--code-height" (str (or style-size 400) "px")}}
[:& code-block {:type style-type [:& code-block {:type style-type
:code style-code}]] :code style-code}]]
[:div.resize-area {:on-pointer-down on-code-pointer-down [:div.resize-area {:on-pointer-down on-style-pointer-down
:on-lost-pointer-capture on-code-lost-pointer-capture :on-lost-pointer-capture on-style-lost-pointer-capture
:on-pointer-move on-code-pointer-move}]] :on-pointer-move on-style-pointer-move}]]
[:div.code-block [:div.code-block
[:div.code-row-lang [:div.code-row-lang
@ -218,10 +253,13 @@
{:on-click on-expand} {:on-click on-expand}
i/full-screen] i/full-screen]
[:& copy-button {:data (replace-map markup-code images-data) [:& copy-button {:data #(replace-map markup-code images-data)
:on-copied on-markup-copied}]] :on-copied on-markup-copied}]]
[:div.code-row-display {:style #js {"--code-height" (str (or markup-size 400) "px")}}
[:div.code-row-display
[:& code-block {:type markup-type [:& code-block {:type markup-type
:code markup-code}]]]])) :code markup-code}]]
[:div.resize-area {:on-pointer-down on-markup-pointer-down
:on-lost-pointer-capture on-markup-lost-pointer-capture
:on-pointer-move on-markup-pointer-move}]]]))

5
frontend/src/app/util/code_gen.cljs
View file

@ -433,9 +433,8 @@
:tab-size 2})]))) :tab-size 2})])))
(defn selector-name [shape] (defn selector-name [shape]
(let [ (let [name (-> (:name shape)
name (-> (:name shape) (subs 0 (min 10 (count (:name shape)))))
#_(subs 0 (min 10 (count (:name shape)))))
;; selectors cannot start with numbers ;; selectors cannot start with numbers
name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name) name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name)
id (-> (dm/str (:id shape)) id (-> (dm/str (:id shape))