From 63ffa704f54f87680c0710b5436e5dffe913c506 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 14 Aug 2024 14:39:48 +0200 Subject: [PATCH] :recycle: Replace tab switcher on viewer --- frontend/src/app/main/ui/ds/tab_switcher.scss | 6 ++ frontend/src/app/main/ui/viewer/inspect.cljs | 2 +- .../main/ui/viewer/inspect/attributes.scss | 5 +- .../src/app/main/ui/viewer/inspect/code.scss | 5 +- .../main/ui/viewer/inspect/right_sidebar.cljs | 56 +++++++++++-------- .../main/ui/viewer/inspect/right_sidebar.scss | 8 +-- 6 files changed, 51 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/main/ui/ds/tab_switcher.scss b/frontend/src/app/main/ui/ds/tab_switcher.scss index a0572f54f..e8df69e6c 100644 --- a/frontend/src/app/main/ui/ds/tab_switcher.scss +++ b/frontend/src/app/main/ui/ds/tab_switcher.scss @@ -99,3 +99,9 @@ .tab-text-and-icon { padding-inline: var(--sp-xxs); } + +.tab-panel { + display: grid; + width: 100%; + height: 100%; +} diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs index 110317c18..836fa8cae 100644 --- a/frontend/src/app/main/ui/viewer/inspect.cljs +++ b/frontend/src/app/main/ui/viewer/inspect.cljs @@ -43,7 +43,7 @@ [{:keys [local file page frame index viewer-pagination size share-id]}] (let [inspect-svg-container-ref (mf/use-ref nil) current-section* (mf/use-state :info) - current-section (deref current-section*) + current-section (deref current-section*) can-be-expanded? (= current-section :code) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.scss b/frontend/src/app/main/ui/viewer/inspect/attributes.scss index 54980db83..6975e304e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes.scss @@ -11,6 +11,9 @@ flex-direction: column; gap: $s-16; width: 100%; - height: 100%; + height: calc(100vh - #{$s-128}); // TODO: Fix this hardcoded value padding-top: $s-8; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable; } diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index b0caabde2..5786bd74f 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -9,9 +9,12 @@ .element-options { display: flex; flex-direction: column; - height: 100%; + height: calc(100vh - #{$s-128}); // TODO: Fix this hardcoded value overflow: hidden; padding-bottom: $s-16; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable; } .download-button { diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs index fe76cb6f3..1f7d22edf 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs @@ -11,7 +11,7 @@ [app.common.types.component :as ctk] [app.main.refs :as refs] [app.main.ui.components.shape-icon :as sir] - [app.main.ui.components.tab-container :refer [tab-container tab-element]] + [app.main.ui.ds.tab-switcher :refer [tab-switcher*]] [app.main.ui.icons :as i] [app.main.ui.viewer.inspect.attributes :refer [attributes]] [app.main.ui.viewer.inspect.code :refer [code]] @@ -61,9 +61,9 @@ (mf/use-fn (mf/deps from on-change-section) (fn [new-section] - (reset! section new-section) + (reset! section (keyword new-section)) (when on-change-section - (on-change-section new-section)))) + (on-change-section (keyword new-section))))) handle-expand (mf/use-fn @@ -74,7 +74,33 @@ navigate-to-help (mf/use-fn (fn [] - (dom/open-new-window "https://help.penpot.app/user-guide/inspect/")))] + (dom/open-new-window "https://help.penpot.app/user-guide/inspect/"))) + + info-content + (mf/html [:& attributes {:page-id page-id + :objects objects + :file-id file-id + :frame frame + :shapes shapes + :from from + :libraries libraries + :share-id share-id}]) + + code-content + (mf/html [:& code {:frame frame + :shapes shapes + :on-expand handle-expand + :from from}]) + + tabs + #js [#js {:label (tr "inspect.tabs.info") + :id "info" + :content info-content} + + #js {:label (tr "inspect.tabs.code") + :data-testid "code" + :id "code" + :content code-content}]] (mf/use-effect (mf/deps shapes handle-change-tab) @@ -108,25 +134,11 @@ ;; (tr "inspect.tabs.code.selected.text") [:span {:class (stl/css :layer-title)} (:name first-shape)]])] [:div {:class (stl/css :inspect-content)} - [:& tab-container {:on-change-tab handle-change-tab - :selected @section - :content-class (stl/css :tab-content) - :header-class (stl/css :tab-header)} - [:& tab-element {:id :info :title (tr "inspect.tabs.info")} - [:& attributes {:page-id page-id - :objects objects - :file-id file-id - :frame frame - :shapes shapes - :from from - :libraries libraries - :share-id share-id}]] - [:& tab-element {:id :code :title (tr "inspect.tabs.code")} - [:& code {:frame frame - :shapes shapes - :on-expand handle-expand - :from from}]]]]] + [:> tab-switcher* {:tabs tabs + :default-selected "info" + :on-change-tab handle-change-tab + :class (stl/css :viewer-tab-switcher)}]]] [:div {:class (stl/css :empty)} [:div {:class (stl/css :code-info)} [:span {:class (stl/css :placeholder-icon)} diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss index 48bb94620..1f1f8cf89 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss @@ -97,10 +97,6 @@ overflow: hidden; } -.tab-content { - scrollbar-gutter: stable; -} - -.tab-header { - margin-right: $s-12; +.viewer-tab-switcher { + --tabs-nav-padding-inline-end: var(--sp-m); }