From 0c921e51924303b884c75720e49bba1f8b6aab9d Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 29 Jul 2021 12:40:40 +0700 Subject: [PATCH] Add icon, color, widget_builder, responsive for core module --- assets/images/ic_back.svg | 3 + assets/images/ic_calendar.svg | 6 ++ assets/images/ic_eye_disable.svg | 4 + assets/images/ic_folder.svg | 3 + assets/images/ic_forward.svg | 4 + assets/images/ic_reply.svg | 4 + assets/images/ic_reply_all.svg | 5 + assets/images/ic_share.svg | 3 + assets/images/ic_star.svg | 3 + assets/images/ic_trash.svg | 4 + core/lib/core.dart | 1 + .../extensions/color_extension.dart | 6 ++ .../presentation/resources/image_paths.dart | 10 ++ .../presentation/utils/responsive_utils.dart | 28 ++---- .../views/button/button_builder.dart | 94 +++++++++++++++++++ .../views/responsive/responsive_widget.dart | 22 ++--- 16 files changed, 169 insertions(+), 31 deletions(-) create mode 100644 assets/images/ic_back.svg create mode 100644 assets/images/ic_calendar.svg create mode 100644 assets/images/ic_eye_disable.svg create mode 100644 assets/images/ic_folder.svg create mode 100644 assets/images/ic_forward.svg create mode 100644 assets/images/ic_reply.svg create mode 100644 assets/images/ic_reply_all.svg create mode 100644 assets/images/ic_share.svg create mode 100644 assets/images/ic_star.svg create mode 100644 assets/images/ic_trash.svg create mode 100644 core/lib/presentation/views/button/button_builder.dart diff --git a/assets/images/ic_back.svg b/assets/images/ic_back.svg new file mode 100644 index 000000000..5e45414ca --- /dev/null +++ b/assets/images/ic_back.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_calendar.svg b/assets/images/ic_calendar.svg new file mode 100644 index 000000000..c56d1f65e --- /dev/null +++ b/assets/images/ic_calendar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/ic_eye_disable.svg b/assets/images/ic_eye_disable.svg new file mode 100644 index 000000000..9b8e71e7f --- /dev/null +++ b/assets/images/ic_eye_disable.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/ic_folder.svg b/assets/images/ic_folder.svg new file mode 100644 index 000000000..e418acedd --- /dev/null +++ b/assets/images/ic_folder.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_forward.svg b/assets/images/ic_forward.svg new file mode 100644 index 000000000..423cc59b5 --- /dev/null +++ b/assets/images/ic_forward.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/ic_reply.svg b/assets/images/ic_reply.svg new file mode 100644 index 000000000..126b78fd0 --- /dev/null +++ b/assets/images/ic_reply.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/ic_reply_all.svg b/assets/images/ic_reply_all.svg new file mode 100644 index 000000000..c99a575d8 --- /dev/null +++ b/assets/images/ic_reply_all.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/ic_share.svg b/assets/images/ic_share.svg new file mode 100644 index 000000000..a41003c15 --- /dev/null +++ b/assets/images/ic_share.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_star.svg b/assets/images/ic_star.svg new file mode 100644 index 000000000..895cc1dc5 --- /dev/null +++ b/assets/images/ic_star.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_trash.svg b/assets/images/ic_trash.svg new file mode 100644 index 000000000..60b600776 --- /dev/null +++ b/assets/images/ic_trash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/core/lib/core.dart b/core/lib/core.dart index 5dd88b56f..5b4de79d2 100644 --- a/core/lib/core.dart +++ b/core/lib/core.dart @@ -18,6 +18,7 @@ export 'presentation/views/text/input_decoration_builder.dart'; export 'presentation/views/text/text_builder.dart'; export 'presentation/views/responsive/responsive_widget.dart'; export 'presentation/views/list/tree_view.dart'; +export 'presentation/views/button/button_builder.dart'; // Resources export 'presentation/resources/assets_paths.dart'; diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index fd0e06147..17b7c8f44 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -33,4 +33,10 @@ extension AppColor on Color { static const storageMaxSizeColor = Color(0xFF101D43); static const storageUseSizeColor = Color(0xFF2D0CFF); static const myFolderTitleColor = Color(0xFF7E869B); + static const titleAppBarMailboxListMail = Color(0xFF182952); + static const notifyCountAppBarMailboxListMail = Color(0xFF3840F7); + static const bgNotifyCountAppBarMailboxListMail = Color(0xFFE6E5FF); + static const bgMailboxListMail = Color(0xFFFBFBFF); + static const bgMessenger = Color(0xFFF2F2F5); + static const textButtonColor = Color(0xFF182952); } diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index 74f4f9649..64824ba8a 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -16,6 +16,16 @@ class ImagePaths { String get icMailboxNewFolder => _getImagePath('ic_mailbox_new_folder.svg'); String get icFolderArrow => _getImagePath('ic_folder_arrow.svg'); String get icExpandFolder => _getImagePath('ic_expand_folder.svg'); + String get icBack => _getImagePath('ic_back.svg'); + String get icEyeDisable => _getImagePath('ic_eye_disable.svg'); + String get icFolder => _getImagePath('ic_folder.svg'); + String get icForward => _getImagePath('ic_forward.svg'); + String get icReply => _getImagePath('ic_reply.svg'); + String get icReplyAll => _getImagePath('ic_reply_all.svg'); + String get icStar => _getImagePath('ic_star.svg'); + String get icTrash => _getImagePath('ic_trash.svg'); + String get icCalendar => _getImagePath('ic_calendar.svg'); + String get icShare => _getImagePath('ic_share.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index dfa7a2a4e..ec7b75693 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -2,36 +2,24 @@ import 'package:flutter/widgets.dart'; class ResponsiveUtils { - static const int _minLargeWidth = 950; - static const int _minMediumWidth = 600; + static const int minDesktopWidth = 1200; + static const int minTabletWidth = 600; static const double _loginTextFieldWidthSmallScreen = 280.0; static const double _loginTextFieldWidthLargeScreen = 320.0; static const double _loginButtonWidth = 240.0; - double getSizeWidthScreen(BuildContext context) { - return MediaQuery.of(context).size.width; - } + double getSizeWidthScreen(BuildContext context) => MediaQuery.of(context).size.width; - double getSizeHeightScreen(BuildContext context) { - return MediaQuery.of(context).size.height; - } + double getSizeHeightScreen(BuildContext context) => MediaQuery.of(context).size.height; - bool isLargeScreen(BuildContext context) { - return getSizeWidthScreen(context) >= _minLargeWidth; - } + bool isMobile(BuildContext context) => getSizeWidthScreen(context) < minTabletWidth; - bool isSmallScreen(BuildContext context) { - return getSizeWidthScreen(context) < _minMediumWidth; - } + bool isTablet(BuildContext context) => getSizeWidthScreen(context) >= minTabletWidth && getSizeWidthScreen(context) < minDesktopWidth; - bool isMediumScreen(BuildContext context) { - return getSizeWidthScreen(context) >= _minMediumWidth && getSizeWidthScreen(context) < _minLargeWidth; - } + bool isDesktop(BuildContext context) => getSizeWidthScreen(context) >= minDesktopWidth; - double getWidthLoginTextField(BuildContext context) => isSmallScreen(context) - ? _loginTextFieldWidthSmallScreen - : _loginTextFieldWidthLargeScreen; + double getWidthLoginTextField(BuildContext context) => isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen; double getWidthLoginButton() => _loginButtonWidth; } \ No newline at end of file diff --git a/core/lib/presentation/views/button/button_builder.dart b/core/lib/presentation/views/button/button_builder.dart new file mode 100644 index 000000000..96a74a0d8 --- /dev/null +++ b/core/lib/presentation/views/button/button_builder.dart @@ -0,0 +1,94 @@ +import 'dart:ui'; + +import 'package:core/core.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +typedef OnPressActionClick = void Function(); + +class ButtonBuilder { + OnPressActionClick? _onPressActionClick; + + String? _icon; + String? _text; + double? _size; + bool? _isVertical; + Key? _key; + + ButtonBuilder key(Key key) { + _key = key; + return this; + } + + ButtonBuilder size(double size) { + _size = size; + return this; + } + + ButtonBuilder text(String text, {required bool isVertical}) { + _text = text; + _isVertical = isVertical; + return this; + } + + ButtonBuilder(this._icon); + + ButtonBuilder onBackActionClick(OnPressActionClick onPressActionClick) { + _onPressActionClick = onPressActionClick; + return this; + } + + Widget build() { + return Container( + alignment: Alignment.center, + color: Colors.transparent, + child: MediaQuery( + data: MediaQueryData(padding: EdgeInsets.zero), + child: GestureDetector( + child: _buildBody(), + onTap: () { + if (_onPressActionClick != null) { + _onPressActionClick!(); + } + }, + ) + ) + ); + } + + Widget _buildBody() { + if (_text != null) { + return _isVertical! + ? Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + _buildIcon(), + SizedBox(height: 8), + _buildText(), + ]) + : Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + _buildIcon(), + SizedBox(width: 8), + _buildText(), + ]); + } else { + return _buildIcon(); + } + } + + Widget _buildIcon() => SvgPicture.asset(_icon ?? '', width: _size ?? 24, height: _size ?? 24, fit: BoxFit.fill); + + Widget _buildText() { + return Text( + '${_text ?? ''}', + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontSize: 12, color: AppColor.textButtonColor, fontWeight: FontWeight.w500), + ); + } +} \ No newline at end of file diff --git a/core/lib/presentation/views/responsive/responsive_widget.dart b/core/lib/presentation/views/responsive/responsive_widget.dart index 87a5dc86d..fdb6faa47 100644 --- a/core/lib/presentation/views/responsive/responsive_widget.dart +++ b/core/lib/presentation/views/responsive/responsive_widget.dart @@ -2,29 +2,29 @@ import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:flutter/material.dart'; class ResponsiveWidget extends StatelessWidget { - final Widget? largeScreen; - final Widget mediumScreen; - final Widget? smallScreen; + final Widget mobile; + final Widget tablet; + final Widget? desktop; final ResponsiveUtils responsiveUtils; const ResponsiveWidget({ Key? key, - this.largeScreen, - required this.mediumScreen, - this.smallScreen, + required this.mobile, + required this.tablet, + this.desktop, required this.responsiveUtils, }) : super(key: key); @override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { - if (responsiveUtils.isLargeScreen(context)) { - return largeScreen ?? mediumScreen; - } else if (responsiveUtils.isMediumScreen(context)) { - return mediumScreen; + if (responsiveUtils.isDesktop(context)) { + return desktop ?? tablet; + } else if (responsiveUtils.isTablet(context)) { + return tablet; } else { - return smallScreen ?? mediumScreen; + return mobile; } }); }