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 SignInAnonymousButton(),
const VSpace(spacing), const VSpace(spacing),
Row( if (isAuthEnabled) ...[
mainAxisAlignment: MainAxisAlignment.center, Row(
children: [ mainAxisAlignment: MainAxisAlignment.center,
const Expanded(child: Divider()), children: [
Padding( const Expanded(child: Divider()),
padding: const EdgeInsets.symmetric(horizontal: 8), Padding(
child: Text( padding: const EdgeInsets.symmetric(horizontal: 8),
LocaleKeys.signIn_or.tr(), child: Text(
style: style.textTheme.bodyMedium?.copyWith( LocaleKeys.signIn_or.tr(),
color: style.colorScheme.onSecondary, style: style.textTheme.bodyMedium?.copyWith(
color: style.colorScheme.onSecondary,
),
), ),
), ),
), const Expanded(child: Divider()),
const Expanded(child: Divider()), ],
], ),
), const VSpace(spacing),
const VSpace(spacing), const ThirdPartySignInButtons(),
if (isAuthEnabled) const ThirdPartySignInButtons(), ],
if (!isAuthEnabled)
const Spacer(
flex: 2,
),
const VSpace(spacing), 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) { Widget build(BuildContext context) {
// Get themeMode from AppearanceSettingsCubit // 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. // 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 == final themeModeFromCubit =
ThemeMode.dark; context.read<AppearanceSettingsCubit>().state.themeMode;
final isDarkMode = themeModeFromCubit == ThemeMode.system
? MediaQuery.of(context).platformBrightness == Brightness.dark
: themeModeFromCubit == ThemeMode.dark;
return Column( return Column(
children: [ children: [
@ -78,35 +82,47 @@ class _ThirdPartySignInButton extends StatelessWidget {
final style = Theme.of(context); final style = Theme.of(context);
final isMobile = PlatformExtension.isMobile; final isMobile = PlatformExtension.isMobile;
if (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 Container(
return LayoutBuilder( height: 48,
builder: (context, constraints) { decoration: BoxDecoration(
return SizedBox( borderRadius: const BorderRadius.all(
height: 48, Radius.circular(4),
child: OutlinedButton.icon( ),
icon: Container( border: Border.all(
width: constraints.maxWidth / 4, color: style.colorScheme.outline,
alignment: Alignment.centerRight, width: 0.5,
child: SizedBox( ),
width: 24, ),
child: FlowySvg( child: Center(
icon, child: Row(
blendMode: null, 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( const HSpace(8),
padding: const EdgeInsets.only(left: 4), SizedBox(
alignment: Alignment.centerLeft, // To fit the longest label 'Log in with Discord'
width: 135,
child: Text( child: Text(
labelText, labelText,
style: Theme.of(context).textTheme.titleSmall, style: Theme.of(context).textTheme.titleSmall,
), ),
), ),
onPressed: onPressed, ],
), ),
); ),
},
); );
} }
// In desktop, the width of button is limited by [AuthFormContainer] // In desktop, the width of button is limited by [AuthFormContainer]