From 0b598bef96dc702ac631d66e295e86f52711e80e Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Fri, 1 Aug 2025 05:02:02 +1000 Subject: [PATCH] Preferences: QR code button now takes you to username link screen Co-authored-by: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com> --- _locales/en/messages.json | 8 +++ stylesheets/_variables.scss | 1 + stylesheets/components/Preferences.scss | 82 +++++++++++++++++-------- ts/components/Preferences.stories.tsx | 6 +- ts/components/Preferences.tsx | 37 ++++++++--- 5 files changed, 99 insertions(+), 35 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 7310e511bd..2a0508ee1b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -6636,6 +6636,14 @@ "messageformat": "Username link needs reset", "description": "Accessibility title of an icon in profile editor" }, + "icu:ProfileEditor__open": { + "messageformat": "Open username link screen", + "description": "Accessibility title for the small qr code icon in the preferences pane list" + }, + "icu:ProfileEditor__username-link__open": { + "messageformat": "Open username link screen", + "description": "Accessibility title for the small qr code icon in the preferences pane list" + }, "icu:ProfileEditor__username-link__tooltip__title": { "messageformat": "Share your username", "description": "Title of tooltip displayed under 'QR code or link' button for getting username link" diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index 0d0bceeb1b..3286419052 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -33,6 +33,7 @@ $color-gray-05: #e9e9e9; $color-gray-15: #dedede; $color-gray-20: #c6c6c6; $color-gray-25: #b9b9b9; +$color-gray-40: #808080; $color-gray-45: #848484; $color-gray-60: #5e5e5e; $color-gray-62: #545454; diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss index 084a67d742..cac30f93c9 100644 --- a/stylesheets/components/Preferences.scss +++ b/stylesheets/components/Preferences.scss @@ -75,23 +75,25 @@ $secondary-text-color: light-dark( } &__profile-chip { - @include mixins.button-reset; - & { - display: flex; - flex-direction: row; - align-items: center; + position: relative; + display: flex; + flex-direction: row; + align-items: center; - width: calc(100% - 11px); - margin-inline-start: 10px; - margin-inline-end: 1px; + width: calc(100% - 11px); + margin-inline-start: 10px; + margin-inline-end: 1px; - margin-bottom: 4px; - border-radius: 8px; + margin-bottom: 4px; + border-radius: 8px; - padding-top: 14px; - padding-bottom: 14px; - padding-inline-start: 10px; - padding-inline-end: 10px; + padding-top: 14px; + padding-bottom: 14px; + padding-inline-start: 10px; + padding-inline-end: 10px; + + &__screenreader-only { + @include mixins.sr-only; } &--selected { @@ -103,7 +105,7 @@ $secondary-text-color: light-dark( } } - &:focus { + &:has(.Preferences__profile-chip__button:focus) { @include mixins.keyboard-mode { background: variables.$color-gray-05; } @@ -111,7 +113,7 @@ $secondary-text-color: light-dark( background: variables.$color-gray-75; } } - &:hover:not(&--selected) { + &:has(.Preferences__profile-chip__button:hover):not(&--selected) { @include mixins.mouse-mode { background: variables.$color-gray-05; } @@ -120,6 +122,15 @@ $secondary-text-color: light-dark( } } + &__button { + @include mixins.button-reset; + & { + position: absolute; + z-index: 1; + inset: 0; + } + } + &__avatar { margin-inline-end: 10px; } @@ -156,18 +167,39 @@ $secondary-text-color: light-dark( text-overflow: ellipsis; } - &__qr-icon-container { - margin-inline-start: 2px; - flex-shrink: 0; - position: relative; - height: 36px; - width: 36px; - border-radius: 50%; + &__qr-icon-button { + @include mixins.button-reset; + & { + z-index: 2; + margin-inline-start: 2px; + flex-shrink: 0; + position: relative; + height: 36px; + width: 36px; + border-radius: 50%; + } @include mixins.light-theme { - background-color: variables.$color-gray-15; + background-color: variables.$color-white; } @include mixins.dark-theme { - background-color: variables.$color-gray-65; + background-color: rgba(variables.$color-gray-40, 0.2); + } + + &:active { + @include mixins.mouse-mode { + background-color: variables.$color-gray-02; + } + @include mixins.dark-mouse-mode { + background-color: rgba(variables.$color-gray-40, 0.28); + } + } + &:focus { + @include mixins.keyboard-mode { + box-shadow: 0px 0px 0px 2.5px #a0a7fe; + } + @include mixins.dark-keyboard-mode { + box-shadow: 0px 0px 0px 2.5px #c1c7fe; + } } } &__qr-icon { diff --git a/ts/components/Preferences.stories.tsx b/ts/components/Preferences.stories.tsx index 9f6f5e2c24..6a80445bbb 100644 --- a/ts/components/Preferences.stories.tsx +++ b/ts/components/Preferences.stories.tsx @@ -380,6 +380,7 @@ export default { action('saveAttachmentToDisk')(); return { fullPath: '/mock/path/to/file.png', name: 'file.png' }; }, + generateDonationReceiptBlob: async () => { action('generateDonationReceiptBlob')(); return new Blob(); @@ -497,7 +498,10 @@ const Template: StoryFn = args => { { + setPage={( + newPage: SettingsPage, + profilePage: ProfileEditorPage | undefined + ) => { // eslint-disable-next-line no-console console.log('setPage:', newPage, profilePage); setPage(newPage); diff --git a/ts/components/Preferences.tsx b/ts/components/Preferences.tsx index f21caa7444..f84185d34e 100644 --- a/ts/components/Preferences.tsx +++ b/ts/components/Preferences.tsx @@ -50,7 +50,7 @@ import { PreferencesInternal } from './PreferencesInternal'; import { FunEmojiLocalizationProvider } from './fun/FunEmojiLocalizationProvider'; import { Avatar, AvatarSize } from './Avatar'; import { NavSidebar } from './NavSidebar'; -import { SettingsPage } from '../types/Nav'; +import { SettingsPage, ProfileEditorPage } from '../types/Nav'; import type { MediaDeviceSettings } from '../types/Calling'; import type { ValidationResultType as BackupValidationResultType } from '../services/backups'; @@ -103,7 +103,6 @@ import { isChatFoldersEnabled, } from '../types/ChatFolder'; import type { GetConversationByIdType } from '../state/selectors/conversations'; -import type { ProfileEditorPage } from '../types/Nav'; type CheckboxChangeHandlerType = (value: boolean) => unknown; type SelectChangeHandlerType = (value: T) => unknown; @@ -256,7 +255,7 @@ type PropsFunctionType = { value: CustomColorType; } ) => unknown; - setPage: (page: SettingsPage) => unknown; + setPage: (page: SettingsPage, editState?: ProfileEditorPage) => unknown; showToast: (toast: AnyToast) => unknown; validateBackup: () => Promise; @@ -2219,14 +2218,12 @@ export function Preferences({ ) : null}
- + + +