From c45f6d491af8c63535b99dc9b085a89bd77c887c Mon Sep 17 00:00:00 2001 From: Julian KOUNE Date: Wed, 23 Aug 2023 20:48:08 +0200 Subject: [PATCH 1/2] fix: reduce draft chat width on web version This Closes #493 --- lib/pages/chat_draft/draft_chat_view.dart | 364 +++++++++++----------- 1 file changed, 189 insertions(+), 175 deletions(-) diff --git a/lib/pages/chat_draft/draft_chat_view.dart b/lib/pages/chat_draft/draft_chat_view.dart index a8ed097595..b465460af5 100644 --- a/lib/pages/chat_draft/draft_chat_view.dart +++ b/lib/pages/chat_draft/draft_chat_view.dart @@ -67,190 +67,204 @@ class DraftChatView extends StatelessWidget { ), ), body: SafeArea( - child: Column( - children: [ - Expanded( - child: Center( - child: DirectDraftChatView( - onTap: chatDraftArgument.onTapDirectDraftChat, - ), - ), - ), - Column( + child: Center( + child: Container( + constraints: + const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5), + child: Column( children: [ - Padding( - padding: const EdgeInsets.only(bottom: 8.0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - TwakeIconButton( - tooltip: L10n.of(context)!.more, - margin: const EdgeInsets.only(right: 4.0), - icon: Icons.add_circle_outline, - onPressed: chatDraftArgument.onPressedAddMore, - ), - Expanded( - child: Container( - alignment: Alignment.center, - padding: - const EdgeInsetsDirectional.only(start: 12.0), - margin: const EdgeInsetsDirectional.only(end: 8.0), - decoration: BoxDecoration( - borderRadius: - const BorderRadius.all(Radius.circular(25)), - color: Theme.of(context).colorScheme.surface, + Expanded( + child: Center( + child: DirectDraftChatView( + onTap: chatDraftArgument.onTapDirectDraftChat, + ), + ), + ), + Column( + children: [ + Padding( + padding: const EdgeInsets.only(bottom: 8.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + TwakeIconButton( + tooltip: L10n.of(context)!.more, + margin: const EdgeInsets.only(right: 4.0), + icon: Icons.add_circle_outline, + onPressed: chatDraftArgument.onPressedAddMore, ), - child: Row( - children: [ - Expanded( - child: InputBar( - minLines: 1, - maxLines: 8, - autofocus: !PlatformInfos.isMobile, - keyboardType: TextInputType.multiline, - textInputAction: AppConfig.sendOnEnter - ? TextInputAction.send - : null, - onSubmitted: - chatDraftArgument.onInputBarSubmitted, - focusNode: chatDraftArgument.inputFocus, - controller: - chatDraftArgument.textEditingController, - decoration: InputDecoration( - hintText: L10n.of(context)!.chatMessage, - hintMaxLines: 1, - hintStyle: Theme.of(context) - .textTheme - .bodyLarge - ?.merge( - Theme.of(context) - .inputDecorationTheme - .hintStyle, - ) - .copyWith(letterSpacing: -0.15), - ), - onChanged: - chatDraftArgument.onInputBarChanged, - ), + Expanded( + child: Container( + alignment: Alignment.center, + padding: + const EdgeInsetsDirectional.only(start: 12.0), + margin: + const EdgeInsetsDirectional.only(end: 8.0), + decoration: BoxDecoration( + borderRadius: + const BorderRadius.all(Radius.circular(25)), + color: Theme.of(context).colorScheme.surface, ), - KeyBoardShortcuts( - keysToPress: { - LogicalKeyboardKey.altLeft, - LogicalKeyboardKey.keyE - }, - onKeysPressed: - chatDraftArgument.emojiPickerAction, - helpLabel: L10n.of(context)!.emojis, - child: InkWell( - onTap: chatDraftArgument.emojiPickerAction, - child: PageTransitionSwitcher( - transitionBuilder: ( - Widget child, - Animation primaryAnimation, - Animation secondaryAnimation, - ) { - return SharedAxisTransition( - animation: primaryAnimation, - secondaryAnimation: secondaryAnimation, - transitionType: - SharedAxisTransitionType.scaled, - fillColor: Colors.transparent, - child: child, - ); + child: Row( + children: [ + Expanded( + child: InputBar( + minLines: 1, + maxLines: 8, + autofocus: !PlatformInfos.isMobile, + keyboardType: TextInputType.multiline, + textInputAction: AppConfig.sendOnEnter + ? TextInputAction.send + : null, + onSubmitted: + chatDraftArgument.onInputBarSubmitted, + focusNode: chatDraftArgument.inputFocus, + controller: chatDraftArgument + .textEditingController, + decoration: InputDecoration( + hintText: L10n.of(context)!.chatMessage, + hintMaxLines: 1, + hintStyle: Theme.of(context) + .textTheme + .bodyLarge + ?.merge( + Theme.of(context) + .inputDecorationTheme + .hintStyle, + ) + .copyWith(letterSpacing: -0.15), + ), + onChanged: + chatDraftArgument.onInputBarChanged, + ), + ), + KeyBoardShortcuts( + keysToPress: { + LogicalKeyboardKey.altLeft, + LogicalKeyboardKey.keyE }, - child: chatDraftArgument.showEmojiPicker == - false - ? TwakeIconButton( - paddingAll: chatDraftArgument - .inputText.isEmpty - ? 5.0 - : 12, - tooltip: L10n.of(context)!.emojis, - onPressed: chatDraftArgument - .emojiPickerAction, - icon: Icons.tag_faces, - ) - : TwakeIconButton( - paddingAll: chatDraftArgument - .inputText.isEmpty - ? 5.0 - : 12, - tooltip: L10n.of(context)!.keyboard, - onPressed: () => chatDraftArgument - .inputFocus - ?.requestFocus(), - icon: Icons.keyboard, - ), + onKeysPressed: + chatDraftArgument.emojiPickerAction, + helpLabel: L10n.of(context)!.emojis, + child: InkWell( + onTap: + chatDraftArgument.emojiPickerAction, + child: PageTransitionSwitcher( + transitionBuilder: ( + Widget child, + Animation primaryAnimation, + Animation secondaryAnimation, + ) { + return SharedAxisTransition( + animation: primaryAnimation, + secondaryAnimation: + secondaryAnimation, + transitionType: + SharedAxisTransitionType.scaled, + fillColor: Colors.transparent, + child: child, + ); + }, + child: chatDraftArgument + .showEmojiPicker == + false + ? TwakeIconButton( + paddingAll: chatDraftArgument + .inputText.isEmpty + ? 5.0 + : 12, + tooltip: + L10n.of(context)!.emojis, + onPressed: chatDraftArgument + .emojiPickerAction, + icon: Icons.tag_faces, + ) + : TwakeIconButton( + paddingAll: chatDraftArgument + .inputText.isEmpty + ? 5.0 + : 12, + tooltip: + L10n.of(context)!.keyboard, + onPressed: () => + chatDraftArgument.inputFocus + ?.requestFocus(), + icon: Icons.keyboard, + ), + ), + ), ), - ), + if (PlatformInfos.platformCanRecord && + chatDraftArgument.inputText.isEmpty) + Container( + height: 56, + alignment: Alignment.center, + child: TwakeIconButton( + margin: + const EdgeInsets.only(right: 7.0), + paddingAll: 5.0, + onPressed: () {}, + tooltip: L10n.of(context)!.send, + icon: Icons.mic_none, + ), + ), + ], ), - if (PlatformInfos.platformCanRecord && - chatDraftArgument.inputText.isEmpty) - Container( - height: 56, - alignment: Alignment.center, - child: TwakeIconButton( - margin: const EdgeInsets.only(right: 7.0), - paddingAll: 5.0, - onPressed: () {}, - tooltip: L10n.of(context)!.send, - icon: Icons.mic_none, - ), - ), - ], + ), ), - ), + if (!PlatformInfos.isMobile || + chatDraftArgument.inputText.isNotEmpty) + Container( + height: 56, + alignment: Alignment.center, + child: TwakeIconButton( + size: ChatInputRowStyle.sendIconButtonSize, + onPressed: chatDraftArgument.sendText, + tooltip: L10n.of(context)!.send, + imagePath: ImagePaths.icSend, + ), + ) + ], ), - if (!PlatformInfos.isMobile || - chatDraftArgument.inputText.isNotEmpty) - Container( - height: 56, - alignment: Alignment.center, - child: TwakeIconButton( - size: ChatInputRowStyle.sendIconButtonSize, - onPressed: chatDraftArgument.sendText, - tooltip: L10n.of(context)!.send, - imagePath: ImagePaths.icSend, - ), - ) - ], - ), - ), - Container( - constraints: const BoxConstraints( - maxWidth: FluffyThemes.columnWidth * 2.5, - ), - alignment: Alignment.center, - child: AnimatedContainer( - duration: FluffyThemes.animationDuration, - curve: FluffyThemes.animationCurve, - width: MediaQuery.of(context).size.width, - height: chatDraftArgument.showEmojiPicker == true - ? MediaQuery.of(context).size.height / 3 - : 0, - child: chatDraftArgument.showEmojiPicker == true - ? EmojiPicker( - onEmojiSelected: - chatDraftArgument.onEmojiBottomSheetSelected, - onBackspacePressed: - chatDraftArgument.emojiPickerBackspace, - config: Config( - backspaceColor: - Theme.of(context).colorScheme.primary, - bgColor: Theme.of(context).colorScheme.surface, - indicatorColor: - Theme.of(context).colorScheme.primary, - iconColorSelected: - Theme.of(context).colorScheme.primary, - ), - ) - : null, - ), - ), + ), + Container( + constraints: const BoxConstraints( + maxWidth: FluffyThemes.columnWidth * 2.5, + ), + alignment: Alignment.center, + child: AnimatedContainer( + duration: FluffyThemes.animationDuration, + curve: FluffyThemes.animationCurve, + width: MediaQuery.of(context).size.width, + height: chatDraftArgument.showEmojiPicker == true + ? MediaQuery.of(context).size.height / 3 + : 0, + child: chatDraftArgument.showEmojiPicker == true + ? EmojiPicker( + onEmojiSelected: chatDraftArgument + .onEmojiBottomSheetSelected, + onBackspacePressed: + chatDraftArgument.emojiPickerBackspace, + config: Config( + backspaceColor: + Theme.of(context).colorScheme.primary, + bgColor: + Theme.of(context).colorScheme.surface, + indicatorColor: + Theme.of(context).colorScheme.primary, + iconColorSelected: + Theme.of(context).colorScheme.primary, + ), + ) + : null, + ), + ), + ], + ) ], - ) - ], + ), + ), ), ), ); From 4ee192ee48ac6809ee34aede2336865b0bad3ae3 Mon Sep 17 00:00:00 2001 From: Julian KOUNE Date: Fri, 25 Aug 2023 12:11:47 +0200 Subject: [PATCH 2/2] chore: update draft chat styles --- lib/pages/chat_draft/draft_chat_view.dart | 115 ++++++++---------- .../chat_draft/draft_chat_view_style.dart | 64 ++++++++++ 2 files changed, 115 insertions(+), 64 deletions(-) diff --git a/lib/pages/chat_draft/draft_chat_view.dart b/lib/pages/chat_draft/draft_chat_view.dart index b465460af5..b0154b1042 100644 --- a/lib/pages/chat_draft/draft_chat_view.dart +++ b/lib/pages/chat_draft/draft_chat_view.dart @@ -69,8 +69,7 @@ class DraftChatView extends StatelessWidget { body: SafeArea( child: Center( child: Container( - constraints: - const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5), + constraints: DraftChatViewStyle.containerMaxWidthConstraints, child: Column( children: [ Expanded( @@ -83,35 +82,35 @@ class DraftChatView extends StatelessWidget { Column( children: [ Padding( - padding: const EdgeInsets.only(bottom: 8.0), + padding: DraftChatViewStyle.inputWidgetPadding, child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ TwakeIconButton( tooltip: L10n.of(context)!.more, - margin: const EdgeInsets.only(right: 4.0), + margin: DraftChatViewStyle.buttonAddMoreMargin, icon: Icons.add_circle_outline, onPressed: chatDraftArgument.onPressedAddMore, ), Expanded( child: Container( alignment: Alignment.center, - padding: - const EdgeInsetsDirectional.only(start: 12.0), - margin: - const EdgeInsetsDirectional.only(end: 8.0), + padding: DraftChatViewStyle.bottomBarPadding, + margin: DraftChatViewStyle.bottomBarMargin, decoration: BoxDecoration( borderRadius: - const BorderRadius.all(Radius.circular(25)), + DraftChatViewStyle.bottomBarBorderRadius, color: Theme.of(context).colorScheme.surface, ), child: Row( children: [ Expanded( child: InputBar( - minLines: 1, - maxLines: 8, + minLines: + DraftChatViewStyle.minLinesInputBar, + maxLines: + DraftChatViewStyle.maxLinesInputBar, autofocus: !PlatformInfos.isMobile, keyboardType: TextInputType.multiline, textInputAction: AppConfig.sendOnEnter @@ -122,19 +121,8 @@ class DraftChatView extends StatelessWidget { focusNode: chatDraftArgument.inputFocus, controller: chatDraftArgument .textEditingController, - decoration: InputDecoration( - hintText: L10n.of(context)!.chatMessage, - hintMaxLines: 1, - hintStyle: Theme.of(context) - .textTheme - .bodyLarge - ?.merge( - Theme.of(context) - .inputDecorationTheme - .hintStyle, - ) - .copyWith(letterSpacing: -0.15), - ), + decoration: DraftChatViewStyle + .bottomBarInputDecoration(context), onChanged: chatDraftArgument.onInputBarChanged, ), @@ -166,44 +154,25 @@ class DraftChatView extends StatelessWidget { child: child, ); }, - child: chatDraftArgument - .showEmojiPicker == - false - ? TwakeIconButton( - paddingAll: chatDraftArgument - .inputText.isEmpty - ? 5.0 - : 12, - tooltip: - L10n.of(context)!.emojis, - onPressed: chatDraftArgument - .emojiPickerAction, - icon: Icons.tag_faces, - ) - : TwakeIconButton( - paddingAll: chatDraftArgument - .inputText.isEmpty - ? 5.0 - : 12, - tooltip: - L10n.of(context)!.keyboard, - onPressed: () => - chatDraftArgument.inputFocus - ?.requestFocus(), - icon: Icons.keyboard, - ), + child: _keyBoardShortcutsButtonBuilder( + context, + chatDraftArgument.showEmojiPicker == + false, + ), ), ), ), if (PlatformInfos.platformCanRecord && chatDraftArgument.inputText.isEmpty) Container( - height: 56, + height: DraftChatViewStyle + .bottomBarButtonButtonContainerHeight, alignment: Alignment.center, child: TwakeIconButton( - margin: - const EdgeInsets.only(right: 7.0), - paddingAll: 5.0, + margin: DraftChatViewStyle + .bottomBarButtonRecordMargin, + paddingAll: DraftChatViewStyle + .bottomBarButtonRecordPaddingAll, onPressed: () {}, tooltip: L10n.of(context)!.send, icon: Icons.mic_none, @@ -216,7 +185,8 @@ class DraftChatView extends StatelessWidget { if (!PlatformInfos.isMobile || chatDraftArgument.inputText.isNotEmpty) Container( - height: 56, + height: DraftChatViewStyle + .bottomBarButtonButtonContainerHeight, alignment: Alignment.center, child: TwakeIconButton( size: ChatInputRowStyle.sendIconButtonSize, @@ -229,17 +199,17 @@ class DraftChatView extends StatelessWidget { ), ), Container( - constraints: const BoxConstraints( - maxWidth: FluffyThemes.columnWidth * 2.5, - ), + constraints: + DraftChatViewStyle.containerMaxWidthConstraints, alignment: Alignment.center, child: AnimatedContainer( duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, width: MediaQuery.of(context).size.width, - height: chatDraftArgument.showEmojiPicker == true - ? MediaQuery.of(context).size.height / 3 - : 0, + height: DraftChatViewStyle.animatedContainerHeight( + context, + chatDraftArgument.showEmojiPicker == true, + ), child: chatDraftArgument.showEmojiPicker == true ? EmojiPicker( onEmojiSelected: chatDraftArgument @@ -269,6 +239,23 @@ class DraftChatView extends StatelessWidget { ), ); } + + Widget _keyBoardShortcutsButtonBuilder( + BuildContext context, + bool isEmojiPicker, + ) { + return TwakeIconButton( + paddingAll: DraftChatViewStyle.bottomBarButtonPaddingAll( + chatDraftArgument.inputText.isEmpty, + ), + tooltip: + isEmojiPicker ? L10n.of(context)!.keyboard : L10n.of(context)!.emojis, + onPressed: isEmojiPicker + ? () => chatDraftArgument.inputFocus?.requestFocus() + : chatDraftArgument.emojiPickerAction, + icon: isEmojiPicker ? Icons.keyboard : Icons.tag_faces, + ); + } } class _EmptyChatTitle extends StatelessWidget { @@ -281,7 +268,7 @@ class _EmptyChatTitle extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.only(left: 8.0), + padding: DraftChatViewStyle.emptyChatParentPadding, child: InkWell( child: FutureBuilder( future: Matrix.of(context).client.getProfileFromUserId(receiverId), @@ -289,7 +276,7 @@ class _EmptyChatTitle extends StatelessWidget { return Row( children: [ Padding( - padding: const EdgeInsets.only(right: 3, top: 3), + padding: DraftChatViewStyle.emptyChatChildrenPadding, child: Hero( tag: 'content_banner', child: Avatar( @@ -302,7 +289,7 @@ class _EmptyChatTitle extends StatelessWidget { ), ), ), - const SizedBox(width: 12), + const SizedBox(width: DraftChatViewStyle.emptyChatGapWidth), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, diff --git a/lib/pages/chat_draft/draft_chat_view_style.dart b/lib/pages/chat_draft/draft_chat_view_style.dart index f268aee399..8c52a436b3 100644 --- a/lib/pages/chat_draft/draft_chat_view_style.dart +++ b/lib/pages/chat_draft/draft_chat_view_style.dart @@ -1,3 +1,67 @@ +import 'package:fluffychat/config/themes.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_gen/gen_l10n/l10n.dart'; + class DraftChatViewStyle { static const double toolbarHeight = 56; + + static BoxConstraints get containerMaxWidthConstraints => + const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5); + + static double animatedContainerHeight( + BuildContext context, + bool isShowEmojiPicker, + ) => + isShowEmojiPicker ? MediaQuery.of(context).size.height / 3 : 0; + + static int get minLinesInputBar => 1; + + static int get maxLinesInputBar => 8; + + // Bottom Bar Style + static EdgeInsetsGeometry get bottomBarPadding => + const EdgeInsetsDirectional.only(start: 12.0); + + static EdgeInsetsGeometry get bottomBarMargin => + const EdgeInsetsDirectional.only(end: 8.0); + + static BorderRadiusGeometry get bottomBarBorderRadius => + const BorderRadius.all(Radius.circular(25)); + + static InputDecoration bottomBarInputDecoration(BuildContext context) => + InputDecoration( + hintText: L10n.of(context)!.chatMessage, + hintMaxLines: 1, + hintStyle: Theme.of(context) + .textTheme + .bodyLarge + ?.merge( + Theme.of(context).inputDecorationTheme.hintStyle, + ) + .copyWith(letterSpacing: -0.15), + ); + + static double bottomBarButtonPaddingAll(bool isInputEmpty) => + isInputEmpty ? 5.0 : 12.0; + + static double get bottomBarButtonButtonContainerHeight => 56.0; + + static EdgeInsets get bottomBarButtonRecordMargin => + const EdgeInsets.only(right: 7.0); + + static double get bottomBarButtonRecordPaddingAll => 5.0; + + static EdgeInsets get buttonAddMoreMargin => + const EdgeInsets.only(right: 4.0); + + static EdgeInsetsGeometry get inputWidgetPadding => + const EdgeInsetsDirectional.only(bottom: 8.0); + + // Empty Chat Style + static EdgeInsetsGeometry get emptyChatParentPadding => + const EdgeInsets.only(left: 8.0); + + static EdgeInsetsGeometry get emptyChatChildrenPadding => + const EdgeInsets.only(right: 3, top: 3); + static const double emptyChatGapWidth = 12.0; }