Skip to content

chat adaptive layout and general improvements #881

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gtalha07 merged 6 commits into from
Aug 27, 2023
Merged

chat adaptive layout and general improvements #881

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
30e1c51
code cleanup and chat adaptive layout
gtalha07 Aug 23, 2023
b8e7dc6
fix overflow issues
gtalha07 Aug 24, 2023
bc33105
Merge branch 'main' into issue844_chat_adaptive-layout
gtalha07 Aug 24, 2023
4265826
fix lint errors
gtalha07 Aug 24, 2023
ca85a78
handle space chats routing and feedback changes
gtalha07 Aug 25, 2023
40d81e7
add changes doc
gtalha07 Aug 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .changes/0844-chat-adaptive-layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- [feature] On desktop, chats overview section will now support split view and be adaptive, making it easier for navigation and see the content all in one view.
- [fix] Setting section UI improvements.
- [fix] Space chats routing.
77 changes: 43 additions & 34 deletions app/lib/common/themes/app_theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,41 +20,50 @@ extension CustomColorScheme on ColorScheme {
Color get badgeUrgent => const Color(0xFF93000A);
}

const brandColorScheme = ColorScheme.dark(
brightness: Brightness.dark,
primary: Color(0xFF9CCAFF),
onPrimary: Color(0xFF003257),
primaryContainer: Color(0xFF00497B),
onPrimaryContainer: Color(0xFFD0E4FF),
secondary: Color(0xFF9ACBFF),
onSecondary: Color(0xFF003355),
secondaryContainer: Color(0xFF004A79),
onSecondaryContainer: Color(0xFFD0E4FF),
tertiary: Color(0xFFFFB77B),
onTertiary: Color(0xFF4D2700),
tertiaryContainer: Color(0xFF6D3A00),
onTertiaryContainer: Color(0xFFFFDCC2),
error: Color(0xFFFFB4AB),
errorContainer: Color(0xFF93000A),
onError: Color(0xFF690005),
onErrorContainer: Color(0xFFFFDAD6),
background: Color(0xFF001B3D),
onBackground: Color(0xFFD6E3FF),
surface: Color(0xFF001B3D),
onSurface: Color(0xFFD6E3FF),
surfaceVariant: Color(0xFF42474E),
onSurfaceVariant: Color(0xFFC2C7CF),
outline: Color(0xFF8C9199),
onInverseSurface: Color(0xFF001B3D),
inverseSurface: Color(0xFFD6E3FF),
inversePrimary: Color(0xFF0062A1),
shadow: Color(0xFF000000),
surfaceTint: Color(0xFF9CCAFF),
outlineVariant: Color(0xFF42474E),
scrim: Color(0xFF000000),
);

