Skip to content

Commit

Permalink
chore: add draft chat style bottom bar
Browse files Browse the repository at this point in the history
  • Loading branch information
Julian KOUNE committed Aug 24, 2023
1 parent 9bc7be9 commit 5bcb2bd
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 36 deletions.
59 changes: 23 additions & 36 deletions lib/pages/chat_draft/draft_chat_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@ class DraftChatView extends StatelessWidget {
body: SafeArea(
child: Center(
child: Container(
constraints:
const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5),
constraints: DraftChatViewStyle.widthBoxConstraints,
child: Column(
children: [
Expanded(
Expand Down Expand Up @@ -109,13 +108,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(
Expand All @@ -133,19 +130,8 @@ class DraftChatView extends StatelessWidget {
controller.onInputBarSubmitted,
focusNode: controller.inputFocus,
controller: controller.sendController,
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: controller.onInputBarChanged,
),
),
Expand Down Expand Up @@ -176,21 +162,21 @@ class DraftChatView extends StatelessWidget {
},
child: !controller.showEmojiPicker
? TwakeIconButton(
paddingAll:
controller.inputText.isEmpty
? 5.0
: 12,
paddingAll: DraftChatViewStyle
.bottomBarButtonPaddingAll(
controller
.inputText.isEmpty),
tooltip:
L10n.of(context)!.emojis,
onPressed: () => controller
.emojiPickerAction(),
icon: Icons.tag_faces,
)
: TwakeIconButton(
paddingAll:
controller.inputText.isEmpty
? 5.0
: 12,
paddingAll: DraftChatViewStyle
.bottomBarButtonPaddingAll(
controller
.inputText.isEmpty),
tooltip:
L10n.of(context)!.keyboard,
onPressed: () => controller
Expand All @@ -204,12 +190,14 @@ class DraftChatView extends StatelessWidget {
if (PlatformInfos.platformCanRecord &&
controller.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,
Expand All @@ -222,7 +210,8 @@ class DraftChatView extends StatelessWidget {
if (!PlatformInfos.isMobile ||
controller.inputText.isNotEmpty)
Container(
height: 56,
height: DraftChatViewStyle
.bottomBarButtonButtonContainerHeight,
alignment: Alignment.center,
child: TwakeIconButton(
size: ChatInputRowStyle.sendIconButtonSize,
Expand All @@ -235,9 +224,7 @@ class DraftChatView extends StatelessWidget {
),
),
Container(
constraints: const BoxConstraints(
maxWidth: FluffyThemes.columnWidth * 2.5,
),
constraints: DraftChatViewStyle.widthBoxConstraints,
alignment: Alignment.center,
child: AnimatedContainer(
duration: FluffyThemes.animationDuration,
Expand Down
31 changes: 31 additions & 0 deletions lib/pages/chat_draft/draft_chat_view_style.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/di/global/get_it_initializer.dart';
import 'package:fluffychat/utils/responsive/responsive_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';

class DraftChatViewStyle {
static ResponsiveUtils responsive = getIt.get<ResponsiveUtils>();
Expand All @@ -12,4 +14,33 @@ class DraftChatViewStyle {
EdgeInsetsDirectional.only(
top: responsive.isMobile(context) ? 40 : 0,
);

static BoxConstraints get widthBoxConstraints =>
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;
}

0 comments on commit 5bcb2bd

Please sign in to comment.