HyperNet/Surface
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimization of UX in messages

Browse Source
This commit is contained in:
LittleSheep 2024-11-25 00:05:49 +08:00
parent 9b6544df46
commit a59de65130
12 changed files with 170 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/translations/en.json
View File

@ -228,5 +228,7 @@
"callVideoFlip": "Mirror video", "callVideoFlip": "Mirror video",
"callSpeakerphoneToggle": "Toggle speakerphone", "callSpeakerphoneToggle": "Toggle speakerphone",
"callScreenOff": "Turn off screen share", "callScreenOff": "Turn off screen share",
"callScreenOn": "Turn on screen share" "callScreenOn": "Turn on screen share",
"callMessageEnded": "Call lasted {}",
"callMessageStarted": "Call started"
} }

4
assets/translations/zh.json
View File

@ -228,5 +228,7 @@
"callVideoFlip": "镜像画面", "callVideoFlip": "镜像画面",
"callSpeakerphoneToggle": "切换扬声器", "callSpeakerphoneToggle": "切换扬声器",
"callScreenOff": "关闭屏幕共享", "callScreenOff": "关闭屏幕共享",
"callScreenOn": "开启屏幕共享" "callScreenOn": "开启屏幕共享",
"callMessageEnded": "通话持续了 {}",
"callMessageStarted": "通话开始了"
} }

3
ios/Runner.xcodeproj/project.pbxproj
View File

@ -518,6 +518,7 @@
ENABLE_BITCODE = NO; ENABLE_BITCODE = NO;
INFOPLIST_FILE = Runner/Info.plist; INFOPLIST_FILE = Runner/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = Solian; INFOPLIST_KEY_CFBundleDisplayName = Solian;
INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
LD_RUNPATH_SEARCH_PATHS = ( LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",
"@executable_path/Frameworks", "@executable_path/Frameworks",
@ -703,6 +704,7 @@
ENABLE_BITCODE = NO; ENABLE_BITCODE = NO;
INFOPLIST_FILE = Runner/Info.plist; INFOPLIST_FILE = Runner/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = Solian; INFOPLIST_KEY_CFBundleDisplayName = Solian;
INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
LD_RUNPATH_SEARCH_PATHS = ( LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",
"@executable_path/Frameworks", "@executable_path/Frameworks",
@ -728,6 +730,7 @@
ENABLE_BITCODE = NO; ENABLE_BITCODE = NO;
INFOPLIST_FILE = Runner/Info.plist; INFOPLIST_FILE = Runner/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = Solian; INFOPLIST_KEY_CFBundleDisplayName = Solian;
INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
LD_RUNPATH_SEARCH_PATHS = ( LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",
"@executable_path/Frameworks", "@executable_path/Frameworks",

2
ios/Runner/Info.plist
View File

@ -45,6 +45,8 @@
<array> <array>
<string>fetch</string> <string>fetch</string>
<string>remote-notification</string> <string>remote-notification</string>
<string>audio</string>
<string>voip</string>
</array> </array>
<key>UILaunchStoryboardName</key> <key>UILaunchStoryboardName</key>
<string>LaunchScreen</string> <string>LaunchScreen</string>

2
ios/Runner/Runner.entitlements
View File

@ -4,5 +4,7 @@
<dict> <dict>
<key>aps-environment</key> <key>aps-environment</key>
<string>development</string> <string>development</string>
<key>com.apple.developer.usernotifications.communication</key>
<true/>
</dict> </dict>
</plist> </plist>

8
lib/screens/chat/call_room.dart
View File

@ -35,7 +35,8 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
return Stack( return Stack(
children: [ children: [
Container( Container(
color: Theme.of(context).colorScheme.surfaceContainer, color:
Theme.of(context).colorScheme.surfaceContainer.withOpacity(0.75),
child: call.focusTrack != null child: call.focusTrack != null
? InteractiveParticipantWidget( ? InteractiveParticipantWidget(
isFixedAvatar: false, isFixedAvatar: false,
@ -113,7 +114,10 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
child: ClipRRect( child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)), borderRadius: const BorderRadius.all(Radius.circular(8)),
child: InteractiveParticipantWidget( child: InteractiveParticipantWidget(
color: Theme.of(context).colorScheme.surfaceContainerHigh, color: Theme.of(context)
.colorScheme
.surfaceContainerHigh
.withOpacity(0.75),
participant: track, participant: track,
onTap: () { onTap: () {
if (track.participant.sid != if (track.participant.sid !=

39
lib/screens/chat/room.dart
View File

@ -138,6 +138,12 @@ class _ChatRoomScreenState extends State<ChatRoomScreen> {
); );
} }
bool _checkMessageMergeable(SnChatMessage? a, SnChatMessage? b) {
if (a == null || b == null) return false;
if (a.sender.accountId != b.sender.accountId) return false;
return a.createdAt.difference(b.createdAt).inMinutes <= 3;
}
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -248,27 +254,20 @@ class _ChatRoomScreenState extends State<ChatRoomScreen> {
}, },
itemBuilder: (context, idx) { itemBuilder: (context, idx) {
final message = _messageController.messages[idx]; final message = _messageController.messages[idx];
final nextMessage =
idx < _messageController.messages.length - 1
? _messageController.messages[idx + 1]
: null;
final previousMessage =
idx > 0 ? _messageController.messages[idx - 1] : null;
final canMerge = nextMessage != null && bool canMerge = false, canMergePrevious = false;
nextMessage.senderId == message.senderId && if (idx > 0) {
message.createdAt canMergePrevious = _checkMessageMergeable(
.difference(nextMessage.createdAt) _messageController.messages[idx - 1],
.inMinutes _messageController.messages[idx],
.abs() <= );
3; }
final canMergePrevious = previousMessage != null && if (idx + 1 < _messageController.messages.length) {
previousMessage.senderId == message.senderId && canMerge = _checkMessageMergeable(
message.createdAt _messageController.messages[idx],
.difference(previousMessage.createdAt) _messageController.messages[idx + 1],
.inMinutes );
.abs() <= }
3;
return ChatMessage( return ChatMessage(
data: message, data: message,

38
lib/screens/post/post_detail.dart
View File

@ -86,22 +86,28 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
GoRouter.of(context).replaceNamed('explore'); GoRouter.of(context).replaceNamed('explore');
}, },
), ),
flexibleSpace: Column( title: _data?.body['title'] != null
mainAxisAlignment: MainAxisAlignment.center, ? RichText(
children: [ textAlign: TextAlign.center,
if (_data?.body['title'] != null) text: TextSpan(children: [
Text(_data?.body['title'] ?? 'postNoun'.tr()) TextSpan(
.textStyle(Theme.of(context).textTheme.titleLarge!) text: _data?.body['title'] ?? 'postNoun'.tr(),
.textColor(Colors.white), style: Theme.of(context)
if (_data?.body['title'] != null) .textTheme
Text('postDetail'.tr()) .titleLarge!
.textColor(Colors.white.withAlpha((255 * 0.9).round())) .copyWith(color: Colors.white),
else ),
Text('postDetail'.tr()) const TextSpan(text: '\n'),
.textStyle(Theme.of(context).textTheme.titleLarge!) TextSpan(
.textColor(Colors.white), text: 'postDetail'.tr(),
], style: Theme.of(context)
).padding(top: math.max(MediaQuery.of(context).padding.top, 8)), .textTheme
.bodySmall!
.copyWith(color: Colors.white),
),
]),
)
: Text('postDetail').tr(),
), ),
body: CustomScrollView( body: CustomScrollView(
slivers: [ slivers: [

36
lib/screens/post/post_editor.dart
View File

@ -1,5 +1,3 @@
import 'dart:math' as math;
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
@ -129,18 +127,28 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
Navigator.pop(context); Navigator.pop(context);
}, },
), ),
flexibleSpace: Column( title: RichText(
children: [ textAlign: TextAlign.center,
Text(_writeController.title.isNotEmpty text: TextSpan(children: [
? _writeController.title TextSpan(
: 'untitled'.tr()) text: _writeController.title.isNotEmpty
.textStyle(Theme.of(context).textTheme.titleLarge!) ? _writeController.title
.textColor(Colors.white), : 'untitled'.tr(),
Text(PostWriteController.kTitleMap[widget.mode]!) style: Theme.of(context)
.tr() .textTheme
.textColor(Colors.white.withAlpha((255 * 0.9).round())), .titleLarge!
], .copyWith(color: Colors.white),
).padding(top: math.max(MediaQuery.of(context).padding.top, 8)), ),
const TextSpan(text: '\n'),
TextSpan(
text: PostWriteController.kTitleMap[widget.mode]!,
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.white),
),
]),
),
actions: [ actions: [
IconButton( IconButton(
icon: const Icon(Symbols.tune), icon: const Icon(Symbols.tune),

56
lib/widgets/chat/chat_message.dart
View File

@ -47,8 +47,10 @@ class ChatMessage extends StatelessWidget {
return SwipeTo( return SwipeTo(
key: Key('chat-message-${data.id}'), key: Key('chat-message-${data.id}'),
iconOnLeftSwipe: Symbols.reply, iconOnLeftSwipe: Symbols.reply,
iconOnRightSwipe: Symbols.edit,
swipeSensitivity: 20, swipeSensitivity: 20,
onLeftSwipe: onReply != null ? (_) => onReply!(data) : null, onLeftSwipe: onReply != null ? (_) => onReply!(data) : null,
onRightSwipe: onEdit != null ? (_) => onEdit!(data) : null,
child: ContextMenuRegion( child: ContextMenuRegion(
contextMenu: ContextMenu( contextMenu: ContextMenu(
entries: [ entries: [
@ -111,10 +113,6 @@ class ChatMessage extends StatelessWidget {
? data.sender.nick! ? data.sender.nick!
: user?.nick ?? 'unknown', : user?.nick ?? 'unknown',
).bold(), ).bold(),
if (data.updatedAt != data.createdAt)
Text(
'messageEditedHint'.tr(),
).fontSize(14).opacity(0.75).padding(left: 6),
const Gap(6), const Gap(6),
Text( Text(
dateFormatter.format(data.createdAt.toLocal()), dateFormatter.format(data.createdAt.toLocal()),
@ -163,7 +161,10 @@ class ChatMessage extends StatelessWidget {
maxHeight: 520, maxHeight: 520,
listPadding: const EdgeInsets.only(top: 8), listPadding: const EdgeInsets.only(top: 8),
), ),
if (!hasMerged && !isCompact) const Gap(12), if (!hasMerged && !isCompact)
const Gap(12)
else if (!isCompact)
const Gap(6),
], ],
), ),
), ),
@ -178,9 +179,18 @@ class _ChatMessageText extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (data.body['text'] != null && data.body['text'].isNotEmpty) { if (data.body['text'] != null && data.body['text'].isNotEmpty) {
return MarkdownTextContent( return Column(
content: data.body['text'], crossAxisAlignment: CrossAxisAlignment.start,
isAutoWarp: true, children: [
MarkdownTextContent(
content: data.body['text'],
isAutoWarp: true,
),
if (data.updatedAt != data.createdAt)
Text(
'messageEditedHint'.tr(),
).fontSize(13).opacity(0.75),
],
); );
} else if (data.body['attachments']?.isNotEmpty) { } else if (data.body['attachments']?.isNotEmpty) {
return Row( return Row(
@ -204,6 +214,14 @@ class _ChatMessageSystemNotify extends StatelessWidget {
final SnChatMessage data; final SnChatMessage data;
const _ChatMessageSystemNotify({super.key, required this.data}); const _ChatMessageSystemNotify({super.key, required this.data});
String _formatDuration(Duration duration) {
String negativeSign = duration.isNegative ? '-' : '';
String twoDigits(int n) => n.toString().padLeft(2, '0');
String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60).abs());
String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60).abs());
return '$negativeSign${twoDigits(duration.inHours)}:$twoDigitMinutes:$twoDigitSeconds';
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
switch (data.type) { switch (data.type) {
@ -227,6 +245,28 @@ class _ChatMessageSystemNotify extends StatelessWidget {
), ),
], ],
).opacity(0.75); ).opacity(0.75);
case 'calls.start':
return Row(
children: [
const Icon(Symbols.call, size: 20),
const Gap(4),
Text(
'callMessageStarted'.tr(),
),
],
).opacity(0.75);
case 'calls.end':
return Row(
children: [
const Icon(Symbols.call_end, size: 20),
const Gap(4),
Text(
'callMessageEnded'.tr(args: [
_formatDuration(Duration(seconds: data.body['last'])),
]),
),
],
).opacity(0.75);
default: default:
return Row( return Row(
children: [ children: [

1
lib/widgets/chat/chat_message_input.dart
View File

@ -36,6 +36,7 @@ class ChatMessageInputState extends State<ChatMessageInput> {
} }
void setEdit(SnChatMessage? value) { void setEdit(SnChatMessage? value) {
_contentController.text = value?.body['text'] ?? '';
setState(() => _editingMessage = value); setState(() => _editingMessage = value);
} }

71
lib/widgets/connection_indicator.dart
View File

@ -17,38 +17,45 @@ class ConnectionIndicator extends StatelessWidget {
builder: (context, _) { builder: (context, _) {
final ua = context.read<UserProvider>(); final ua = context.read<UserProvider>();
return Container( return GestureDetector(
padding: EdgeInsets.only( child: Container(
bottom: 8, padding: EdgeInsets.only(
top: MediaQuery.of(context).padding.top + 8, bottom: 8,
left: 24, top: MediaQuery.of(context).padding.top + 8,
right: 24, left: 24,
), right: 24,
color: Theme.of(context).colorScheme.secondaryContainer, ),
child: ua.isAuthorized color: Theme.of(context).colorScheme.secondaryContainer,
? Row( child: ua.isAuthorized
mainAxisAlignment: MainAxisAlignment.center, ? Row(
crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ crossAxisAlignment: CrossAxisAlignment.center,
if (ws.isBusy) children: [
Text('serverConnecting').tr().textColor( if (ws.isBusy)
Theme.of(context).colorScheme.onSecondaryContainer) Text('serverConnecting').tr().textColor(
else if (!ws.isConnected) Theme.of(context).colorScheme.onSecondaryContainer)
Text('serverDisconnected').tr().textColor( else if (!ws.isConnected)
Theme.of(context).colorScheme.onSecondaryContainer), Text('serverDisconnected').tr().textColor(
], Theme.of(context).colorScheme.onSecondaryContainer),
) ],
: const SizedBox.shrink(), )
) : const SizedBox.shrink(),
.height( )
(ws.isBusy || !ws.isConnected) && ua.isAuthorized .height(
? MediaQuery.of(context).padding.top + 36 (ws.isBusy || !ws.isConnected) && ua.isAuthorized
: 0, ? MediaQuery.of(context).padding.top + 36
animate: true) : 0,
.animate( animate: true)
const Duration(milliseconds: 300), .animate(
Curves.easeInOut, const Duration(milliseconds: 300),
); Curves.easeInOut,
),
onTap: () {
if (!ws.isConnected && !ws.isBusy) {
ws.connect();
}
},
);
}, },
); );
} }