class AppTheme {
static const brandColorScheme = ColorScheme.dark(
brightness: Brightness.dark,
primary: Color(0xFF9CCAFF),
onPrimary: Color(0xFF003257),
primaryContainer: Color(0xFF00497B),
onPrimaryContainer: Color(0xFFD0E4FF),
secondary: Color(0xFF9ACBFF),
onSecondary: Color(0xFF003355),
secondaryContainer: Color(0xFF004A79),
onSecondaryContainer: Color(0xFFD0E4FF),
tertiary: Color(0xFFFFB77B),
onTertiary: Color(0xFF4D2700),
tertiaryContainer: Color(0xFF6D3A00),
onTertiaryContainer: Color(0xFFFFDCC2),
error: Color(0xFFFFB4AB),
errorContainer: Color(0xFF93000A),
onError: Color(0xFF690005),
onErrorContainer: Color(0xFFFFDAD6),
background: Color(0xFF001B3D),
onBackground: Color(0xFFD6E3FF),
surface: Color(0xFF001B3D),
onSurface: Color(0xFFD6E3FF),
surfaceVariant: Color(0xFF42474E),
onSurfaceVariant: Color(0xFFC2C7CF),
outline: Color(0xFF8C9199),
onInverseSurface: Color(0xFF001B3D),
inverseSurface: Color(0xFFD6E3FF),
inversePrimary: Color(0xFF0062A1),
shadow: Color(0xFF000000),
surfaceTint: Color(0xFF9CCAFF),
outlineVariant: Color(0xFF42474E),
scrim: Color(0xFF000000),
);

static const primaryGradient = LinearGradient(
begin: Alignment.topCenter,
end: Alignment.center,
colors: <Color>[
Color(0xFF001B3D),
Color(0xFF121212),
],
);

static ThemeData get theme {
return ThemeData.from(
textTheme: GoogleFonts.interTextTheme(
Expand Down
160 changes: 100 additions & 60 deletions app/lib/common/widgets/chat/convo_card.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import 'package:acter/common/providers/common_providers.dart';
import 'package:acter/common/themes/app_theme.dart';
import 'package:acter/common/utils/routes.dart';
import 'package:acter/common/utils/utils.dart';
import 'package:acter/common/widgets/chat/convo_with_profile_card.dart';
import 'package:acter/features/chat/providers/chat_providers.dart';
import 'package:acter/features/home/providers/client_providers.dart';
import 'package:acter/router/providers/router_providers.dart';
import 'package:acter_flutter_sdk/acter_flutter_sdk_ffi.dart';
import 'package:flutter/material.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
Expand Down Expand Up @@ -39,6 +41,7 @@ class _ConvoCardState extends ConsumerState<ConvoCard> {

@override
Widget build(BuildContext context) {
final location = ref.watch(currentRoutingLocation);
final client = ref.watch(clientProvider);
String roomId = widget.room.getRoomIdStr();
final convoProfile = ref.watch(chatProfileDataProvider(widget.room));
Expand All @@ -52,10 +55,18 @@ class _ConvoCardState extends ConsumerState<ConvoCard> {
ref
.read(currentConvoProvider.notifier)
.update((state) => widget.room);
context.pushNamed(
Routes.chatroom.name,
pathParameters: {'roomId': roomId},
);

if (!isDesktop(context)) {
Copy link
Contributor

@gnunicorn gnunicorn Aug 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not fond of this, but good enough for now. let's work on the actual routing in another PR

context.pushNamed(
Routes.chatroom.name,
pathParameters: {'roomId': roomId},
);
} else if (location != Routes.chat.route) {
context.pushNamed(
Routes.chatroom.name,
pathParameters: {'roomId': roomId},
);
}
},
subtitle: _SubtitleWidget(
room: widget.room,
Expand Down Expand Up @@ -167,14 +178,17 @@ class _SubtitleWidget extends ConsumerWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
overflow: TextOverflow.ellipsis,
),
),
),
Flexible(
Expand All @@ -194,7 +208,6 @@ class _SubtitleWidget extends ConsumerWidget {
],
);
}
return const SizedBox.shrink();
case 'm.reaction':
TextDesc? textDesc = eventItem.textDesc();
if (textDesc == null) {
Expand All @@ -208,14 +221,17 @@ class _SubtitleWidget extends ConsumerWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
overflow: TextOverflow.ellipsis,
),
),
),
Flexible(
Expand All @@ -237,40 +253,54 @@ class _SubtitleWidget extends ConsumerWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
overflow: TextOverflow.ellipsis,
),
),
),
Text(
eventItem.textDesc()!.body(),
style: Theme.of(context).textTheme.bodySmall,
Flexible(
child: Text(
eventItem.textDesc()!.body(),
style: Theme.of(context).textTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
),
],
);
case 'm.room.redaction':
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
overflow: TextOverflow.ellipsis,
),
),
),
Flexible(
child: Text(
'***This message has been deleted***',
style: Theme.of(context).textTheme.bodySmall,
'This message has been deleted',
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: Theme.of(context).colorScheme.neutral5,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w700,
),
overflow: TextOverflow.ellipsis,
),
),
],
Expand All @@ -279,20 +309,27 @@ class _SubtitleWidget extends ConsumerWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
overflow: TextOverflow.ellipsis,
),
),
),
Flexible(
child: Text(
'***Failed to decrypt message. Re-request session keys***',
style: Theme.of(context).textTheme.bodySmall,
'Failed to decrypt message. Re-request session keys',
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: Theme.of(context).colorScheme.neutral5,
fontStyle: FontStyle.italic,
),
overflow: TextOverflow.ellipsis,
),
),
],
Expand All @@ -310,14 +347,17 @@ class _SubtitleWidget extends ConsumerWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
'${simplifyUserId(sender)}: ',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontWeight: FontWeight.w700),
overflow: TextOverflow.ellipsis,
),
),
),
Flexible(
Expand Down
Loading