Add icon, color, widget_builder, responsive for core module

2021-07-29 12:40:40 +07:00
parent cab53453b5
commit 0c921e5192
16 changed files with 169 additions and 31 deletions
@@ -0,0 +1,3 @@
+<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.22114 15.6933C7.41487 15.8918 7.66145 16 7.95205 16C8.53327 16 9 15.531 9 14.9357C9 14.6381 8.87671 14.3675 8.67417 14.1601L2.50978 7.99098L8.67417 1.83991C8.87671 1.63247 9 1.35287 9 1.06426C9 0.468997 8.53327 0 7.95205 0C7.66145 0 7.41487 0.10823 7.22114 0.306652L0.369863 7.16122C0.123288 7.39572 0.00880626 7.68433 0 8C0 8.31567 0.123288 8.58625 0.369863 8.82976L7.22114 15.6933Z" fill="#3840F7"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 2V6" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V6" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 10H21" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94ZM9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19L9.9 4.24002Z" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 1L23 23" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H9L11 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V19Z" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 5L19 12L12 19" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.375 13.75L5 9.375L9.375 5" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 19V12.875C19 11.9467 18.6313 11.0565 17.9749 10.4001C17.3185 9.74375 16.4283 9.375 15.5 9.375H5" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.375 13.75L9 9.375L13.375 5" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.375 13.75L3 9.375L7.375 5" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 19V12.875C19 11.9467 18.6312 11.0565 17.9749 10.4001C17.3185 9.74375 16.4283 9.375 15.5 9.375H11" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.44 11.05L12.25 20.24C11.1242 21.3658 9.59718 21.9983 8.005 21.9983C6.41282 21.9983 4.88584 21.3658 3.76 20.24C2.63416 19.1141 2.00166 17.5872 2.00166 15.995C2.00166 14.4028 2.63416 12.8758 3.76 11.75L12.95 2.55998C13.7006 1.80942 14.7185 1.38776 15.78 1.38776C16.8415 1.38776 17.8594 1.80942 18.61 2.55998C19.3606 3.31054 19.7822 4.32852 19.7822 5.38998C19.7822 6.45144 19.3606 7.46942 18.61 8.21998L9.41 17.41C9.03472 17.7853 8.52573 17.9961 7.995 17.9961C7.46427 17.9961 6.95528 17.7853 6.58 17.41C6.20472 17.0347 5.99389 16.5257 5.99389 15.995C5.99389 15.4643 6.20472 14.9553 6.58 14.58L15.07 6.09998" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H21" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="#7E869B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -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';
@@ -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);
 }
@@ -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;
@@ -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;
 }
@@ -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),
+    );
+  }
+}
@@ -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;
      }
    });
  }