diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 899dee386..51b156091 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -354,7 +354,6 @@ wrapper (dom/get-element "inspect-svg-wrapper") section (dom/get-element "inspect-svg-container") target (.-target event)] - ;; 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) @@ -436,7 +435,9 @@ fullscreen-dom? (dom/fullscreen?)] (when (not= fullscreen? fullscreen-dom?) (if fullscreen? - (wapi/request-fullscreen wrapper) + (let [layout (dom/get-element "viewer-layout")] + (dom/set-data! layout "force-visible" false) + (wapi/request-fullscreen wrapper)) (wapi/exit-fullscreen)))))) (mf/use-effect @@ -521,16 +522,9 @@ :data-fullscreen fullscreen? :data-force-visible (:show-thumbnails local)} + [:div {:class (stl/css :viewer-content)} - [:& header/header {:project project - :index index - :file file - :page page - :frame frame - :permissions permissions - :zoom zoom - :section section - :interactions-mode interactions-mode}] + [:button {:on-click on-thumbnails-close :class (stl/css-case :thumbnails-close true @@ -587,7 +581,17 @@ :overlays overlays :zoom zoom :section section - :index index}]]))]]])) + :index index}]]))]] + + [:& header/header {:project project + :index index + :file file + :page page + :frame frame + :permissions permissions + :zoom zoom + :section section + :interactions-mode interactions-mode}]])) ;; --- Component: Viewer diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss index 6eebe53ba..da758dffe 100644 --- a/frontend/src/app/main/ui/viewer/header.scss +++ b/frontend/src/app/main/ui/viewer/header.scss @@ -303,10 +303,20 @@ } /** FULLSCREEN */ +[data-fullscreen="true"] .viewer-header::after { + content: " "; + position: absolute; + width: 100%; + height: $s-48; + left: 0; + top: $s-48; +} + [data-fullscreen="true"] .viewer-header { transform: translateY(-$s-48); } -[data-force-visible="true"] .viewer-header { +[data-force-visible="true"] .viewer-header, +[data-fullscreen="true"] .viewer-header:hover { transform: translateY(0); }