chore: Follow up input bar design
This commit is contained in:
parent
93f0ace3cf
commit
ed2a1af46c
2 changed files with 27 additions and 21 deletions
|
|
@ -25,6 +25,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
controller.emojiPickerType == EmojiPickerType.reaction) {
|
controller.emojiPickerType == EmojiPickerType.reaction) {
|
||||||
return const SizedBox.shrink();
|
return const SizedBox.shrink();
|
||||||
}
|
}
|
||||||
|
const height = 48.0;
|
||||||
return Row(
|
return Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
crossAxisAlignment: CrossAxisAlignment.end,
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
|
@ -33,7 +34,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
if (controller.selectedEvents
|
if (controller.selectedEvents
|
||||||
.every((event) => event.status == EventStatus.error))
|
.every((event) => event.status == EventStatus.error))
|
||||||
SizedBox(
|
SizedBox(
|
||||||
height: 56,
|
height: height,
|
||||||
child: TextButton(
|
child: TextButton(
|
||||||
style: TextButton.styleFrom(
|
style: TextButton.styleFrom(
|
||||||
foregroundColor: Theme.of(context).colorScheme.error,
|
foregroundColor: Theme.of(context).colorScheme.error,
|
||||||
|
|
@ -49,7 +50,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
)
|
)
|
||||||
else
|
else
|
||||||
SizedBox(
|
SizedBox(
|
||||||
height: 56,
|
height: height,
|
||||||
child: TextButton(
|
child: TextButton(
|
||||||
onPressed: controller.forwardEventsAction,
|
onPressed: controller.forwardEventsAction,
|
||||||
child: Row(
|
child: Row(
|
||||||
|
|
@ -66,7 +67,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
.status
|
.status
|
||||||
.isSent
|
.isSent
|
||||||
? SizedBox(
|
? SizedBox(
|
||||||
height: 56,
|
height: height,
|
||||||
child: TextButton(
|
child: TextButton(
|
||||||
onPressed: controller.replyAction,
|
onPressed: controller.replyAction,
|
||||||
child: Row(
|
child: Row(
|
||||||
|
|
@ -78,7 +79,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
: SizedBox(
|
: SizedBox(
|
||||||
height: 56,
|
height: height,
|
||||||
child: TextButton(
|
child: TextButton(
|
||||||
onPressed: controller.sendAgainAction,
|
onPressed: controller.sendAgainAction,
|
||||||
child: Row(
|
child: Row(
|
||||||
|
|
@ -93,6 +94,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
: const SizedBox.shrink(),
|
: const SizedBox.shrink(),
|
||||||
]
|
]
|
||||||
: <Widget>[
|
: <Widget>[
|
||||||
|
const SizedBox(width: 4),
|
||||||
KeyBoardShortcuts(
|
KeyBoardShortcuts(
|
||||||
keysToPress: {
|
keysToPress: {
|
||||||
LogicalKeyboardKey.altLeft,
|
LogicalKeyboardKey.altLeft,
|
||||||
|
|
@ -104,8 +106,8 @@ class ChatInputRow extends StatelessWidget {
|
||||||
child: AnimatedContainer(
|
child: AnimatedContainer(
|
||||||
duration: FluffyThemes.animationDuration,
|
duration: FluffyThemes.animationDuration,
|
||||||
curve: FluffyThemes.animationCurve,
|
curve: FluffyThemes.animationCurve,
|
||||||
height: 56,
|
height: height,
|
||||||
width: controller.sendController.text.isEmpty ? 56 : 0,
|
width: controller.sendController.text.isEmpty ? height : 0,
|
||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
clipBehavior: Clip.hardEdge,
|
clipBehavior: Clip.hardEdge,
|
||||||
decoration: const BoxDecoration(),
|
decoration: const BoxDecoration(),
|
||||||
|
|
@ -182,7 +184,8 @@ class ChatInputRow extends StatelessWidget {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Container(
|
Container(
|
||||||
height: 56,
|
height: height,
|
||||||
|
width: height,
|
||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
child: KeyBoardShortcuts(
|
child: KeyBoardShortcuts(
|
||||||
keysToPress: {
|
keysToPress: {
|
||||||
|
|
@ -222,13 +225,14 @@ class ChatInputRow extends StatelessWidget {
|
||||||
Matrix.of(context).hasComplexBundles &&
|
Matrix.of(context).hasComplexBundles &&
|
||||||
Matrix.of(context).currentBundle!.length > 1)
|
Matrix.of(context).currentBundle!.length > 1)
|
||||||
Container(
|
Container(
|
||||||
height: 56,
|
width: height,
|
||||||
|
height: height,
|
||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
child: _ChatAccountPicker(controller),
|
child: _ChatAccountPicker(controller),
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
padding: const EdgeInsets.symmetric(vertical: 0.0),
|
||||||
child: InputBar(
|
child: InputBar(
|
||||||
room: controller.room,
|
room: controller.room,
|
||||||
minLines: 1,
|
minLines: 1,
|
||||||
|
|
@ -244,6 +248,12 @@ class ChatInputRow extends StatelessWidget {
|
||||||
focusNode: controller.inputFocus,
|
focusNode: controller.inputFocus,
|
||||||
controller: controller.sendController,
|
controller: controller.sendController,
|
||||||
decoration: InputDecoration(
|
decoration: InputDecoration(
|
||||||
|
contentPadding: const EdgeInsets.only(
|
||||||
|
left: 6.0,
|
||||||
|
right: 6.0,
|
||||||
|
bottom: 6.0,
|
||||||
|
top: 3.0,
|
||||||
|
),
|
||||||
hintText: L10n.of(context)!.writeAMessage,
|
hintText: L10n.of(context)!.writeAMessage,
|
||||||
hintMaxLines: 1,
|
hintMaxLines: 1,
|
||||||
border: InputBorder.none,
|
border: InputBorder.none,
|
||||||
|
|
@ -255,7 +265,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Container(
|
Container(
|
||||||
height: 56,
|
height: height,
|
||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
child: AnimatedCrossFade(
|
child: AnimatedCrossFade(
|
||||||
crossFadeState: PlatformInfos.platformCanRecord &&
|
crossFadeState: PlatformInfos.platformCanRecord &&
|
||||||
|
|
@ -276,6 +286,7 @@ class ChatInputRow extends StatelessWidget {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
const SizedBox(width: 4),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -284,18 +284,13 @@ class ChatView extends StatelessWidget {
|
||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
child: Material(
|
child: Material(
|
||||||
clipBehavior: Clip.hardEdge,
|
clipBehavior: Clip.hardEdge,
|
||||||
color: Theme.of(context).brightness ==
|
color: Theme.of(context)
|
||||||
Brightness.light
|
.colorScheme
|
||||||
? Colors.white.withOpacity(0.95)
|
.surface
|
||||||
: Colors.black.withOpacity(0.87),
|
.withOpacity(0.9),
|
||||||
shape: RoundedRectangleBorder(
|
shape: RoundedRectangleBorder(
|
||||||
borderRadius: const BorderRadius.only(
|
borderRadius: const BorderRadius.all(
|
||||||
bottomLeft: Radius.circular(
|
Radius.circular(AppConfig.borderRadius * 2),
|
||||||
AppConfig.borderRadius,
|
|
||||||
),
|
|
||||||
bottomRight: Radius.circular(
|
|
||||||
AppConfig.borderRadius,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
side: BorderSide(
|
side: BorderSide(
|
||||||
color: Theme.of(context).dividerColor,
|
color: Theme.of(context).dividerColor,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue