2ndbeam/fluffychat-fork
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
commit 3594fa4f6d
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
12 changed files with 151 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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, {