design: New three column layout for wide screens

This commit is contained in:
krille-chan 2023-08-12 13:37:42 +02:00
parent 5e3c62110b
commit d9c5cbea26
No known key found for this signature in database
7 changed files with 287 additions and 251 deletions

View file

@ -1577,6 +1577,7 @@
"username": {}
}
},
"directChat": "Direct chat",
"redactedByBecause": "Redacted by {username} because: \"{reason}\"",
"@redactedByBecause": {
"type": "text",

View file

@ -20,9 +20,11 @@ import 'package:scroll_to_index/scroll_to_index.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat/chat_view.dart';
import 'package:fluffychat/pages/chat/event_info_dialog.dart';
import 'package:fluffychat/pages/chat/recording_dialog.dart';
import 'package:fluffychat/pages/chat_details/chat_details.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
import 'package:fluffychat/utils/error_reporter.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
@ -61,10 +63,31 @@ class ChatPage extends StatelessWidget {
),
);
}
return ChatPageWithRoom(
return Row(
children: [
Expanded(
child: ChatPageWithRoom(
key: Key('chat_page_$roomId'),
sideView: sideView,
room: room,
),
),
if (FluffyThemes.isThreeColumnMode(context))
Container(
width: FluffyThemes.columnWidth,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
border: Border(
left: BorderSide(
width: 1,
color: Theme.of(context).dividerColor,
),
),
),
child: ChatDetails(roomId: roomId),
),
],
);
}
}

View file

@ -4,8 +4,6 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:go_router/go_router.dart';
import 'package:fluffychat/pages/chat/chat.dart';
import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:fluffychat/widgets/avatar.dart';
@ -19,23 +17,11 @@ class ChatAppBarTitle extends StatelessWidget {
if (controller.selectedEvents.isNotEmpty) {
return Text(controller.selectedEvents.length.toString());
}
final directChatMatrixID = room.directChatMatrixID;
return InkWell(
hoverColor: Colors.transparent,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: directChatMatrixID != null
? () => showAdaptiveBottomSheet(
context: context,
builder: (c) => UserBottomSheet(
user: room
.unsafeGetUserFromMemoryOrFallback(directChatMatrixID),
outerContext: context,
onMention: () => controller.sendController.text +=
'${room.unsafeGetUserFromMemoryOrFallback(directChatMatrixID).mention} ',
),
)
: controller.isArchived
onTap: controller.isArchived
? null
: () => context.go(['', 'rooms', room.id, 'details'].join('/')),
child: Row(

View file

@ -131,7 +131,7 @@ class ChatView extends StatelessWidget {
tooltip: L10n.of(context)!.placeCall,
),
EncryptionButton(controller.room),
ChatSettingsPopupMenu(controller.room, !controller.room.isDirectChat),
ChatSettingsPopupMenu(controller.room, true),
];
}
}

View file

@ -318,9 +318,9 @@ class ChatDetailsController extends State<ChatDetails> {
if ((room.states['im.ponies.room_emotes'] ?? <String, Event>{})
.keys
.any((String s) => s.isNotEmpty)) {
context.go('/rooms/${room.id}/details/multiple_emotes');
context.push('/rooms/${room.id}/details/multiple_emotes');
} else {
context.go('/rooms/${room.id}/details/emotes');
context.push('/rooms/${room.id}/details/emotes');
}
}

View file

