Skip to content

Commit

Permalink
design: New three column layout for wide screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@krille-chan
krille-chan committed Aug 12, 2023
1 parent 5e3c621 commit d9c5cbe
Show file tree
Hide file tree
Showing 7 changed files with 287 additions and 251 deletions.
1 change: 1 addition & 0 deletions assets/l10n/intl_en.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1577,6 +1577,7 @@
"username": {}
}
},
"directChat": "Direct chat",
"redactedByBecause": "Redacted by {username} because: \"{reason}\"",
"@redactedByBecause": {
"type": "text",
Expand Down
31 changes: 27 additions & 4 deletions lib/pages/chat/chat.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -61,10 +63,31 @@ class ChatPage extends StatelessWidget {
),
);
}
return ChatPageWithRoom(
key: Key('chat_page_$roomId'),
sideView: sideView,
room: room,

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),
),
],
);
}
}
Expand Down
20 changes: 3 additions & 17 deletions lib/pages/chat/chat_app_bar_title.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -19,25 +17,13 @@ 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
? null
: () => context.go(['', 'rooms', room.id, 'details'].join('/')),
onTap: controller.isArchived
? null
: () => context.go(['', 'rooms', room.id, 'details'].join('/')),
child: Row(
children: [
Hero(
Expand Down
2 changes: 1 addition & 1 deletion lib/pages/chat/chat_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
];
}
}
Expand Down
4 changes: 2 additions & 2 deletions lib/pages/chat_details/chat_details.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}

Expand Down
203 changes: 111 additions & 92 deletions lib/pages/chat_details/chat_details_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -49,24 +51,27 @@ class ChatDetailsView extends StatelessWidget {
MatrixLocals(L10n.of(context)!),
);
return Scaffold(
appBar: AppBar(
leading: const Center(child: BackButton()),
elevation: Theme.of(context).appBarTheme.elevation,
actions: <Widget>[
if (room.canonicalAlias.isNotEmpty)
IconButton(
tooltip: L10n.of(context)!.share,
icon: Icon(Icons.adaptive.share_outlined),
onPressed: () => FluffyShare.share(
AppConfig.inviteLinkPrefix + room.canonicalAlias,
context,
),
appBar: isEmbedded
? null
: AppBar(
leading: const Center(child: BackButton()),
elevation: Theme.of(context).appBarTheme.elevation,
actions: <Widget>[
if (room.canonicalAlias.isNotEmpty)
IconButton(
tooltip: L10n.of(context)!.share,
icon: Icon(Icons.adaptive.share_outlined),
onPressed: () => FluffyShare.share(
AppConfig.inviteLinkPrefix + room.canonicalAlias,
context,
),
),
ChatSettingsPopupMenu(room, false)
],
title: Text(L10n.of(context)!.chatDetails),
backgroundColor:
Theme.of(context).appBarTheme.backgroundColor,
),
ChatSettingsPopupMenu(room, false)
],
title: Text(L10n.of(context)!.chatDetails),
backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
),
body: MaxWidthBody(
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
Expand Down Expand Up @@ -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,
Expand All @@ -108,9 +115,10 @@ class ChatDetailsView extends StatelessWidget {
),
),
),
if (room.canChangeStateEvent(
EventTypes.RoomAvatar,
))
if (!room.isDirectChat &&
room.canChangeStateEvent(
EventTypes.RoomAvatar,
))
Positioned(
bottom: 0,
right: 0,
Expand All @@ -131,21 +139,25 @@ class ChatDetailsView extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextButton.icon(
onPressed: () => room.canChangeStateEvent(
EventTypes.RoomName,
)
? controller.setDisplaynameAction()
: FluffyShare.share(
displayname,
context,
copyOnly: true,
),
onPressed: () => room.isDirectChat
? null
: room.canChangeStateEvent(
EventTypes.RoomName,
)
? controller.setDisplaynameAction()
: FluffyShare.share(
displayname,
context,
copyOnly: true,
),
icon: Icon(
room.canChangeStateEvent(
EventTypes.RoomName,
)
? Icons.edit_outlined
: Icons.copy_outlined,
room.isDirectChat
? Icons.chat_bubble_outline
: room.canChangeStateEvent(
EventTypes.RoomName,
)
? Icons.edit_outlined
: Icons.copy_outlined,
size: 16,
),
style: TextButton.styleFrom(
Expand All @@ -154,16 +166,20 @@ 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(
'/rooms/${controller.roomId}/details/members',
),
onPressed: () => room.isDirectChat
? null
: context.push(
'/rooms/${controller.roomId}/details/members',
),
icon: const Icon(
Icons.group_outlined,
size: 14,
Expand Down Expand Up @@ -272,44 +288,46 @@ class ChatDetailsView extends StatelessWidget {
onTap: controller.goToEmoteSettings,
trailing: const Icon(Icons.chevron_right_outlined),
),
ListTile(
leading: CircleAvatar(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
foregroundColor: iconColor,
child: const Icon(Icons.shield_outlined),
),
title: Text(
L10n.of(context)!.whoIsAllowedToJoinThisGroup,
),
trailing: const Icon(Icons.chevron_right_outlined),
subtitle: Text(
room.joinRules?.getLocalizedString(
MatrixLocals(L10n.of(context)!),
) ??
L10n.of(context)!.none,
),
onTap: controller.setJoinRules,
),
ListTile(
leading: CircleAvatar(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
foregroundColor: iconColor,
child: const Icon(Icons.visibility_outlined),
),
trailing: const Icon(Icons.chevron_right_outlined),
title: Text(
L10n.of(context)!.visibilityOfTheChatHistory,
if (!room.isDirectChat)
ListTile(
leading: CircleAvatar(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
foregroundColor: iconColor,
child: const Icon(Icons.shield_outlined),
),
title: Text(
L10n.of(context)!.whoIsAllowedToJoinThisGroup,
),
trailing: const Icon(Icons.chevron_right_outlined),
subtitle: Text(
room.joinRules?.getLocalizedString(
MatrixLocals(L10n.of(context)!),
) ??
L10n.of(context)!.none,
),
onTap: controller.setJoinRules,
),
subtitle: Text(
room.historyVisibility?.getLocalizedString(
MatrixLocals(L10n.of(context)!),
) ??
L10n.of(context)!.none,
if (!room.isDirectChat)
ListTile(
leading: CircleAvatar(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
foregroundColor: iconColor,
child: const Icon(Icons.visibility_outlined),
),
trailing: const Icon(Icons.chevron_right_outlined),
title: Text(
L10n.of(context)!.visibilityOfTheChatHistory,
),
subtitle: Text(
room.historyVisibility?.getLocalizedString(
MatrixLocals(L10n.of(context)!),
) ??
L10n.of(context)!.none,
),
onTap: controller.setHistoryVisibility,
),
onTap: controller.setHistoryVisibility,
),
if (room.joinRules == JoinRules.public)
ListTile(
leading: CircleAvatar(
Expand All @@ -331,23 +349,24 @@ class ChatDetailsView extends StatelessWidget {
),
onTap: controller.setGuestAccess,
),
ListTile(
title: Text(L10n.of(context)!.editChatPermissions),
subtitle: Text(
L10n.of(context)!.whoCanPerformWhichAction,
),
leading: CircleAvatar(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
foregroundColor: iconColor,
child: const Icon(
Icons.edit_attributes_outlined,
if (!room.isDirectChat)
ListTile(
title: Text(L10n.of(context)!.editChatPermissions),
subtitle: Text(
L10n.of(context)!.whoCanPerformWhichAction,
),
leading: CircleAvatar(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
foregroundColor: iconColor,
child: const Icon(
Icons.edit_attributes_outlined,
),
),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: () => context
.push('/rooms/${room.id}/details/permissions'),
),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: () => context
.go('/rooms/${room.id}/details/permissions'),
),
Divider(
height: 1,
color: Theme.of(context).dividerColor,
Expand All @@ -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(
Expand Down Expand Up @@ -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),
Expand Down
Loading

0 comments on commit d9c5cbe

Please sign in to comment.