Skip to content

Commit

Permalink
fixup! TW-879: redesign chat invitation view
Browse files Browse the repository at this point in the history
  • Loading branch information
Julian KOUNE committed Nov 13, 2023
1 parent 00724ce commit aae2740
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 120 deletions.
126 changes: 69 additions & 57 deletions lib/pages/chat/chat_invitation_body.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import 'package:fluffychat/utils/dialog/twake_dialog.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:go_router/go_router.dart';
import 'package:linagora_design_flutter/linagora_design_flutter.dart';

class ChatInvitationBody extends StatelessWidget with MessageContentMixin {
Expand Down Expand Up @@ -51,66 +50,73 @@ class ChatInvitationBody extends StatelessWidget with MessageContentMixin {

Widget _buildInvitationContent(BuildContext context) {
return Center(
child: Container(
height: ChatInvitationBodyStyle.dialogHeight,
width: ChatInvitationBodyStyle.dialogWidth,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius:
BorderRadius.circular(ChatInvitationBodyStyle.dialogBorderRadius),
border: Border.all(
color: Theme.of(context).colorScheme.surfaceTint.withOpacity(0.16),
width: 1,
child: UnconstrainedBox(
child: Container(
width: ChatInvitationBodyStyle.dialogWidth,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(
ChatInvitationBodyStyle.dialogBorderRadius),
border: Border.all(
color:
Theme.of(context).colorScheme.surfaceTint.withOpacity(0.16),
width: 1,
),
),
),
child: Padding(
padding: const EdgeInsets.all(ChatInvitationBodyStyle.dialogPadding),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(
ChatInvitationBodyStyle.dialogTextPadding,
),
child: Text.rich(
textAlign: TextAlign.center,
TextSpan(
children: [
TextSpan(
text: '${_getDisplayInviterName()} \n',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
),
TextSpan(
text: L10n.of(context)!.hasInvitedYouToAChat,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
],
child: Padding(
padding:
const EdgeInsets.all(ChatInvitationBodyStyle.dialogPadding),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(
ChatInvitationBodyStyle.dialogTextPadding,
),
),
),
Row(
children: [
Expanded(
child: InvitationRejectButton(
onReject: () => onReject(context),
child: Text.rich(
textAlign: TextAlign.center,
TextSpan(
children: [
TextSpan(
text: '${_getDisplayInviterName()} \n',
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
),
TextSpan(
text: L10n.of(context)!.hasInvitedYouToAChat,
style:
Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
],
),
),
const SizedBox(
width: ChatInvitationBodyStyle.dialogButtonSpacing,
),
Expanded(
child: InvitationAcceptButton(
onAccept: () => onAccept(),
),
Row(
children: [
Expanded(
child: InvitationRejectButton(
onReject: () => onReject(context),
),
),
),
],
),
],
const SizedBox(
width: ChatInvitationBodyStyle.dialogButtonSpacing,
),
Expanded(
child: InvitationAcceptButton(
onAccept: () => onAccept(),
),
),
],
),
],
),
),
),
),
Expand Down Expand Up @@ -141,7 +147,7 @@ class ChatInvitationBody extends StatelessWidget with MessageContentMixin {

switch (result) {
case DialogRejectInviteResult.cancel:
return context.pop();
return;
case DialogRejectInviteResult.reject:
return controller.leaveChat();
}
Expand Down Expand Up @@ -184,6 +190,9 @@ class InvitationAcceptButton extends StatelessWidget {
),
),
side: MaterialStateProperty.all<BorderSide>(BorderSide.none),
fixedSize: MaterialStateProperty.all<Size>(
const Size.fromHeight(ChatInvitationBodyStyle.dialogButtonHeight),
),
),
onPressed: onAccept,
child: Text(L10n.of(context)!.accept),
Expand Down Expand Up @@ -217,6 +226,9 @@ class InvitationRejectButton extends StatelessWidget {
),
),
side: MaterialStateProperty.all<BorderSide>(BorderSide.none),
fixedSize: MaterialStateProperty.all<Size>(
const Size.fromHeight(ChatInvitationBodyStyle.dialogButtonHeight),
),
),
onPressed: onReject,
child: Text(L10n.of(context)!.reject),
Expand Down
2 changes: 1 addition & 1 deletion lib/pages/chat/chat_invitation_body_style.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
class ChatInvitationBodyStyle {
// Dialog Parent
static const double dialogWidth = 300.0;
static const double dialogHeight = 172.0;
static const double dialogBorderRadius = 16.0;
static const double dialogPadding = 16.0;

Expand All @@ -11,6 +10,7 @@ class ChatInvitationBodyStyle {
// Dialog Buttons
static const double dialogButtonSpacing = 8.0;
static const double dialogButtonBorderRadius = 100.0;
static const double dialogButtonHeight = 48.0;

// Chat Invitation Bottom Bar
static const double chatInvitationBottomBarHeight = 96.0;
Expand Down
4 changes: 3 additions & 1 deletion lib/pages/chat/dialog_reject_invite_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,7 @@ class DialogAcceptInviteStyle {
EdgeInsetsDirectional.symmetric(vertical: 24);

static const EdgeInsetsDirectional paddingTitle =
EdgeInsetsDirectional.only(top: 16);
EdgeInsetsDirectional.only(top: 24);

static const double dialogTextWidth = 264.0;
}
120 changes: 59 additions & 61 deletions lib/pages/chat/dialog_reject_invite_widget.dart
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import 'package:fluffychat/pages/chat/dialog_reject_invite_style.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:linagora_design_flutter/colors/linagora_ref_colors.dart';
import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';

enum DialogRejectInviteResult {
reject,
Expand All @@ -24,68 +22,75 @@ class DialogRejectInviteWidget extends StatelessWidget {
return false;
},
child: Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
DialogAcceptInviteStyle.borderRadiusDialog,
child: UnconstrainedBox(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
DialogAcceptInviteStyle.borderRadiusDialog,
),
color: Theme.of(context).colorScheme.surface,
),
color: Theme.of(context).colorScheme.surface,
),
margin: DialogAcceptInviteStyle.marginDialog,
padding: DialogAcceptInviteStyle.paddingDialog,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: DialogAcceptInviteStyle.paddingTitle,
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: L10n.of(context)!.declineTheInvitation,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: LinagoraSysColors.material().primary,
),
margin: DialogAcceptInviteStyle.marginDialog,
padding: DialogAcceptInviteStyle.paddingDialog,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: DialogAcceptInviteStyle.paddingTitle,
child: Column(
children: [
TextSpan(
text: L10n.of(context)!
.doYouReallyWantToDeclineThisInvitation,
Text(
L10n.of(context)!.declineTheInvitation,
style: Theme.of(context)
.textTheme
.bodyMedium
.headlineSmall
?.copyWith(
color:
LinagoraRefColors.material().tertiary[30],
color: Theme.of(context).colorScheme.onSurface,
),
),
const SizedBox(height: 16.0),
SizedBox(
width: DialogAcceptInviteStyle.dialogTextWidth,
child: Text(
L10n.of(context)!
.doYouReallyWantToDeclineThisInvitation,
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
),
],
),
),
),
Padding(
padding: DialogAcceptInviteStyle.paddingButton,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_ActionButton(
context: context,
text: L10n.of(context)!.declineAndRemove,
onPressed: () => Navigator.of(context)
.pop(DialogRejectInviteResult.reject),
),
const SizedBox(width: 8),
_ActionButton(
context: context,
text: L10n.of(context)!.cancel,
isAccept: true,
onPressed: () => Navigator.of(context)
.pop(DialogRejectInviteResult.cancel),
colorBackground: Theme.of(context).colorScheme.primary,
),
],
Padding(
padding: DialogAcceptInviteStyle.paddingButton,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_ActionButton(
context: context,
text: L10n.of(context)!.declineAndRemove,
onPressed: () => Navigator.of(context)
.pop(DialogRejectInviteResult.reject),
),
const SizedBox(width: 8),
_ActionButton(
context: context,
text: L10n.of(context)!.cancel,
onPressed: () => Navigator.of(context)
.pop(DialogRejectInviteResult.cancel),
),
],
),
),
),
],
],
),
),
),
),
Expand All @@ -99,15 +104,11 @@ class _ActionButton extends StatelessWidget {
required this.text,
required this.onPressed,
required this.context,
this.isAccept = false,
this.colorBackground,
});

final String text;
final VoidCallback? onPressed;
final BuildContext context;
final bool isAccept;
final Color? colorBackground;

@override
Widget build(BuildContext context) {
Expand All @@ -121,15 +122,12 @@ class _ActionButton extends StatelessWidget {
borderRadius: BorderRadius.circular(
DialogAcceptInviteStyle.borderRadiusActionButton,
),
color: colorBackground,
),
padding: DialogAcceptInviteStyle.paddingActionButton,
child: Text(
text,
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: isAccept
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).colorScheme.primary,
color: Theme.of(context).colorScheme.primary,
),
),
),
Expand Down

0 comments on commit aae2740

Please sign in to comment.