Skip to content

Commit

Permalink
chore: update draft chat styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Julian KOUNE committed Aug 25, 2023
1 parent 81d33e3 commit 95b3494
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 39 deletions.
68 changes: 29 additions & 39 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.containerMaxWidthConstraints,
child: Column(
children: [
Expanded(
Expand All @@ -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(
Expand All @@ -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,
),
Expand Down Expand Up @@ -170,21 +156,23 @@ 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
.emojiPickerAction,
icon: Icons.tag_faces,
)
: TwakeIconButton(
paddingAll: chatDraftArgument
.inputText.isEmpty
? 5.0
: 12,
paddingAll: DraftChatViewStyle
.bottomBarButtonPaddingAll(
chatDraftArgument
.inputText.isEmpty,
),
tooltip:
L10n.of(context)!.keyboard,
onPressed: () =>
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -281,15 +271,15 @@ 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<Profile>(
future: Matrix.of(context).client.getProfileFromUserId(receiverId),
builder: (context, snapshot) {
return Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 3, top: 3),
padding: DraftChatViewStyle.emptyChatChildrenPadding,
child: Hero(
tag: 'content_banner',
child: Avatar(
Expand All @@ -302,7 +292,7 @@ class _EmptyChatTitle extends StatelessWidget {
),
),
),
const SizedBox(width: 12),
const SizedBox(width: DraftChatViewStyle.emptyChatGapWidth),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down
39 changes: 39 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,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;
}

0 comments on commit 95b3494

Please sign in to comment.