From edf6ea1cb542ad966da7d9e3d384f3826b43405d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 4 Dec 2023 15:05:16 +0100 Subject: [PATCH] :sparkles: Add locate and help button --- .../images/icons/locate-refactor.svg | 1 + frontend/src/app/config.cljs | 1 + frontend/src/app/main/ui/icons.cljs | 1 + .../options/menus/layout_container.cljs | 46 ++++++++++++++++--- .../options/menus/layout_container.scss | 27 +++++++++-- 5 files changed, 66 insertions(+), 10 deletions(-) create mode 100644 frontend/resources/images/icons/locate-refactor.svg diff --git a/frontend/resources/images/icons/locate-refactor.svg b/frontend/resources/images/icons/locate-refactor.svg new file mode 100644 index 000000000..be8b385de --- /dev/null +++ b/frontend/resources/images/icons/locate-refactor.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs index fbb5a2f19..a3c7195fe 100644 --- a/frontend/src/app/config.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 69adf3914..610eec75e 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index d5cdc6cc4..578a22dd6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/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}]] - (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? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index f67c8b89c..d515394b3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/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 {