From 25bd70c86f8de067dc51c2deac3646cf4907d939 Mon Sep 17 00:00:00 2001 From: Aitor Date: Thu, 4 Jan 2024 14:49:07 +0100 Subject: [PATCH] :bug: Fix viewer fullscreen not working properly --- frontend/src/app/main/ui/viewer.cljs | 23 +++++++++++--------- frontend/src/app/main/ui/viewer.scss | 11 +++++++++- frontend/src/app/main/ui/viewer/header.cljs | 3 ++- frontend/src/app/main/ui/viewer/header.scss | 10 +++++++++ frontend/src/app/main/ui/viewer/inspect.cljs | 4 ++-- frontend/src/app/util/dom.cljs | 5 +++++ 6 files changed, 42 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 90243b917..68f19b9cf 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -324,14 +324,14 @@ (mf/use-fn (fn [event] (let [origin (dom/get-target event) - over-section? (dom/class? origin "viewer-section") + over-section? (dom/get-data origin "viewer-section") layout (dom/get-element "viewer-layout") - has-force? (dom/class? layout "force-visible")] + has-force? (dom/get-data layout "force-visible")] (when over-section? - (if has-force? - (dom/remove-class! layout "force-visible") - (dom/add-class! layout "force-visible")))))) + (if (= has-force? "true") + (dom/set-data! layout "force-visible" false) + (dom/set-data! layout "force-visible" true)))))) on-click (mf/use-fn @@ -351,10 +351,11 @@ (mf/use-fn (fn [event] (let [event (.getBrowserEvent ^js event) - wrapper (dom/get-element-by-class "inspect-svg-wrapper") - section (dom/get-element-by-class "inspect-svg-container") + wrapper (dom/get-element "inspect-svg-wrapper") + section (dom/get-element "inspect-svg-container") target (.-target event)] - (when (or (dom/child? target wrapper) (dom/class? target "inspect-svg-container")) + ;; TODO: Reemplazar el dom/class? por un data-attribute + (when (or (dom/child? target wrapper) (dom/id? target "inspect-svg-container")) (let [norm-event ^js (nw/normalize-wheel event) mod? (kbd/mod? event) shift? (kbd/shift? event) @@ -516,8 +517,9 @@ {:class (stl/css-case :force-visible (:show-thumbnails local) :viewer-layout (not= section :inspect) - :inspect-layout (= section :inspect) - :fullscreen fullscreen?)} + :inspect-layout (= section :inspect)) + :data-fullscreen fullscreen? + :data-force-visible (:show-thumbnails local)} [:div {:class (stl/css :viewer-content)} [:& header/header {:project project @@ -542,6 +544,7 @@ [:section {:id "viewer-section" :ref viewer-section-ref + :data-viewer-section true :class (stl/css-case :viewer-section true :fulscreen fullscreen?) :on-click click-on-screen} diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index e31ff3b28..897cf905a 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -101,7 +101,7 @@ width: 100%; height: $s-40; padding-right: 0 $s-8 $s-40 $s-8; - transition: bottom 400ms ease 300ms; + transition: transform 400ms ease 300ms; z-index: $z-index-2; } @@ -178,3 +178,12 @@ :global(svg#loader-pencil) { fill: var(--icon-foreground); } + +/** FULLSCREEN */ +[data-fullscreen="true"] .viewer-bottom { + transform: translateY($s-40); +} + +[data-force-visible="true"] .viewer-bottom { + transform: translateY(0); +} diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index b168cad56..cfa732488 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -283,7 +283,8 @@ (st/emit! (dv/go-to-section section)) (open-login-dialog)))))] - [:header {:class (stl/css :viewer-header)} + [:header {:class (stl/css-case :viewer-header true + :fullscreen (mf/deref fullscreen-ref))} [:div {:class (stl/css :nav-zone)} ;; If the user doesn't have permission we disable the link [:a {:class (stl/css :home-link) diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss index 633d7bf9d..6eebe53ba 100644 --- a/frontend/src/app/main/ui/viewer/header.scss +++ b/frontend/src/app/main/ui/viewer/header.scss @@ -18,6 +18,7 @@ height: $s-48; width: 100vw; padding: $s-8 $s-12; + transition: transform 400ms ease 300ms; background-color: var(--panel-background-color); } @@ -300,3 +301,12 @@ } } } + +/** FULLSCREEN */ +[data-fullscreen="true"] .viewer-header { + transform: translateY(-$s-48); +} + +[data-force-visible="true"] .viewer-header { + transform: translateY(0); +} diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs index b2397d30b..602ca1286 100644 --- a/frontend/src/app/main/ui/viewer/inspect.cljs +++ b/frontend/src/app/main/ui/viewer/inspect.cljs @@ -94,11 +94,11 @@ [:& left-sidebar {:frame frame :local local :page page}] - [:div {:class (stl/css :inspect-svg-wrapper) + [:div#inspect-svg-wrapper {:class (stl/css :inspect-svg-wrapper) :data-value (pr-str (:id frame)) :on-click handle-select-frame} [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] - [:div {:class (stl/css :inspect-svg-container) + [:div#inspect-svg-container {:class (stl/css :inspect-svg-container) :ref inspect-svg-container-ref} [:& render-frame-svg {:frame frame :page page :local local :size size}]]] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 998a581eb..c6b3947d5 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -547,6 +547,11 @@ [] (partition 2 params)))) +(defn ^boolean id? + [node id] + (when (some? node) + (= (.-id ^js node) id))) + (defn ^boolean class? [node class-name] (when (some? node) (let [class-list (.-classList ^js node)]