0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make UI adapt to bigger font sizes (#465)

Browse source 
## Description 

In a number of screens, there were issues with the UI when system font
size is increased and even hindering basic usability in some cases. This
includes,
- Text getting clipped
- Buttons not visible/clickable
- Alignment issues

All obvious issues that I came across when testing has been fixed in
this PR.
This commit is contained in:
Ashil 2024-02-21 12:06:57 +05:30 • committed by GitHub
parent 51e3347ace
commit e352a234e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 212 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

209
lib/onboarding/view/onboarding_page.dart
View file

@ -58,121 +58,112 @@ class _OnboardingPageState extends State<OnboardingPage> {
body: SafeArea(
child: Center(
child: SingleChildScrollView(
child: ConstrainedBox(
constraints:
const BoxConstraints.tightFor(height: 800, width: 450),
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
child: Column(
children: [
Column(
children: [
kDebugMode
? GestureDetector(
child: const Align(
alignment: Alignment.topRight,
child: Text("Lang"),
),
onTap: () async {
final locale = await getLocale();
routeToPage(
context,
LanguageSelectorPage(
appSupportedLocales,
(locale) async {
await setLocale(locale);
App.setLocale(context, locale);
},
locale,
),
).then((value) {
setState(() {});
});
},
)
: const SizedBox(),
Image.asset(
"assets/sheild-front-gradient.png",
width: 200,
height: 200,
),
const SizedBox(height: 12),
const Text(
"ente",
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
fontSize: 42,
),
),
const SizedBox(height: 4),
Text(
"Authenticator",
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 32),
Text(
l10n.onBoardingBody,
textAlign: TextAlign.center,
style:
Theme.of(context).textTheme.titleLarge!.copyWith(
color: Colors.white38,
// color: Theme.of(context)
// .colorScheme
// .mutedTextColor,
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
child: Column(
children: [
Column(
children: [
kDebugMode
? GestureDetector(
child: const Align(
alignment: Alignment.topRight,
child: Text("Lang"),
),
onTap: () async {
final locale = await getLocale();
routeToPage(
context,
LanguageSelectorPage(
appSupportedLocales,
(locale) async {
await setLocale(locale);
App.setLocale(context, locale);
},
locale,
),
),
],
),
const SizedBox(height: 100),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: GradientButton(
onTap: _navigateToSignUpPage,
text: l10n.newUser,
).then((value) {
setState(() {});
});
},
)
: const SizedBox(),
Image.asset(
"assets/sheild-front-gradient.png",
width: 200,
height: 200,
),
),
const SizedBox(height: 4),
Container(
width: double.infinity,
padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
child: Hero(
tag: "log_in",
child: ElevatedButton(
style: Theme.of(context)
.colorScheme
.optionalActionButtonStyle,
onPressed: _navigateToSignInPage,
child: Text(
l10n.existingUser,
style: const TextStyle(
color: Colors.black, // same for both themes
const SizedBox(height: 12),
const Text(
"ente",
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
fontSize: 42,
),
),
const SizedBox(height: 4),
Text(
"Authenticator",
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 32),
Text(
l10n.onBoardingBody,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Colors.white38,
),
),
],
),
const SizedBox(height: 100),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: GradientButton(
onTap: _navigateToSignUpPage,
text: l10n.newUser,
),
),
const SizedBox(height: 4),
Container(
width: double.infinity,
padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
child: Hero(
tag: "log_in",
child: ElevatedButton(
style: Theme.of(context)
.colorScheme
.optionalActionButtonStyle,
onPressed: _navigateToSignInPage,
child: Text(
l10n.existingUser,
style: const TextStyle(
color: Colors.black, // same for both themes
),
),
),
),
const SizedBox(height: 4),
Container(
width: double.infinity,
padding: const EdgeInsets.only(top: 20, bottom: 20),
child: GestureDetector(
onTap: _optForOfflineMode,
child: Center(
child: Text(
l10n.useOffline,
style: body.copyWith(
color:
Theme.of(context).colorScheme.mutedTextColor,
),
),
const SizedBox(height: 4),
Container(
width: double.infinity,
padding: const EdgeInsets.only(top: 20, bottom: 20),
child: GestureDetector(
onTap: _optForOfflineMode,
child: Center(
child: Text(
l10n.useOffline,
style: body.copyWith(
color: Theme.of(context).colorScheme.mutedTextColor,
),
),
),
),
],
),
),
],
),
),
),
@ -183,13 +174,16 @@ class _OnboardingPageState extends State<OnboardingPage> {
Future<void> _optForOfflineMode() async {
bool canCheckBio = await LocalAuthentication().canCheckBiometrics;
if(!canCheckBio) {
showToast(context, "Sorry, biometric authentication is not supported on this device.");
if (!canCheckBio) {
showToast(
context,
"Sorry, biometric authentication is not supported on this device.",
);
return;
}
final bool hasOptedBefore = Configuration.instance.hasOptedForOfflineMode();
ButtonResult? result;
if(!hasOptedBefore) {
if (!hasOptedBefore) {
result = await showChoiceActionSheet(
context,
title: context.l10n.warning,
@ -208,7 +202,6 @@ class _OnboardingPageState extends State<OnboardingPage> {
),
);
}
}
void _navigateToSignUpPage() {

40
lib/ui/account/password_reentry_page.dart
View file

@ -260,8 +260,8 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Wrap(
alignment: WrapAlignment.spaceBetween,
children: [
GestureDetector(
behavior: HitTestBehavior.opaque,
@ -274,17 +274,13 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
),
);
},
child: Center(
child: Text(
context.l10n.forgotPassword,
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(
fontSize: 14,
decoration: TextDecoration.underline,
),
),
child: Text(
context.l10n.forgotPassword,
style:
Theme.of(context).textTheme.titleMedium!.copyWith(
fontSize: 14,
decoration: TextDecoration.underline,
),
),
),
GestureDetector(
@ -300,17 +296,13 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
Navigator.of(context)
.popUntil((route) => route.isFirst);
},
child: Center(
child: Text(
context.l10n.changeEmail,
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(
fontSize: 14,
decoration: TextDecoration.underline,
),
),
child: Text(
context.l10n.changeEmail,
style:
Theme.of(context).textTheme.titleMedium!.copyWith(
fontSize: 14,
decoration: TextDecoration.underline,
),
),
),
],

6
lib/ui/common/dynamic_fab.dart
View file

@ -1,5 +1,3 @@
import 'dart:math' as math;
import 'package:ente_auth/ente_theme_data.dart';
@ -62,10 +60,10 @@ class DynamicFAB extends StatelessWidget {
} else {
return Container(
width: double.infinity,
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: OutlinedButton(
onPressed: isFormValid! ? onPressedFunction as void Function()? : null,
onPressed:
isFormValid! ? onPressedFunction as void Function()? : null,
child: Text(buttonText!),
),
);

58
lib/ui/home/coach_mark_widget.dart
View file

@ -21,43 +21,37 @@ class CoachMarkWidget extends StatelessWidget {
children: [
Expanded(
child: Container(
width: double.infinity,
color: Theme.of(context).colorScheme.background.withOpacity(0.1),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
child: Row(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.swipe_left,
size: 42,
),
const SizedBox(
height: 24,
),
Text(
l10n.swipeHint,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(
height: 36,
),
SizedBox(
width: 160,
child: OutlinedButton(
onPressed: () async {
await PreferenceService.instance
.setHasShownCoachMark(true);
Bus.instance.fire(CodesUpdatedEvent());
},
child: Text(l10n.ok),
),
),
],
const Icon(
Icons.swipe_left,
size: 42,
),
const SizedBox(
height: 12,
),
Text(
l10n.swipeHint,
style: Theme.of(context).textTheme.titleLarge,
textAlign: TextAlign.center,
),
const SizedBox(
height: 16,
),
SizedBox(
width: 160,
child: OutlinedButton(
onPressed: () async {
await PreferenceService.instance
.setHasShownCoachMark(true);
Bus.instance.fire(CodesUpdatedEvent());
},
child: Text(l10n.ok),
),
),
],
),

135
lib/ui/home/home_empty_state.dart
View file

@ -20,79 +20,76 @@ class HomeEmptyStateWidget extends StatelessWidget {
final l10n = context.l10n;
return SingleChildScrollView(
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints.tightFor(height: 800, width: 450),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Image.asset(
"assets/wallet-front-gradient.png",
width: 200,
height: 200,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Image.asset(
"assets/wallet-front-gradient.png",
width: 200,
height: 200,
),
Text(
l10n.setupFirstAccount,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 64),
SizedBox(
width: 400,
child: OutlinedButton(
onPressed: onScanTap,
child: Text(l10n.importScanQrCode),
),
Text(
l10n.setupFirstAccount,
),
const SizedBox(height: 18),
SizedBox(
width: 400,
child: OutlinedButton(
onPressed: onManuallySetupTap,
child: Text(l10n.importEnterSetupKey),
),
),
const SizedBox(height: 54),
InkWell(
onTap: () {
routeToPage(context, ImportCodePage());
},
child: Text(
l10n.importCodes,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineMedium,
style: getEnteTextTheme(context)
.bodyFaint
.copyWith(decoration: TextDecoration.underline),
),
const SizedBox(height: 64),
SizedBox(
width: 400,
child: OutlinedButton(
onPressed: onScanTap,
child: Text(l10n.importScanQrCode),
),
),
const SizedBox(height: 18),
InkWell(
onTap: () {
showModalBottomSheet<void>(
backgroundColor:
Theme.of(context).colorScheme.background,
barrierColor: Colors.black87,
context: context,
builder: (context) {
return const FAQQuestionsWidget();
},
);
},
child: Text(
l10n.faq,
textAlign: TextAlign.center,
style: getEnteTextTheme(context)
.bodyFaint
.copyWith(decoration: TextDecoration.underline),
),
const SizedBox(height: 18),
SizedBox(
width: 400,
child: OutlinedButton(
onPressed: onManuallySetupTap,
child: Text(l10n.importEnterSetupKey),
),
),
const SizedBox(height: 54),
InkWell(
onTap: () {
routeToPage(context, ImportCodePage());
},
child: Text(
l10n.importCodes,
textAlign: TextAlign.center,
style: getEnteTextTheme(context)
.bodyFaint
.copyWith(decoration: TextDecoration.underline),
),
),
const SizedBox(height: 18),
InkWell(
onTap: () {
showModalBottomSheet<void>(
backgroundColor:
Theme.of(context).colorScheme.background,
barrierColor: Colors.black87,
context: context,
builder: (context) {
return const FAQQuestionsWidget();
},
);
},
child: Text(
l10n.faq,
textAlign: TextAlign.center,
style: getEnteTextTheme(context)
.bodyFaint
.copyWith(decoration: TextDecoration.underline),
),
),
],
),
],
),
),
],
),
],
),
),
),

2
lib/ui/settings/data/import/import_service.dart
View file

@ -3,9 +3,9 @@ import 'package:ente_auth/ui/settings/data/import/aegis_import.dart';
import 'package:ente_auth/ui/settings/data/import/bitwarden_import.dart';
import 'package:ente_auth/ui/settings/data/import/encrypted_ente_import.dart';
import 'package:ente_auth/ui/settings/data/import/google_auth_import.dart';
import 'package:ente_auth/ui/settings/data/import/lastpass_import.dart';
import 'package:ente_auth/ui/settings/data/import/plain_text_import.dart';
import 'package:ente_auth/ui/settings/data/import/raivo_plain_text_import.dart';
import 'package:ente_auth/ui/settings/data/import/lastpass_import.dart';
import 'package:ente_auth/ui/settings/data/import_page.dart';
import 'package:flutter/cupertino.dart';