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

🎉 Add inspect tab to workspace

Browse source
This commit is contained in:
Pablo Alba 2022-11-29 14:03:08 +01:00
parent c451c7bb9d
commit 412564b418
14 changed files with 130 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -53,6 +53,12 @@
}
}
&.inspect {
& > :first-child {
margin-top: 7px;
}
}
.element-set {
border-bottom: 1px solid $color-gray-60;
color: $color-gray-20;

18
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -197,6 +197,24 @@
height: 100%;
width: 100%;
overflow-y: auto;
&.inspect {
.tab-container-tabs {
padding-bottom: 0.5rem;
background-color: $color-gray-50;
border-bottom: 1px solid $color-gray-60;
height: 3rem;
}
.tab-container-tab-title {
border-radius: 4px;
&.current {
background-color: $color-primary;
color: black;
}
}
}
}
.element-list {

7
frontend/resources/styles/main/partials/workspace.scss
View file

@ -47,10 +47,15 @@ $height-palette-max: 80px;
}
.settings-bar.settings-bar-right {
transition: width 0.2s;
min-width: $width-settings-bar;
max-width: 500px;
max-width: $width-settings-bar * 3;
width: $width-settings-bar;
grid-area: right-sidebar;
&.expanded {
width: $width-settings-bar * 3;
}
}
.workspace-loader {

13
frontend/src/app/main/data/workspace.cljs
View file

@ -1818,6 +1818,19 @@
(rx/empty)))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Inspect
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn set-inspect-expanded
[expanded?]
(ptk/reify ::set-inspect-expanded
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-local :inspect-expanded] expanded?))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Exports
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

2
frontend/src/app/main/data/workspace/layout.cljs
View file

