aiden
/
fluffychat
mirror of https://github.com/krille-chan/fluffychat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

design: Experimental design

Browse Source
krille/experimental-design
krille-chan 12 months ago
parent 19dab63858
commit 9735b6e20b
No known key found for this signature in database
9 changed files with 163 additions and 127 deletions
Show Stats Download Patch File Download Diff File

3
lib/config/themes.dart
Unescape Escape View File

@ -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,

9
lib/pages/chat/chat.dart
Unescape Escape View File

@ -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),
),
],

249
lib/pages/chat/chat_view.dart
Unescape Escape View File

@ -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: <Widget>[
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: <Widget>[
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,
),
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),
),
),
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: <Widget>[
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: <Widget>[
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,
),
),
),
],
],
),
),
),
);

2
lib/pages/chat/events/message.dart
Unescape Escape View File

@ -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);

4
lib/pages/chat/pinned_events.dart
Unescape Escape View File

@ -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<Event?>(
future: controller.room.getEventById(pinnedEventIds.last),
builder: (context, snapshot) {

3
lib/pages/chat/tombstone_display.dart
Unescape Escape View File

@ -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(

2
lib/pages/chat_list/chat_list_body.dart
Unescape Escape View File

@ -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,
);
},

12
lib/pages/chat_list/chat_list_view.dart
Unescape Escape View File

@ -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(

6
lib/widgets/layouts/two_column_layout.dart
Unescape Escape View File

@ -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,
),
),

Write Preview
Loading…
Cancel
Save