From 412564b418c67becd28f43c24affee2f99cb900b Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Tue, 29 Nov 2022 14:03:08 +0100 Subject: [PATCH] :tada: Add inspect tab to workspace --- .../partials/sidebar-element-options.scss | 6 ++++ .../styles/main/partials/sidebar.scss | 18 ++++++++++ .../styles/main/partials/workspace.scss | 7 +++- frontend/src/app/main/data/workspace.cljs | 13 +++++++ .../src/app/main/data/workspace/layout.cljs | 2 +- frontend/src/app/main/refs.cljs | 6 ++++ .../src/app/main/ui/viewer/handoff/code.cljs | 12 ++++--- .../main/ui/viewer/handoff/right_sidebar.cljs | 27 +++++++++----- .../src/app/main/ui/workspace/sidebar.cljs | 16 +++++---- .../main/ui/workspace/sidebar/options.cljs | 35 +++++++++++++------ .../src/app/main/ui/workspace/viewport.cljs | 7 ++-- .../app/main/ui/workspace/viewport/hooks.cljs | 11 +++--- frontend/translations/en.po | 3 ++ frontend/translations/es.po | 3 ++ 14 files changed, 130 insertions(+), 36 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 1f1c28f30..7701d5f23 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -53,6 +53,12 @@ } } + &.inspect { + & > :first-child { + margin-top: 7px; + } + } + .element-set { border-bottom: 1px solid $color-gray-60; color: $color-gray-20; diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index f14aca961..15d63f034 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -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 { diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 53ecfb202..7cc8587a9 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -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 { diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 4bece0748..1f880406c 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -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 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/src/app/main/data/workspace/layout.cljs b/frontend/src/app/main/data/workspace/layout.cljs index 03e065882..ac2fd9cbd 100644 --- a/frontend/src/app/main/data/workspace/layout.cljs +++ b/frontend/src/app/main/data/workspace/layout.cljs @@ -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 diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 147efe5dc..4bc06f8d0 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/viewer/handoff/code.cljs b/frontend/src/app/main/ui/viewer/handoff/code.cljs index 6213719bc..1f4a9e7f7 100644 --- a/frontend/src/app/main/ui/viewer/handoff/code.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/code.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs index f2b2288b9..629cc8030 100644 --- a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs @@ -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}]]]]])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 1d8fbafde..4add5cba9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index 413a776c8..0be9a249b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index b4cebb8ba..418c22a5a 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index ffd21250e..508a227dc 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -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) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 2a15e57a3..a113b8b82 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -3619,6 +3619,9 @@ msgstr "Position" msgid "workspace.options.prototype" msgstr "Prototype" +msgid "workspace.options.inspect" +msgstr "Inspect" + msgid "workspace.options.radius" msgstr "Radius" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 537142d3a..5e9e36dc1 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"