mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Merge pull request #2112 from penpot/eva-viewer-full-screen
💄 Change some styles in viewer mode
This commit is contained in:
Alejandro
GitHub
commit
4b2729b041
7 changed files with 137 additions and 23 deletions
|
|
@ -4,6 +4,9 @@
|
|||
|
||||
### :boom: Breaking changes & Deprecations
|
||||
### :sparkles: New features
|
||||
|
||||
- Add some cosmetic changes in viewer mode [Taiga #3688](https://tree.taiga.io/project/penpot/us/3688)
|
||||
|
||||
### :bug: Bugs fixed
|
||||
### :arrow_up: Deps updates
|
||||
### :heart: Community contributions by (Thank you!)
|
||||
|
|
|
|||
|
|
@ -19,14 +19,35 @@ $width-settings-bar: 256px;
|
|||
}
|
||||
}
|
||||
|
||||
.fullscreen.handoff-layout.force-visible {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
& .viewer-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: top 400ms ease 300ms;
|
||||
margin-bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
& .viewer-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
transition: bottom 400ms ease 300ms;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen.handoff-layout:not(.force-visible) {
|
||||
.viewer-header {
|
||||
& .viewer-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: -48px;
|
||||
left: 0;
|
||||
transition: top 400ms ease 300ms;
|
||||
z-index: 25;
|
||||
z-index: 2;
|
||||
margin-bottom: 48px;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
|
|
@ -43,7 +64,29 @@ $width-settings-bar: 256px;
|
|||
transition: top 200ms;
|
||||
}
|
||||
|
||||
.viewer-content {
|
||||
& .viewer-bottom {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: -48px;
|
||||
left: 0;
|
||||
transition: bottom 400ms ease 300ms;
|
||||
z-index: 2;
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-bottom:hover {
|
||||
bottom: 0px;
|
||||
transition: bottom 200ms;
|
||||
}
|
||||
|
||||
& .viewer-content {
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,6 +94,7 @@ $width-settings-bar: 256px;
|
|||
.handoff-layout {
|
||||
.viewer-section {
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 0;
|
||||
&.fullscreen {
|
||||
.settings-bar,
|
||||
.settings-bar {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.viewer-layout {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: 48px auto;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -15,14 +16,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fullscreen.viewer-layout.force-visible {
|
||||
grid-template-rows: 1fr;
|
||||
& .viewer-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: top 400ms ease 300ms;
|
||||
margin-bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
& .viewer-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
transition: bottom 400ms ease 300ms;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen.viewer-layout:not(.force-visible) {
|
||||
grid-template-rows: 1fr;
|
||||
& .viewer-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: -48px;
|
||||
left: 0;
|
||||
transition: top 400ms ease 300ms;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
margin-bottom: 48px;
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
|
|
@ -38,6 +59,28 @@
|
|||
transition: top 200ms;
|
||||
}
|
||||
|
||||
& .viewer-bottom {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: -48px;
|
||||
left: 0;
|
||||
transition: bottom 400ms ease 300ms;
|
||||
z-index: 2;
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-bottom:hover {
|
||||
bottom: 0px;
|
||||
transition: bottom 200ms;
|
||||
}
|
||||
|
||||
& .viewer-content {
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
grid-template-columns: 45% 10% 45%;
|
||||
height: 48px;
|
||||
padding: 0 $size-4 0 55px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
width: 100vw;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.viewer-content {
|
||||
background-color: black;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 232px auto;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -8,19 +7,19 @@
|
|||
|
||||
.viewer-section {
|
||||
height: calc(100vh - 48px);
|
||||
&.fullscreen {
|
||||
height: 100vh;
|
||||
}
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-flow: wrap;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
&.fullscreen {
|
||||
height: 100vh;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
& .viewer-go-prev,
|
||||
& .viewer-go-next {
|
||||
position: absolute;
|
||||
|
|
@ -28,7 +27,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 53px;
|
||||
|
||||
z-index: 2;
|
||||
.arrow {
|
||||
display: none;
|
||||
align-items: center;
|
||||
|
|
@ -87,6 +86,7 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&.left-bar {
|
||||
width: calc(100% - 512px);
|
||||
|
|
|
|||
|
|
@ -230,6 +230,19 @@
|
|||
interactions-mode
|
||||
(:interactions-mode local)
|
||||
|
||||
click-on-screen
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [origin (dom/get-target event)
|
||||
over-section? (dom/class? origin "viewer-section")
|
||||
layout (dom/get-element "viewer-layout")
|
||||
has-force? (dom/class? layout "force-visible")]
|
||||
|
||||
(when over-section?
|
||||
(if has-force?
|
||||
(dom/remove-class! layout "force-visible")
|
||||
(dom/add-class! layout "force-visible"))))))
|
||||
|
||||
on-click
|
||||
(mf/use-callback
|
||||
(mf/deps section)
|
||||
|
|
@ -368,16 +381,15 @@
|
|||
:handoff-layout (= section :handoff)
|
||||
:fullscreen fullscreen?)}
|
||||
|
||||
[:& header {:project project
|
||||
:index index
|
||||
:file file
|
||||
:page page
|
||||
:frame frame
|
||||
:permissions permissions
|
||||
:zoom zoom
|
||||
:section section}]
|
||||
|
||||
[:div.viewer-content
|
||||
[:& header {:project project
|
||||
:index index
|
||||
:file file
|
||||
:page page
|
||||
:frame frame
|
||||
:permissions permissions
|
||||
:zoom zoom
|
||||
:section section}]
|
||||
[:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel)
|
||||
:class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
|
||||
[:& thumbnails-panel {:frames frames
|
||||
|
|
@ -387,7 +399,8 @@
|
|||
:thumbnail-data (:thumbnails file)}]
|
||||
[:section.viewer-section {:id "viewer-section"
|
||||
:ref viewer-section-ref
|
||||
:class (if fullscreen? "fullscreen" "")}
|
||||
:class (if fullscreen? "fullscreen" "")
|
||||
:on-click click-on-screen}
|
||||
(cond
|
||||
(empty? frames)
|
||||
[:section.empty-state
|
||||
|
|
|
|||
|
|
@ -22,7 +22,17 @@
|
|||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dv/select-shape (:id frame)))))
|
||||
(st/emit! (dv/select-shape (:id frame)))
|
||||
|
||||
(let [origin (dom/get-target event)
|
||||
over-section? (dom/class? origin "handoff-svg-container")
|
||||
layout (dom/get-element "viewer-layout")
|
||||
has-force? (dom/class? layout "force-visible")]
|
||||
|
||||
(when over-section?
|
||||
(if has-force?
|
||||
(dom/remove-class! layout "force-visible")
|
||||
(dom/add-class! layout "force-visible"))))))
|
||||
|
||||
(mf/defc viewport
|
||||
[{:keys [local file page frame index viewer-pagination size]}]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue