istalri/nexus
1
0
Fork 0
forked from Nexus/nexus
Code Pull requests Activity

measure size of chat box to dynamically adjust padding

Browse source 
Fixes #21
This commit is contained in:
Henry Hiles 2026-05-23 20:14:33 -04:00
commit 05bc9034d1
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
4 changed files with 141 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

216
lib/widgets/composer/chat_box.dart
View file

@ -63,126 +63,118 @@ class ChatBox extends HookConsumerWidget {
fontWeight: FontWeight.bold,
);
return Positioned(
bottom: 0,
left: 0,
right: 0,
child: Padding(
padding: EdgeInsetsGeometry.all(12),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(12)),
child: Column(
children: [
RelationPreview(
relatedEvent,
shouldMention: shouldMention.value,
toggleShouldMention: () =>
shouldMention.value = !shouldMention.value,
relationType: relationType,
onDismiss: onDismiss,
),
Container(
color: theme.colorScheme.surfaceContainerHighest,
padding: EdgeInsets.symmetric(horizontal: 8),
child: Row(
spacing: 8,
mainAxisAlignment: MainAxisAlignment.center,
children:
ref.watch(
PowerLevelController.provider(
PowerLevelConfig(
eventType: EventType.message,
roomId: roomId,
),
return Padding(
padding: EdgeInsetsGeometry.all(12),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(12)),
child: Column(
children: [
RelationPreview(
relatedEvent,
shouldMention: shouldMention.value,
toggleShouldMention: () =>
shouldMention.value = !shouldMention.value,
relationType: relationType,
onDismiss: onDismiss,
),
Container(
color: theme.colorScheme.surfaceContainerHighest,
padding: EdgeInsets.symmetric(horizontal: 8),
child: Row(
spacing: 8,
mainAxisAlignment: MainAxisAlignment.center,
children:
ref.watch(
PowerLevelController.provider(
PowerLevelConfig(
eventType: EventType.message,
roomId: roomId,
),
)
? [
EmojiPickerButton(
context: context,
onSelection: (_) => node?.requestFocus(),
),
)
? [
EmojiPickerButton(
context: context,
onSelection: (_) => node?.requestFocus(),
controller: controller.value,
),
PopupMenuButton(
tooltip: "Add media",
itemBuilder: (context) => [
PopupMenuItem(
child: ListTile(
title: Text("Camera"),
leading: Icon(Icons.add_a_photo),
),
),
PopupMenuItem(
child: ListTile(
title: Text("Gallery"),
leading: Icon(Icons.add_photo_alternate),
),
),
PopupMenuItem(
child: ListTile(
title: Text("Files"),
leading: Icon(Icons.attachment),
),
),
],
icon: Icon(Icons.add),
),
Expanded(
child: FlutterTagger(
triggerStrategy: TriggerStrategy.eager,
overlay: MentionOverlay(
roomId,
query: query.value,
triggerCharacter: triggerCharacter.value,
addTag: ({required id, required name}) {
controller.value.addTag(id: id, name: name);
node?.requestFocus();
},
),
controller: controller.value,
),
PopupMenuButton(
tooltip: "Add media",
itemBuilder: (context) => [
PopupMenuItem(
child: ListTile(
title: Text("Camera"),
leading: Icon(Icons.add_a_photo),
),
),
PopupMenuItem(
child: ListTile(
title: Text("Gallery"),
leading: Icon(Icons.add_photo_alternate),
),
),
PopupMenuItem(
child: ListTile(
title: Text("Files"),
leading: Icon(Icons.attachment),
),
),
],
icon: Icon(Icons.add),
),
Expanded(
child: FlutterTagger(
triggerStrategy: TriggerStrategy.eager,
overlay: MentionOverlay(
roomId,
query: query.value,
triggerCharacter: triggerCharacter.value,
addTag: ({required id, required name}) {
controller.value.addTag(id: id, name: name);
node?.requestFocus();
},
onSearch: (newQuery, newTriggerCharacter) {
triggerCharacter.value = newTriggerCharacter;
query.value = newQuery;
},
triggerCharacterAndStyles: {"@": style, "#": style},
builder: (context, key) => TextFormField(
maxLines: 12,
minLines: 1,
autofocus: true,
decoration: InputDecoration(
hintText: "Your message here...",
border: InputBorder.none,
),
controller: controller.value,
onSearch: (newQuery, newTriggerCharacter) {
triggerCharacter.value = newTriggerCharacter;
query.value = newQuery;
},
triggerCharacterAndStyles: {
"@": style,
"#": style,
},
builder: (context, key) => TextFormField(
maxLines: 12,
minLines: 1,
autofocus: true,
decoration: InputDecoration(
hintText: "Your message here...",
border: InputBorder.none,
),
controller: controller.value,
key: key,
onFieldSubmitted: (_) => send(),
// Don't defocus on submit
onEditingComplete: () {},
textInputAction: TextInputAction.done,
focusNode: node,
),
key: key,
onFieldSubmitted: (_) => send(),
// Don't defocus on submit
onEditingComplete: () {},
textInputAction: TextInputAction.done,
focusNode: node,
),
),
IconButton(
onPressed: send,
icon: Icon(Icons.send),
tooltip: "Send message",
),
IconButton(
onPressed: send,
icon: Icon(Icons.send),
tooltip: "Send message",
),
]
: [
Padding(
padding: EdgeInsetsGeometry.all(8),
child: Text(
"You don't have permission to send messages in this room...",
),
]
: [
Padding(
padding: EdgeInsetsGeometry.all(8),
child: Text(
"You don't have permission to send messages in this room...",
),
),
],
),
),
],
),
],
),
),
],
),
),
);

47
lib/widgets/room_chat.dart
View file

@ -3,6 +3,7 @@ import "package:flutter/material.dart";
import "package:flutter/services.dart";
import "package:flutter_hooks/flutter_hooks.dart";
import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:measure_size/measure_size.dart";
import "package:nexus/controllers/account_data_controller.dart";
import "package:nexus/controllers/client_controller.dart";
import "package:nexus/controllers/client_state_controller.dart";
@ -45,6 +46,8 @@ class RoomChat extends HookConsumerWidget {
final relationType = useState(RelationType.reply);
final flashingEvent = useState<String?>(null);
final composerSize = useState<double>(64);
final memberListOpened = useState<bool>(showMembersByDefault);
final userId = ref.watch(ClientStateController.provider)?.userId;
@ -346,7 +349,9 @@ class RoomChat extends HookConsumerWidget {
controller: scrollController,
slivers: [
SliverPadding(
padding: EdgeInsetsGeometry.only(bottom: 64),
padding: EdgeInsetsGeometry.only(
bottom: composerSize.value,
),
),
SuperSliverList.builder(
@ -416,22 +421,30 @@ class RoomChat extends HookConsumerWidget {
},
),
),
ChatBox(
roomId,
node: composerNode,
onSend: (text, {required shouldMention, required tags}) =>
notifier
.send(
text,
tags: tags,
relationType: relationType.value,
shouldMention: shouldMention,
relation: relatedEvent.value,
)
.onError(showError),
relationType: relationType.value,
relatedEvent: relatedEvent.value,
onDismiss: () => relatedEvent.value = null,
Positioned(
bottom: 0,
left: 0,
right: 0,
child: MeasureSize(
onChange: (size) => composerSize.value = size.height,
child: ChatBox(
roomId,
node: composerNode,
onSend: (text, {required shouldMention, required tags}) =>
notifier
.send(
text,
tags: tags,
relationType: relationType.value,
shouldMention: shouldMention,
relation: relatedEvent.value,
)
.onError(showError),
relationType: relationType.value,
relatedEvent: relatedEvent.value,
onDismiss: () => relatedEvent.value = null,
),
),
),
],
),