✨ Add locate and help button

frontend/resources/images/icons/locate-refactor.svg

@@ -0,0 +1 @@
+<svg width="15.333" xmlns="http://www.w3.org/2000/svg" height="15.334" viewBox="825.7 685.2 15.333 15.334"><path stroke-linecap="round" stroke-linejoin="round" d="M840.033 692.867a6.667 6.667 0 0 1-6.666 6.667m6.666-6.667a6.667 6.667 0 0 0-6.666-6.667m6.666 6.667h-2.666m-4 6.667a6.667 6.667 0 0 1-6.667-6.667m6.667 6.667v-2.667m-6.667-4a6.667 6.667 0 0 1 6.667-6.667m-6.667 6.667h2.667m4-6.667v2.667"/></svg>

frontend/src/app/config.cljs

@@ -102,6 +102,7 @@
 
 (def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI" "https://penpot.app/terms"))
 (def privacy-policy-uri   (obj/get global "penpotPrivacyPolicyURI" "https://penpot.app/privacy"))
+(def grid-help-uri        (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/"))
 
 (defn- normalize-uri
   [uri-str]

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

@@ -381,6 +381,7 @@
 (def justify-content-row-around-refactor (icon-xref :justify-content-row-around-refactor))
 (def justify-content-row-evenly-refactor (icon-xref :justify-content-row-evenly-refactor))
 (def layers-refactor (icon-xref :layers-refactor))
+(def locate-refactor (icon-xref :locate-refactor))
 (def lock-refactor (icon-xref :lock-refactor))
 (def library-refactor (icon-xref :library-refactor))
 (def margin-bottom-refactor (icon-xref :margin-bottom-refactor))

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -11,7 +11,9 @@
    [app.common.data.macros :as dm]
    [app.common.math :as mth]
    [app.common.types.shape.layout :as ctl]
+   [app.config :as cf]
    [app.main.data.workspace :as udw]
+   [app.main.data.workspace.grid-layout.editor :as dwge]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.features :as features]
    [app.main.refs :as refs]
@@ -1352,7 +1354,17 @@
         handle-close-layout-options
         (mf/use-callback
          (fn []
-           (reset! show-layout-dropdown* false)))]
+           (reset! show-layout-dropdown* false)))
+
+        handle-open-grid-help
+        (mf/use-callback
+         (fn []
+           (st/emit! (dom/open-new-window cf/grid-help-uri))))
+
+        handle-locate-grid
+        (mf/use-callback
+         (fn []
+           (st/emit! (dwge/locate-board (first ids)))))]
 
     (if new-css-system
       [:div {:class (stl/css :element-set)}
@@ -1424,6 +1436,11 @@
 
              :grid
              [:div {:class (stl/css :grid-layout-menu)}
+              (when (= 1 (count ids))
+                [:div {:class (stl/css :edit-grid-wrapper)}
+                 [:& grid-edit-mode {:id (first ids)}]
+                 [:button {:on-click handle-open-grid-help
+                           :class (stl/css :help-button)} i/help-refactor]])
               [:div {:class (stl/css :row :first-row)}
                [:div {:class (stl/css :direction-edit)}
                 [:div {:class (stl/css :direction)}
@@ -1444,9 +1461,11 @@
                                      :set-justify set-justify-grid}]
                [:& justify-grid-row {:is-col? false
                                      :justify-items grid-justify-content-row
-                                     :set-justify set-justify-grid}]]
+                                     :set-justify set-justify-grid}]
-              (when (= 1 (count ids))
+
-                [:& grid-edit-mode {:id (first ids)}])]
+               [:button {:on-click handle-locate-grid
+                         :class (stl/css :locate-button)}
+                i/locate-refactor]]]
              nil)))]
 
       [:div.element-set
@@ -1684,12 +1703,23 @@
                          :percent 20
                          :fixed 100)]
              (st/emit! (dwsl/change-layout-track ids type index {:value value
-                                                                 :type track-type})))))]
+                                                                 :type track-type})))))
+        handle-open-grid-help
+        (mf/use-callback
+         (fn []
+           (st/emit! (dom/open-new-window cf/grid-help-uri))))
+
+        handle-locate-grid
+        (mf/use-callback
+         (fn []
+           (st/emit! (dwge/locate-board (first ids)))))        ]
 
     (if new-css-system
       [:div {:class (stl/css :grid-layout-menu)}
        [:div {:class (stl/css :row)}
         [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"]
+        [:button {:on-click handle-open-grid-help
+                  :class (stl/css :help-button)} i/help-refactor]
         [:button {:class (stl/css :exit-btn)
                   :on-click #(st/emit! udw/clear-edition-mode)}
          (tr "workspace.layout_grid.editor.options.exit")]]
@@ -1714,7 +1744,11 @@
                               :set-justify set-justify-grid}]
         [:& justify-grid-row {:is-col? false
                               :justify-items grid-justify-content-row
-                              :set-justify set-justify-grid}]]
+                              :set-justify set-justify-grid}]
+
+        [:button {:on-click handle-locate-grid
+                  :class (stl/css :locate-button)}
+         i/locate-refactor]]
        [:div {:class (stl/css :row :grid-tracks-row)}
         [:& grid-columns-row {:is-col? true
                               :expanded? @grid-columns-open?

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss

@@ -151,6 +151,13 @@
     @include flexColumn;
     gap: $s-4;
     align-items: flex-start;
+    position: relative;
+
+    .locate-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
   }
 
   .grid-layout-menu-title {
@@ -161,7 +168,6 @@
   .edit-mode-btn {
     @extend .button-secondary;
     @include tabTitleTipography;
-    margin-top: $s-8;
     width: 100%;
     padding: $s-8;
   }
@@ -186,6 +192,10 @@
     margin: $s-8 0;
     gap: $s-12;
   }
+
+  .edit-grid-wrapper {
+    @include flexRow;
+  }
 }
 
 .track-info {
@@ -312,6 +322,17 @@
   }
 }
 
+.locate-button,
+.help-button {
+  @extend .button-tertiary;
+  padding: $s-8;
+  svg {
+    fill: none;
+    width: $s-16;
+    height: $s-16;
+  }
+}
+
 .layout-options {
   @extend .dropdown-wrapper;
   @include flexColumn;
@@ -319,11 +340,9 @@
   left: initial;
 
   button {
-    cursor: pointer;
+    @include buttonStyle;
     padding: $s-8;
     color: $df-primary;
-    background: none;
-    border: none;
     border-radius: $br-6;
 
     &:hover {