From e66c4c7067176cedab3988c591f2012d92acbcb5 Mon Sep 17 00:00:00 2001 From: Tommy Chow Date: Tue, 28 Dec 2021 22:52:29 -0500 Subject: [PATCH] Add sectioned settings & section header widget --- lib/core/settings/account_settings.dart | 32 +++++++++++++++ lib/core/settings/chat_settings.dart | 34 ++++++++++++++++ lib/core/settings/profile_card.dart | 18 ++++++--- lib/core/settings/settings.dart | 39 +++++------------- lib/core/settings/video_settings.dart | 34 ++++++++++++++++ .../chat/emote_menu/emote_menu_panel.dart | 40 ++++--------------- lib/widgets/section_header.dart | 23 +++++++++++ 7 files changed, 153 insertions(+), 67 deletions(-) create mode 100644 lib/core/settings/account_settings.dart create mode 100644 lib/core/settings/chat_settings.dart create mode 100644 lib/core/settings/video_settings.dart create mode 100644 lib/widgets/section_header.dart diff --git a/lib/core/settings/account_settings.dart b/lib/core/settings/account_settings.dart new file mode 100644 index 00000000..ea54be6b --- /dev/null +++ b/lib/core/settings/account_settings.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; +import 'package:frosty/core/auth/auth_store.dart'; +import 'package:frosty/core/settings/profile_card.dart'; +import 'package:frosty/core/settings/settings_store.dart'; +import 'package:frosty/widgets/section_header.dart'; + +class AccountSettings extends StatelessWidget { + final SettingsStore settingsStore; + final AuthStore authStore; + + const AccountSettings({ + Key? key, + required this.settingsStore, + required this.authStore, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Observer( + builder: (context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SectionHeader('ACCOUNT'), + ProfileCard(authStore: authStore), + ], + ); + }, + ); + } +} diff --git a/lib/core/settings/chat_settings.dart b/lib/core/settings/chat_settings.dart new file mode 100644 index 00000000..d24d67f1 --- /dev/null +++ b/lib/core/settings/chat_settings.dart @@ -0,0 +1,34 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; +import 'package:frosty/core/settings/settings_store.dart'; +import 'package:frosty/widgets/section_header.dart'; + +class ChatSettings extends StatelessWidget { + final SettingsStore settingsStore; + + const ChatSettings({Key? key, required this.settingsStore}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Observer( + builder: (context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SectionHeader('CHAT'), + SwitchListTile.adaptive( + title: const Text('Hide Banned Messages'), + value: settingsStore.hideBannedMessages, + onChanged: (newValue) => settingsStore.hideBannedMessages = newValue, + ), + SwitchListTile.adaptive( + title: const Text('Enable Zero-Width Emotes'), + value: settingsStore.zeroWidthEnabled, + onChanged: (newValue) => settingsStore.zeroWidthEnabled = newValue, + ), + ], + ); + }, + ); + } +} diff --git a/lib/core/settings/profile_card.dart b/lib/core/settings/profile_card.dart index 7c3628d0..e0a7bad5 100644 --- a/lib/core/settings/profile_card.dart +++ b/lib/core/settings/profile_card.dart @@ -12,7 +12,7 @@ class ProfileCard extends StatelessWidget { return showDialog( context: context, builder: (context) => AlertDialog( - title: const Text('Logout'), + title: const Text('Log Out'), content: const Text('Are you sure you want to log out?'), actions: [ TextButton( @@ -43,12 +43,20 @@ class ProfileCard extends StatelessWidget { foregroundImage: CachedNetworkImageProvider(authStore.user.details!.profileImageUrl), ), title: Text(authStore.user.details!.displayName), - onTap: () => _showDialog(context), + trailing: OutlinedButton( + onPressed: () => _showDialog(context), + child: const Text('Log Out'), + style: OutlinedButton.styleFrom(primary: Colors.red), + ), ); } - return ElevatedButton( - onPressed: authStore.login, - child: const Text('Login'), + return Container( + padding: const EdgeInsets.all(10.0), + width: double.infinity, + child: OutlinedButton( + onPressed: authStore.login, + child: const Text('Log In'), + ), ); }, ), diff --git a/lib/core/settings/settings.dart b/lib/core/settings/settings.dart index 45001090..e90d418b 100644 --- a/lib/core/settings/settings.dart +++ b/lib/core/settings/settings.dart @@ -1,8 +1,9 @@ import 'package:flutter/material.dart'; -import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:frosty/core/auth/auth_store.dart'; -import 'package:frosty/core/settings/profile_card.dart'; +import 'package:frosty/core/settings/account_settings.dart'; +import 'package:frosty/core/settings/chat_settings.dart'; import 'package:frosty/core/settings/settings_store.dart'; +import 'package:frosty/core/settings/video_settings.dart'; import 'package:provider/provider.dart'; class Settings extends StatelessWidget { @@ -16,34 +17,12 @@ class Settings extends StatelessWidget { appBar: AppBar( title: const Text('Settings'), ), - body: Observer( - builder: (_) { - return ListView( - children: [ - ProfileCard(authStore: context.read()), - SwitchListTile.adaptive( - title: const Text('Enable Video'), - value: settingsStore.videoEnabled, - onChanged: (newValue) => settingsStore.videoEnabled = newValue, - ), - SwitchListTile.adaptive( - title: const Text('Enable Video Overlay'), - value: settingsStore.overlayEnabled, - onChanged: (newValue) => settingsStore.overlayEnabled = newValue, - ), - SwitchListTile.adaptive( - title: const Text('Hide Banned Messages'), - value: settingsStore.hideBannedMessages, - onChanged: (newValue) => settingsStore.hideBannedMessages = newValue, - ), - SwitchListTile.adaptive( - title: const Text('Enable Zero-Width Emotes'), - value: settingsStore.zeroWidthEnabled, - onChanged: (newValue) => settingsStore.zeroWidthEnabled = newValue, - ), - ], - ); - }, + body: ListView( + children: [ + AccountSettings(settingsStore: settingsStore, authStore: context.read()), + VideoSettings(settingsStore: settingsStore), + ChatSettings(settingsStore: settingsStore), + ], ), ); } diff --git a/lib/core/settings/video_settings.dart b/lib/core/settings/video_settings.dart new file mode 100644 index 00000000..73637af6 --- /dev/null +++ b/lib/core/settings/video_settings.dart @@ -0,0 +1,34 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; +import 'package:frosty/core/settings/settings_store.dart'; +import 'package:frosty/widgets/section_header.dart'; + +class VideoSettings extends StatelessWidget { + final SettingsStore settingsStore; + + const VideoSettings({Key? key, required this.settingsStore}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Observer( + builder: (context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SectionHeader('VIDEO'), + SwitchListTile.adaptive( + title: const Text('Enable Video'), + value: settingsStore.videoEnabled, + onChanged: (newValue) => settingsStore.videoEnabled = newValue, + ), + SwitchListTile.adaptive( + title: const Text('Enable Video Overlay'), + value: settingsStore.overlayEnabled, + onChanged: (newValue) => settingsStore.overlayEnabled = newValue, + ), + ], + ); + }, + ); + } +} diff --git a/lib/screens/channel/chat/emote_menu/emote_menu_panel.dart b/lib/screens/channel/chat/emote_menu/emote_menu_panel.dart index 072c7878..a80777e3 100644 --- a/lib/screens/channel/chat/emote_menu/emote_menu_panel.dart +++ b/lib/screens/channel/chat/emote_menu/emote_menu_panel.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:frosty/models/emotes.dart'; import 'package:frosty/screens/channel/chat/emote_menu/emote_menu_section.dart'; +import 'package:frosty/widgets/section_header.dart'; class EmoteMenuPanel extends StatelessWidget { final TextEditingController textController; @@ -10,9 +11,6 @@ class EmoteMenuPanel extends StatelessWidget { @override Widget build(BuildContext context) { - const headerStyle = TextStyle(fontSize: 20, fontWeight: FontWeight.bold); - const headerPadding = EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 5.0); - final globalEmotes = emotes .where((emote) => emote.type == EmoteType.twitchGlobal || @@ -37,14 +35,10 @@ class EmoteMenuPanel extends StatelessWidget { slivers: [ if (globalEmotes.isNotEmpty) ...[ const SliverToBoxAdapter( - child: Padding( - padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0), - child: Text( - 'Global Emotes', - style: headerStyle, - ), - ), - ), + child: SectionHeader( + 'Global Emotes', + padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0), + )), EmoteMenuSection( textController: textController, emotes: globalEmotes, @@ -52,13 +46,7 @@ class EmoteMenuPanel extends StatelessWidget { ], if (channelEmotes.isNotEmpty) ...[ const SliverToBoxAdapter( - child: Padding( - padding: headerPadding, - child: Text( - 'Channel Emotes', - style: headerStyle, - ), - ), + child: SectionHeader('Channel Emotes'), ), EmoteMenuSection( textController: textController, @@ -67,13 +55,7 @@ class EmoteMenuPanel extends StatelessWidget { ], if (subEmotes.isNotEmpty) ...[ const SliverToBoxAdapter( - child: Padding( - padding: headerPadding, - child: Text( - 'Subbed Emotes', - style: headerStyle, - ), - ), + child: SectionHeader('Subbed Emotes'), ), EmoteMenuSection( textController: textController, @@ -82,13 +64,7 @@ class EmoteMenuPanel extends StatelessWidget { ], if (miscEmotes.isNotEmpty) ...[ const SliverToBoxAdapter( - child: Padding( - padding: headerPadding, - child: Text( - 'Unlocked Emotes', - style: headerStyle, - ), - ), + child: SectionHeader('Unlocked Emotes'), ), EmoteMenuSection( textController: textController, diff --git a/lib/widgets/section_header.dart b/lib/widgets/section_header.dart new file mode 100644 index 00000000..6e7c77b0 --- /dev/null +++ b/lib/widgets/section_header.dart @@ -0,0 +1,23 @@ +import 'package:flutter/material.dart'; + +class SectionHeader extends StatelessWidget { + final String text; + final EdgeInsets padding; + + const SectionHeader( + this.text, { + Key? key, + this.padding = const EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 5.0), + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Padding( + padding: padding, + child: Text( + text, + style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold), + ), + ); + } +}