🐛 Fix viewer fullscreen not working properly

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

@@ -324,14 +324,14 @@
         (mf/use-fn
          (fn [event]
            (let [origin (dom/get-target event)
-                 over-section? (dom/class? origin "viewer-section")
+                 over-section? (dom/get-data origin "viewer-section")
                  layout (dom/get-element "viewer-layout")
-                 has-force? (dom/class? layout "force-visible")]
+                 has-force? (dom/get-data layout "force-visible")]
 
              (when over-section?
-               (if has-force?
-                 (dom/remove-class! layout "force-visible")
-                 (dom/add-class! layout "force-visible"))))))
+               (if (= has-force? "true")
+                 (dom/set-data! layout "force-visible" false)
+                 (dom/set-data! layout "force-visible" true))))))
 
         on-click
         (mf/use-fn
@@ -351,10 +351,11 @@
         (mf/use-fn
          (fn [event]
            (let [event  (.getBrowserEvent ^js event)
-                 wrapper (dom/get-element-by-class "inspect-svg-wrapper")
-                 section (dom/get-element-by-class "inspect-svg-container")
+                 wrapper (dom/get-element "inspect-svg-wrapper")
+                 section (dom/get-element "inspect-svg-container")
                  target (.-target event)]
-             (when (or (dom/child? target wrapper) (dom/class? target "inspect-svg-container"))
+             ;; 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)
                      shift? (kbd/shift? event)
@@ -516,8 +517,9 @@
      {:class (stl/css-case
               :force-visible (:show-thumbnails local)
               :viewer-layout (not= section :inspect)
-              :inspect-layout (= section :inspect)
-              :fullscreen fullscreen?)}
+              :inspect-layout (= section :inspect))
+      :data-fullscreen fullscreen?
+      :data-force-visible (:show-thumbnails local)}
 
      [:div {:class (stl/css :viewer-content)}
       [:& header/header {:project project
@@ -542,6 +544,7 @@
 
       [:section {:id "viewer-section"
                  :ref viewer-section-ref
+                 :data-viewer-section true
                  :class (stl/css-case :viewer-section true
                                       :fulscreen fullscreen?)
                  :on-click click-on-screen}

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

@@ -101,7 +101,7 @@
   width: 100%;
   height: $s-40;
   padding-right: 0 $s-8 $s-40 $s-8;
-  transition: bottom 400ms ease 300ms;
+  transition: transform 400ms ease 300ms;
   z-index: $z-index-2;
 }
 
@@ -178,3 +178,12 @@
 :global(svg#loader-pencil) {
   fill: var(--icon-foreground);
 }
+
+/** FULLSCREEN */
+[data-fullscreen="true"] .viewer-bottom {
+  transform: translateY($s-40);
+}
+
+[data-force-visible="true"] .viewer-bottom {
+  transform: translateY(0);
+}

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

@@ -283,7 +283,8 @@
                (st/emit! (dv/go-to-section section))
                (open-login-dialog)))))]
 
-    [:header {:class (stl/css :viewer-header)}
+    [:header {:class (stl/css-case :viewer-header true
+                                   :fullscreen (mf/deref fullscreen-ref))}
      [:div {:class (stl/css :nav-zone)}
             ;; If the user doesn't have permission we disable the link
       [:a {:class (stl/css :home-link)

frontend/src/app/main/ui/viewer/header.scss

@@ -18,6 +18,7 @@
   height: $s-48;
   width: 100vw;
   padding: $s-8 $s-12;
+  transition: transform 400ms ease 300ms;
   background-color: var(--panel-background-color);
 }
 
@@ -300,3 +301,12 @@
     }
   }
 }
+
+/** FULLSCREEN */
+[data-fullscreen="true"] .viewer-header {
+  transform: translateY(-$s-48);
+}
+
+[data-force-visible="true"] .viewer-header {
+  transform: translateY(0);
+}

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

@@ -94,11 +94,11 @@
      [:& left-sidebar {:frame frame
                        :local local
                        :page page}]
-     [:div {:class (stl/css :inspect-svg-wrapper)
+     [:div#inspect-svg-wrapper {:class (stl/css :inspect-svg-wrapper)
             :data-value (pr-str (:id frame))
             :on-click handle-select-frame}
       [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}]
-      [:div {:class (stl/css :inspect-svg-container)
+      [:div#inspect-svg-container {:class (stl/css :inspect-svg-container)
              :ref inspect-svg-container-ref}
        [:& render-frame-svg {:frame frame :page page :local local :size size}]]]
 

frontend/src/app/util/dom.cljs

@@ -547,6 +547,11 @@
                         []
                         (partition 2 params))))
 
+(defn ^boolean id?
+  [node id]
+  (when (some? node)
+    (= (.-id ^js node) id)))
+
 (defn ^boolean class? [node class-name]
   (when (some? node)
     (let [class-list (.-classList ^js node)]