diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index f4f56e9ad..dfb3691d7 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -32,6 +32,7 @@ [app.util.dom.dnd :as dnd] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] + [app.util.object :as obj] [app.util.timers :as ts] [beicon.v2.core :as rx] [cljs.spec.alpha :as s] @@ -705,6 +706,9 @@ libs? (= section :dashboard-libraries) drafts? (and (= section :dashboard-files) (= (:id project) default-project-id)) + container (mf/use-ref nil) + overflow* (mf/use-state false) + overflow? (deref overflow*) go-projects (mf/use-fn #(st/emit! (dcm/go-to-dashboard-recent))) @@ -776,64 +780,75 @@ (remove :is-default) (filter :is-pinned))] - [:div {:class (stl/css :sidebar-content)} - [:& sidebar-team-switch {:team team :profile profile}] + (mf/use-layout-effect + (mf/deps pinned-projects) + (fn [] + (let [dom (mf/ref-val container) + client-height (obj/get dom "clientHeight") + scroll-height (obj/get dom "scrollHeight")] + (reset! overflow* (> scroll-height client-height))))) - [:& sidebar-search {:search-term search-term - :team-id (:id team)}] + [:* + [:div {:class (stl/css-case :sidebar-content true) + :ref container} + [:& sidebar-team-switch {:team team :profile profile}] - [:div {:class (stl/css :sidebar-content-section)} - [:ul {:class (stl/css :sidebar-nav)} - [:li {:class (stl/css-case :recent-projects true - :sidebar-nav-item true - :current projects?)} - [:& link {:action go-projects - :class (stl/css :sidebar-link) - :keyboard-action go-projects-with-key} - [:span {:class (stl/css :element-title)} (tr "labels.projects")]]] + [:& sidebar-search {:search-term search-term + :team-id (:id team)}] - [:li {:class (stl/css-case :current drafts? - :sidebar-nav-item true)} - [:& link {:action go-drafts - :class (stl/css :sidebar-link) - :keyboard-action go-drafts-with-key} - [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]] + [:div {:class (stl/css :sidebar-content-section)} + [:ul {:class (stl/css :sidebar-nav)} + [:li {:class (stl/css-case :recent-projects true + :sidebar-nav-item true + :current projects?)} + [:& link {:action go-projects + :class (stl/css :sidebar-link) + :keyboard-action go-projects-with-key} + [:span {:class (stl/css :element-title)} (tr "labels.projects")]]] + + [:li {:class (stl/css-case :current drafts? + :sidebar-nav-item true)} + [:& link {:action go-drafts + :class (stl/css :sidebar-link) + :keyboard-action go-drafts-with-key} + [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]] - [:li {:class (stl/css-case :current libs? - :sidebar-nav-item true)} - [:& link {:action go-libs - :data-testid "libs-link-sidebar" - :class (stl/css :sidebar-link) - :keyboard-action go-libs-with-key} - [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]] + [:li {:class (stl/css-case :current libs? + :sidebar-nav-item true)} + [:& link {:action go-libs + :data-testid "libs-link-sidebar" + :class (stl/css :sidebar-link) + :keyboard-action go-libs-with-key} + [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]] - [:div {:class (stl/css :sidebar-content-section)} - [:ul {:class (stl/css :sidebar-nav)} - [:li {:class (stl/css-case :sidebar-nav-item true - :current fonts?)} - [:& link {:action go-fonts - :class (stl/css :sidebar-link) - :keyboard-action go-fonts-with-key - :data-testid "fonts"} - [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]]] + [:div {:class (stl/css :sidebar-content-section)} + [:ul {:class (stl/css :sidebar-nav)} + [:li {:class (stl/css-case :sidebar-nav-item true + :current fonts?)} + [:& link {:action go-fonts + :class (stl/css :sidebar-link) + :keyboard-action go-fonts-with-key + :data-testid "fonts"} + [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]]] - [:div {:class (stl/css :sidebar-content-section) - :data-testid "pinned-projects"} - (if (seq pinned-projects) - [:ul {:class (stl/css :sidebar-nav :pinned-projects)} - (for [item pinned-projects] - [:& sidebar-project - {:item item - :key (dm/str (:id item)) - :id (:id item) - :team-id (:id team) - :selected? (= (:id item) (:id project))}])] - [:div {:class (stl/css :sidebar-empty-placeholder)} - pin-icon - [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]])) + [:div {:class (stl/css :sidebar-content-section) + :data-testid "pinned-projects"} + (if (seq pinned-projects) + [:ul {:class (stl/css :sidebar-nav :pinned-projects)} + (for [item pinned-projects] + [:& sidebar-project + {:item item + :key (dm/str (:id item)) + :id (:id item) + :team-id (:id team) + :selected? (= (:id item) (:id project))}])] + [:div {:class (stl/css :sidebar-empty-placeholder)} + pin-icon + [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]] + [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]])) (mf/defc profile-section* {::mf/props :obj} @@ -939,9 +954,21 @@ handle-set-profile (mf/use-fn - #(on-click :settings-profile %))] + #(on-click :settings-profile %)) + + on-power-up-click + (mf/use-fn + (fn [] + (dom/open-new-window "https://penpot.app/pricing")))] [:* + [:button {:class (stl/css :upgrade-plan-section) + :on-click on-power-up-click} + [:div {:class (stl/css :penpot-free)} + [:span (tr "dashboard.upgrade-plan.penpot-free")] + [:span {:class (stl/css :no-limits)} (tr "dashboard.upgrade-plan.no-limits")]] + [:div {:class (stl/css :power-up)} + (tr "dashboard.upgrade-plan.power-up")]] (when (and team profile) [:& comments-section {:profile profile diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 0f7dc1345..65afa269d 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -6,6 +6,9 @@ @use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-dashboard"; +@use "../ds/typography.scss" as t; + +@import "../ds/_borders.scss"; // SIDEBAR COMPONENT .dashboard-sidebar { @@ -32,6 +35,16 @@ overflow-y: auto; } +.separator { + height: var(--sp-xxs); + width: 94%; + margin-left: 3%; +} + +.overflow-separator { + border-bottom: $b-1 solid var(--color-background-quaternary); +} + // SIDEBAR TEAM SWITCH .sidebar-team-switch { position: relative; @@ -391,3 +404,31 @@ @extend .button-icon; stroke: var(--icon-foreground); } + +.upgrade-plan-section { + @include buttonStyle; + display: flex; + justify-content: space-between; + border: $b-1 solid var(--color-background-quaternary); + border-radius: var(--sp-s); + padding: var(--sp-m); + margin: var(--sp-m) var(--sp-s) var(--sp-m) var(--sp-m); + color: var(--color-foreground-secondary); + cursor: pointer; +} + +.penpot-free { + @include t.use-typography("body-medium"); + display: flex; + flex-direction: column; + text-align: left; +} + +.no-limits { + @include t.use-typography("body-small"); +} + +.power-up { + @include t.use-typography("body-small"); + color: var(--color-accent-tertiary); +} diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs index 18722fc68..e76434df7 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.cljs +++ b/frontend/src/app/main/ui/workspace/main_menu.cljs @@ -781,6 +781,11 @@ (keyword))] (reset! sub-menu* menu)))) + on-power-up-click + (mf/use-fn + (fn [] + (dom/open-new-window "https://penpot.app/pricing"))) + toggle-flag (mf/use-fn (fn [event] @@ -892,7 +897,15 @@ :data-testid "help-info" :id "file-menu-help-info"} [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")] - [:span {:class (stl/css :open-arrow)} i/arrow]]] + [:span {:class (stl/css :open-arrow)} i/arrow]] + [:> dropdown-menu-item* {:class (stl/css-case :menu-item true) + :on-click on-power-up-click + :on-key-down (fn [event] + (when (kbd/enter? event) + (on-power-up-click))) + :on-pointer-enter close-sub-menu + :id "file-menu-power-up"} + [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.power-up")]]] (case sub-menu :file diff --git a/frontend/translations/en.po b/frontend/translations/en.po index d71585de4..2e3010559 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -963,6 +963,15 @@ msgstr "Your name" msgid "dashboard.your-penpot" msgstr "Your Penpot" +msgid "dashboard.upgrade-plan.penpot-free" +msgstr "Penpot Free" + +msgid "dashboard.upgrade-plan.no-limits" +msgstr "No limits on creativity" + +msgid "dashboard.upgrade-plan.power-up" +msgstr "Power up" + #: src/app/main/ui/alert.cljs:32 msgid "ds.alert-ok" msgstr "Ok" @@ -4335,6 +4344,10 @@ msgstr "Preferences" msgid "workspace.header.menu.option.view" msgstr "View" +#: src/app/main/ui/workspace/main_menu.cljs:908 +msgid "workspace.header.menu.option.power-up" +msgstr "Power up your plan" + #: src/app/main/ui/workspace/main_menu.cljs:471 msgid "workspace.header.menu.redo" msgstr "Redo" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 23691241e..d8cb5e6ef 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -971,6 +971,15 @@ msgstr "Tu nombre" msgid "dashboard.your-penpot" msgstr "Tu Penpot" +msgid "dashboard.upgrade-plan.penpot-free" +msgstr "Penpot Gratis" + +msgid "dashboard.upgrade-plan.no-limits" +msgstr "Sin lĂ­mites a la creatividad" + +msgid "dashboard.upgrade-plan.power-up" +msgstr "Mejora" + #: src/app/main/ui/alert.cljs:32 msgid "ds.alert-ok" msgstr "Ok" @@ -4336,6 +4345,10 @@ msgstr "Preferencias" msgid "workspace.header.menu.option.view" msgstr "Ver" +#: src/app/main/ui/workspace/main_menu.cljs:908 +msgid "workspace.header.menu.option.power-up" +msgstr "Mejora tu plan" + #: src/app/main/ui/workspace/main_menu.cljs:471 msgid "workspace.header.menu.redo" msgstr "Rehacer"