-
Notifications
You must be signed in to change notification settings - Fork 79
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
TF-3005 Apply new design app bar contact view
- Loading branch information
Showing
12 changed files
with
344 additions
and
292 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
lib/features/contact/presentation/styles/app_bar_contact_widget_style.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
|
|
||
| import 'package:core/presentation/utils/responsive_utils.dart'; | ||
| import 'package:core/utils/platform_info.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class AppBarContactWidgetStyle { | ||
| static EdgeInsetsGeometry getAppBarPadding( | ||
| BuildContext context, | ||
| ResponsiveUtils responsiveUtils | ||
| ) { | ||
| if (PlatformInfo.isWeb) { | ||
| return const EdgeInsets.symmetric(horizontal: 16); | ||
| } else { | ||
| if (responsiveUtils.isScreenWithShortestSide(context)) { | ||
| return const EdgeInsets.symmetric(horizontal: 10); | ||
| } else { | ||
| return const EdgeInsets.symmetric(horizontal: 32); | ||
| } | ||
| } | ||
| } | ||
| } |
62 changes: 62 additions & 0 deletions
62
lib/features/contact/presentation/styles/contact_view_style.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
|
|
||
| import 'package:core/presentation/utils/responsive_utils.dart'; | ||
| import 'package:core/utils/platform_info.dart'; | ||
| import 'package:flutter/cupertino.dart'; | ||
|
|
||
| class ContactViewStyle { | ||
| static const double viewMaxHeight = 624.0; | ||
| static const double viewMaxWidth = 558.0; | ||
|
|
||
| static double getContactViewHeight( | ||
| BuildContext context, | ||
| ResponsiveUtils responsiveUtils | ||
| ) { | ||
| if ((PlatformInfo.isWeb && responsiveUtils.isMobile(context)) || | ||
| (PlatformInfo.isMobile && responsiveUtils.isScreenWithShortestSide(context)) | ||
| ) { | ||
| return double.infinity; | ||
| } else if (responsiveUtils.getSizeScreenHeight(context) > ContactViewStyle.viewMaxHeight) { | ||
| return ContactViewStyle.viewMaxHeight; | ||
| } else { | ||
| return double.infinity; | ||
| } | ||
| } | ||
|
|
||
| static double getContactViewWidth( | ||
| BuildContext context, | ||
| ResponsiveUtils responsiveUtils | ||
| ) { | ||
| if ((PlatformInfo.isWeb && responsiveUtils.isMobile(context)) || | ||
| (PlatformInfo.isMobile && responsiveUtils.isScreenWithShortestSide(context)) | ||
| ) { | ||
| return double.infinity; | ||
| } else { | ||
| return ContactViewStyle.viewMaxWidth; | ||
| } | ||
| } | ||
|
|
||
| static bool isAppBarTopBorderSupported( | ||
| BuildContext context, | ||
| ResponsiveUtils responsiveUtils | ||
| ) { | ||
| return !(PlatformInfo.isWeb || responsiveUtils.isLandscapeMobile(context)); | ||
| } | ||
|
|
||
| static BorderRadiusGeometry getContactViewBorderRadius( | ||
| BuildContext context, | ||
| ResponsiveUtils responsiveUtils | ||
| ) { | ||
| if (PlatformInfo.isMobile && responsiveUtils.isLandscapeMobile(context)) { | ||
| return BorderRadius.zero; | ||
| } else if ((PlatformInfo.isWeb && responsiveUtils.isMobile(context)) || | ||
| (PlatformInfo.isMobile && responsiveUtils.isPortraitMobile(context)) | ||
| ) { | ||
| return const BorderRadiusDirectional.only( | ||
| topEnd: Radius.circular(16), | ||
| topStart: Radius.circular(16), | ||
| ); | ||
| } else { | ||
| return const BorderRadius.all(Radius.circular(16)); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
76 changes: 46 additions & 30 deletions
76
lib/features/contact/presentation/widgets/app_bar_contact_widget.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,64 @@ | ||
|
|
||
| import 'package:core/presentation/extensions/color_extension.dart'; | ||
| import 'package:core/presentation/resources/image_paths.dart'; | ||
| import 'package:core/presentation/views/button/icon_button_web.dart'; | ||
| import 'package:core/presentation/utils/responsive_utils.dart'; | ||
| import 'package:core/presentation/views/button/tmail_button_widget.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_svg/flutter_svg.dart'; | ||
| import 'package:get/get.dart'; | ||
| import 'package:tmail_ui_user/features/contact/presentation/styles/app_bar_contact_widget_style.dart'; | ||
| import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; | ||
|
|
||
| class AppBarContactWidget extends StatelessWidget { | ||
|
|
||
| final _imagePaths = Get.find<ImagePaths>(); | ||
| final String? title; | ||
| final ImagePaths imagePaths; | ||
| final ResponsiveUtils responsiveUtils; | ||
| final VoidCallback onCloseContactView; | ||
|
|
||
| final Function()? onCloseContactView; | ||
|
|
||
| AppBarContactWidget({ | ||
| Key? key, | ||
| this.onCloseContactView, | ||
| const AppBarContactWidget({ | ||
| Key? key, | ||
| required this.title, | ||
| required this.imagePaths, | ||
| required this.responsiveUtils, | ||
| required this.onCloseContactView, | ||
| }) : super(key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Stack(alignment: Alignment.center, children: [ | ||
| Positioned( | ||
| left: 0, | ||
| child: buildIconWeb( | ||
| icon: SvgPicture.asset( | ||
| _imagePaths.icClose, | ||
| colorFilter: AppColor.colorCloseButton.asFilter(), | ||
| width: 24, | ||
| height: 24, | ||
| fit: BoxFit.fill), | ||
| minSize: 25, | ||
| iconSize: 25, | ||
| iconPadding: const EdgeInsets.all(5), | ||
| splashRadius: 15, | ||
| tooltip: AppLocalizations.of(context).close, | ||
| onTap: onCloseContactView), | ||
| return Container( | ||
| height: 56, | ||
| color: Colors.white, | ||
| padding: AppBarContactWidgetStyle.getAppBarPadding( | ||
| context, | ||
| responsiveUtils | ||
| ), | ||
| Center(child: Text( | ||
| AppLocalizations.of(context).contact, | ||
| style: const TextStyle( | ||
| width: double.infinity, | ||
| child: Stack( | ||
| alignment: Alignment.center, | ||
| children: [ | ||
| Text( | ||
| title ?? AppLocalizations.of(context).contact, | ||
| style: const TextStyle( | ||
| fontSize: 20, | ||
| fontWeight: FontWeight.bold, | ||
| color: Colors.black))), | ||
| ]); | ||
| color: Colors.black | ||
| ), | ||
| maxLines: 1, | ||
| overflow: TextOverflow.ellipsis, | ||
| ), | ||
| PositionedDirectional( | ||
| end: 0, | ||
| child: TMailButtonWidget.fromIcon( | ||
| icon: imagePaths.icClose, | ||
| tooltipMessage: AppLocalizations.of(context).close, | ||
| iconSize: 24, | ||
| padding: const EdgeInsets.all(3), | ||
| iconColor: AppColor.colorCloseButton, | ||
| backgroundColor: AppColor.colorCloseButton.withOpacity(0.12), | ||
| onTapActionCallback: onCloseContactView, | ||
| ) | ||
| ), | ||
| ] | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.