@ -44,7 +44,7 @@
{:del #{:document-history :assets}
:add #{:sitemap :layers}}})
(s/def ::options-mode #{:design :prototype})
(s/def ::options-mode #{:design :prototype :inspect})
(def default-layout
#{:sitemap

6
frontend/src/app/main/refs.cljs
View file

@ -165,6 +165,12 @@
(def options-mode
(l/derived :options-mode workspace-local))
(def options-mode-global
(l/derived :options-mode workspace-global))
(def inspect-expanded
(l/derived :inspect-expanded workspace-local))
(def vbox
(l/derived :vbox workspace-local))

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

@ -7,7 +7,9 @@
(ns app.main.ui.viewer.handoff.code
(:require
["js-beautify" :as beautify]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.common.uuid :as uuid]
[app.main.data.events :as ev]
[app.main.refs :as refs]
[app.main.store :as st]
@ -21,8 +23,10 @@
[potok.core :as ptk]
[rumext.v2 :as mf]))
(defn generate-markup-code [_type shapes]
(let [frame (dom/query js/document "#svg-frame")
(defn generate-markup-code [_type shapes from]
(let [frame (if (= from :workspace)
(dom/query js/document (dm/str "#shape-" uuid/zero))
(dom/query js/document "#svg-frame"))
markup-shape
(fn [shape]
(let [selector (str "#shape-" (:id shape) (when (= :text (:type shape)) " .root"))]
@ -50,7 +54,7 @@
(mf/deref get-layout-children-refs)))
(mf/defc code
[{:keys [shapes frame on-expand]}]
[{:keys [shapes frame on-expand from]}]
(let [style-type (mf/use-state "css")
markup-type (mf/use-state "svg")
shapes (->> shapes
@ -62,7 +66,7 @@
style-code (-> (cg/generate-style-code @style-type shapes)
(format-code "css"))
markup-code (-> (mf/use-memo (mf/deps shapes) #(generate-markup-code @markup-type shapes))
markup-code (-> (mf/use-memo (mf/deps shapes) #(generate-markup-code @markup-type shapes from))
(format-code "svg"))
on-markup-copied

27
frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.viewer.handoff.right-sidebar
(:require
[app.main.data.workspace :as dw]
[app.main.ui.components.shape-icon :as si]
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
[app.main.ui.icons :as i]
@ -16,12 +17,16 @@
[rumext.v2 :as mf]))
(mf/defc right-sidebar
[{:keys [frame page file selected]}]
[{:keys [frame page file selected shapes page-id file-id from]
:or {from :handoff}}]
(let [expanded (mf/use-state false)
section (mf/use-state :info #_:code)
shapes (resolve-shapes (:objects page) selected)
shapes (or shapes
(resolve-shapes (:objects page) selected))
first-shape (first shapes)]
first-shape (first shapes)
page-id (or page-id (:id page))
file-id (or file-id (:id file))]
[:aside.settings-bar.settings-bar-right {:class (when @expanded "expanded")}
[:div.settings-bar-inside
@ -48,18 +53,24 @@
;; handoff.tabs.code.selected.svg-raw
;; handoff.tabs.code.selected.text
[:span.tool-window-bar-title (:name first-shape)]])]
[:div.tool-window-content
[:div.tool-window-content.inspect
[:& tab-container {:on-change-tab #(do
(reset! expanded false)
(reset! section %))
(reset! section %)
(when (= from :workspace)
(dw/set-inspect-expanded false)))
:selected @section}
[:& tab-element {:id :info :title (tr "handoff.tabs.info")}
[:& attributes {:page-id (:id page)
:file-id (:id file)
[:& attributes {:page-id page-id
:file-id file-id
:frame frame
:shapes shapes}]]
[:& tab-element {:id :code :title (tr "handoff.tabs.code")}
[:& code {:frame frame
:shapes shapes
:on-expand #(swap! expanded not)}]]]]])]]))
:on-expand (fn[]
(when (= from :workspace)
(dw/set-inspect-expanded (not expanded)))
(swap! expanded not))
:from from}]]]]])]]))

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

@ -29,8 +29,10 @@
(mf/defc left-sidebar
{:wrap [mf/memo]}
[{:keys [layout] :as props}]
(let [section (cond (contains? layout :layers) :layers
(contains? layout :assets) :assets)
(let [options-mode (mf/deref refs/options-mode-global)
mode-inspect? (= options-mode :inspect)
section (cond (or mode-inspect? (contains? layout :layers)) :layers
(contains? layout :assets) :assets)
shortcuts? (contains? layout :shortcuts)
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
@ -68,8 +70,9 @@
[:& sitemap {:layout layout}]
[:& layers-toolbox]]]
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
[:& assets-toolbox]]]])]]]))
(when-not mode-inspect?
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
[:& assets-toolbox]])]])]]]))
;; --- Right Sidebar (Component)
@ -78,9 +81,10 @@
::mf/wrap [mf/memo]}
[props]
(let [layout (obj/get props "layout")
drawing-tool (:tool (mf/deref refs/workspace-drawing))]
drawing-tool (:tool (mf/deref refs/workspace-drawing))
expanded (mf/deref refs/inspect-expanded)]
[:aside.settings-bar.settings-bar-right
[:aside.settings-bar {:class (when expanded "expanded")}
[:div.settings-bar-inside
(cond
(= drawing-tool :comments)

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

@ -8,11 +8,13 @@
(:require
[app.common.data :as d]
[app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
[app.main.data.workspace :as udw]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
[app.main.ui.context :as ctx]
[app.main.ui.viewer.handoff.right-sidebar :as hrs]
[app.main.ui.workspace.sidebar.options.menus.align :refer [align-options]]
[app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options]]
[app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]]
@ -62,17 +64,21 @@
(mf/defc options-content
{::mf/wrap [mf/memo]}
[{:keys [selected section shapes shapes-with-children page-id file-id]}]
(let [drawing (mf/deref refs/workspace-drawing)
objects (mf/deref refs/workspace-page-objects)
shared-libs (mf/deref refs/workspace-libraries)
selected-shapes (into [] (keep (d/getf objects)) selected)]
(let [drawing (mf/deref refs/workspace-drawing)
objects (mf/deref refs/workspace-page-objects)
shared-libs (mf/deref refs/workspace-libraries)
selected-shapes (into [] (keep (d/getf objects)) selected)
first-selected-shape (first selected-shapes)
shape-parent-frame (cph/get-frame objects (:frame-id first-selected-shape))
on-change-tab
(fn [options-mode]
(st/emit! (udw/set-options-mode options-mode))
(if (= options-mode :inspect) ;;TODO maybe move this logic to set-options-mode
(st/emit! :interrupt (udw/set-workspace-read-only true))
(st/emit! :interrupt (udw/set-workspace-read-only false))))]
[:div.tool-window
[:div.tool-window-content
[:& tab-container {:on-change-tab (fn [options-mode]
(st/emit! (udw/set-options-mode options-mode))
(if (= options-mode :prototype) ;;TODO remove, only for test palba
(st/emit! :interrupt (udw/deselect-all true) (udw/set-workspace-read-only true))
(st/emit! :interrupt (udw/set-workspace-read-only false))))
[:& tab-container {:on-change-tab on-change-tab
:selected section}
[:& tab-element {:id :design
:title (tr "workspace.options.design")}
@ -99,7 +105,16 @@
[:& tab-element {:id :prototype
:title (tr "workspace.options.prototype")}
[:div.element-options
[:& interactions-menu {:shape (first shapes)}]]]]]]))
[:& interactions-menu {:shape (first shapes)}]]]
[:& tab-element {:id :inspect
:title (tr "workspace.options.inspect")}
[:div.element-options
[:& hrs/right-sidebar {:page-id page-id
:file-id file-id
:frame shape-parent-frame
:shapes selected-shapes
:from :workspace}]]]]]]))
;; TODO: this need optimizations, selected-objects and
;; selected-objects-with-children are derefed always but they only

7
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -132,6 +132,7 @@
text-editing? (and edition (= :text (get-in base-objects [edition :type])))
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
mode-inspect? (= options-mode :inspect)
on-click (actions/on-click hover selected edition drawing-path? drawing-tool space? selrect)
on-context-menu (actions/on-context-menu hover hover-ids workspace-read-only?)
@ -181,7 +182,9 @@
(contains? layout :snap-grid))
(or drawing-obj transform))
show-selrect? (and selrect (empty? drawing) (not text-editing?))
show-measures? (and (not transform) (not node-editing?) show-distances?)
show-measures? (and (not transform)
(not node-editing?)
(or show-distances? mode-inspect?))
show-artboard-names? (contains? layout :display-artboard-names)
show-rules? (and (contains? layout :rules) (not (contains? layout :hide-ui)))
@ -190,7 +193,7 @@
(hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport? workspace-read-only?)
(hooks/setup-viewport-size viewport-ref)
(hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing?)
(hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? workspace-read-only?)
(hooks/setup-keyboard alt? mod? space?)
(hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids hover-top-frame-id @hover-disabled? focus zoom)
(hooks/setup-viewport-modifiers modifiers base-objects)

