diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs index a3c7195fe..46546cd61 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 flex-help-uri (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/")) (def grid-help-uri (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/")) (defn- normalize-uri 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 578a22dd6..c0adcfe32 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 @@ -1356,6 +1356,11 @@ (fn [] (reset! show-layout-dropdown* false))) + handle-open-flex-help + (mf/use-callback + (fn [] + (st/emit! (dom/open-new-window cf/flex-help-uri)))) + handle-open-grid-help (mf/use-callback (fn [] @@ -1413,10 +1418,13 @@ [:& wrap-row {:wrap-type wrap-type :on-click toggle-wrap-refactor}]] - [:div {:class (stl/css :second-row)} + [:div {:class (stl/css :second-row :help-button-wrapper)} [:& justify-content-row {:is-col? is-col? :justify-content justify-content - :on-change set-justify-content-refactor}]] + :on-change set-justify-content-refactor}] + + [:button {:on-click handle-open-flex-help + :class (stl/css :help-button)} i/help-refactor]] (when (= :wrap wrap-type) [:div {:class (stl/css :third-row)} [:& align-content-row {:is-col? is-col? 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 d515394b3..04a5f04d9 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 @@ -65,6 +65,14 @@ .forth-row { @include flexColumn; } + .help-button-wrapper { + position: relative; + .help-button { + position: absolute; + top: 0; + right: 0; + } + } } }