From dcb913d9fa33e1b81286fac163e080ce92f0c6d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Thu, 18 Mar 2021 16:52:22 +0100 Subject: [PATCH] :sparkles: Hide navbar in fullscreen view mode --- .../styles/main/layouts/handoff.scss | 32 ++++++++++------- .../resources/styles/main/layouts/viewer.scss | 32 ++++++++++------- frontend/src/app/main/data/viewer.cljs | 4 +-- frontend/src/app/main/ui.cljs | 33 +++++++----------- frontend/src/app/main/ui/handoff.cljs | 34 +++++++++---------- frontend/src/app/main/ui/viewer.cljs | 32 ++++++++--------- 6 files changed, 82 insertions(+), 85 deletions(-) diff --git a/frontend/resources/styles/main/layouts/handoff.scss b/frontend/resources/styles/main/layouts/handoff.scss index bd7e626a1..9f6a2ff8b 100644 --- a/frontend/resources/styles/main/layouts/handoff.scss +++ b/frontend/resources/styles/main/layouts/handoff.scss @@ -6,19 +6,6 @@ $width-settings-bar: 16rem; grid-template-columns: 1fr; user-select: none; - &.fullscreen { - .viewer-header { - opacity: 0; - &:hover { - opacity: 1; - } - } - - .viewer-content { - grid-row: 1 / span 2; - } - } - .viewer-header { grid-column: 1 / span 1; grid-row: 1 / span 1; @@ -30,6 +17,25 @@ $width-settings-bar: 16rem; } } +.fullscreen .handoff-layout { + .viewer-header { + width: 100%; + position: fixed; + top: -39px; + left: 0; + transition: top 400ms ease 300ms; + } + + & .viewer-header:hover { + top: 0; + transition: top 200ms; + } + + .viewer-content { + grid-row: 1 / span 2; + } +} + .handoff-layout { .viewer-preview { flex-wrap: nowrap; diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss index f483f7c8f..ed62d776c 100644 --- a/frontend/resources/styles/main/layouts/viewer.scss +++ b/frontend/resources/styles/main/layouts/viewer.scss @@ -4,19 +4,6 @@ grid-template-columns: 1fr; user-select: none; - &.fullscreen { - .viewer-header { - opacity: 0; - &:hover { - opacity: 1; - } - } - - .viewer-content { - grid-row: 1 / span 2; - } - } - .viewer-header { grid-column: 1 / span 1; grid-row: 1 / span 1; @@ -27,3 +14,22 @@ grid-row: 2 / span 1; } } + +.fullscreen .viewer-layout { + & .viewer-header { + width: 100%; + position: fixed; + top: -39px; + left: 0; + transition: top 400ms ease 300ms; + } + + & .viewer-header:hover { + top: 0; + transition: top 200ms; + } + + & .viewer-content { + grid-row: 1 / span 2; + } +} diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index cc2a09ea6..21fd7d259 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -342,9 +342,7 @@ pparams (:path-params route) qparams (:query-params route)] (rx/of - (if (= :handoff section) - (rt/nav :handoff pparams qparams) - (rt/nav :viewer pparams (assoc qparams :section section)))))))) + (rt/nav :viewer pparams (assoc qparams :section section))))))) (defn set-current-frame [frame-id] diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index c5ca0bb90..2c606d7f2 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -20,6 +20,7 @@ [app.main.store :as st] [app.main.ui.auth :refer [auth]] [app.main.ui.auth.verify-token :refer [verify-token]] + [app.main.ui.components.fullscreen :as fs] [app.main.ui.context :as ctx] [app.main.ui.cursors :as c] [app.main.ui.dashboard :refer [dashboard]] @@ -80,11 +81,6 @@ {:path-params ::viewer-path-params :query-params ::viewer-query-params}}] - ["/handoff/:file-id/:page-id" - {:name :handoff - :conform {:path-params ::viewer-path-params - :query-params ::viewer-query-params}}] - (when *assert* ["/debug/icons-preview" :debug-icons-preview]) @@ -151,22 +147,17 @@ section (get-in route [:query-params :section] :interactions) file-id (get-in route [:path-params :file-id]) page-id (get-in route [:path-params :page-id])] - [:& viewer-page {:page-id page-id - :file-id file-id - :section section - :index index - :token token}]) - - :handoff - (let [file-id (get-in route [:path-params :file-id]) - page-id (get-in route [:path-params :page-id]) - index (get-in route [:query-params :index]) - token (get-in route [:query-params :token])] - - [:& handoff {:page-id page-id - :file-id file-id - :index index - :token token}]) + [:& fs/fullscreen-wrapper {} + (if (= section :handoff) + [:& handoff {:page-id page-id + :file-id file-id + :index index + :token token}] + [:& viewer-page {:page-id page-id + :file-id file-id + :section section + :index index + :token token}])]) :render-object (do diff --git a/frontend/src/app/main/ui/handoff.cljs b/frontend/src/app/main/ui/handoff.cljs index b9c41b9f3..f0366a28f 100644 --- a/frontend/src/app/main/ui/handoff.cljs +++ b/frontend/src/app/main/ui/handoff.cljs @@ -14,7 +14,6 @@ [app.main.data.viewer.shortcuts :as sc] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.fullscreen :as fs] [app.main.ui.handoff.left-sidebar :refer [left-sidebar]] [app.main.ui.handoff.render :refer [render-frame-svg]] [app.main.ui.handoff.right-sidebar :refer [right-sidebar]] @@ -97,23 +96,22 @@ (mf/use-effect on-mount) (hooks/use-shortcuts sc/shortcuts) - [:& fs/fullscreen-wrapper {} - [:div.handoff-layout - [:& header - {:data data - :state state - :index index - :section :handoff}] - [:div.viewer-content - (when (:show-thumbnails state) - [:& thumbnails-panel {:index index - :data data - :screen :handoff}]) - [:& render-panel {:data data - :state state - :index index - :page-id page-id - :file-id file-id}]]]])) + [:div.handoff-layout + [:& header + {:data data + :state state + :index index + :section :handoff}] + [:div.viewer-content + (when (:show-thumbnails state) + [:& thumbnails-panel {:index index + :data data + :screen :handoff}]) + [:& render-panel {:data data + :state state + :index index + :page-id page-id + :file-id file-id}]]])) (mf/defc handoff [{:keys [file-id page-id index token] :as props}] diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 01411bcc3..4e8a74cd3 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -21,7 +21,6 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.comments :as cmt] - [app.main.ui.components.fullscreen :as fs] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.main.ui.viewer.header :refer [header]] @@ -243,23 +242,22 @@ (mf/use-effect on-mount) (hooks/use-shortcuts sc/shortcuts) - [:& fs/fullscreen-wrapper {} - [:div.viewer-layout - [:& header - {:data data - :state state - :section section - :index index}] + [:div.viewer-layout + [:& header + {:data data + :state state + :section section + :index index}] - [:div.viewer-content {:on-click on-click} - (when (:show-thumbnails state) - [:& thumbnails-panel {:screen :viewer - :index index - :data data}]) - [:& main-panel {:data data - :section section - :state state - :index index}]]]])) + [:div.viewer-content {:on-click on-click} + (when (:show-thumbnails state) + [:& thumbnails-panel {:screen :viewer + :index index + :data data}]) + [:& main-panel {:data data + :section section + :state state + :index index}]]])) ;; --- Component: Viewer Page