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:
parent
a13ebbaa43
commit
edf6ea1cb5
5 changed files with 66 additions and 10 deletions
1
frontend/resources/images/icons/locate-refactor.svg
Normal file
1
frontend/resources/images/icons/locate-refactor.svg
Normal 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 |
|
@ -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]
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue