chore: Follow up new reactions picker

pull/1815/head
Christian Kußowski 4 months ago
parent 37d313c271
commit 13f27eda9f
No known key found for this signature in database
GPG Key ID: E067ECD60F1A0652

@ -24,7 +24,7 @@ abstract class AppConfig {
static String _privacyUrl =
'https://github.com/krille-chan/fluffychat/blob/main/PRIVACY.md';
static const Set<String> defaultReactions = {'👍', '❤️', '😊'};
static const Set<String> defaultReactions = {'👍', '❤️', '😂', '😮', '😢'};
static String get privacyUrl => _privacyUrl;
static const String website = 'https://fluffychat.im';

@ -891,6 +891,16 @@ class ChatController extends State<ChatPageWithRoom>
return true;
}
bool get canEditSelectedEvents {
if (isArchived ||
selectedEvents.length != 1 ||
!selectedEvents.first.status.isSent) {
return false;
}
return currentRoomBundle
.any((cl) => selectedEvents.first.senderId == cl!.userID);
}
void forwardEventsAction() async {
if (selectedEvents.isEmpty) return;
await showScaffoldDialog(

@ -21,6 +21,7 @@ class ChatInputRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
const height = 48.0;
if (!controller.room.otherPartyCanReceiveMessages) {
@ -39,7 +40,71 @@ class ChatInputRow extends StatelessWidget {
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: controller.selectMode
? <Widget>[
if (controller.selectedEvents
.every((event) => event.status == EventStatus.error))
SizedBox(
height: height,
child: TextButton(
style: TextButton.styleFrom(
foregroundColor: theme.colorScheme.error,
),
onPressed: controller.deleteErrorEventsAction,
child: Row(
children: <Widget>[
const Icon(Icons.delete),
Text(L10n.of(context).delete),
],
),
),
)
else
SizedBox(
height: height,
child: TextButton(
onPressed: controller.forwardEventsAction,
child: Row(
children: <Widget>[
const Icon(Icons.keyboard_arrow_left_outlined),
Text(L10n.of(context).forward),
],
),
),
),
controller.selectedEvents.length == 1
? controller.selectedEvents.first
.getDisplayEvent(controller.timeline!)
.status
.isSent
? SizedBox(
height: height,
child: TextButton(
onPressed: controller.replyAction,
child: Row(
children: <Widget>[
Text(L10n.of(context).reply),
const Icon(Icons.keyboard_arrow_right),
],
),
),
)
: SizedBox(
height: height,
child: TextButton(
onPressed: controller.sendAgainAction,
child: Row(
children: <Widget>[
Text(L10n.of(context).tryToSendAgain),
const SizedBox(width: 4),
const Icon(Icons.send_outlined, size: 16),
],
),
),
)
: const SizedBox.shrink(),
]
: <Widget>[
const SizedBox(width: 4),
AnimatedContainer(
duration: FluffyThemes.animationDuration,
@ -51,17 +116,18 @@ class ChatInputRow extends StatelessWidget {
clipBehavior: Clip.hardEdge,
child: PopupMenuButton<String>(
useRootNavigator: true,
enabled: !controller.selectMode,
icon: const Icon(Icons.add_circle_outline),
iconColor: theme.colorScheme.onPrimaryContainer,
onSelected: controller.onAddPopupMenuButtonSelected,
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
itemBuilder: (BuildContext context) =>
<PopupMenuEntry<String>>[
if (PlatformInfos.isMobile)
PopupMenuItem<String>(
value: 'location',
child: ListTile(
leading: CircleAvatar(
backgroundColor: theme.colorScheme.onPrimaryContainer,
backgroundColor:
theme.colorScheme.onPrimaryContainer,
foregroundColor: theme.colorScheme.primaryContainer,
child: const Icon(Icons.gps_fixed_outlined),
),
@ -118,7 +184,6 @@ class ChatInputRow extends StatelessWidget {
decoration: const BoxDecoration(),
clipBehavior: Clip.hardEdge,
child: PopupMenuButton(
enabled: !controller.selectMode,
useRootNavigator: true,
icon: const Icon(Icons.camera_alt_outlined),
onSelected: controller.onAddPopupMenuButtonSelected,
@ -128,7 +193,8 @@ class ChatInputRow extends StatelessWidget {
value: 'camera-video',
child: ListTile(
leading: CircleAvatar(
backgroundColor: theme.colorScheme.onPrimaryContainer,
backgroundColor:
theme.colorScheme.onPrimaryContainer,
foregroundColor: theme.colorScheme.primaryContainer,
child: const Icon(Icons.videocam_outlined),
),
@ -140,7 +206,8 @@ class ChatInputRow extends StatelessWidget {
value: 'camera',
child: ListTile(
leading: CircleAvatar(
backgroundColor: theme.colorScheme.onPrimaryContainer,
backgroundColor:
theme.colorScheme.onPrimaryContainer,
foregroundColor: theme.colorScheme.primaryContainer,
child: const Icon(Icons.camera_alt_outlined),
),
@ -179,8 +246,7 @@ class ChatInputRow extends StatelessWidget {
key: ValueKey(controller.showEmojiPicker),
),
),
onPressed:
controller.selectMode ? null : controller.emojiPickerAction,
onPressed: controller.emojiPickerAction,
),
),
if (Matrix.of(context).isMultiAccount &&
@ -198,7 +264,6 @@ class ChatInputRow extends StatelessWidget {
child: InputBar(
room: controller.room,
minLines: 1,
readOnly: controller.selectMode,
maxLines: 8,
autofocus: !PlatformInfos.isMobile,
keyboardType: TextInputType.multiline,
@ -227,9 +292,7 @@ class ChatInputRow extends StatelessWidget {
),
),
),
Opacity(
opacity: controller.selectMode ? 0.66 : 1,
child: Container(
Container(
height: height,
width: height,
alignment: Alignment.center,
@ -237,9 +300,7 @@ class ChatInputRow extends StatelessWidget {
controller.sendController.text.isEmpty
? FloatingActionButton.small(
tooltip: L10n.of(context).voiceMessage,
onPressed: controller.selectMode
? null
: controller.voiceMessageAction,
onPressed: controller.voiceMessageAction,
elevation: 0,
heroTag: null,
shape: RoundedRectangleBorder(
@ -251,7 +312,7 @@ class ChatInputRow extends StatelessWidget {
)
: FloatingActionButton.small(
tooltip: L10n.of(context).send,
onPressed: controller.selectMode ? null : controller.send,
onPressed: controller.send,
elevation: 0,
heroTag: null,
shape: RoundedRectangleBorder(
@ -262,7 +323,6 @@ class ChatInputRow extends StatelessWidget {
child: const Icon(Icons.send_outlined),
),
),
),
],
);
}

@ -37,6 +37,12 @@ class ChatView extends StatelessWidget {
List<Widget> _appBarActions(BuildContext context) {
if (controller.selectMode) {
return [
if (controller.canEditSelectedEvents)
IconButton(
icon: const Icon(Icons.edit_outlined),
tooltip: L10n.of(context).edit,
onPressed: controller.editSelectedEventAction,
),
IconButton(
icon: const Icon(Icons.copy_outlined),
tooltip: L10n.of(context).copy,

@ -187,6 +187,9 @@ class Message extends StatelessWidget {
final showReceiptsRow =
event.hasAggregatedEvents(timeline, RelationshipTypes.reaction);
final showReactionPicker =
singleSelected && event.room.canSendDefaultMessages;
return Center(
child: Swipeable(
key: ValueKey(event.eventId),
@ -263,6 +266,7 @@ class Message extends StatelessWidget {
child: animateIn
? const SizedBox(height: 0, width: double.infinity)
: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: 0,
@ -290,7 +294,7 @@ class Message extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: rowMainAxisAlignment,
children: [
if (longPressSelect)
if (longPressSelect && !event.redacted)
SizedBox(
height: 32,
width: Avatar.defaultSize,
@ -413,8 +417,10 @@ class Message extends StatelessWidget {
),
Container(
alignment: alignment,
padding:
const EdgeInsets.only(left: 8),
padding: EdgeInsets.only(
left: 8,
bottom: showReactionPicker ? 40 : 0,
),
child: GestureDetector(
onLongPress: longPressSelect
? null
@ -625,75 +631,125 @@ class Message extends StatelessWidget {
),
],
),
],
),
);
},
),
Padding(
padding: const EdgeInsets.only(left: Avatar.defaultSize + 8.0),
Positioned(
left:
ownMessage ? null : Avatar.defaultSize + 8,
right: ownMessage ? 0 : null,
bottom: 0,
child: AnimatedSize(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
alignment: Alignment.bottomCenter,
child: singleSelected && event.room.canSendDefaultMessages
child: showReactionPicker
? Padding(
padding: const EdgeInsets.only(bottom: 4.0),
padding: const EdgeInsets.only(
top: 8.0,
bottom: 4.0,
),
child: Material(
elevation: 4,
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
shadowColor: theme.appBarTheme.shadowColor,
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
shadowColor: theme
.colorScheme.surface
.withAlpha(128),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.reply_outlined),
tooltip: L10n.of(context).reply,
onPressed: onSwipe,
...AppConfig.defaultReactions
.map(
(emoji) => IconButton(
padding: EdgeInsets.zero,
icon: Center(
child: Opacity(
opacity: sentReactions
.contains(emoji)
? 0.33
: 1,
child: Text(
emoji,
style:
const TextStyle(
fontSize: 20,
),
textAlign:
TextAlign.center,
),
),
),
onPressed: sentReactions
.contains(emoji)
? null
: () {
onSelect(event);
event.room
.sendReaction(
event.eventId,
emoji,
);
},
),
if (ownMessage)
IconButton(
icon: const Icon(Icons.edit_outlined),
tooltip: L10n.of(context).edit,
onPressed: onEdit,
),
IconButton(
icon: const Icon(Icons.add_reaction_outlined),
tooltip: L10n.of(context).customReaction,
icon: const Icon(
Icons.add_reaction_outlined,
),
tooltip: L10n.of(context)
.customReaction,
onPressed: () async {
final emoji = await showDialog<String>(
final emoji =
await showDialog<
String>(
context: context,
builder: (context) => AlertDialog(
builder: (context) =>
AlertDialog(
title: Row(
mainAxisSize: MainAxisSize.min,
mainAxisSize:
MainAxisSize.min,
spacing: 4,
children: [
CloseButton(
onPressed: () =>
Navigator.of(context)
.pop(null),
Navigator.of(
context,
).pop(
null,
),
),
Text(
L10n.of(context).customReaction,
L10n.of(context)
.customReaction,
),
],
),
titlePadding: const EdgeInsets.all(8),
contentPadding: const EdgeInsets.all(0),
clipBehavior: Clip.hardEdge,
titlePadding:
const EdgeInsets
.all(8),
contentPadding:
const EdgeInsets
.all(0),
clipBehavior:
Clip.hardEdge,
content: SizedBox(
width: 350,
height: 350,
child: EmojiPicker(
onEmojiSelected: (_, emoji) =>
Navigator.of(context)
.pop(emoji.emoji),
onEmojiSelected: (
_,
emoji,
) =>
Navigator.of(
context,
).pop(
emoji.emoji,
),
config: Config(
emojiViewConfig:
const EmojiViewConfig(
backgroundColor:
Colors.transparent,
Colors
.transparent,
),
bottomActionBarConfig:
const BottomActionBarConfig(
@ -701,29 +757,45 @@ class Message extends StatelessWidget {
),
categoryViewConfig:
CategoryViewConfig(
initCategory: Category.SMILEYS,
backspaceColor:
theme.colorScheme.primary,
initCategory:
Category
.SMILEYS,
backspaceColor: theme
.colorScheme
.primary,
iconColor: theme
.colorScheme.primary
.withAlpha(128),
.colorScheme
.primary
.withAlpha(
128,
),
iconColorSelected:
theme.colorScheme.primary,
indicatorColor:
theme.colorScheme.primary,
theme
.colorScheme
.primary,
indicatorColor: theme
.colorScheme
.primary,
backgroundColor:
theme.colorScheme.surface,
theme
.colorScheme
.surface,
),
skinToneConfig: SkinToneConfig(
skinToneConfig:
SkinToneConfig(
dialogBackgroundColor:
Color.lerp(
theme.colorScheme.surface,
theme.colorScheme
theme
.colorScheme
.surface,
theme
.colorScheme
.primaryContainer,
0.75,
)!,
indicatorColor:
theme.colorScheme.onSurface,
indicatorColor: theme
.colorScheme
.onSurface,
),
),
),
@ -731,40 +803,20 @@ class Message extends StatelessWidget {
),
);
if (emoji == null) return;
if (sentReactions.contains(emoji)) return;
await event.room.sendReaction(
event.eventId,
emoji,
);
},
),
...AppConfig.defaultReactions.map(
(emoji) => IconButton(
padding: EdgeInsets.zero,
icon: Center(
child: Opacity(
opacity: sentReactions.contains(emoji)
? 0.33
: 1,
child: Text(
if (sentReactions.contains(
emoji,
style: const TextStyle(fontSize: 20),
textAlign: TextAlign.center,
),
),
),
onPressed: sentReactions.contains(emoji)
? null
: () {
)) {
return;
}
onSelect(event);
event.room.sendReaction(
await event.room
.sendReaction(
event.eventId,
emoji,
);
},
),
),
],
),
),
@ -772,9 +824,15 @@ class Message extends StatelessWidget {
: const SizedBox.shrink(),
),
),
],
),
);
},
),
AnimatedSize(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
alignment: Alignment.bottomCenter,
child: !showReceiptsRow
? const SizedBox.shrink()
: Padding(

Loading…
Cancel
Save