💄 Change some styles in viewer mode

CHANGES.md

@@ -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!)

frontend/resources/styles/main/layouts/handoff.scss

@@ -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 {

frontend/resources/styles/main/layouts/viewer.scss

@@ -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;
   }

frontend/resources/styles/main/partials/viewer-header.scss

@@ -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;
 

frontend/resources/styles/main/partials/viewer.scss

@@ -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);

frontend/src/app/main/ui/viewer.cljs

@@ -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,6 +381,7 @@
                                  :handoff-layout (= section :handoff)
                                  :fullscreen fullscreen?)}
 
+     [:div.viewer-content
       [:& header {:project project
                   :index index
                   :file file
@@ -376,8 +390,6 @@
                   :permissions permissions
                   :zoom zoom
                   :section section}]
-
-     [:div.viewer-content
       [: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

frontend/src/app/main/ui/viewer/handoff.cljs

@@ -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]}]