From 95b3494a227f5f0f2becd740181c6fab4902b33a Mon Sep 17 00:00:00 2001 From: Julian KOUNE Date: Fri, 25 Aug 2023 12:11:47 +0200 Subject: [PATCH] chore: update draft chat styles --- lib/pages/chat_draft/draft_chat_view.dart | 68 ++++++++----------- .../chat_draft/draft_chat_view_style.dart | 39 +++++++++++ 2 files changed, 68 insertions(+), 39 deletions(-) diff --git a/lib/pages/chat_draft/draft_chat_view.dart b/lib/pages/chat_draft/draft_chat_view.dart index b465460af5..6601c20635 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( @@ -97,13 +96,11 @@ class DraftChatView extends StatelessWidget { 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( @@ -122,19 +119,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, ), @@ -170,10 +156,11 @@ class DraftChatView extends StatelessWidget { .showEmojiPicker == false ? TwakeIconButton( - paddingAll: chatDraftArgument - .inputText.isEmpty - ? 5.0 - : 12, + paddingAll: DraftChatViewStyle + .bottomBarButtonPaddingAll( + chatDraftArgument + .inputText.isEmpty, + ), tooltip: L10n.of(context)!.emojis, onPressed: chatDraftArgument @@ -181,10 +168,11 @@ class DraftChatView extends StatelessWidget { icon: Icons.tag_faces, ) : TwakeIconButton( - paddingAll: chatDraftArgument - .inputText.isEmpty - ? 5.0 - : 12, + paddingAll: DraftChatViewStyle + .bottomBarButtonPaddingAll( + chatDraftArgument + .inputText.isEmpty, + ), tooltip: L10n.of(context)!.keyboard, onPressed: () => @@ -198,12 +186,14 @@ class DraftChatView extends StatelessWidget { 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 +206,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,9 +220,8 @@ class DraftChatView extends StatelessWidget { ), ), Container( - constraints: const BoxConstraints( - maxWidth: FluffyThemes.columnWidth * 2.5, - ), + constraints: + DraftChatViewStyle.containerMaxWidthConstraints, alignment: Alignment.center, child: AnimatedContainer( duration: FluffyThemes.animationDuration, @@ -281,7 +271,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 +279,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 +292,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..3eec42c334 100644 --- a/lib/pages/chat_draft/draft_chat_view_style.dart +++ b/lib/pages/chat_draft/draft_chat_view_style.dart @@ -1,3 +1,42 @@ +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); + + // 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; + + // 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; }