11
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -63,16 +63,16 @@
;; We schedule the event so it fires after `initialize-page` event
(timers/schedule #(st/emit! (dw/initialize-viewport size)))))))
(defn setup-cursor [cursor alt? mod? space? panning drawing-tool drawing-path? path-editing?]
(defn setup-cursor [cursor alt? mod? space? panning drawing-tool drawing-path? path-editing? workspace-read-only?]
(mf/use-effect
(mf/deps @cursor @alt? @mod? @space? panning drawing-tool drawing-path? path-editing?)
(mf/deps @cursor @alt? @mod? @space? panning drawing-tool drawing-path? path-editing? workspace-read-only?)
(fn []
(let [show-pen? (or (= drawing-tool :path)
(and drawing-path?
(not= drawing-tool :curve)))
new-cursor
(cond
(and @mod? @space?) (utils/get-cursor :zoom)
(and @mod? @space?) (utils/get-cursor :zoom)
(or panning @space?) (utils/get-cursor :hand)
(= drawing-tool :comments) (utils/get-cursor :comments)
(= drawing-tool :frame) (utils/get-cursor :create-artboard)
@ -81,7 +81,10 @@
show-pen? (utils/get-cursor :pen)
(= drawing-tool :curve) (utils/get-cursor :pencil)
drawing-tool (utils/get-cursor :create-shape)
(and @alt? (not path-editing?)) (utils/get-cursor :duplicate)
(and
@alt?
(not path-editing?)
(not workspace-read-only?)) (utils/get-cursor :duplicate)
:else (utils/get-cursor :pointer-inner))]
(when (not= @cursor new-cursor)

3
frontend/translations/en.po
View file

@ -3619,6 +3619,9 @@ msgstr "Position"
msgid "workspace.options.prototype"
msgstr "Prototype"
msgid "workspace.options.inspect"
msgstr "Inspect"
msgid "workspace.options.radius"
msgstr "Radius"

3
frontend/translations/es.po
View file

@ -4019,6 +4019,9 @@ msgstr "Posición"
msgid "workspace.options.prototype"
msgstr "Prototipo"
msgid "workspace.options.inspect"
msgstr "Inspeccionar"
msgid "workspace.options.radius"
msgstr "Radio"