Merge pull request #4030 from penpot/azazeln28-bugfixes-4

Azazeln28 bugfixes 4

frontend/src/app/main/data/workspace/path/drawing.cljs

@@ -276,7 +276,8 @@
                          (cond-> (some? drop-index)
                            (with-meta {:index drop-index})))))))))
 
-(defn handle-new-shape-result [shape-id]
+(defn handle-new-shape-result
+  [shape-id]
   (ptk/reify ::handle-new-shape-result
     ptk/UpdateEvent
     (update [_ state]
@@ -293,7 +294,7 @@
     ptk/WatchEvent
     (watch [_ state _]
       (let [content (get-in state [:workspace-drawing :object :content] [])]
-        (if (seq content)
+        (if (and (seq content) (> (count content) 1))
           (rx/of (setup-frame)
                  (dwdc/handle-finish-drawing)
                  (dwe/start-edition-mode shape-id)

frontend/src/app/main/data/workspace/path/edition.cljs

@@ -319,9 +319,9 @@
                                       (= (ptk/type %) ::start-path-edit))))
             interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))]
         (rx/concat
-         (rx/of (dwc/hide-toolbar))
+         (rx/of (dwc/hide-toolbar)
-         (rx/of (undo/start-path-undo))
+                (undo/start-path-undo)
-         (rx/of (drawing/change-edit-mode mode))
+                (drawing/change-edit-mode mode))
          (->> interrupt
               (rx/map #(stop-path-edit id))
               (rx/take-until stopper)))))))

frontend/src/app/main/data/workspace/path/shortcuts.cljs

@@ -8,6 +8,7 @@
   (:require
    [app.main.data.shortcuts :as ds]
    [app.main.data.workspace :as dw]
+   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.path :as drp]
    [app.main.store :as st]
    [beicon.v2.core :as rx]
@@ -26,10 +27,13 @@
       ;;  Not interrupt when we're editing a path
       (let [edition-id (or (get-in state [:workspace-drawing :object :id])
                            (get-in state [:workspace-local :edition]))
+            content    (get-in state [:workspace-drawing :object :content])
             path-edit-mode (get-in state [:workspace-local :edit-path edition-id :edit-mode])]
         (if-not (= :draw path-edit-mode)
           (rx/of :interrupt)
-          (rx/empty))))))
+          (if (<= (count content) 1)
+            (rx/of (dwc/show-toolbar))
+            (rx/empty)))))))
 
 (def shortcuts
   {:move-nodes      {:tooltip "M"

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

@@ -376,7 +376,6 @@
                  wrapper (dom/get-element "inspect-svg-wrapper")
                  section (dom/get-element "inspect-svg-container")
                  target (.-target event)]
-             ;; 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)
@@ -458,7 +457,9 @@
              fullscreen-dom? (dom/fullscreen?)]
          (when (not= fullscreen? fullscreen-dom?)
            (if fullscreen?
-             (wapi/request-fullscreen wrapper)
+             (let [layout (dom/get-element "viewer-layout")]
+               (dom/set-data! layout "force-visible" false)
+               (wapi/request-fullscreen wrapper))
              (wapi/exit-fullscreen))))))
 
     (mf/use-effect
@@ -543,16 +544,9 @@
       :data-fullscreen fullscreen?
       :data-force-visible (:show-thumbnails local)}
 
+
      [:div {:class (stl/css :viewer-content)}
-      [:& header/header {:project project
+
-                         :index index
-                         :file file
-                         :page page
-                         :frame frame
-                         :permissions permissions
-                         :zoom zoom
-                         :section section
-                         :interactions-mode interactions-mode}]
 
       [:button {:on-click on-thumbnails-close
                 :class (stl/css-case :thumbnails-close true
@@ -609,7 +603,17 @@
               :overlays overlays
               :zoom zoom
               :section section
-              :index index}]]))]]]))
+              :index index}]]))]]
+
+     [:& header/header {:project project
+                        :index index
+                        :file file
+                        :page page
+                        :frame frame
+                        :permissions permissions
+                        :zoom zoom
+                        :section section
+                        :interactions-mode interactions-mode}]]))
 
 ;; --- Component: Viewer
 

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

@@ -86,6 +86,7 @@
   top: calc(50vh - $s-32);
   z-index: $z-index-2;
   background-color: var(--viewer-controls-background-color);
+  transition: transform 400ms ease 300ms;
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
@@ -199,3 +200,19 @@
 [data-force-visible="true"] .viewer-bottom {
   transform: translateY(0);
 }
+
+[data-fullscreen="true"] .viewer-go-next {
+  transform: translateX($s-40);
+}
+
+[data-fullscreen="true"] .viewer-go-prev {
+  transform: translateX(-$s-40);
+}
+
+[data-force-visible="true"] .viewer-go-next {
+  transform: translateX(0);
+}
+
+[data-force-visible="true"] .viewer-go-prev {
+  transform: translateX(0);
+}

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

@@ -303,10 +303,20 @@
 }
 
 /** FULLSCREEN */
+[data-fullscreen="true"] .viewer-header::after {
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: $s-48;
+  left: 0;
+  top: $s-48;
+}
+
 [data-fullscreen="true"] .viewer-header {
   transform: translateY(-$s-48);
 }
 
-[data-force-visible="true"] .viewer-header {
+[data-force-visible="true"] .viewer-header,
+[data-fullscreen="true"] .viewer-header:hover {
   transform: translateY(0);
 }

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

@@ -29,7 +29,6 @@
    [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
    [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
-   [app.main.ui.workspace.top-toolbar :refer [top-toolbar]]
    [app.main.ui.workspace.viewport :refer [viewport]]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
@@ -110,7 +109,6 @@
 
      (when-not hide-ui?
        [:*
-        [:& top-toolbar {:layout layout}]
         (if (:collapse-left-sidebar layout)
           [:& collapsed-button]
           [:& left-sidebar {:layout layout

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -274,6 +274,7 @@
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
 
     [:div.viewport {:style #js {"--zoom" zoom}}
+     [:& top-bar/top-bar {:layout layout}]
      [:div.viewport-overlays
       ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
       ;; inside a foreign object "dummy" so this awkward behaviour is take into account
@@ -302,9 +303,7 @@
                                          :vbox vbox
                                          :options options
                                          :layout layout
-                                         :viewport-ref viewport-ref}])
+                                         :viewport-ref viewport-ref}])]
-
-      [:& top-bar/top-bar]]
 
      [:svg.render-shapes
       {:id "render"

frontend/src/app/main/ui/workspace/viewport/top_bar.cljs

@@ -13,6 +13,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
+   [app.main.ui.workspace.top-toolbar :refer [top-toolbar]]
    [app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions]]
    [app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
    [app.util.i18n :as i18n :refer [tr]]
@@ -36,7 +37,7 @@
 
 (mf/defc top-bar
   {::mf/wrap [mf/memo]}
-  []
+  [{:keys [layout]}]
   (let [edition     (mf/deref refs/selected-edition)
         selected    (mf/deref refs/selected-objects)
         drawing     (mf/deref refs/workspace-drawing)
@@ -50,6 +51,7 @@
                         (not= :curve (:tool drawing)))
 
         workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
+        hide-ui?       (:hide-ui layout)
 
         path-edition? (or (and single? editing?
                                (and (not (cfh/text-shape? shape))
@@ -58,13 +60,17 @@
 
         grid-edition? (and single? editing? (ctl/grid-layout? shape))]
 
-    (cond
+    [:*
-      workspace-read-only?
+     (when-not hide-ui?
-      [:& view-only-actions]
+       [:& top-toolbar {:layout layout}])
 
-      path-edition?
+     (cond
-      [:div.viewport-actions
+       workspace-read-only?
-       [:& path-actions {:shape shape}]]
+       [:& view-only-actions]
 
-      grid-edition?
+       path-edition?
-      [:& grid-edition-actions {:shape shape}])))
+       [:div.viewport-actions
+        [:& path-actions {:shape shape}]]
+
+       grid-edition?
+       [:& grid-edition-actions {:shape shape}])]))