mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
✨ Hide navbar in fullscreen view mode
This commit is contained in:
Andrés Moya
Andrey Antukh
parent
d2d1eed68a
commit
dcb913d9fa
6 changed files with 82 additions and 85 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue