ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Implement avatar image viewer and adjust design

Browse source 
Signed-off-by: Krille <c.kussowski@famedly.com>
This commit is contained in:
Krille 2025-04-13 11:04:52 +02:00
parent 2873a047f8
commit 3594fa4f6d
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
12 changed files with 151 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/pages/bootstrap/bootstrap_dialog.dart
View file

@ -18,6 +18,7 @@ import '../key_verification/key_verification_dialog.dart';
class BootstrapDialog extends StatefulWidget {
final bool wipe;
final Client client;
const BootstrapDialog({
super.key,
this.wipe = false,
@ -132,7 +133,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
minLines: 2,
maxLines: 4,
readOnly: true,
style: const TextStyle(fontFamily: 'UbuntuMono'),
style: const TextStyle(fontFamily: 'RobotoMono'),
controller: TextEditingController(text: key),
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(16),
@ -257,7 +258,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
? null
: [AutofillHints.password],
controller: _recoveryKeyTextEditingController,
style: const TextStyle(fontFamily: 'UbuntuMono'),
style: const TextStyle(fontFamily: 'RobotoMono'),
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(16),
hintStyle: TextStyle(

2
lib/pages/chat/events/html_message.dart
View file

@ -295,7 +295,7 @@ class HtmlMessage extends StatelessWidget {
),
textStyle: TextStyle(
fontSize: fontSize,
fontFamily: 'UbuntuMono',
fontFamily: 'RobotoMono',
),
),
),

4
lib/pages/chat/input_bar.dart
View file

@ -235,7 +235,7 @@ class InputBar extends StatelessWidget {
children: [
Text(
commandExample(command),
style: const TextStyle(fontFamily: 'UbuntuMono'),
style: const TextStyle(fontFamily: 'RobotoMono'),
),
Text(
hint,
@ -255,7 +255,7 @@ class InputBar extends StatelessWidget {
waitDuration: const Duration(days: 1), // don't show on hover
child: Container(
padding: padding,
child: Text(label, style: const TextStyle(fontFamily: 'UbuntuMono')),
child: Text(label, style: const TextStyle(fontFamily: 'RobotoMono')),
),
);
}

9
lib/pages/chat_details/chat_details_view.dart
View file

@ -14,6 +14,7 @@ import 'package:fluffychat/widgets/chat_settings_popup_menu.dart';
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
import 'package:fluffychat/widgets/matrix.dart';
import '../../utils/url_launcher.dart';
import '../../widgets/mxc_image_viewer.dart';
import '../../widgets/qr_code_viewer.dart';
class ChatDetailsView extends StatelessWidget {
@ -38,6 +39,7 @@ class ChatDetailsView extends StatelessWidget {
}
final directChatMatrixID = room.directChatMatrixID;
final roomAvatar = room.avatar;
return StreamBuilder(
stream: room.client.onRoomState.stream
@ -108,6 +110,13 @@ class ChatDetailsView extends StatelessWidget {
mxContent: room.avatar,
name: displayname,
size: Avatar.defaultSize * 2.5,
onTap: roomAvatar != null
? () => showDialog(
context: context,
builder: (_) =>
MxcImageViewer(roomAvatar),
)
: null,
),
),
if (!room.isDirectChat &&

2
lib/pages/chat_encryption_settings/chat_encryption_settings_view.dart
View file

@ -169,7 +169,7 @@ class ChatEncryptionSettingsView extends StatelessWidget {
deviceKeys[i].ed25519Key?.beautified ??
L10n.of(context).unknownEncryptionAlgorithm,
style: TextStyle(
fontFamily: 'UbuntuMono',
fontFamily: 'RobotoMono',
color: theme.colorScheme.secondary,
),
),

11
lib/pages/settings/settings_view.dart
View file

@ -12,6 +12,7 @@ import 'package:fluffychat/utils/platform_infos.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'package:fluffychat/widgets/navigation_rail.dart';
import '../../widgets/mxc_image_viewer.dart';
import 'settings.dart';
class SettingsView extends StatelessWidget {
@ -65,6 +66,7 @@ class SettingsView extends StatelessWidget {
future: controller.profileFuture,
builder: (context, snapshot) {
final profile = snapshot.data;
final avatar = profile?.avatarUrl;
final mxid = Matrix.of(context).client.userID ??
L10n.of(context).user;
final displayname =
@ -76,9 +78,16 @@ class SettingsView extends StatelessWidget {
child: Stack(
children: [
Avatar(
mxContent: profile?.avatarUrl,
mxContent: avatar,
name: displayname,
size: Avatar.defaultSize * 2.5,
onTap: avatar != null
? () => showDialog(
context: context,
builder: (_) =>
MxcImageViewer(avatar),
)
: null,
),
if (profile != null)
Positioned(

3
lib/pages/settings_security/settings_security_view.dart
View file

@ -16,6 +16,7 @@ import 'settings_security.dart';
class SettingsSecurityView extends StatelessWidget {
final SettingsSecurityController controller;
const SettingsSecurityView(this.controller, {super.key});
@override
@ -143,7 +144,7 @@ class SettingsSecurityView extends StatelessWidget {
leading: const Icon(Icons.vpn_key_outlined),
subtitle: SelectableText(
Matrix.of(context).client.fingerprintKey.beautified,
style: const TextStyle(fontFamily: 'UbuntuMono'),
style: const TextStyle(fontFamily: 'RobotoMono'),
),
),
if (capabilities?.mChangePassword?.enabled != false ||

4
lib/utils/string_color.dart
View file

@ -9,7 +9,7 @@ extension StringColor on String {
number += codeUnitAt(i);
}
number = (number % 12) * 25.5;
return HSLColor.fromAHSL(1, number, 1, light).toColor();
return HSLColor.fromAHSL(0.75, number, 1, light).toColor();
}
Color get color {
@ -29,6 +29,6 @@ extension StringColor on String {
Color get lightColorAvatar {
_colorCache[this] ??= {};
return _colorCache[this]![0.4] ??= _getColorLight(0.4);
return _colorCache[this]![0.45] ??= _getColorLight(0.45);
}
}

85
lib/widgets/adaptive_dialogs/user_dialog.dart
View file

@ -15,6 +15,7 @@ import '../../utils/url_launcher.dart';
import '../future_loading_dialog.dart';
import '../hover_builder.dart';
import '../matrix.dart';
import '../mxc_image_viewer.dart';
class UserDialog extends StatelessWidget {
static Future<void> show({
@ -45,6 +46,7 @@ class UserDialog extends StatelessWidget {
L10n.of(context).user;
var copied = false;
final theme = Theme.of(context);
final avatar = profile.avatarUrl;
return AlertDialog.adaptive(
title: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 256),
@ -75,54 +77,65 @@ class UserDialog extends StatelessWidget {
children: [
HoverBuilder(
builder: (context, hovered) => StatefulBuilder(
builder: (context, setState) => GestureDetector(
onTap: () {
Clipboard.setData(
ClipboardData(text: profile.userId),
);
setState(() {
copied = true;
});
},
child: RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Padding(
padding: const EdgeInsets.only(right: 4.0),
child: AnimatedScale(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
scale: hovered
? 1.33
: copied
? 1.25
: 1.0,
child: Icon(
copied
? Icons.check_circle
: Icons.copy,
size: 12,
color: copied ? Colors.green : null,
builder: (context, setState) => MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
Clipboard.setData(
ClipboardData(text: profile.userId),
);
setState(() {
copied = true;
});
},
child: RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Padding(
padding:
const EdgeInsets.only(right: 4.0),
child: AnimatedScale(
duration:
FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
scale: hovered
? 1.33
: copied
? 1.25
: 1.0,
child: Icon(
copied
? Icons.check_circle
: Icons.copy,
size: 12,
color: copied ? Colors.green : null,
),
),
),
),
),
TextSpan(text: profile.userId),
],
style: theme.textTheme.bodyMedium
?.copyWith(fontSize: 10),
TextSpan(text: profile.userId),
],
style: theme.textTheme.bodyMedium
?.copyWith(fontSize: 10),
),
textAlign: TextAlign.center,
),
textAlign: TextAlign.center,
),
),
),
),
Center(
child: Avatar(
mxContent: profile.avatarUrl,
mxContent: avatar,
name: displayname,
size: Avatar.defaultSize * 2,
onTap: avatar != null
? () => showDialog(
context: context,
builder: (_) => MxcImageViewer(avatar),
)
: null,
),
),
if (presenceText != null)

19
lib/widgets/avatar.dart
View file

@ -62,18 +62,13 @@ class Avatar extends StatelessWidget {
clipBehavior: Clip.hardEdge,
child: noPic
? Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [name!.lightColorAvatar, name.color],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
decoration: BoxDecoration(color: name!.lightColorAvatar),
alignment: Alignment.center,
child: Text(
fallbackLetters,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'RobotoMono',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: (size / 2.5).roundToDouble(),
@ -143,10 +138,12 @@ class Avatar extends StatelessWidget {
],
);
if (onTap == null) return container;
return InkWell(
onTap: onTap,
borderRadius: borderRadius,
child: container,
return MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: onTap,
child: container,
),
);
}
}

60
lib/widgets/mxc_image_viewer.dart Normal file
View file

@ -0,0 +1,60 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'mxc_image.dart';
class MxcImageViewer extends StatelessWidget {
final Uri mxContent;
const MxcImageViewer(this.mxContent, {super.key});
@override
Widget build(BuildContext context) {
final iconButtonStyle = IconButton.styleFrom(
backgroundColor: Colors.black.withAlpha(200),
foregroundColor: Colors.white,
);
return GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Scaffold(
backgroundColor: Colors.black.withAlpha(128),
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
leading: IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.close),
onPressed: Navigator.of(context).pop,
color: Colors.white,
tooltip: L10n.of(context).close,
),
backgroundColor: Colors.transparent,
),
body: InteractiveViewer(
minScale: 1.0,
maxScale: 10.0,
onInteractionEnd: (endDetails) {
if (endDetails.velocity.pixelsPerSecond.dy >
MediaQuery.of(context).size.height * 1.5) {
Navigator.of(context, rootNavigator: false).pop();
}
},
child: Center(
child: GestureDetector(
// Ignore taps to not go back here:
onTap: () {},
child: MxcImage(
key: ValueKey(mxContent.toString()),
uri: mxContent,
fit: BoxFit.contain,
isThumbnail: false,
animated: true,
),
),
),
),
),
);
}
}

6
lib/widgets/permission_slider_dialog.dart
View file

@ -1,7 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:fluffychat/widgets/adaptive_dialogs/adaptive_dialog_action.dart';
import 'package:fluffychat/widgets/adaptive_dialogs/dialog_text_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
Future<int?> showPermissionChooser(
BuildContext context, {