Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: improve UI in MobileSignInScreen (#4048)

Browse Source
This commit is contained in:
Yijing Huang 2023-11-29 19:03:25 -07:00 committed by GitHub
parent 6b4d4fef15
commit 068245eec9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_sign_in_screen.dart
View File

@ -69,24 +69,30 @@ class MobileSignInScreen extends StatelessWidget {
),
const SignInAnonymousButton(),
const VSpace(spacing),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Expanded(child: Divider()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
LocaleKeys.signIn_or.tr(),
style: style.textTheme.bodyMedium?.copyWith(
color: style.colorScheme.onSecondary,
if (isAuthEnabled) ...[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Expanded(child: Divider()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
LocaleKeys.signIn_or.tr(),
style: style.textTheme.bodyMedium?.copyWith(
color: style.colorScheme.onSecondary,
),
),
),
),
const Expanded(child: Divider()),
],
),
const VSpace(spacing),
if (isAuthEnabled) const ThirdPartySignInButtons(),
const Expanded(child: Divider()),
],
),
const VSpace(spacing),
const ThirdPartySignInButtons(),
],
if (!isAuthEnabled)
const Spacer(
flex: 2,
),
const VSpace(spacing),
],
),

64
frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_buttons.dart
View File

@ -20,9 +20,13 @@ class ThirdPartySignInButtons extends StatelessWidget {
Widget build(BuildContext context) {
// Get themeMode from AppearanceSettingsCubit
// When user changes themeMode, it changes the state in AppearanceSettingsCubit, but the themeMode for the MaterialApp won't change, it only got updated(get value from AppearanceSettingsCubit) when user open the app again. Thus, we should get themeMode from AppearanceSettingsCubit rather than MediaQuery.
final isDarkMode =
context.read<AppearanceSettingsCubit>().state.themeMode ==
ThemeMode.dark;
final themeModeFromCubit =
context.read<AppearanceSettingsCubit>().state.themeMode;
final isDarkMode = themeModeFromCubit == ThemeMode.system
? MediaQuery.of(context).platformBrightness == Brightness.dark
: themeModeFromCubit == ThemeMode.dark;
return Column(
children: [
@ -78,35 +82,47 @@ class _ThirdPartySignInButton extends StatelessWidget {
final style = Theme.of(context);
final isMobile = PlatformExtension.isMobile;
if (isMobile) {
// Use LayoutBuilder to get the maxWidth of parent widget(Column) and set the icon occupied area to 1/4 of maxWidth.
return LayoutBuilder(
builder: (context, constraints) {
return SizedBox(
height: 48,
child: OutlinedButton.icon(
icon: Container(
width: constraints.maxWidth / 4,
alignment: Alignment.centerRight,
child: SizedBox(
width: 24,
child: FlowySvg(
icon,
blendMode: null,
return Container(
height: 48,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(4),
),
border: Border.all(
color: style.colorScheme.outline,
width: 0.5,
),
),
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
// The icon could be in different height as original aspect ratio, we use a fixed sizebox to wrap it to make sure they all occupy the same space.
width: 30,
height: 30,
child: Center(
child: SizedBox(
width: 24,
child: FlowySvg(
icon,
blendMode: null,
),
),
),
),
label: Container(
padding: const EdgeInsets.only(left: 4),
alignment: Alignment.centerLeft,
const HSpace(8),
SizedBox(
// To fit the longest label 'Log in with Discord'
width: 135,
child: Text(
labelText,
style: Theme.of(context).textTheme.titleSmall,
),
),
onPressed: onPressed,
),
);
},
],
),
),
);
}
// In desktop, the width of button is limited by [AuthFormContainer]