From 00fed31ce75810e2e82ac041fec9a222971ceb8b Mon Sep 17 00:00:00 2001 From: Christien Rioux Date: Sun, 25 May 2025 23:34:47 -0400 Subject: [PATCH] text scaling fixes --- .../views/edit_account_page.dart | 5 +- .../views/edit_profile_form.dart | 40 ++++-------- .../views/show_recovery_key_page.dart | 6 +- lib/app.dart | 2 +- .../chat_builders/vc_text_message_widget.dart | 13 ++-- lib/chat/views/chat_component_widget.dart | 25 ++++---- .../chat_single_contact_item_widget.dart | 17 +---- lib/contacts/views/contact_item_widget.dart | 16 +---- lib/contacts/views/contacts_browser.dart | 31 +++++---- lib/contacts/views/contacts_page.dart | 9 +-- lib/contacts/views/edit_contact_form.dart | 33 +++------- lib/layout/default_app_bar.dart | 4 +- lib/layout/home/drawer_menu/drawer_menu.dart | 5 -- lib/layout/home/home_screen.dart | 59 +++++++++-------- .../views/notifications_preferences.dart | 17 +++-- lib/settings/settings_page.dart | 3 +- .../display_scale_preferences.dart | 6 +- .../views/styled_widgets/styled_avatar.dart | 64 ++++++++++--------- .../styled_button_box.dart} | 19 +++--- .../views/styled_widgets/styled_checkbox.dart | 28 ++++---- .../views/styled_widgets/styled_dropdown.dart | 1 + .../styled_widgets/styled_slide_tile.dart | 32 +++++----- lib/theme/views/views.dart | 2 +- lib/veilid_processor/views/developer.dart | 7 +- 24 files changed, 206 insertions(+), 238 deletions(-) rename lib/theme/views/{option_box.dart => styled_widgets/styled_button_box.dart} (75%) diff --git a/lib/account_manager/views/edit_account_page.dart b/lib/account_manager/views/edit_account_page.dart index b1ce962..5622c1f 100644 --- a/lib/account_manager/views/edit_account_page.dart +++ b/lib/account_manager/views/edit_account_page.dart @@ -267,6 +267,7 @@ class _EditAccountPageState extends WindowSetupState { leading: Navigator.canPop(context) ? IconButton( icon: const Icon(Icons.arrow_back), + iconSize: 24.scaled(context), onPressed: () { singleFuture((this, _kDoBackArrow), () async { if (_isModified) { @@ -299,14 +300,14 @@ class _EditAccountPageState extends WindowSetupState { body: SingleChildScrollView( child: Column(children: [ _editAccountForm(context).paddingLTRB(0, 0, 0, 32), - OptionBox( + StyledButtonBox( instructions: translate('edit_account_page.remove_account_description'), buttonIcon: Icons.person_remove_alt_1, buttonText: translate('edit_account_page.remove_account'), onClick: _onRemoveAccount, ), - OptionBox( + StyledButtonBox( instructions: translate('edit_account_page.destroy_account_description'), buttonIcon: Icons.person_off, diff --git a/lib/account_manager/views/edit_profile_form.dart b/lib/account_manager/views/edit_profile_form.dart index 106366c..114c7b8 100644 --- a/lib/account_manager/views/edit_profile_form.dart +++ b/lib/account_manager/views/edit_profile_form.dart @@ -176,17 +176,8 @@ class _EditProfileFormState extends State { BuildContext context, ) { final theme = Theme.of(context); - final scale = theme.extension()!; - final scaleConfig = theme.extension()!; final textTheme = theme.textTheme; - late final Color border; - if (scaleConfig.useVisualIndicators && !scaleConfig.preferBorders) { - border = scale.primaryScale.elementBackground; - } else { - border = scale.primaryScale.border; - } - return FormBuilder( key: _formKey, autovalidateMode: AutovalidateMode.onUserInteraction, @@ -200,12 +191,7 @@ class _EditProfileFormState extends State { const Spacer(), StyledAvatar( name: _currentValueName, - size: 128, - borderColor: border, - foregroundColor: scale.primaryScale.primaryText, - backgroundColor: scale.primaryScale.primary, - scaleConfig: scaleConfig, - textStyle: theme.textTheme.titleLarge!.copyWith(fontSize: 64), + size: 128.scaled(context), ).paddingLTRB(0, 0, 0, 16), const Spacer() ]), @@ -327,17 +313,19 @@ class _EditProfileFormState extends State { false; return ElevatedButton( - onPressed: (networkReady && _isModified) ? _doSubmit : null, - child: Row(mainAxisSize: MainAxisSize.min, children: [ - Icon(networkReady ? Icons.check : Icons.hourglass_empty, - size: 16.scaled(context)) - .paddingLTRB(0, 0, 4.scaled(context), 0), - Text(networkReady - ? widget.submitText - : widget.submitDisabledText) - .paddingLTRB(0, 0, 4.scaled(context), 0) - ]), - ); + onPressed: (networkReady && _isModified) ? _doSubmit : null, + child: Padding( + padding: EdgeInsetsGeometry.all(4.scaled(context)), + child: Row(mainAxisSize: MainAxisSize.min, children: [ + Icon(networkReady ? Icons.check : Icons.hourglass_empty, + size: 16.scaled(context)) + .paddingLTRB(0, 0, 4.scaled(context), 0), + Text(networkReady + ? widget.submitText + : widget.submitDisabledText) + .paddingLTRB(0, 0, 4.scaled(context), 0) + ]), + )); }), const Spacer() ]) diff --git a/lib/account_manager/views/show_recovery_key_page.dart b/lib/account_manager/views/show_recovery_key_page.dart index a551ffd..5423543 100644 --- a/lib/account_manager/views/show_recovery_key_page.dart +++ b/lib/account_manager/views/show_recovery_key_page.dart @@ -194,7 +194,7 @@ class _ShowRecoveryKeyPageState extends WindowSetupState { textAlign: TextAlign.center, translate('show_recovery_key_page.instructions_options')) .paddingLTRB(12, 0, 12, 24), - OptionBox( + StyledButtonBox( instructions: translate('show_recovery_key_page.instructions_print'), buttonIcon: Icons.print, @@ -210,7 +210,7 @@ class _ShowRecoveryKeyPageState extends WindowSetupState { _codeHandled = true; }); }), - OptionBox( + StyledButtonBox( instructions: translate('show_recovery_key_page.instructions_view'), buttonIcon: Icons.edit_document, @@ -230,7 +230,7 @@ class _ShowRecoveryKeyPageState extends WindowSetupState { _codeHandled = true; }); }), - OptionBox( + StyledButtonBox( instructions: translate('show_recovery_key_page.instructions_share'), buttonIcon: Icons.ios_share, diff --git a/lib/app.dart b/lib/app.dart index 7b1e0c8..5f4d6dc 100644 --- a/lib/app.dart +++ b/lib/app.dart @@ -125,7 +125,7 @@ class VeilidChatApp extends StatelessWidget { @override Widget build(BuildContext context) => FutureProvider( initialData: null, - create: (context) async => VeilidChatGlobalInit.initialize(), + create: (context) => VeilidChatGlobalInit.initialize(), builder: (context, __) { final globalInit = context.watch(); if (globalInit == null) { diff --git a/lib/chat/views/chat_builders/vc_text_message_widget.dart b/lib/chat/views/chat_builders/vc_text_message_widget.dart index fc1fe80..52235f6 100644 --- a/lib/chat/views/chat_builders/vc_text_message_widget.dart +++ b/lib/chat/views/chat_builders/vc_text_message_widget.dart @@ -12,7 +12,7 @@ class VcTextMessageWidget extends StatelessWidget { const VcTextMessageWidget({ required this.message, required this.index, - this.padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 10), + this.padding, this.borderRadius, this.onlyEmojiFontSize, this.sentBackgroundColor, @@ -72,10 +72,6 @@ class VcTextMessageWidget extends StatelessWidget { Widget build(BuildContext context) { final theme = Theme.of(context); final scaleTheme = theme.extension()!; - final config = scaleTheme.config; - final scheme = scaleTheme.scheme; - final scale = scaleTheme.scheme.scale(ScaleKind.primary); - final textTheme = theme.textTheme; final scaleChatTheme = scaleTheme.chatTheme(); final chatTheme = scaleChatTheme.chatTheme; @@ -243,15 +239,16 @@ class TimeAndStatus extends StatelessWidget { if (showStatus && status != null) if (status == MessageStatus.sending) SizedBox( - width: 6, - height: 6, + width: 6.scaled(context), + height: 6.scaled(context), child: CircularProgressIndicator( color: textStyle?.color, strokeWidth: 2, ), ) else - Icon(getIconForStatus(status!), color: textStyle?.color, size: 12), + Icon(getIconForStatus(status!), + color: textStyle?.color, size: 12.scaled(context)), ], ); } diff --git a/lib/chat/views/chat_component_widget.dart b/lib/chat/views/chat_component_widget.dart index 7d90d89..8106a48 100644 --- a/lib/chat/views/chat_component_widget.dart +++ b/lib/chat/views/chat_component_widget.dart @@ -132,17 +132,9 @@ class _ChatComponentWidgetState extends State { final scale = scaleTheme.scheme.scale(ScaleKind.primary); final textTheme = theme.textTheme; final scaleChatTheme = scaleTheme.chatTheme(); - // final errorChatTheme = chatTheme.copyWith(color:) - // ..inputTextColor = scaleScheme.errorScale.primary - // ..sendButtonIcon = Image.asset( - // 'assets/icon-send.png', - // color: scaleScheme.errorScale.primary, - // package: 'flutter_chat_ui', - // )) - // .commit(); // Get the enclosing chat component cubit that contains our state - // (created by ChatComponentWidget.builder()) + // (created by ChatComponentWidget.singleContact()) final chatComponentCubit = context.watch(); final chatComponentState = chatComponentCubit.state; @@ -273,14 +265,19 @@ class _ChatComponentWidgetState extends State { // Text message builder textMessageBuilder: (context, message, index) => VcTextMessageWidget( - message: message, - index: index, - // showTime: true, - // showStatus: true, - ), + message: message, + index: index, + padding: const EdgeInsets.symmetric( + vertical: 12, horizontal: 16) + .scaled(context) + // showTime: true, + // showStatus: true, + ), // Composer builder composerBuilder: (ctx) => VcComposerWidget( autofocus: true, + padding: const EdgeInsets.all(4).scaled(context), + gap: 8.scaled(context), focusNode: _focusNode, textInputAction: isAnyMobile ? TextInputAction.newline diff --git a/lib/chat_list/views/chat_single_contact_item_widget.dart b/lib/chat_list/views/chat_single_contact_item_widget.dart index b1645a4..d2594c5 100644 --- a/lib/chat_list/views/chat_single_contact_item_widget.dart +++ b/lib/chat_list/views/chat_single_contact_item_widget.dart @@ -24,11 +24,9 @@ class ChatSingleContactItemWidget extends StatelessWidget { final bool _disabled; @override - // ignore: prefer_expression_function_bodies Widget build( BuildContext context, ) { - final theme = Theme.of(context); final scaleTheme = Theme.of(context).extension()!; final activeChatCubit = context.watch(); @@ -50,18 +48,7 @@ class ChatSingleContactItemWidget extends StatelessWidget { final avatar = StyledAvatar( name: name, - size: 32, - borderColor: scaleTheme.config.useVisualIndicators - ? scaleTheme.scheme.primaryScale.primaryText - : scaleTheme.scheme.primaryScale.subtleBorder, - foregroundColor: _disabled - ? scaleTheme.scheme.grayScale.primaryText - : scaleTheme.scheme.primaryScale.primaryText, - backgroundColor: _disabled - ? scaleTheme.scheme.grayScale.primary - : scaleTheme.scheme.primaryScale.primary, - scaleConfig: scaleTheme.config, - textStyle: theme.textTheme.titleLarge!, + size: 32.scaled(context), ); return StyledSlideTile( @@ -75,7 +62,7 @@ class ChatSingleContactItemWidget extends StatelessWidget { trailing: AvailabilityWidget( availability: availability, color: scaleTileTheme.textColor, - ).fit(fit: BoxFit.scaleDown), + ).fit(fit: BoxFit.fill), onTap: () { singleFuture(activeChatCubit, () async { activeChatCubit.setActiveChat(_localConversationRecordKey); diff --git a/lib/contacts/views/contact_item_widget.dart b/lib/contacts/views/contact_item_widget.dart index 5393fb3..9a76be5 100644 --- a/lib/contacts/views/contact_item_widget.dart +++ b/lib/contacts/views/contact_item_widget.dart @@ -26,27 +26,13 @@ class ContactItemWidget extends StatelessWidget { Widget build( BuildContext context, ) { - final theme = Theme.of(context); - final scale = theme.extension()!; - final scaleConfig = theme.extension()!; - final name = _contact.nameOrNickname; final title = _contact.displayName; final subtitle = _contact.profile.status; final avatar = StyledAvatar( name: name, - size: 34, - borderColor: _disabled - ? scale.grayScale.primaryText - : scale.primaryScale.subtleBorder, - foregroundColor: _disabled - ? scale.grayScale.primaryText - : scale.primaryScale.primaryText, - backgroundColor: - _disabled ? scale.grayScale.primary : scale.primaryScale.primary, - scaleConfig: scaleConfig, - textStyle: theme.textTheme.titleLarge!, + size: 34.scaled(context), ); return StyledSlideTile( diff --git a/lib/contacts/views/contacts_browser.dart b/lib/contacts/views/contacts_browser.dart index 84a2601..0504a7a 100644 --- a/lib/contacts/views/contacts_browser.dart +++ b/lib/contacts/views/contacts_browser.dart @@ -92,7 +92,7 @@ class _ContactsBrowserState extends State final menuParams = StarMenuParameters( shape: MenuShape.linear, - centerOffset: const Offset(0, 64), + centerOffset: Offset(0, 64.scaled(context)), boundaryBackground: BoundaryBackground( color: menuBackgroundColor, decoration: ShapeDecoration( @@ -113,13 +113,14 @@ class _ContactsBrowserState extends State onPressed: onPressed, icon: Icon( iconData, - size: 32, - ).paddingSTEB(0, 8, 0, 8), + size: 32.scaled(context), + ).paddingSTEB(0, 8.scaled(context), 0, 8.scaled(context)), label: Text( text, + textScaler: MediaQuery.of(context).textScaler, maxLines: 2, textAlign: TextAlign.center, - ).paddingSTEB(0, 8, 0, 8)); + ).paddingSTEB(0, 8.scaled(context), 0, 8.scaled(context))); final inviteMenuItems = [ makeMenuButton( @@ -135,14 +136,14 @@ class _ContactsBrowserState extends State onPressed: () async { _invitationMenuController.closeMenu!(); await ScanInvitationDialog.show(context); - }).paddingLTRB(0, 0, 0, 8), + }).paddingLTRB(0, 0, 0, 8.scaled(context)), makeMenuButton( iconData: Icons.contact_page, text: translate('add_contact_sheet.create_invite'), onPressed: () async { _invitationMenuController.closeMenu!(); await CreateInvitationDialog.show(context); - }).paddingLTRB(0, 0, 0, 8), + }).paddingLTRB(0, 0, 0, 8.scaled(context)), ]; return StarMenu( @@ -154,7 +155,7 @@ class _ContactsBrowserState extends State params: menuParams, child: IconButton( onPressed: () {}, - iconSize: 24, + iconSize: 24.scaled(context), icon: Icon(Icons.person_add, color: menuIconColor), tooltip: translate('add_contact_sheet.add_contact')), ); @@ -202,13 +203,13 @@ class _ContactsBrowserState extends State onDoubleTap: _onStartChat, onTap: onContactSelected, onDelete: _onContactDeleted) - .paddingLTRB(0, 4, 0, 0); + .paddingLTRB(0, 4.scaled(context), 0, 0); case ContactsBrowserElementKind.invitation: final invitation = element.invitation!; return ContactInvitationItemWidget( contactInvitationRecord: invitation, disabled: false) - .paddingLTRB(0, 4, 0, 0); + .paddingLTRB(0, 4.scaled(context), 0, 0); } }, filter: (value) { @@ -242,9 +243,11 @@ class _ContactsBrowserState extends State } return filtered; }, - searchFieldHeight: 40, - listViewPadding: const EdgeInsets.fromLTRB(4, 0, 4, 4), - searchFieldPadding: const EdgeInsets.fromLTRB(4, 8, 4, 4), + searchFieldHeight: 40.scaled(context), + listViewPadding: + const EdgeInsets.fromLTRB(4, 0, 4, 4).scaled(context), + searchFieldPadding: + const EdgeInsets.fromLTRB(4, 8, 4, 4).scaled(context), emptyWidget: contactList == null ? waitingPage( text: translate('contact_list.loading_contacts')) @@ -254,8 +257,8 @@ class _ContactsBrowserState extends State searchFieldEnabled: contactList != null, inputDecoration: InputDecoration(labelText: translate('contact_list.search')), - secondaryWidget: - buildInvitationButton(context).paddingLTRB(4, 0, 0, 0)) + secondaryWidget: buildInvitationButton(context) + .paddingLTRB(4.scaled(context), 0, 0, 0)) .expanded() ]); } diff --git a/lib/contacts/views/contacts_page.dart b/lib/contacts/views/contacts_page.dart index 6760a16..c984b57 100644 --- a/lib/contacts/views/contacts_page.dart +++ b/lib/contacts/views/contacts_page.dart @@ -48,6 +48,7 @@ class _ContactsPageState extends State { ), leading: IconButton( icon: const Icon(Icons.arrow_back), + iconSize: 24.scaled(context), onPressed: () { singleFuture((this, _kDoBackArrow), () async { final confirmed = await _onContactSelected(null); @@ -66,21 +67,21 @@ class _ContactsPageState extends State { if (_selectedContact != null) IconButton( icon: const Icon(Icons.chat_bubble), - iconSize: 24, + iconSize: 24.scaled(context), color: appBarTheme.iconColor, tooltip: translate('contacts_dialog.new_chat'), onPressed: () async { await _onChatStarted(_selectedContact!); - }).paddingLTRB(8, 0, 8, 0), + }), if (enableSplit && _selectedContact != null) IconButton( icon: const Icon(Icons.close), - iconSize: 24, + iconSize: 24.scaled(context), color: appBarTheme.iconColor, tooltip: translate('contacts_dialog.close_contact'), onPressed: () async { await _onContactSelected(null); - }).paddingLTRB(8, 0, 8, 0), + }), ]), body: LayoutBuilder(builder: (context, constraint) { final maxWidth = constraint.maxWidth; diff --git a/lib/contacts/views/edit_contact_form.dart b/lib/contacts/views/edit_contact_form.dart index a456b1d..7ab6019 100644 --- a/lib/contacts/views/edit_contact_form.dart +++ b/lib/contacts/views/edit_contact_form.dart @@ -92,16 +92,8 @@ class _EditContactFormState extends State { Widget _editContactForm(BuildContext context) { final theme = Theme.of(context); final scale = theme.extension()!; - final scaleConfig = theme.extension()!; final textTheme = theme.textTheme; - late final Color border; - if (scaleConfig.useVisualIndicators && !scaleConfig.preferBorders) { - border = scale.primaryScale.elementBackground; - } else { - border = scale.primaryScale.subtleBorder; - } - return FormBuilder( key: _formKey, autovalidateMode: AutovalidateMode.onUserInteraction, @@ -117,17 +109,11 @@ class _EditContactFormState extends State { Row(children: [ const Spacer(), StyledAvatar( - name: _currentValueNickname.isNotEmpty - ? _currentValueNickname - : widget.contact.profile.name, - size: 128, - borderColor: border, - foregroundColor: scale.primaryScale.primaryText, - backgroundColor: scale.primaryScale.primary, - scaleConfig: scaleConfig, - textStyle: theme.textTheme.titleLarge! - .copyWith(fontSize: 64), - ).paddingLTRB(0, 0, 0, 16), + name: _currentValueNickname.isNotEmpty + ? _currentValueNickname + : widget.contact.profile.name, + size: 128) + .paddingLTRB(0, 0, 0, 16), const Spacer() ]), SelectableText(widget.contact.profile.name, @@ -211,10 +197,11 @@ class _EditContactFormState extends State { ElevatedButton( onPressed: _isModified ? _doSubmit : null, child: Row(mainAxisSize: MainAxisSize.min, children: [ - const Icon(Icons.check, size: 16).paddingLTRB(0, 0, 4, 0), - Text(widget.submitText).paddingLTRB(0, 0, 4, 0) - ]), - ).paddingSymmetric(vertical: 4).alignAtCenter(), + Icon(Icons.check, size: 24.scaled(context)) + .paddingLTRB(0, 0, 4, 0), + Text(widget.submitText).paddingLTRB(0, 0, 4.scaled(context), 0) + ]).paddingAll(4.scaled(context)), + ).paddingSymmetric(vertical: 4.scaled(context)).alignAtCenter(), ], ), ); diff --git a/lib/layout/default_app_bar.dart b/lib/layout/default_app_bar.dart index de4536a..7742dad 100644 --- a/lib/layout/default_app_bar.dart +++ b/lib/layout/default_app_bar.dart @@ -14,6 +14,7 @@ class DefaultAppBar extends AppBar { super.actions}) : super( toolbarHeight: 40.scaled(context), + leadingWidth: 40.scaled(context), leading: leading ?? Container( margin: const EdgeInsets.all(4).scaled(context), @@ -21,6 +22,7 @@ class DefaultAppBar extends AppBar { color: Colors.black.withAlpha(32), shape: BoxShape.circle), child: SvgPicture.asset('assets/images/vlogo.svg', + width: 24.scaled(context), height: 24.scaled(context)) - .paddingAll(4))); + .paddingAll(4.scaled(context)))); } diff --git a/lib/layout/home/drawer_menu/drawer_menu.dart b/lib/layout/home/drawer_menu/drawer_menu.dart index 7c82148..33f2bc2 100644 --- a/lib/layout/home/drawer_menu/drawer_menu.dart +++ b/lib/layout/home/drawer_menu/drawer_menu.dart @@ -98,11 +98,6 @@ class _DrawerMenuState extends State { final avatar = StyledAvatar( name: name, size: 34.scaled(context), - borderColor: border, - foregroundColor: loggedIn ? scale.primaryText : scale.subtleText, - backgroundColor: loggedIn ? scale.primary : scale.elementBackground, - scaleConfig: scaleConfig, - textStyle: theme.textTheme.titleLarge!, ); return AnimatedPadding( diff --git a/lib/layout/home/home_screen.dart b/lib/layout/home/home_screen.dart index b4c3b58..e774790 100644 --- a/lib/layout/home/home_screen.dart +++ b/lib/layout/home/home_screen.dart @@ -71,8 +71,9 @@ class HomeScreenState extends State context: context, title: translate('splash.beta_title'), child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ - const Icon(Icons.warning, size: 64), + Icon(Icons.warning, size: 64.scaled(context)), RichText( + textScaler: MediaQuery.of(context).textScaler, textAlign: TextAlign.center, text: TextSpan( children: [ @@ -206,34 +207,36 @@ class HomeScreenState extends State .indexWhere((x) => x.superIdentity.recordKey == activeLocalAccount); final canClose = activeIndex != -1; + final drawer = ZoomDrawer( + controller: _zoomDrawerController, + menuScreen: Builder(builder: (context) { + final zoomDrawer = ZoomDrawer.of(context); + zoomDrawer!.stateNotifier.addListener(() { + if (zoomDrawer.isOpen()) { + FocusManager.instance.primaryFocus?.unfocus(); + } + }); + return const DrawerMenu(); + }), + mainScreen: Provider.value( + value: _zoomDrawerController, + child: Builder(builder: _buildAccountPageView)), + borderRadius: 0, + angle: 0, + openCurve: Curves.fastEaseInToSlowEaseOut, + closeCurve: Curves.fastEaseInToSlowEaseOut, + menuScreenTapClose: canClose, + mainScreenTapClose: canClose, + disableDragGesture: !canClose, + mainScreenScale: .25, + slideWidth: min(360, MediaQuery.of(context).size.width * 0.9), + ); + + final drawerWithAvoider = + isWeb ? drawer : KeyboardAvoider(curve: Curves.ease, child: drawer); + return DefaultTextStyle( - style: theme.textTheme.bodySmall!, - child: KeyboardAvoider( - curve: Curves.ease, - child: ZoomDrawer( - controller: _zoomDrawerController, - menuScreen: Builder(builder: (context) { - final zoomDrawer = ZoomDrawer.of(context); - zoomDrawer!.stateNotifier.addListener(() { - if (zoomDrawer.isOpen()) { - FocusManager.instance.primaryFocus?.unfocus(); - } - }); - return const DrawerMenu(); - }), - mainScreen: Provider.value( - value: _zoomDrawerController, - child: Builder(builder: _buildAccountPageView)), - borderRadius: 0, - angle: 0, - openCurve: Curves.fastEaseInToSlowEaseOut, - closeCurve: Curves.fastEaseInToSlowEaseOut, - menuScreenTapClose: canClose, - mainScreenTapClose: canClose, - disableDragGesture: !canClose, - mainScreenScale: .25, - slideWidth: min(360, MediaQuery.of(context).size.width * 0.9), - ))); + style: theme.textTheme.bodySmall!, child: drawerWithAvoider); } //////////////////////////////////////////////////////////////////////////// diff --git a/lib/notifications/views/notifications_preferences.dart b/lib/notifications/views/notifications_preferences.dart index 8dddefd..8918fa9 100644 --- a/lib/notifications/views/notifications_preferences.dart +++ b/lib/notifications/views/notifications_preferences.dart @@ -42,9 +42,10 @@ Widget buildSettingsPageNotificationPreferences( enabled: x.$2, child: Text( x.$3, - style: textTheme.labelSmall, + softWrap: false, + style: textTheme.labelMedium, textAlign: TextAlign.center, - ))); + ).fit(fit: BoxFit.scaleDown))); } return out; } @@ -65,7 +66,8 @@ Widget buildSettingsPageNotificationPreferences( enabled: x.$2, child: Text( x.$3, - style: textTheme.labelSmall, + softWrap: false, + style: textTheme.labelMedium, textAlign: TextAlign.center, ))); } @@ -98,7 +100,8 @@ Widget buildSettingsPageNotificationPreferences( enabled: x.$2, child: Text( x.$3, - style: textTheme.labelSmall, + softWrap: false, + style: textTheme.labelMedium, textAlign: TextAlign.center, ))); } @@ -187,7 +190,7 @@ Widget buildSettingsPageNotificationPreferences( Text( textAlign: TextAlign.right, translate('settings_page.invitation_accepted')) - .paddingAll(8), + .paddingAll(4.scaled(context)), StyledDropdown( items: notificationModeItems(), value: notificationsPreference.onInvitationAcceptedMode, @@ -219,7 +222,7 @@ Widget buildSettingsPageNotificationPreferences( Text( textAlign: TextAlign.right, translate('settings_page.message_received')) - .paddingAll(8), + .paddingAll(4.scaled(context)), StyledDropdown( items: notificationModeItems(), value: notificationsPreference.onMessageReceivedMode, @@ -252,7 +255,7 @@ Widget buildSettingsPageNotificationPreferences( Text( textAlign: TextAlign.right, translate('settings_page.message_sent')) - .paddingAll(8.scaled(context)), + .paddingAll(4.scaled(context)), const SizedBox.shrink(), StyledDropdown( items: soundEffectItems(), diff --git a/lib/settings/settings_page.dart b/lib/settings/settings_page.dart index 679cdd5..810b20e 100644 --- a/lib/settings/settings_page.dart +++ b/lib/settings/settings_page.dart @@ -22,7 +22,8 @@ class SettingsPage extends StatelessWidget { context: context, title: Text(translate('settings_page.titlebar')), leading: IconButton( - icon: const Icon(Icons.arrow_back), + iconSize: 24.scaled(context), + icon: Icon(Icons.arrow_back), onPressed: () => GoRouterHelper(context).pop(), ), actions: [ diff --git a/lib/theme/views/preferences/display_scale_preferences.dart b/lib/theme/views/preferences/display_scale_preferences.dart index a850ca1..84bf97d 100644 --- a/lib/theme/views/preferences/display_scale_preferences.dart +++ b/lib/theme/views/preferences/display_scale_preferences.dart @@ -29,9 +29,9 @@ const _scaleNames = [ ]; const _scaleNumMult = [ - 1, - 1, - 1, + 1 / (1 + 1 / 2), + 1 / (1 + 1 / 3), + 1 / (1 + 1 / 4), 1, 1 + 1 / 4, 1 + 1 / 2, diff --git a/lib/theme/views/styled_widgets/styled_avatar.dart b/lib/theme/views/styled_widgets/styled_avatar.dart index 4d51a02..dde39f2 100644 --- a/lib/theme/views/styled_widgets/styled_avatar.dart +++ b/lib/theme/views/styled_widgets/styled_avatar.dart @@ -8,24 +8,31 @@ class StyledAvatar extends StatelessWidget { const StyledAvatar({ required String name, required double size, - required Color borderColor, - required Color foregroundColor, - required Color backgroundColor, - required ScaleConfig scaleConfig, - required TextStyle textStyle, + bool enabled = true, super.key, ImageProvider? imageProvider, }) : _name = name, _size = size, - _borderColor = borderColor, - _foregroundColor = foregroundColor, - _backgroundColor = backgroundColor, - _scaleConfig = scaleConfig, - _textStyle = textStyle, - _imageProvider = imageProvider; + _imageProvider = imageProvider, + _enabled = enabled; @override Widget build(BuildContext context) { + final theme = Theme.of(context); + final scaleTheme = Theme.of(context).extension()!; + + final borderColor = scaleTheme.config.useVisualIndicators + ? scaleTheme.scheme.primaryScale.primaryText + : scaleTheme.scheme.primaryScale.subtleBorder; + final foregroundColor = !_enabled + ? scaleTheme.scheme.grayScale.primaryText + : scaleTheme.scheme.primaryScale.calloutText; + final backgroundColor = !_enabled + ? scaleTheme.scheme.grayScale.primary + : scaleTheme.scheme.primaryScale.calloutBackground; + final scaleConfig = scaleTheme.config; + final textStyle = theme.textTheme.titleLarge!.copyWith(fontSize: _size / 2); + final abbrev = _name.split(' ').map((s) => s.isEmpty ? '' : s[0]).join(); late final String shortname; if (abbrev.length >= 3) { @@ -39,35 +46,32 @@ class StyledAvatar extends StatelessWidget { width: _size, decoration: BoxDecoration( shape: BoxShape.circle, - border: Border.all( - color: _borderColor, - width: 1 * (_size ~/ 32 + 1), - strokeAlign: BorderSide.strokeAlignOutside)), + border: !scaleConfig.useVisualIndicators + ? null + : Border.all( + color: borderColor, + width: 1 * (_size ~/ 16 + 1), + strokeAlign: BorderSide.strokeAlignOutside)), child: AvatarImage( backgroundImage: _imageProvider, - backgroundColor: - _scaleConfig.useVisualIndicators && !_scaleConfig.preferBorders - ? _foregroundColor - : _backgroundColor, + backgroundColor: scaleConfig.useVisualIndicators + ? foregroundColor + : backgroundColor, child: Text( shortname.isNotEmpty ? shortname : '?', softWrap: false, - style: _textStyle.copyWith( - color: _scaleConfig.useVisualIndicators && - !_scaleConfig.preferBorders - ? _backgroundColor - : _foregroundColor, + textScaler: MediaQuery.of(context).textScaler, + style: textStyle.copyWith( + color: scaleConfig.useVisualIndicators + ? backgroundColor + : foregroundColor, ), - ).fit().paddingAll(_size / 16.scaled(context)))); + ).paddingAll(4.scaled(context)).fit(fit: BoxFit.scaleDown))); } //////////////////////////////////////////////////////////////////////////// final String _name; final double _size; - final Color _borderColor; - final Color _foregroundColor; - final Color _backgroundColor; - final ScaleConfig _scaleConfig; - final TextStyle _textStyle; final ImageProvider? _imageProvider; + final bool _enabled; } diff --git a/lib/theme/views/option_box.dart b/lib/theme/views/styled_widgets/styled_button_box.dart similarity index 75% rename from lib/theme/views/option_box.dart rename to lib/theme/views/styled_widgets/styled_button_box.dart index 06a3293..811e01c 100644 --- a/lib/theme/views/option_box.dart +++ b/lib/theme/views/styled_widgets/styled_button_box.dart @@ -1,10 +1,10 @@ import 'package:awesome_extensions/awesome_extensions.dart'; import 'package:flutter/material.dart'; -import '../theme.dart'; +import '../../theme.dart'; -class OptionBox extends StatelessWidget { - const OptionBox( +class StyledButtonBox extends StatelessWidget { + const StyledButtonBox( {required String instructions, required IconData buttonIcon, required String buttonText, @@ -41,12 +41,15 @@ class OptionBox extends StatelessWidget { onPressed: _onClick, child: Row(mainAxisSize: MainAxisSize.min, children: [ Icon(_buttonIcon, - size: 24, color: scale.primaryScale.appText) - .paddingLTRB(0, 8, 8, 8), + size: 24.scaled(context), + color: scale.primaryScale.appText) + .paddingLTRB(0, 8.scaled(context), + 8.scaled(context), 8.scaled(context)), Text(textAlign: TextAlign.center, _buttonText) - ])).paddingLTRB(0, 12, 0, 0).toCenter() - ]).paddingAll(12)) - .paddingLTRB(24, 0, 24, 12); + ])).paddingLTRB(0, 12.scaled(context), 0, 0).toCenter() + ]).paddingAll(12.scaled(context))) + .paddingLTRB( + 24.scaled(context), 0, 24.scaled(context), 12.scaled(context)); } final String _instructions; diff --git a/lib/theme/views/styled_widgets/styled_checkbox.dart b/lib/theme/views/styled_widgets/styled_checkbox.dart index 505c547..7eb3649 100644 --- a/lib/theme/views/styled_widgets/styled_checkbox.dart +++ b/lib/theme/views/styled_widgets/styled_checkbox.dart @@ -29,19 +29,21 @@ class StyledCheckbox extends StatelessWidget { } Widget ctrl = Row(children: [ - Checkbox( - value: _value, - onChanged: _onChanged == null - ? null - : (value) { - if (value == null) { - return; - } - singleFuture((this, _kStyledCheckboxChanged), () async { - await _onChanged(value); - }); - }), - Text(_label, style: textStyle), + Transform.scale( + scale: 1.scaled(context), + child: Checkbox( + value: _value, + onChanged: _onChanged == null + ? null + : (value) { + if (value == null) { + return; + } + singleFuture((this, _kStyledCheckboxChanged), () async { + await _onChanged(value); + }); + })), + Text(_label, style: textStyle).paddingAll(4.scaled(context)), ]); if (_decoratorLabel != null) { diff --git a/lib/theme/views/styled_widgets/styled_dropdown.dart b/lib/theme/views/styled_widgets/styled_dropdown.dart index 133c597..3af6424 100644 --- a/lib/theme/views/styled_widgets/styled_dropdown.dart +++ b/lib/theme/views/styled_widgets/styled_dropdown.dart @@ -33,6 +33,7 @@ class StyledDropdown extends StatelessWidget { iconDisabledColor: scheme.primaryScale.appText.withAlpha(127), items: _items, value: _value, + style: theme.textTheme.labelLarge, onChanged: _onChanged == null ? null : (value) { diff --git a/lib/theme/views/styled_widgets/styled_slide_tile.dart b/lib/theme/views/styled_widgets/styled_slide_tile.dart index 1ae8596..43b3fd8 100644 --- a/lib/theme/views/styled_widgets/styled_slide_tile.dart +++ b/lib/theme/views/styled_widgets/styled_slide_tile.dart @@ -66,7 +66,6 @@ class StyledSlideTile extends StatelessWidget { } @override - // ignore: prefer_expression_function_bodies Widget build(BuildContext context) { final theme = Theme.of(context); final scaleTheme = theme.extension()!; @@ -91,12 +90,13 @@ class StyledSlideTile extends StatelessWidget { selected: true, scaleKind: a.actionScale); return SlidableAction( - onPressed: disabled ? null : a.onPressed, - backgroundColor: scaleActionTheme.backgroundColor, - foregroundColor: scaleActionTheme.textColor, - icon: subtitle.isEmpty ? a.icon : null, - label: a.label, - padding: const EdgeInsets.all(2)); + onPressed: disabled ? null : a.onPressed, + backgroundColor: scaleActionTheme.backgroundColor, + foregroundColor: scaleActionTheme.textColor, + icon: subtitle.isEmpty ? a.icon : null, + label: a.label, + padding: const EdgeInsets.all(2).scaled(context), + ); }).toList()), startActionPane: startActions.isEmpty ? null @@ -109,17 +109,18 @@ class StyledSlideTile extends StatelessWidget { scaleKind: a.actionScale); return SlidableAction( - onPressed: disabled ? null : a.onPressed, - backgroundColor: scaleActionTheme.backgroundColor, - foregroundColor: scaleActionTheme.textColor, - icon: subtitle.isEmpty ? a.icon : null, - label: a.label, - padding: const EdgeInsets.all(2)); + onPressed: disabled ? null : a.onPressed, + backgroundColor: scaleActionTheme.backgroundColor, + foregroundColor: scaleActionTheme.textColor, + icon: subtitle.isEmpty ? a.icon : null, + label: a.label, + padding: const EdgeInsets.all(2).scaled(context), + ); }).toList()), child: Padding( padding: scaleTheme.config.useVisualIndicators ? EdgeInsets.zero - : const EdgeInsets.fromLTRB(0, 2, 0, 2), + : const EdgeInsets.fromLTRB(0, 2, 0, 2).scaled(context), child: GestureDetector( onDoubleTap: onDoubleTap, child: ListTile( @@ -131,7 +132,8 @@ class StyledSlideTile extends StatelessWidget { softWrap: false, ), subtitle: subtitle.isNotEmpty ? Text(subtitle) : null, - minTileHeight: 52, + contentPadding: const EdgeInsets.fromLTRB(8, 4, 8, 4) + .scaled(context), iconColor: scaleTileTheme.textColor, textColor: scaleTileTheme.textColor, leading: diff --git a/lib/theme/views/views.dart b/lib/theme/views/views.dart index cffc364..1144440 100644 --- a/lib/theme/views/views.dart +++ b/lib/theme/views/views.dart @@ -1,10 +1,10 @@ export 'enter_password.dart'; export 'enter_pin.dart'; -export 'option_box.dart'; export 'pop_control.dart'; export 'preferences/preferences.dart'; export 'recovery_key_widget.dart'; export 'responsive.dart'; export 'scanner_error_widget.dart'; +export 'styled_widgets/styled_button_box.dart'; export 'styled_widgets/styled_widgets.dart'; export 'widget_helpers.dart'; diff --git a/lib/veilid_processor/views/developer.dart b/lib/veilid_processor/views/developer.dart index 51b452e..c03b6bf 100644 --- a/lib/veilid_processor/views/developer.dart +++ b/lib/veilid_processor/views/developer.dart @@ -225,11 +225,13 @@ class _DeveloperPageState extends State { context: context, title: Text(translate('developer.title')), leading: IconButton( + iconSize: 24.scaled(context), icon: Icon(Icons.arrow_back, color: scale.primaryScale.borderText), onPressed: () => GoRouterHelper(context).pop(), ), actions: [ IconButton( + iconSize: 24.scaled(context), icon: const Icon(Icons.copy), color: scale.primaryScale.borderText, disabledColor: scale.primaryScale.borderText.withAlpha(0x3F), @@ -239,6 +241,7 @@ class _DeveloperPageState extends State { await copySelection(context); }), IconButton( + iconSize: 24.scaled(context), icon: const Icon(Icons.copy_all), color: scale.primaryScale.borderText, disabledColor: scale.primaryScale.borderText.withAlpha(0x3F), @@ -246,6 +249,7 @@ class _DeveloperPageState extends State { await copyAll(context); }), IconButton( + iconSize: 24.scaled(context), icon: const Icon(Icons.clear_all), color: scale.primaryScale.borderText, disabledColor: scale.primaryScale.borderText.withAlpha(0x3F), @@ -260,7 +264,7 @@ class _DeveloperPageState extends State { } }), SizedBox.fromSize( - size: const Size(140, 48), + size: Size(140.scaled(context), 48), child: CustomDropdown( items: _logLevelDropdownItems, initialItem: _logLevelDropdownItems @@ -301,6 +305,7 @@ class _DeveloperPageState extends State { Image.asset('assets/images/ellet.png'), TerminalView(globalDebugTerminal, textStyle: kDefaultTerminalStyle, + textScaler: TextScaler.noScaling, controller: _terminalController, keyboardType: TextInputType.none, backgroundOpacity: _showEllet ? 0.75 : 1.0,