Skip to content

Commit

Permalink
feat: new encrypted message design
Browse files Browse the repository at this point in the history
  • Loading branch information
Julian KOUNE authored and hoangdat committed Oct 5, 2023
1 parent a18dcf2 commit 01d5be1
Show file tree
Hide file tree
Showing 7 changed files with 153 additions and 121 deletions.
3 changes: 2 additions & 1 deletion assets/l10n/intl_en.arb
Original file line number Diff line number Diff line change
Expand Up @@ -2754,5 +2754,6 @@
"workIdentitiesInfo": "WORK IDENTITIES INFO",
"editWorkIdentitiesDescriptions": "Edit your work identity settings such as Matrix ID, email or company name.",
"copiedMatrixIdToClipboard": "Copied Matrix ID to clipboard.",
"changeProfilePhoto": "Change profile photo"
"changeProfilePhoto": "Change profile photo",
"thisMessageHasBeenEncrypted": "This message has been encrypted"
}
45 changes: 0 additions & 45 deletions lib/pages/chat/encryption_button.dart

This file was deleted.

56 changes: 56 additions & 0 deletions lib/pages/chat/events/encrypted_content.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import 'package:fluffychat/pages/chat/events/encrypted_content_style.dart';
import 'package:fluffychat/pages/chat/events/encrypted_mixin.dart';
import 'package:flutter/material.dart';
import 'package:matrix/matrix.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';

class EncryptedContent extends StatelessWidget with EncryptedMixin {
final Event event;

const EncryptedContent({Key? key, required this.event}) : super(key: key);

@override
Widget build(BuildContext context) {
return Padding(
padding: EncryptedContentStyle.parentPadding,
child: InkWell(
onTap: () => verifyOrRequestKey(context, event),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onError,
shape: BoxShape.circle,
),
padding: EncryptedContentStyle.leadingIconPadding,
child: Icon(
Icons.lock,
color: Theme.of(context).colorScheme.primary,
size: EncryptedContentStyle.leadingIconSize,
),
),
const SizedBox(width: EncryptedContentStyle.leadingAndTextGap),
Container(
constraints: const BoxConstraints(
maxWidth: EncryptedContentStyle.textMaxWidth,
),
child: Text(
maxLines: 2,
L10n.of(context)!.thisMessageHasBeenEncrypted,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
),
),
],
),
],
),
),
);
}
}
11 changes: 11 additions & 0 deletions lib/pages/chat/events/encrypted_content_style.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import 'package:flutter/material.dart';

class EncryptedContentStyle {
static const EdgeInsets parentPadding = EdgeInsets.symmetric(
horizontal: 8,
);
static const EdgeInsets leadingIconPadding = EdgeInsets.all(5);
static const double leadingIconSize = 20;
static const double leadingAndTextGap = 8;
static const double textMaxWidth = 165;
}
75 changes: 75 additions & 0 deletions lib/pages/chat/events/encrypted_mixin.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import 'package:fluffychat/pages/bootstrap/bootstrap_dialog.dart';
import 'package:fluffychat/pages/chat/events/message_content_style.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:fluffychat/widgets/avatar/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'package:flutter/material.dart';
import 'package:matrix/matrix.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';

mixin EncryptedMixin {
void verifyOrRequestKey(BuildContext context, Event event) async {
final l10n = L10n.of(context)!;
if (event.content['can_request_session'] != true) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
event.type == EventTypes.Encrypted
? l10n.needPantalaimonWarning
: event.calcLocalizedBodyFallback(
MatrixLocals(l10n),
),
),
),
);
return;
}
final client = Matrix.of(context).client;
if (client.isUnknownSession && client.encryption!.crossSigning.enabled) {
final success = await BootstrapDialog(
client: Matrix.of(context).client,
).show(context);
if (success != true) return;
}
event.requestKey();
final sender = event.senderFromMemoryOrFallback;
await showAdaptiveBottomSheet(
context: context,
builder: (context) => Scaffold(
appBar: AppBar(
leading: CloseButton(onPressed: Navigator.of(context).pop),
title: Text(
l10n.whyIsThisMessageEncrypted,
style:
const TextStyle(fontSize: MessageContentStyle.appBarFontSize),
),
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(16),
children: [
ListTile(
contentPadding: EdgeInsets.zero,
leading: Avatar(
mxContent: sender.avatarUrl,
name: sender.calcDisplayname(),
),
title: Text(sender.calcDisplayname()),
subtitle: Text(event.originServerTs.localizedTime(context)),
trailing: const Icon(Icons.lock_outlined),
),
const Divider(),
Text(
event.calcLocalizedBodyFallback(
MatrixLocals(l10n),
),
)
],
),
),
),
);
}
}
6 changes: 5 additions & 1 deletion lib/pages/chat/events/message.dart
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ class Message extends StatelessWidget {
}.contains(event.messageType);
final timelineText = {
MessageTypes.Text,
MessageTypes.BadEncrypted,
}.contains(event.messageType);
final noPadding = {
MessageTypes.File,
Expand Down Expand Up @@ -577,7 +578,10 @@ class Message extends StatelessWidget {
}

bool hideDisplayName(bool ownMessage) =>
ownMessage || event.room.isDirectChat || !isSameSender(nextEvent, event);
ownMessage ||
event.room.isDirectChat ||
!isSameSender(nextEvent, event) ||
event.type == EventTypes.Encrypted;

Widget _menuActionsRowBuilder(BuildContext context, bool ownMessage) {
return ValueListenableBuilder(
Expand Down
78 changes: 4 additions & 74 deletions lib/pages/chat/events/message_content.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import 'package:fluffychat/app_state/success.dart';
import 'package:fluffychat/domain/app_state/room/chat_room_search_state.dart';
import 'package:fluffychat/pages/chat/chat.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/pages/bootstrap/bootstrap_dialog.dart';
import 'package:fluffychat/pages/chat/events/encrypted_content.dart';
import 'package:fluffychat/pages/chat/events/message_content_style.dart';
import 'package:fluffychat/pages/chat/events/sending_image_info_widget.dart';
import 'package:fluffychat/pages/chat/events/sending_video_widget.dart';
Expand All @@ -20,11 +20,8 @@ import 'package:flutter_matrix_html/color_extension.dart';
import 'package:matrix/matrix.dart' hide Visibility;

import 'package:fluffychat/pages/chat/events/event_video_player.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
import 'package:fluffychat/widgets/avatar/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'audio_player.dart';
import 'cute_events.dart';
Expand Down Expand Up @@ -58,77 +55,15 @@ class MessageContent extends StatelessWidget with PlayVideoActionMixin {
required this.ownMessage,
}) : super(key: key);

void _verifyOrRequestKey(BuildContext context) async {
final l10n = L10n.of(context)!;
if (event.content['can_request_session'] != true) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
event.type == EventTypes.Encrypted
? l10n.needPantalaimonWarning
: event.calcLocalizedBodyFallback(
MatrixLocals(l10n),
),
),
),
);
return;
}
final client = Matrix.of(context).client;
if (client.isUnknownSession && client.encryption!.crossSigning.enabled) {
final success = await BootstrapDialog(
client: Matrix.of(context).client,
).show(context);
if (success != true) return;
}
event.requestKey();
final sender = event.senderFromMemoryOrFallback;
await showAdaptiveBottomSheet(
context: context,
builder: (context) => Scaffold(
appBar: AppBar(
leading: CloseButton(onPressed: Navigator.of(context).pop),
title: Text(
l10n.whyIsThisMessageEncrypted,
style:
const TextStyle(fontSize: MessageContentStyle.appBarFontSize),
),
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(16),
children: [
ListTile(
contentPadding: EdgeInsets.zero,
leading: Avatar(
mxContent: sender.avatarUrl,
name: sender.calcDisplayname(),
),
title: Text(sender.calcDisplayname()),
subtitle: Text(event.originServerTs.localizedTime(context)),
trailing: const Icon(Icons.lock_outlined),
),
const Divider(),
Text(
event.calcLocalizedBodyFallback(
MatrixLocals(l10n),
),
)
],
),
),
),
);
}

@override
Widget build(BuildContext context) {
final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
final buttonTextColor =
event.senderId == Matrix.of(context).client.userID ? textColor : null;
switch (event.type) {
case EventTypes.Message:
case EventTypes.Encrypted:
return EncryptedContent(event: event);
case EventTypes.Message:
case EventTypes.Sticker:
switch (event.messageType) {
case MessageTypes.Image:
Expand Down Expand Up @@ -245,12 +180,7 @@ class MessageContent extends StatelessWidget with PlayVideoActionMixin {
continue textmessage;
case MessageTypes.BadEncrypted:
case EventTypes.Encrypted:
return _ButtonContent(
textColor: buttonTextColor,
onPressed: () => _verifyOrRequestKey(context),
icon: const Icon(Icons.lock_outline),
label: L10n.of(context)!.encrypted,
);
return EncryptedContent(event: event);
case MessageTypes.Location:
final geoUri =
Uri.tryParse(event.content.tryGet<String>('geo_uri')!);
Expand Down

0 comments on commit 01d5be1

Please sign in to comment.