From 9735b6e20b205e3c6f953ca621a1798e556e87de Mon Sep 17 00:00:00 2001 From: krille-chan Date: Sun, 17 Mar 2024 19:25:37 +0100 Subject: [PATCH] design: Experimental design --- lib/config/themes.dart | 3 - lib/pages/chat/chat.dart | 9 +- lib/pages/chat/chat_view.dart | 251 +++++++++++++-------- lib/pages/chat/events/message.dart | 2 +- lib/pages/chat/pinned_events.dart | 4 - lib/pages/chat/tombstone_display.dart | 3 - lib/pages/chat_list/chat_list_body.dart | 2 +- lib/pages/chat_list/chat_list_view.dart | 12 +- lib/widgets/layouts/two_column_layout.dart | 6 +- 9 files changed, 164 insertions(+), 128 deletions(-) diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 06fbb5a60..d2fc2c5b8 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -97,9 +97,6 @@ abstract class FluffyThemes { filled: true, ), appBarTheme: AppBarTheme( - toolbarHeight: FluffyThemes.isColumnMode(context) ? 72 : 56, - shadowColor: Colors.grey.withAlpha(64), - surfaceTintColor: colorScheme.background, systemOverlayStyle: SystemUiOverlayStyle( statusBarColor: Colors.transparent, statusBarIconBrightness: brightness.reversed, diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart index aeb8f32d3..90fd507d8 100644 --- a/lib/pages/chat/chat.dart +++ b/lib/pages/chat/chat.dart @@ -79,14 +79,7 @@ class ChatPage extends StatelessWidget { Container( width: FluffyThemes.columnWidth, clipBehavior: Clip.hardEdge, - decoration: BoxDecoration( - border: Border( - left: BorderSide( - width: 1, - color: Theme.of(context).dividerColor, - ), - ), - ), + decoration: const BoxDecoration(), child: ChatDetails(roomId: roomId), ), ], diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index e5cbaa2ae..8bd849bf4 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -140,6 +140,10 @@ class ChatView extends StatelessWidget { final accountConfig = Matrix.of(context).client.applicationAccountConfig; + final backgroundColor = FluffyThemes.isColumnMode(context) + ? Theme.of(context).colorScheme.secondaryContainer + : Theme.of(context).colorScheme.background; + return PopScope( canPop: controller.selectedEvents.isEmpty && !controller.showEmojiPicker, onPopInvoked: (pop) async { @@ -156,101 +160,150 @@ class ChatView extends StatelessWidget { builder: (context, snapshot) => FutureBuilder( future: controller.loadTimelineFuture, builder: (BuildContext context, snapshot) { - return Scaffold( - appBar: AppBar( - actionsIconTheme: IconThemeData( - color: controller.selectedEvents.isEmpty - ? null - : Theme.of(context).colorScheme.primary, - ), - leading: controller.selectMode - ? IconButton( - icon: const Icon(Icons.close), - onPressed: controller.clearSelectedEvents, - tooltip: L10n.of(context)!.close, - color: Theme.of(context).colorScheme.primary, - ) - : UnreadRoomsBadge( - filter: (r) => r.id != controller.roomId, - badgePosition: BadgePosition.topEnd(end: 8, top: 4), - child: const Center(child: BackButton()), - ), - titleSpacing: 0, - title: ChatAppBarTitle(controller), - actions: _appBarActions(context), - ), - floatingActionButton: controller.showScrollDownButton && - controller.selectedEvents.isEmpty - ? Padding( - padding: const EdgeInsets.only(bottom: 56.0), - child: FloatingActionButton( - onPressed: controller.scrollDown, - heroTag: null, - mini: true, - child: const Icon(Icons.arrow_downward_outlined), + return Container( + margin: FluffyThemes.isColumnMode(context) + ? const EdgeInsets.all(12) + : null, + decoration: FluffyThemes.isColumnMode(context) + ? BoxDecoration( + gradient: LinearGradient( + colors: [ + Theme.of(context).colorScheme.primaryContainer, + Theme.of(context).colorScheme.secondaryContainer, + Theme.of(context).colorScheme.tertiaryContainer, + ], + stops: const [0.25, 0.5, 0.75], + begin: Alignment.topLeft, + end: Alignment.bottomRight, ), + borderRadius: + BorderRadius.circular(AppConfig.borderRadius), ) : null, - body: DropTarget( - onDragDone: controller.onDragDone, - onDragEntered: controller.onDragEntered, - onDragExited: controller.onDragExited, - child: Stack( - children: [ - if (accountConfig.wallpaperUrl != null) - Opacity( - opacity: accountConfig.wallpaperOpacity ?? 1, - child: MxcImage( - uri: accountConfig.wallpaperUrl, - fit: BoxFit.cover, - isThumbnail: true, - width: FluffyThemes.columnWidth * 4, - height: FluffyThemes.columnWidth * 4, - placeholder: (_) => Container(), + clipBehavior: Clip.hardEdge, + child: Scaffold( + extendBody: true, + extendBodyBehindAppBar: true, + backgroundColor: Colors.transparent, + appBar: AppBar( + elevation: 0, + scrolledUnderElevation: 0, + backgroundColor: backgroundColor.withOpacity(0.9), + surfaceTintColor: backgroundColor.withOpacity(0.9), + actionsIconTheme: IconThemeData( + color: controller.selectedEvents.isEmpty + ? null + : Theme.of(context).colorScheme.primary, + ), + leading: controller.selectMode + ? IconButton( + icon: const Icon(Icons.close), + onPressed: controller.clearSelectedEvents, + tooltip: L10n.of(context)!.close, + color: Theme.of(context).colorScheme.primary, + ) + : UnreadRoomsBadge( + filter: (r) => r.id != controller.roomId, + badgePosition: BadgePosition.topEnd(end: 8, top: 4), + child: const Center(child: BackButton()), ), - ), - SafeArea( - child: Column( - children: [ + titleSpacing: 0, + title: ChatAppBarTitle(controller), + actions: _appBarActions(context), + bottom: PreferredSize( + preferredSize: Size.fromHeight( + 64 * + ((controller.room + .getState(EventTypes.RoomTombstone) != + null + ? 1 + : 0) + + (scrollUpBannerEventId != null ? 1 : 0) + + (controller.room.pinnedEventIds.isNotEmpty + ? 1 + : 0)), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + if (controller.room + .getState(EventTypes.RoomTombstone) != + null) TombstoneDisplay(controller), - if (scrollUpBannerEventId != null) - Material( - color: - Theme.of(context).colorScheme.surfaceVariant, - shape: Border( - bottom: BorderSide( - width: 1, - color: Theme.of(context).dividerColor, - ), - ), - child: ListTile( - leading: IconButton( - color: Theme.of(context) - .colorScheme - .onSurfaceVariant, - icon: const Icon(Icons.close), - tooltip: L10n.of(context)!.close, - onPressed: () { - controller.discardScrollUpBannerEventId(); - controller.setReadMarker(); - }, - ), - title: Text( - L10n.of(context)!.jumpToLastReadMessage, - ), - contentPadding: const EdgeInsets.only(left: 8), - trailing: TextButton( - onPressed: () { - controller.scrollToEventId( - scrollUpBannerEventId, - ); - controller.discardScrollUpBannerEventId(); - }, - child: Text(L10n.of(context)!.jump), - ), + if (scrollUpBannerEventId != null) + Material( + color: Theme.of(context).colorScheme.surfaceVariant, + shape: Border( + bottom: BorderSide( + width: 1, + color: Theme.of(context).dividerColor, ), ), + child: ListTile( + leading: IconButton( + color: Theme.of(context) + .colorScheme + .onSurfaceVariant, + icon: const Icon(Icons.close), + tooltip: L10n.of(context)!.close, + onPressed: () { + controller.discardScrollUpBannerEventId(); + controller.setReadMarker(); + }, + ), + title: Text( + L10n.of(context)!.jumpToLastReadMessage, + ), + contentPadding: const EdgeInsets.only(left: 8), + trailing: TextButton( + onPressed: () { + controller.scrollToEventId( + scrollUpBannerEventId, + ); + controller.discardScrollUpBannerEventId(); + }, + child: Text(L10n.of(context)!.jump), + ), + ), + ), + if (controller.room.pinnedEventIds.isNotEmpty) PinnedEvents(controller), + ], + ), + ), + ), + floatingActionButton: controller.showScrollDownButton && + controller.selectedEvents.isEmpty + ? Padding( + padding: const EdgeInsets.only(bottom: 56.0), + child: FloatingActionButton( + onPressed: controller.scrollDown, + heroTag: null, + mini: true, + child: const Icon(Icons.arrow_downward_outlined), + ), + ) + : null, + body: DropTarget( + onDragDone: controller.onDragDone, + onDragEntered: controller.onDragEntered, + onDragExited: controller.onDragExited, + child: Stack( + children: [ + if (accountConfig.wallpaperUrl != null) + Opacity( + opacity: accountConfig.wallpaperOpacity ?? 1, + child: MxcImage( + uri: accountConfig.wallpaperUrl, + fit: BoxFit.cover, + isThumbnail: true, + width: FluffyThemes.columnWidth * 4, + height: FluffyThemes.columnWidth * 4, + placeholder: (_) => Container(), + ), + ), + Column( + children: [ Expanded( child: GestureDetector( onTap: controller.clearSingleSelectedEvent, @@ -350,19 +403,19 @@ class ChatView extends StatelessWidget { ), ], ), - ), - if (controller.dragging) - Container( - color: Theme.of(context) - .scaffoldBackgroundColor - .withOpacity(0.9), - alignment: Alignment.center, - child: const Icon( - Icons.upload_outlined, - size: 100, + if (controller.dragging) + Container( + color: Theme.of(context) + .scaffoldBackgroundColor + .withOpacity(0.9), + alignment: Alignment.center, + child: const Icon( + Icons.upload_outlined, + size: 100, + ), ), - ), - ], + ], + ), ), ), ); diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart index fc711c861..464a8596a 100644 --- a/lib/pages/chat/events/message.dart +++ b/lib/pages/chat/events/message.dart @@ -78,7 +78,7 @@ class Message extends StatelessWidget { final client = Matrix.of(context).client; final ownMessage = event.senderId == client.userID; final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft; - var color = Theme.of(context).colorScheme.surfaceVariant; + var color = Theme.of(context).colorScheme.background; final displayTime = event.type == EventTypes.RoomCreate || nextEvent == null || !event.originServerTs.sameEnvironment(nextEvent!.originServerTs); diff --git a/lib/pages/chat/pinned_events.dart b/lib/pages/chat/pinned_events.dart index 669ca737a..1a50cd4c5 100644 --- a/lib/pages/chat/pinned_events.dart +++ b/lib/pages/chat/pinned_events.dart @@ -57,10 +57,6 @@ class PinnedEvents extends StatelessWidget { Widget build(BuildContext context) { final pinnedEventIds = controller.room.pinnedEventIds; - if (pinnedEventIds.isEmpty) { - return const SizedBox.shrink(); - } - return FutureBuilder( future: controller.room.getEventById(pinnedEventIds.last), builder: (context, snapshot) { diff --git a/lib/pages/chat/tombstone_display.dart b/lib/pages/chat/tombstone_display.dart index e080a0009..350be6d2c 100644 --- a/lib/pages/chat/tombstone_display.dart +++ b/lib/pages/chat/tombstone_display.dart @@ -11,9 +11,6 @@ class TombstoneDisplay extends StatelessWidget { @override Widget build(BuildContext context) { - if (controller.room.getState(EventTypes.RoomTombstone) == null) { - return const SizedBox.shrink(); - } return SizedBox( height: 72, child: Material( diff --git a/lib/pages/chat_list/chat_list_body.dart b/lib/pages/chat_list/chat_list_body.dart index 8d93febbb..9e8e5d8bb 100644 --- a/lib/pages/chat_list/chat_list_body.dart +++ b/lib/pages/chat_list/chat_list_body.dart @@ -54,7 +54,7 @@ class ChatListViewBody extends StatelessWidget { animation: primaryAnimation, secondaryAnimation: secondaryAnimation, transitionType: SharedAxisTransitionType.vertical, - fillColor: Theme.of(context).scaffoldBackgroundColor, + fillColor: Theme.of(context).colorScheme.background, child: child, ); }, diff --git a/lib/pages/chat_list/chat_list_view.dart b/lib/pages/chat_list/chat_list_view.dart index 96e2a4675..fc0ef5b49 100644 --- a/lib/pages/chat_list/chat_list_view.dart +++ b/lib/pages/chat_list/chat_list_view.dart @@ -131,7 +131,13 @@ class ChatListView extends StatelessWidget { .toList(); final destinations = getNavigationDestinations(context); - return SizedBox( + return Container( + margin: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondaryContainer, + borderRadius: + BorderRadius.circular(AppConfig.borderRadius), + ), width: FluffyThemes.navRailWidth, child: ListView.builder( scrollDirection: Axis.vertical, @@ -171,10 +177,6 @@ class ChatListView extends StatelessWidget { ); }, ), - Container( - color: Theme.of(context).dividerColor, - width: 1, - ), ], Expanded( child: GestureDetector( diff --git a/lib/widgets/layouts/two_column_layout.dart b/lib/widgets/layouts/two_column_layout.dart index a6f4c8bdf..fe5ef64ab 100644 --- a/lib/widgets/layouts/two_column_layout.dart +++ b/lib/widgets/layouts/two_column_layout.dart @@ -15,6 +15,7 @@ class TwoColumnLayout extends StatelessWidget { Widget build(BuildContext context) { return ScaffoldMessenger( child: Scaffold( + backgroundColor: Theme.of(context).colorScheme.background, body: Row( children: [ Container( @@ -23,12 +24,9 @@ class TwoColumnLayout extends StatelessWidget { width: 360.0 + (displayNavigationRail ? 64 : 0), child: mainView, ), - Container( - width: 1.0, - color: Theme.of(context).dividerColor, - ), Expanded( child: ClipRRect( + clipBehavior: Clip.hardEdge, child: sideView, ), ),