chore: Follow up input bar design

pull/956/head
Krille 2 years ago
parent 93f0ace3cf
commit ed2a1af46c
No known key found for this signature in database
GPG Key ID: E067ECD60F1A0652

@ -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…
Cancel
Save