Merge pull request #3828 from penpot/alotor-hotfix-grid-layout

Hotfix grid layout

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

@@ -0,0 +1,74 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.data.workspace.grid-layout.shortcuts
+  (:require
+   [app.main.data.shortcuts :as ds]
+   [app.main.data.workspace :as dw]
+   [app.main.data.workspace.path :as drp]
+   [app.main.store :as st]
+   [beicon.core :as rx]
+   [potok.core :as ptk]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Shortcuts
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;; Shortcuts format https://github.com/ccampbell/mousetrap
+
+(defn esc-pressed []
+  (ptk/reify ::esc-pressed
+    ptk/WatchEvent
+    (watch [_ state _]
+      ;;  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]))
+            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))))))
+
+(def shortcuts
+  {
+
+   :escape          {:tooltip (ds/esc)
+                     :command ["escape" "enter" "v"]
+                     :fn #(st/emit! (esc-pressed))}
+
+   :undo            {:tooltip (ds/meta "Z")
+                     :command (ds/c-mod "z")
+                     :fn #(st/emit! (drp/undo-path))}
+
+   :redo            {:tooltip (ds/meta "Y")
+                     :command [(ds/c-mod "shift+z") (ds/c-mod "y")]
+                     :fn #(st/emit! (drp/redo-path))}
+
+   ;; ZOOM
+
+   :increase-zoom   {:tooltip "+"
+                     :command "+"
+                     :fn #(st/emit! (dw/increase-zoom nil))}
+
+   :decrease-zoom   {:tooltip "-"
+                     :command "-"
+                     :fn #(st/emit! (dw/decrease-zoom nil))}
+
+   :reset-zoom      {:tooltip (ds/shift "0")
+                     :command "shift+0"
+                     :fn #(st/emit! dw/reset-zoom)}
+
+   :fit-all         {:tooltip (ds/shift "1")
+                     :command "shift+1"
+                     :fn #(st/emit! dw/zoom-to-fit-all)}
+
+   :zoom-selected   {:tooltip (ds/shift "2")
+                     :command "shift+2"
+                     :fn #(st/emit! dw/zoom-to-selected-shape)}
+   })
+
+(defn get-tooltip [shortcut]
+  (assert (contains? shortcuts shortcut) (str shortcut))
+  (get-in shortcuts [shortcut :tooltip]))

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

@@ -27,6 +27,7 @@
    [app.main.ui.icons :as i]
    [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
    [app.util.code-gen :as cg]
+   [app.util.dom :as dom]
    [app.util.http :as http]
    [app.util.webapi :as wapi]
    [beicon.core :as rx]
@@ -115,6 +116,10 @@
         fontfaces-css* (mf/use-state nil)
         images-data*   (mf/use-state nil)
 
+        collapsed*     (mf/use-state #{})
+        collapsed-css? (contains? @collapsed* :css)
+        collapsed-markup? (contains? @collapsed* :markup)
+
         style-type    (deref style-type*)
         markup-type   (deref markup-type*)
         fontfaces-css (deref fontfaces-css*)
@@ -205,7 +210,16 @@
         ;;(mf/use-callback
         ;; (fn []
         ;;   (st/emit! (dp/open-preview-selected))))
-        ]
+
+        handle-collapse
+        (mf/use-callback
+         (fn [e]
+           (let [panel-type (keyword (dom/get-data (dom/get-current-target e) "type"))]
+             (swap! collapsed*
+                    (fn [collapsed]
+                      (if (contains? collapsed panel-type)
+                        (disj collapsed panel-type)
+                        (conj collapsed panel-type)))))))]
 
     (mf/use-effect
      (mf/deps fonts)
@@ -242,12 +256,15 @@
 
        [:div {:class (stl/css :code-block)}
         [:div {:class (stl/css :code-row-lang)}
+         [:button {:class (stl/css :toggle-btn)
+                   :data-type "css"
+                   :on-click handle-collapse}
+          [:span {:class (stl/css-case
+                          :collapsabled-icon true
+                          :rotated collapsed-css?)}
+           i/arrow-refactor]]
          [:span {:class (stl/css :code-lang)} "CSS"]
-        ;;   Active select when we have more than one option
+
-        ;;  [:& select {:default-value style-type
-        ;;              :class (stl/css :code-lang-select)
-        ;;              :options [{:label "CSS" :value "css"}]
-        ;;              :on-change set-style}]
          [:div {:class (stl/css :action-btns)}
           [:button {:class (stl/css :expand-button)
                     :on-click on-expand}
@@ -256,10 +273,11 @@
           [:& copy-button {:data style-code
                            :on-copied on-style-copied}]]]
 
+        (when-not collapsed-css?
           [:div {:class (stl/css :code-row-display)
                  :style #js {"--code-height" (str (or style-size 400) "px")}}
            [:& code-block {:type style-type
-                         :code style-code}]]
+                           :code style-code}]])
 
         [:div {:class (stl/css :resize-area)
                :on-pointer-down on-style-pointer-down
@@ -268,6 +286,13 @@
 
        [:div {:class (stl/css :code-block)}
         [:div {:class (stl/css :code-row-lang)}
+         [:button {:class (stl/css :toggle-btn)
+                   :data-type "markup"
+                   :on-click handle-collapse}
+          [:span {:class (stl/css-case
+                          :collapsabled-icon true
+                          :rotated collapsed-markup?)}
+           i/arrow-refactor]]
          [:& select {:default-value markup-type
                      :class (stl/css :code-lang-select)
                      :options [{:label "HTML" :value "html"}
@@ -282,10 +307,11 @@
           [:& copy-button {:data #(replace-map markup-code images-data)
                            :on-copied on-markup-copied}]]]
 
+        (when-not collapsed-markup?
           [:div {:class (stl/css :code-row-display)
                  :style #js {"--code-height" (str (or markup-size 400) "px")}}
            [:& code-block {:type markup-type
-                         :code markup-code}]]
+                           :code markup-code}]])
 
         [:div {:class (stl/css :resize-area)
                :on-pointer-down on-markup-pointer-down

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

@@ -31,6 +31,8 @@
       .action-btns {
         display: flex;
         gap: $s-4;
+        flex: 1;
+        justify-content: end;
         .expand-button {
           @extend .button-tertiary;
           height: $s-32;
@@ -56,3 +58,36 @@
     }
   }
 }
+
+.toggle-btn {
+  @include buttonStyle;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  color: var(--title-foreground-color);
+  stroke: var(--title-foreground-color);
+  .collapsabled-icon {
+    @include flexCenter;
+    height: $s-24;
+    border-radius: $br-8;
+    svg {
+      @extend .button-icon-small;
+      transform: rotate(90deg);
+      stroke: var(--icon-foreground);
+    }
+    &.rotated svg {
+      transform: rotate(0deg);
+    }
+  }
+  &:hover {
+    color: var(--title-foreground-color-hover);
+    stroke: var(--title-foreground-color-hover);
+    .title {
+      color: var(--title-foreground-color-hover);
+      stroke: var(--title-foreground-color-hover);
+    }
+    .collapsabled-icon svg {
+      stroke: var(--title-foreground-color-hover);
+    }
+  }
+}

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

@@ -267,7 +267,7 @@
     (hooks/setup-keyboard alt? mod? space? z? shift?)
     (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures?)
     (hooks/setup-viewport-modifiers modifiers base-objects)
-    (hooks/setup-shortcuts node-editing? drawing-path? text-editing?)
+    (hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
 
     [:div.viewport {:style #js {"--zoom" zoom}}

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

@@ -17,6 +17,7 @@
    [app.common.uuid :as uuid]
    [app.main.data.shortcuts :as dsc]
    [app.main.data.workspace :as dw]
+   [app.main.data.workspace.grid-layout.shortcuts :as gsc]
    [app.main.data.workspace.path.shortcuts :as psc]
    [app.main.data.workspace.shortcuts :as wsc]
    [app.main.data.workspace.text.shortcuts :as tsc]
@@ -359,15 +360,19 @@
 ;; this shortcuts outside the viewport?
 
 (defn setup-shortcuts
-  [path-editing? drawing-path? text-editing?]
+  [path-editing? drawing-path? text-editing? grid-editing?]
   (hooks/use-shortcuts ::workspace wsc/shortcuts)
   (mf/use-effect
-   (mf/deps path-editing? drawing-path?)
+   (mf/deps path-editing? drawing-path? grid-editing?)
    (fn []
      (cond
+       grid-editing?
+       (do (st/emit! (dsc/push-shortcuts ::grid gsc/shortcuts))
+           #(st/emit! (dsc/pop-shortcuts ::grid)))
        (or drawing-path? path-editing?)
        (do (st/emit! (dsc/push-shortcuts ::path psc/shortcuts))
            #(st/emit! (dsc/pop-shortcuts ::path)))
        text-editing?
        (do (st/emit! (dsc/push-shortcuts ::text tsc/shortcuts))
            #(st/emit! (dsc/pop-shortcuts ::text)))))))
+