mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-17 09:35:12 +00:00
design: New three column layout for wide screens
This commit is contained in:
parent
5e3c62110b
commit
d9c5cbea26
7 changed files with 287 additions and 251 deletions
|
@ -1577,6 +1577,7 @@
|
|||
"username": {}
|
||||
}
|
||||
},
|
||||
"directChat": "Direct chat",
|
||||
"redactedByBecause": "Redacted by {username} because: \"{reason}\"",
|
||||
"@redactedByBecause": {
|
||||
"type": "text",
|
||||
|
|
|
@ -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),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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 {
|
|||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue