Add dividers everywhere

This commit is contained in:
Tommy Chow 2023-10-19 12:01:46 -04:00
parent 072dafa3a0
commit 5f0d349fdb
8 changed files with 98 additions and 67 deletions

View file

@ -45,7 +45,7 @@ class Chat extends StatelessWidget {
builder: (context) {
return ListView.builder(
reverse: true,
padding: EdgeInsets.zero,
padding: const EdgeInsets.only(bottom: 8),
addAutomaticKeepAlives: false,
controller: chatStore.scrollController,
itemCount: chatStore.renderMessages.length,

View file

@ -72,7 +72,7 @@ class ChatDetails extends StatelessWidget {
children: [
const SectionHeader(
'Sleep timer',
padding: EdgeInsets.fromLTRB(16, 0, 16, 4),
padding: EdgeInsets.symmetric(horizontal: 16),
),
Expanded(
child: ListView(
@ -145,14 +145,14 @@ class ChatDetails extends StatelessWidget {
final children = [
const SectionHeader(
'Chat modes',
padding: EdgeInsets.fromLTRB(16, 0, 16, 4),
padding: EdgeInsets.symmetric(horizontal: 16),
),
ListTile(
title: ChatModes(roomState: chatDetailsStore.roomState),
),
const SectionHeader(
'More',
padding: EdgeInsets.fromLTRB(16, 12, 16, 4),
padding: EdgeInsets.symmetric(horizontal: 16),
),
ListTile(
leading: const Icon(Icons.people_outline),

View file

@ -61,6 +61,7 @@ class ChatBottomBar extends StatelessWidget {
return Column(
children: [
const Divider(),
if (chatStore.settings.autocomplete &&
chatStore.showEmoteAutocomplete &&
matchingEmotes.isNotEmpty) ...[

View file

@ -42,9 +42,9 @@ class ReplyThread extends StatelessWidget {
style: DefaultTextStyle.of(context)
.style
.copyWith(fontSize: chatStore.settings.fontSize),
child: ListView(
shrinkWrap: true,
primary: false,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SectionHeader(
'Reply thread',
@ -66,23 +66,31 @@ class ReplyThread extends StatelessWidget {
),
),
),
const Divider(
indent: 12,
endIndent: 12,
),
...chatStore.messages
.where(
(message) =>
message.tags['reply-parent-msg-id'] ==
selectedMessage.tags['reply-parent-msg-id'],
)
.map(
(message) => ChatMessage(
isModal: true,
ircMessage: message,
chatStore: chatStore,
Row(
children: [
const SizedBox(width: 8),
Expanded(
child: ListView(
shrinkWrap: true,
primary: false,
children: chatStore.messages
.where(
(message) =>
message.tags['reply-parent-msg-id'] ==
selectedMessage.tags['reply-parent-msg-id'],
)
.map(
(message) => ChatMessage(
isModal: true,
ircMessage: message,
chatStore: chatStore,
),
)
.toList(),
),
),
],
),
],
),
),

View file

@ -86,29 +86,35 @@ class _HomeState extends State<Home> {
),
),
bottomNavigationBar: Observer(
builder: (_) => NavigationBar(
destinations: [
if (_authStore.isLoggedIn)
NavigationDestination(
icon: _homeStore.selectedIndex == 0
? const Icon(Icons.favorite_rounded)
: const Icon(Icons.favorite_border_rounded),
label: 'Following',
tooltip: 'Followed streams',
),
const NavigationDestination(
icon: Icon(Icons.arrow_upward_rounded),
label: 'Top',
tooltip: 'Top streams and categories',
),
const NavigationDestination(
icon: Icon(Icons.search_rounded),
label: 'Search',
tooltip: 'Search for channels and categories',
builder: (_) => Column(
mainAxisSize: MainAxisSize.min,
children: [
const Divider(),
NavigationBar(
destinations: [
if (_authStore.isLoggedIn)
NavigationDestination(
icon: _homeStore.selectedIndex == 0
? const Icon(Icons.favorite_rounded)
: const Icon(Icons.favorite_border_rounded),
label: 'Following',
tooltip: 'Followed streams',
),
const NavigationDestination(
icon: Icon(Icons.arrow_upward_rounded),
label: 'Top',
tooltip: 'Top streams and categories',
),
const NavigationDestination(
icon: Icon(Icons.search_rounded),
label: 'Search',
tooltip: 'Search for channels and categories',
),
],
selectedIndex: _homeStore.selectedIndex,
onDestinationSelected: _homeStore.handleTap,
),
],
selectedIndex: _homeStore.selectedIndex,
onDestinationSelected: _homeStore.handleTap,
),
),
),

View file

@ -85,6 +85,7 @@ class _SearchState extends State<Search> {
const SectionHeader(
'History',
padding: EdgeInsets.zero,
showDivider: false,
),
TextButton(
onPressed: _searchStore.searchHistory.clear,
@ -93,6 +94,10 @@ class _SearchState extends State<Search> {
],
),
),
const Divider(
indent: 16,
endIndent: 16,
),
Expanded(
child: ListView(
controller: widget.scrollController,
@ -127,7 +132,7 @@ class _SearchState extends State<Search> {
const SliverToBoxAdapter(
child: SectionHeader(
'Channels',
padding: EdgeInsets.fromLTRB(16, 12, 16, 8),
padding: EdgeInsets.fromLTRB(16, 12, 16, 0),
),
),
SearchResultsChannels(
@ -137,7 +142,7 @@ class _SearchState extends State<Search> {
const SliverToBoxAdapter(
child: SectionHeader(
'Categories',
padding: EdgeInsets.fromLTRB(16, 16, 16, 8),
padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
),
),
SearchResultsCategories(searchStore: _searchStore),

View file

@ -12,8 +12,8 @@ class FrostyThemes {
Color? backgroundColor,
}) {
final secondaryBackground = brightness == Brightness.light
? Colors.grey.shade100
: Colors.grey.shade900;
? Colors.grey.shade200
: Colors.grey.shade800;
return ThemeData(
useMaterial3: true,
@ -37,20 +37,20 @@ class FrostyThemes {
surfaceTintColor: backgroundColor,
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: secondaryBackground,
// filled: true,
// fillColor: secondaryBackground,
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide(style: BorderStyle.none),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide(color: secondaryBackground),
),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide(style: BorderStyle.none),
enabledBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide(color: secondaryBackground),
),
disabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide(style: BorderStyle.none),
disabledBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide(color: secondaryBackground),
),
),
navigationBarTheme: NavigationBarThemeData(
@ -82,8 +82,8 @@ class FrostyThemes {
behavior: SnackBarBehavior.floating,
),
dividerTheme: const DividerThemeData(
thickness: 0.5,
space: 0.5,
thickness: 1,
space: 1,
),
textTheme: const TextTheme(
// Used in alert dialog title.

View file

@ -4,24 +4,35 @@ class SectionHeader extends StatelessWidget {
final String text;
final EdgeInsets? padding;
final double? fontSize;
final bool showDivider;
const SectionHeader(
this.text, {
Key? key,
this.padding,
this.fontSize,
this.showDivider = true,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: padding ?? const EdgeInsets.fromLTRB(16, 16, 16, 4),
child: Text(
text,
style: TextStyle(
fontSize: fontSize ?? 16,
fontWeight: FontWeight.w600,
),
padding: padding ?? const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text,
style: TextStyle(
fontSize: fontSize ?? 16,
fontWeight: FontWeight.w600,
),
),
if (showDivider) ...[
const SizedBox(height: 8),
const Divider(),
],
],
),
);
}