diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 05d60cf659..4fb1c8bc92 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -32,13 +32,21 @@ (def profile (l/derived (l/key :profile) st/state)) +(def ui-scale-compact + "UI scale factor for the default, compact interface." + 1.0) + +(def ui-scale-comfortable + "UI scale factor for the enlarged, comfortable interface." + 1.15) + (def ui-scale - "Effective UI scale factor, gated by the `:ui-scale` flag. Returns 1.0 when the - flag is disabled or the profile prop has never been set." + "Effective UI scale factor, gated by the `:ui-scale` flag. Returns the compact + scale when the flag is disabled or the profile prop has never been set." (l/derived (fn [state] (if (contains? cf/flags :ui-scale) - (or (get-in state [:profile :props :ui-scale]) 1.0) - 1.0)) + (or (get-in state [:profile :props :ui-scale]) ui-scale-compact) + ui-scale-compact)) st/state)) (def current-page-id diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs index ab0e7d3ffc..8b6ca3f343 100644 --- a/frontend/src/app/main/ui/settings/options.cljs +++ b/frontend/src/app/main/ui/settings/options.cljs @@ -123,7 +123,9 @@ (mf/defc ui-scale-settings* [{:keys [ui-scale]}] (let [initial (mf/with-memo [ui-scale] - {:ui-scale (if (= ui-scale 1.15) "comfortable" "compact")}) + {:ui-scale (if (= ui-scale refs/ui-scale-comfortable) + "comfortable" + "compact")}) ;; The form only holds the radio group state: there is no submit step, ;; the change is applied (and persisted) as soon as an option is picked. @@ -133,7 +135,9 @@ handle-scale-change (mf/use-fn (fn [_ value] - (let [scale (if (= value "comfortable") 1.15 1.0)] + (let [scale (if (= value "comfortable") + refs/ui-scale-comfortable + refs/ui-scale-compact)] (st/emit! (ev/event {::ev/name "change-ui-scale" ::ev/origin "settings" :scale scale}) diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs index 394864c22a..6ed979b0ec 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.cljs +++ b/frontend/src/app/main/ui/workspace/main_menu.cljs @@ -228,8 +228,9 @@ (mf/defc preferences-menu* {::mf/private true ::mf/wrap [mf/memo]} - [{:keys [layout profile toggle-flag on-close toggle-theme toggle-render]}] + [{:keys [layout profile toggle-flag on-close toggle-theme toggle-render toggle-ui-scale]}] (let [renderer (or (-> profile :props :renderer) :svg) + ui-scale (or (-> profile :props :ui-scale) refs/ui-scale-compact) show-nudge-options (mf/use-fn @@ -326,6 +327,20 @@ "system" (tr "workspace.header.menu.toggle-dark-theme") (tr "workspace.header.menu.toggle-light-theme"))] [:> shortcuts* {:id :toggle-theme}]] + + (when (contains? cf/flags :ui-scale) + [:> dropdown-menu-item* {:on-click toggle-ui-scale + :class (stl/css :base-menu-item :submenu-item) + :on-key-down (fn [event] + (when (kbd/enter? event) + (toggle-ui-scale event))) + :data-testid "toggle-ui-scale" + :id "file-menu-toggle-ui-scale"} + [:span {:class (stl/css :item-name)} + (if (= ui-scale refs/ui-scale-comfortable) + (tr "workspace.header.menu.ui-scale-compact") + (tr "workspace.header.menu.ui-scale-comfortable"))]]) + (when (contains? cf/flags :render-switch) [:> dropdown-menu-item* {:on-click toggle-render :class (stl/css :base-menu-item :submenu-item) @@ -949,6 +964,19 @@ (dom/stop-propagation event) (st/emit! (du/toggle-theme)))) + toggle-ui-scale + (mf/use-fn + (mf/deps profile) + (fn [event] + (dom/stop-propagation event) + (let [scale (if (= (-> profile :props :ui-scale) refs/ui-scale-comfortable) + refs/ui-scale-compact + refs/ui-scale-comfortable)] + (st/emit! (ev/event {::ev/name "change-ui-scale" + ::ev/origin "workspace:menu" + :scale scale}) + (du/update-profile-props {:ui-scale scale}))))) + toggle-render (mf/use-fn (mf/deps profile) @@ -1148,6 +1176,7 @@ :toggle-flag toggle-flag :toggle-theme toggle-theme :toggle-render toggle-render + :toggle-ui-scale toggle-ui-scale :on-close close-sub-menu}] :plugins diff --git a/frontend/translations/en.po b/frontend/translations/en.po index ce4a404b80..f4ba6ee9a3 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6910,6 +6910,14 @@ msgstr "Switch to light theme" msgid "workspace.header.menu.toggle-system-theme" msgstr "Switch to system theme" +#: src/app/main/ui/workspace/main_menu.cljs:342 +msgid "workspace.header.menu.ui-scale-comfortable" +msgstr "Switch to comfortable UI scale" + +#: src/app/main/ui/workspace/main_menu.cljs:341 +msgid "workspace.header.menu.ui-scale-compact" +msgstr "Switch to compact UI scale" + #: src/app/main/ui/workspace/main_menu.cljs:548 msgid "workspace.header.menu.undo" msgstr "Undo" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 8af7364bb8..4983e06afb 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6753,6 +6753,14 @@ msgstr "Cambiar a tema claro" msgid "workspace.header.menu.toggle-system-theme" msgstr "Cambiar a tema del sistema" +#: src/app/main/ui/workspace/main_menu.cljs:342 +msgid "workspace.header.menu.ui-scale-comfortable" +msgstr "Cambiar a escalado de interfaz cómodo" + +#: src/app/main/ui/workspace/main_menu.cljs:341 +msgid "workspace.header.menu.ui-scale-compact" +msgstr "Cambiar a escalado de interfaz compacto" + #: src/app/main/ui/workspace/main_menu.cljs:548 msgid "workspace.header.menu.undo" msgstr "Deshacer"