@ -35,6 +35,8 @@ class ChatDetailsView extends StatelessWidget {
);
}
final isEmbedded = GoRouterState.of(context).fullPath == '/rooms/:roomid';
return StreamBuilder(
stream: room.onUpdate.stream,
builder: (context, snapshot) {
@ -49,7 +51,9 @@ class ChatDetailsView extends StatelessWidget {
MatrixLocals(L10n.of(context)!),
);
return Scaffold(
appBar: AppBar(
appBar: isEmbedded
? null
: AppBar(
leading: const Center(child: BackButton()),
elevation: Theme.of(context).appBarTheme.elevation,
actions: <Widget>[
@ -65,7 +69,8 @@ class ChatDetailsView extends StatelessWidget {
ChatSettingsPopupMenu(room, false)
],
title: Text(L10n.of(context)!.chatDetails),
backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
backgroundColor:
Theme.of(context).appBarTheme.backgroundColor,
),
body: MaxWidthBody(
child: ListView.builder(
@ -99,7 +104,9 @@ class ChatDetailsView extends StatelessWidget {
),
),
child: Hero(
tag: 'content_banner',
tag: isEmbedded
? 'embedded_content_banner'
: 'content_banner',
child: Avatar(
mxContent: room.avatar,
name: displayname,
@ -108,7 +115,8 @@ class ChatDetailsView extends StatelessWidget {
),
),
),
if (room.canChangeStateEvent(
if (!room.isDirectChat &&
room.canChangeStateEvent(
EventTypes.RoomAvatar,
))
Positioned(
@ -131,7 +139,9 @@ class ChatDetailsView extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextButton.icon(
onPressed: () => room.canChangeStateEvent(
onPressed: () => room.isDirectChat
? null
: room.canChangeStateEvent(
EventTypes.RoomName,
)
? controller.setDisplaynameAction()
@ -141,7 +151,9 @@ class ChatDetailsView extends StatelessWidget {
copyOnly: true,
),
icon: Icon(
room.canChangeStateEvent(
room.isDirectChat
? Icons.chat_bubble_outline
: room.canChangeStateEvent(
EventTypes.RoomName,
)
? Icons.edit_outlined
@ -154,14 +166,18 @@ class ChatDetailsView extends StatelessWidget {
.onBackground,
),
label: Text(
displayname,
room.isDirectChat
? L10n.of(context)!.directChat
: displayname,
maxLines: 1,
overflow: TextOverflow.ellipsis,
// style: const TextStyle(fontSize: 18),
),
),
TextButton.icon(
onPressed: () => context.go(
onPressed: () => room.isDirectChat
? null
: context.push(
'/rooms/${controller.roomId}/details/members',
),
icon: const Icon(
@ -272,6 +288,7 @@ class ChatDetailsView extends StatelessWidget {
onTap: controller.goToEmoteSettings,
trailing: const Icon(Icons.chevron_right_outlined),
),
if (!room.isDirectChat)
ListTile(
leading: CircleAvatar(
backgroundColor:
@ -291,6 +308,7 @@ class ChatDetailsView extends StatelessWidget {
),
onTap: controller.setJoinRules,
),
if (!room.isDirectChat)
ListTile(
leading: CircleAvatar(
backgroundColor:
@ -331,6 +349,7 @@ class ChatDetailsView extends StatelessWidget {
),
onTap: controller.setGuestAccess,
),
if (!room.isDirectChat)
ListTile(
title: Text(L10n.of(context)!.editChatPermissions),
subtitle: Text(
@ -346,7 +365,7 @@ class ChatDetailsView extends StatelessWidget {
),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: () => context
.go('/rooms/${room.id}/details/permissions'),
.push('/rooms/${room.id}/details/permissions'),
),
Divider(
height: 1,
@ -363,7 +382,7 @@ class ChatDetailsView extends StatelessWidget {
),
),
),
if (room.canInvite)
if (!room.isDirectChat && room.canInvite)
ListTile(
title: Text(L10n.of(context)!.inviteContact),
leading: CircleAvatar(
@ -393,7 +412,7 @@ class ChatDetailsView extends StatelessWidget {
color: Colors.grey,
),
),
onTap: () => context.go(
onTap: () => context.push(
'/rooms/${controller.roomId!}/details/members',
),
trailing: const Icon(Icons.chevron_right_outlined),

View file

@ -9,6 +9,7 @@ import 'package:url_launcher/url_launcher_string.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/pages/chat_encryption_settings/chat_encryption_settings.dart';
import 'package:fluffychat/utils/beautify_string_extension.dart';
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
class ChatEncryptionSettingsView extends StatelessWidget {
final ChatEncryptionSettingsController controller;
@ -38,13 +39,16 @@ class ChatEncryptionSettingsView extends StatelessWidget {
),
],
),
body: ListView(
body: MaxWidthBody(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SwitchListTile(
secondary: CircleAvatar(
foregroundColor:
Theme.of(context).colorScheme.onPrimaryContainer,
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
backgroundColor:
Theme.of(context).colorScheme.primaryContainer,
child: const Icon(Icons.lock_outlined),
),
title: Text(L10n.of(context)!.encryptThisChat),
@ -81,7 +85,8 @@ class ChatEncryptionSettingsView extends StatelessWidget {
),
StreamBuilder(
stream: room.onUpdate.stream,
builder: (context, snapshot) => FutureBuilder<List<DeviceKeys>>(
builder: (context, snapshot) =>
FutureBuilder<List<DeviceKeys>>(
future: room.getUserDeviceKeys(),
builder: (BuildContext context, snapshot) {
if (snapshot.hasError) {
@ -154,8 +159,9 @@ class ChatEncryptionSettingsView extends StatelessWidget {
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color:
Theme.of(context).colorScheme.primary,
color: Theme.of(context)
.colorScheme
.primary,
fontSize: 12,
fontStyle: FontStyle.italic,
),
@ -193,6 +199,7 @@ class ChatEncryptionSettingsView extends StatelessWidget {
],
),
),
),
);
}
}