0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 00:01:51 -05:00

Add locate and help button

This commit is contained in:
alonso.torres 2023-12-04 15:05:16 +01:00 committed by Andrey Antukh
parent a13ebbaa43
commit edf6ea1cb5
5 changed files with 66 additions and 10 deletions

View file

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

After

Width:  |  Height:  |  Size: 410 B

View file

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

View file

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

View file

@ -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}]]
(when (= 1 (count ids))
[:& grid-edit-mode {:id (first ids)}])]
:set-justify set-justify-grid}]
[: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?

View file

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