diff --git a/app/assets/tailwind/privacy-mode.css b/app/assets/tailwind/privacy-mode.css index 3702b1525..e57eaa246 100644 --- a/app/assets/tailwind/privacy-mode.css +++ b/app/assets/tailwind/privacy-mode.css @@ -2,13 +2,10 @@ html.privacy-mode .privacy-sensitive { filter: blur(8px); user-select: none; + pointer-events: none; transition: filter 0.2s ease; } -html.privacy-mode .privacy-sensitive:hover { - filter: blur(4px); -} - html:not(.privacy-mode) .privacy-sensitive { transition: filter 0.2s ease; } \ No newline at end of file diff --git a/app/javascript/controllers/privacy_mode_controller.js b/app/javascript/controllers/privacy_mode_controller.js index a2358b064..5d968e6c9 100644 --- a/app/javascript/controllers/privacy_mode_controller.js +++ b/app/javascript/controllers/privacy_mode_controller.js @@ -4,8 +4,10 @@ import { Controller } from "@hotwired/stimulus" // Toggles visibility of financial numbers across the page. // Elements with class "privacy-sensitive" will be blurred when active. // State persists in localStorage so it survives page navigations. +// A synchronous inline script in pre-applies the class to prevent +// a flash of unblurred content on first paint (see _privacy_mode_check.html.erb). export default class extends Controller { - static targets = ["toggle"] + static targets = ["toggle", "iconOn", "iconOff"] connect() { this.active = localStorage.getItem("privacyMode") === "true" @@ -25,8 +27,17 @@ export default class extends Controller { document.documentElement.classList.remove("privacy-mode") } + // Update button state this.toggleTargets.forEach((el) => { el.setAttribute("aria-pressed", this.active.toString()) }) + + // Toggle icon visibility: show eye when active (click to reveal), eye-off when inactive + this.iconOnTargets.forEach((el) => { + el.classList.toggle("hidden", !this.active) + }) + this.iconOffTargets.forEach((el) => { + el.classList.toggle("hidden", this.active) + }) } } \ No newline at end of file diff --git a/app/views/layouts/_privacy_mode_check.html.erb b/app/views/layouts/_privacy_mode_check.html.erb new file mode 100644 index 000000000..6e9299901 --- /dev/null +++ b/app/views/layouts/_privacy_mode_check.html.erb @@ -0,0 +1,5 @@ + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index bc2c0ddf8..9d3b97e87 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -54,7 +54,19 @@ end %> <%= image_tag "logomark-color.svg", class: "w-9 h-9 mx-auto" %> <% end %> - <%= render "users/user_menu", user: Current.user, placement: "bottom-end", offset: 12, intro_mode: intro_mode %> +
+ + <%= render "users/user_menu", user: Current.user, placement: "bottom-end", offset: 12, intro_mode: intro_mode %> +
<%# DESKTOP - Left navbar %> @@ -138,7 +150,21 @@ end %> <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %> <% end %> - <%= icon("panel-right", as_button: true, data: { action: "app-layout#toggleRightSidebar" }) %> + +
+ + + <%= icon("panel-right", as_button: true, data: { action: "app-layout#toggleRightSidebar" }) %> +
<% end %> diff --git a/app/views/layouts/shared/_head.html.erb b/app/views/layouts/shared/_head.html.erb index b96ce2c61..560bece5d 100644 --- a/app/views/layouts/shared/_head.html.erb +++ b/app/views/layouts/shared/_head.html.erb @@ -11,6 +11,7 @@ <%= yield :plaid_link %> <%= javascript_importmap_tags %> <%= render "layouts/dark_mode_check" %> + <%= render "layouts/privacy_mode_check" %> <%= turbo_refreshes_with method: :morph, scroll: :preserve %> diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb index 4e0122026..2f5c14b81 100644 --- a/app/views/pages/dashboard.html.erb +++ b/app/views/pages/dashboard.html.erb @@ -10,16 +10,6 @@
- - <%= render DS::Link.new( icon: "plus", text: t("pages.dashboard.new"), diff --git a/config/locales/views/layout/ca.yml b/config/locales/views/layout/ca.yml index 5f6a3b9f8..8868c451c 100644 --- a/config/locales/views/layout/ca.yml +++ b/config/locales/views/layout/ca.yml @@ -2,6 +2,7 @@ ca: layouts: application: + privacy_mode: Alternar mode de privadesa nav: assistant: Assistent budgets: Pressupostos diff --git a/config/locales/views/layout/de.yml b/config/locales/views/layout/de.yml index 219e60f8f..3af54c26b 100644 --- a/config/locales/views/layout/de.yml +++ b/config/locales/views/layout/de.yml @@ -2,6 +2,7 @@ de: layouts: application: + privacy_mode: Datenschutzmodus umschalten nav: assistant: Assistent budgets: Budgets diff --git a/config/locales/views/layout/en.yml b/config/locales/views/layout/en.yml index 8e41636c0..86ad78ace 100644 --- a/config/locales/views/layout/en.yml +++ b/config/locales/views/layout/en.yml @@ -2,6 +2,7 @@ en: layouts: application: + privacy_mode: Toggle privacy mode nav: assistant: Assistant budgets: Budgets diff --git a/config/locales/views/layout/es.yml b/config/locales/views/layout/es.yml index bc14dd208..b1627fd14 100644 --- a/config/locales/views/layout/es.yml +++ b/config/locales/views/layout/es.yml @@ -2,6 +2,7 @@ es: layouts: application: + privacy_mode: Alternar modo de privacidad nav: assistant: Asistente budgets: Presupuestos diff --git a/config/locales/views/layout/fr.yml b/config/locales/views/layout/fr.yml index fb99e913e..54f9cca4b 100644 --- a/config/locales/views/layout/fr.yml +++ b/config/locales/views/layout/fr.yml @@ -2,6 +2,7 @@ fr: layouts: application: + privacy_mode: Activer/désactiver le mode confidentialité nav: assistant: Assistant budgets: Budgets diff --git a/config/locales/views/layout/nb.yml b/config/locales/views/layout/nb.yml index 42aeca716..ebabc16cf 100644 --- a/config/locales/views/layout/nb.yml +++ b/config/locales/views/layout/nb.yml @@ -2,6 +2,7 @@ nb: layouts: application: + privacy_mode: Veksle personvernmodus nav: assistant: Assistent budgets: Budsjett diff --git a/config/locales/views/layout/nl.yml b/config/locales/views/layout/nl.yml index 43bee1c11..9ee7a2b1b 100644 --- a/config/locales/views/layout/nl.yml +++ b/config/locales/views/layout/nl.yml @@ -2,6 +2,7 @@ nl: layouts: application: + privacy_mode: Privacymodus in-/uitschakelen nav: assistant: Assistent budgets: Budgetten diff --git a/config/locales/views/layout/pt-BR.yml b/config/locales/views/layout/pt-BR.yml index 580269edf..2f76fecca 100644 --- a/config/locales/views/layout/pt-BR.yml +++ b/config/locales/views/layout/pt-BR.yml @@ -2,6 +2,7 @@ pt-BR: layouts: application: + privacy_mode: Alternar modo de privacidade nav: assistant: Assistente budgets: Orçamentos diff --git a/config/locales/views/layout/ro.yml b/config/locales/views/layout/ro.yml index fc2f35f0a..15ed02dac 100644 --- a/config/locales/views/layout/ro.yml +++ b/config/locales/views/layout/ro.yml @@ -2,6 +2,7 @@ ro: layouts: application: + privacy_mode: Comutare mod confidențialitate nav: assistant: Asistent budgets: Bugete diff --git a/config/locales/views/layout/tr.yml b/config/locales/views/layout/tr.yml index cff503f7c..d7a482e42 100644 --- a/config/locales/views/layout/tr.yml +++ b/config/locales/views/layout/tr.yml @@ -2,6 +2,7 @@ tr: layouts: application: + privacy_mode: Gizlilik modunu değiştir nav: assistant: Asistan budgets: Bütçeler diff --git a/config/locales/views/layout/zh-CN.yml b/config/locales/views/layout/zh-CN.yml index 2d22156d1..8fc58045e 100644 --- a/config/locales/views/layout/zh-CN.yml +++ b/config/locales/views/layout/zh-CN.yml @@ -3,6 +3,7 @@ zh-CN: layouts: application: + privacy_mode: 切换隐私模式 nav: assistant: 智能助手 budgets: 预算管理 diff --git a/config/locales/views/layout/zh-TW.yml b/config/locales/views/layout/zh-TW.yml index 9c1b4da94..091625bea 100644 --- a/config/locales/views/layout/zh-TW.yml +++ b/config/locales/views/layout/zh-TW.yml @@ -2,6 +2,7 @@ zh-TW: layouts: application: + privacy_mode: 切換隱私模式 nav: assistant: 助手 budgets: 預算 diff --git a/config/locales/views/pages/de.yml b/config/locales/views/pages/de.yml index 337559dae..4df171506 100644 --- a/config/locales/views/pages/de.yml +++ b/config/locales/views/pages/de.yml @@ -7,7 +7,6 @@ de: welcome: "Willkommen zurück, %{name}" subtitle: "Hier siehst du, was in deinen Finanzen passiert." new: "Neu" - privacy_mode: "Datenschutzmodus umschalten" net_worth_chart: data_not_available: Für den ausgewählten Zeitraum sind keine Daten verfügbar. title: Nettovermögen diff --git a/config/locales/views/pages/en.yml b/config/locales/views/pages/en.yml index 5ccfa5df4..bded845ee 100644 --- a/config/locales/views/pages/en.yml +++ b/config/locales/views/pages/en.yml @@ -15,7 +15,6 @@ en: welcome: "Welcome back, %{name}" subtitle: "Here's what's happening with your finances" new: "New" - privacy_mode: "Toggle privacy mode" drag_to_reorder: "Drag to reorder section" toggle_section: "Toggle section visibility" net_worth_chart: