From 1b71ba99d6d404b18e36e8a3af50bb04335356af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Romero?= Date: Tue, 22 Sep 2026 18:32:32 +0000 Subject: [PATCH] chore: clarify oauth setup --- ui/components/provider-button.slint | 35 ++++++++++++++++++++++++----- ui/dialogs/settings-dialog.slint | 6 +++-- ui/views/onboarding-view.slint | 2 ++ 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/ui/components/provider-button.slint b/ui/components/provider-button.slint index 405703f8..07ed9bb1 100644 --- a/ui/components/provider-button.slint +++ b/ui/components/provider-button.slint @@ -9,6 +9,7 @@ export component ProviderButton inherits Rectangle { in property colorize-icon: false; in property icon-offset-x: 0px; in property enabled: true; + in property tooltip-text: ""; in property foreground; in property muted; in property surface; @@ -19,11 +20,10 @@ export component ProviderButton inherits Rectangle { height: 48px; border-radius: 8px; border-width: 1px; - border-color: root.button-border; + border-color: root.enabled ? root.button-border : root.button-border.transparentize(0.5); background: provider-hit.has-hover && root.enabled ? root.hover-surface : root.surface; - opacity: root.enabled ? 1 : 0.5; accessible-role: button; - accessible-label: root.text; + accessible-label: root.tooltip-text == "" ? root.text : root.text + ". " + root.tooltip-text; accessible-enabled: root.enabled; accessible-action-default => { if root.enabled { @@ -37,6 +37,7 @@ export component ProviderButton inherits Rectangle { padding-right: 16px; spacing: 12px; cross-axis-alignment: center; + opacity: root.enabled ? 1 : 0.5; Rectangle { width: 20px; @@ -71,8 +72,30 @@ export component ProviderButton inherits Rectangle { } provider-hit := TouchArea { - enabled: root.enabled; - clicked => { root.clicked(); } - mouse-cursor: pointer; + clicked => { + if root.enabled { + root.clicked(); + } + } + mouse-cursor: root.enabled ? pointer : default; + } + + Rectangle { + visible: root.tooltip-text != "" && provider-hit.has-hover; + x: (parent.width - self.width) / 2; + y: -self.height - 6px; + width: tooltip-label.preferred-width + 16px; + height: 28px; + border-radius: 5px; + background: #292929; + z: 10000; + + tooltip-label := Text { + text: root.tooltip-text; + color: white; + font-size: TypeScale.secondary; + horizontal-alignment: center; + vertical-alignment: center; + } } } diff --git a/ui/dialogs/settings-dialog.slint b/ui/dialogs/settings-dialog.slint index 6e1a6349..43bb1c4c 100644 --- a/ui/dialogs/settings-dialog.slint +++ b/ui/dialogs/settings-dialog.slint @@ -1448,6 +1448,7 @@ export component SettingsDialog inherits Rectangle { text: @tr("Add Gmail"); icon: @image-url("../icons/brand/gmail.svg"); enabled: !root.account_setup_in_progress && !root.oauth_in_progress && !root.oauth_settings_saving && root.google_oauth_available; + tooltip-text: root.google_oauth_available ? "" : @tr("Add app keys in Sign-in settings to enable this provider."); foreground: root.body-text; muted: root.muted-text; surface: root.surface-raised; @@ -1460,6 +1461,7 @@ export component SettingsDialog inherits Rectangle { text: @tr("Add Outlook"); icon: @image-url("../icons/brand/outlook.svg"); enabled: !root.account_setup_in_progress && !root.oauth_in_progress && !root.oauth_settings_saving && root.microsoft_oauth_available; + tooltip-text: root.microsoft_oauth_available ? "" : @tr("Add app keys in Sign-in settings to enable this provider."); foreground: root.body-text; muted: root.muted-text; surface: root.surface-raised; @@ -1489,8 +1491,8 @@ export component SettingsDialog inherits Rectangle { if root.compact : VerticalBox { padding: 14px; spacing: 8px; - ProviderButton { text: @tr("Add Gmail"); icon: @image-url("../icons/brand/gmail.svg"); enabled: !root.account_setup_in_progress && !root.oauth_in_progress && !root.oauth_settings_saving && root.google_oauth_available; foreground: root.body-text; muted: root.muted-text; surface: root.surface-raised; hover-surface: root.accent-soft; button-border: root.border-subtle; clicked => { root.start_oauth("gmail"); } } - ProviderButton { text: @tr("Add Outlook"); icon: @image-url("../icons/brand/outlook.svg"); enabled: !root.account_setup_in_progress && !root.oauth_in_progress && !root.oauth_settings_saving && root.microsoft_oauth_available; foreground: root.body-text; muted: root.muted-text; surface: root.surface-raised; hover-surface: root.accent-soft; button-border: root.border-subtle; clicked => { root.start_oauth("microsoft"); } } + ProviderButton { text: @tr("Add Gmail"); icon: @image-url("../icons/brand/gmail.svg"); enabled: !root.account_setup_in_progress && !root.oauth_in_progress && !root.oauth_settings_saving && root.google_oauth_available; tooltip-text: root.google_oauth_available ? "" : @tr("Add app keys in Sign-in settings to enable this provider."); foreground: root.body-text; muted: root.muted-text; surface: root.surface-raised; hover-surface: root.accent-soft; button-border: root.border-subtle; clicked => { root.start_oauth("gmail"); } } + ProviderButton { text: @tr("Add Outlook"); icon: @image-url("../icons/brand/outlook.svg"); enabled: !root.account_setup_in_progress && !root.oauth_in_progress && !root.oauth_settings_saving && root.microsoft_oauth_available; tooltip-text: root.microsoft_oauth_available ? "" : @tr("Add app keys in Sign-in settings to enable this provider."); foreground: root.body-text; muted: root.muted-text; surface: root.surface-raised; hover-surface: root.accent-soft; button-border: root.border-subtle; clicked => { root.start_oauth("microsoft"); } } ProviderButton { text: @tr("Add mail account"); icon: @image-url("../icons/lucide/outline/mail.svg"); colorize-icon: true; enabled: !root.account_setup_in_progress && !root.oauth_in_progress && !root.oauth_settings_saving; foreground: root.body-text; muted: root.muted-text; surface: root.surface-raised; hover-surface: root.accent-soft; button-border: root.border-subtle; clicked => { root.open_new_imap(); } } if root.oauth_in_progress : Button { height: 44px; text: @tr("Cancel sign-in"); clicked => { root.cancel_oauth(); } } } diff --git a/ui/views/onboarding-view.slint b/ui/views/onboarding-view.slint index 1b9f4199..3c0f79da 100644 --- a/ui/views/onboarding-view.slint +++ b/ui/views/onboarding-view.slint @@ -149,6 +149,7 @@ export component OnboardingView inherits Rectangle { text: @tr("Continue with Gmail"); icon: @image-url("../icons/brand/gmail.svg"); enabled: !root.account-setup-in-progress && !root.oauth-in-progress && !root.oauth-settings-saving && root.google-available; + tooltip-text: root.google-available ? "" : @tr("Add app keys in Sign-in settings to enable this provider."); foreground: root.body-text; muted: root.muted-text; surface: root.surface; @@ -160,6 +161,7 @@ export component OnboardingView inherits Rectangle { text: @tr("Continue with Outlook"); icon: @image-url("../icons/brand/outlook.svg"); enabled: !root.account-setup-in-progress && !root.oauth-in-progress && !root.oauth-settings-saving && root.microsoft-available; + tooltip-text: root.microsoft-available ? "" : @tr("Add app keys in Sign-in settings to enable this provider."); foreground: root.body-text; muted: root.muted-text; surface: root.surface;