Skip to content

Commit

Permalink
TW-1125/TW-1128: Improve Matrix ID design
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoangdat
Julian KOUNE authored and hoangdat committed Dec 19, 2023
1 parent a7fe5f9 commit b430241
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 78 deletions.
5 changes: 5 additions & 0 deletions assets/images/ic_matrixid.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 8 additions & 5 deletions lib/pages/chat_profile_info/chat_profile_info_style.dart
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
import 'package:flutter/material.dart';

class ChatProfileInfoStyle {
static const double iconPadding = 8;
static const double iconSize = 24;
static const double copyIconSize = 20;

static const double maxWidth = 416;
static const double textSpacing = 8;
static const double textSpacing = 4;

static const double avatarFontSize = 36;

static BorderRadius emailBorderRadius = BorderRadius.circular(16);
static BorderRadius copiableContainerBorderRadius = BorderRadius.circular(16);

static const EdgeInsetsGeometry mainPadding =
EdgeInsets.symmetric(horizontal: 20, vertical: 16);

static const EdgeInsetsGeometry backIconPadding =
EdgeInsets.symmetric(vertical: 8, horizontal: 4);

static const EdgeInsetsGeometry emailPadding = EdgeInsets.all(16);
static const EdgeInsetsGeometry copiableContainerPadding =
EdgeInsets.all(12.0);

static const EdgeInsetsGeometry emailMargin =
static const EdgeInsetsGeometry copiableContainerMargin =
EdgeInsets.symmetric(vertical: 12);

static const EdgeInsetsGeometry textPadding =
EdgeInsets.symmetric(horizontal: 16);
EdgeInsets.symmetric(horizontal: 8);

static const EdgeInsetsGeometry titleSharedMediaAndFilesPadding =
EdgeInsets.only(top: 30);
Expand Down
197 changes: 124 additions & 73 deletions lib/pages/chat_profile_info/chat_profile_info_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import 'package:dartz/dartz.dart';
import 'package:fluffychat/app_state/failure.dart';
import 'package:fluffychat/app_state/success.dart';
import 'package:fluffychat/domain/app_state/contact/lookup_match_contact_state.dart';
import 'package:fluffychat/resource/image_paths.dart';
import 'package:fluffychat/utils/clipboard.dart';
import 'package:fluffychat/utils/string_extension.dart';
import 'package:fluffychat/utils/twake_snackbar.dart';
import 'package:fluffychat/widgets/avatar/avatar_style.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:linagora_design_flutter/avatar/round_avatar_style.dart';
import 'package:linagora_design_flutter/extensions/string_extension.dart';
import 'package:linagora_design_flutter/linagora_design_flutter.dart';
Expand Down Expand Up @@ -182,74 +184,63 @@ class _Information extends StatelessWidget {
),
maxLines: 2,
),
Row(
children: [
Text(
matrixId ?? '',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: LinagoraRefColors.material().tertiary[30],
),
maxLines: 2,
),
const Spacer(),
IconButton(
icon: Icon(
Icons.content_copy,
size: ChatProfileInfoStyle.copyIconSize,
color: LinagoraRefColors.material().tertiary[40],
),
color: LinagoraRefColors.material().tertiary[40],
onPressed: () {
Clipboard.instance.copyText(matrixId ?? '');
TwakeSnackBar.show(
context,
L10n.of(context)!.copiedToClipboard,
);
},
Container(
padding: ChatProfileInfoStyle.copiableContainerPadding,
margin: ChatProfileInfoStyle.copiableContainerMargin,
decoration: BoxDecoration(
border: Border.all(
color: LinagoraRefColors.material().neutral[90] ??
Colors.black,
),
],
),
ValueListenableBuilder(
valueListenable: lookupContactNotifier,
builder: (context, contact, child) {
return contact.fold(
(failure) => const SizedBox.shrink(),
(success) {
if (success is LookupMatchContactSuccess) {
return Container(
padding: ChatProfileInfoStyle.emailPadding,
margin: ChatProfileInfoStyle.emailMargin,
decoration: BoxDecoration(
border: Border.all(
color: LinagoraRefColors.material().neutral[90] ??
Colors.black,
),
borderRadius:
ChatProfileInfoStyle.emailBorderRadius,
),
child: Wrap(
runSpacing: ChatProfileInfoStyle.textSpacing,
children: [
if (success.contact.email != null)
_CopiableRow(
icon: Icons.alternate_email,
text: success.contact.email!,
),
if (success.contact.phoneNumber != null)
_CopiableRow(
icon: Icons.call,
text: success.contact.phoneNumber!,
),
],
),
);
}
borderRadius:
ChatProfileInfoStyle.copiableContainerBorderRadius,
),
child: Column(
children: [
if (matrixId != null)
_CopiableRowWithSvgIcon(
iconPath: ImagePaths.icMatrixid,
text: matrixId!,
),
ValueListenableBuilder(
valueListenable: lookupContactNotifier,
builder: (context, contact, child) {
return contact.fold(
(failure) => const SizedBox.shrink(),
(success) {
if (success is LookupMatchContactSuccess) {
return Column(
children: [
if (success.contact.email != null) ...{
const SizedBox(
height: ChatProfileInfoStyle.textSpacing,
),
_CopiableRowWithMaterialIcon(
icon: Icons.alternate_email,
text: success.contact.email!,
),
},
if (success.contact.phoneNumber != null) ...{
const SizedBox(
height: ChatProfileInfoStyle.textSpacing,
),
_CopiableRowWithMaterialIcon(
icon: Icons.call,
text: success.contact.phoneNumber!,
),
},
],
);
}

return const SizedBox.shrink();
},
);
},
child: const SizedBox.shrink(),
return const SizedBox.shrink();
},
);
},
child: const SizedBox.shrink(),
),
],
),
),
if (!isDraftInfo)
InkWell(
Expand Down Expand Up @@ -284,8 +275,8 @@ class _Information extends StatelessWidget {
}
}

class _CopiableRow extends StatelessWidget {
const _CopiableRow({
class _CopiableRowWithMaterialIcon extends StatelessWidget {
const _CopiableRowWithMaterialIcon({
Key? key,
required this.icon,
required this.text,
Expand All @@ -298,19 +289,78 @@ class _CopiableRow extends StatelessWidget {
Widget build(BuildContext context) {
return Row(
children: [
Icon(
icon,
size: ChatProfileInfoStyle.copyIconSize,
color: LinagoraSysColors.material().onSurface,
Padding(
padding: const EdgeInsets.all(ChatProfileInfoStyle.iconPadding),
child: Icon(
icon,
size: ChatProfileInfoStyle.iconSize,
color: LinagoraSysColors.material().onSurface,
),
),
Expanded(
child: Padding(
padding: ChatProfileInfoStyle.textPadding,
child: Text(
text,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: LinagoraSysColors.material().onSurface,
),
overflow: TextOverflow.ellipsis,
),
),
),
IconButton(
icon: Icon(
Icons.content_copy,
size: ChatProfileInfoStyle.copyIconSize,
color: LinagoraRefColors.material().tertiary[40],
),
color: LinagoraRefColors.material().tertiary[40],
onPressed: () {
Clipboard.instance.copyText(text);
TwakeSnackBar.show(context, L10n.of(context)!.copiedToClipboard);
},
),
],
);
}
}

class _CopiableRowWithSvgIcon extends StatelessWidget {
const _CopiableRowWithSvgIcon({
Key? key,
required this.iconPath,
required this.text,
}) : super(key: key);

final String iconPath;
final String text;

@override
Widget build(BuildContext context) {
return Row(
children: [
Padding(
padding: const EdgeInsets.all(ChatProfileInfoStyle.iconPadding),
child: SvgPicture.asset(
iconPath,
width: ChatProfileInfoStyle.iconSize,
height: ChatProfileInfoStyle.iconSize,
colorFilter: ColorFilter.mode(
LinagoraSysColors.material().onSurface,
BlendMode.srcIn,
),
),
),
Expanded(
child: Padding(
padding: ChatProfileInfoStyle.textPadding,
child: Text(
text,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: LinagoraSysColors.material().onSurface,
),
overflow: TextOverflow.ellipsis,
),
),
),
Expand All @@ -321,6 +371,7 @@ class _CopiableRow extends StatelessWidget {
color: LinagoraRefColors.material().tertiary[40],
),
color: LinagoraRefColors.material().tertiary[40],
focusColor: Theme.of(context).primaryColor,
onPressed: () {
Clipboard.instance.copyText(text);
TwakeSnackBar.show(context, L10n.of(context)!.copiedToClipboard);
Expand Down
1 change: 1 addition & 0 deletions lib/resource/image_paths.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ class ImagePaths {
static String get icNoResultsFound =>
_getImagePath('ic_no_results_found.svg');
static String get icEncrypted => _getImagePath('ic_encrypted.svg');
static String get icMatrixid => _getImagePath('ic_matrixid.svg');

static String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
Expand Down

0 comments on commit b430241

Please sign in to comment.