eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-381 Apply new UI for list emails

Browse Source
This commit is contained in:
dab246
2022-03-21 23:23:21 +07:00
committed by Dat H. Pham
parent f942041701
commit 61f3f0d00f
22 changed files with 671 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/core.dart
+1
View File
@@ -54,6 +54,7 @@ export 'presentation/views/bottom_popup/cupertino_action_sheet_action_builder.da
export 'presentation/views/bottom_popup/cupertino_action_sheet_builder.dart';
export 'presentation/views/bottom_popup/confirmation_dialog_action_sheet_builder.dart';
export 'presentation/views/modal_sheets/edit_text_modal_sheet_builder.dart';
export 'presentation/views/search/search_bar_view.dart';
// Resources
export 'presentation/resources/assets_paths.dart';
core/lib/presentation/extensions/color_extension.dart
+4
View File
@@ -98,6 +98,10 @@ extension AppColor on Color {
static const colorBottomBarComposer = Color(0x5CEBEDF0);
static const colorShadowComposerFullScreen = Color(0x33000000);
static const colorCancelButton = Color(0xFFF2F2F2);
static const colorTextButtonHeaderThread = Color(0xFF686E76);
static const colorButtonHeaderThread = Color(0x99EBEDF0);
static const colorBorderBodyThread = Color(0x5CB8C1CC);
static const colorBgDesktop = Color(0xFFF6F6F6);
static const mapGradientColor = [
[Color(0xFF21D4FD), Color(0xFFB721FF)],
core/lib/presentation/resources/image_paths.dart
+5
View File
@@ -75,6 +75,11 @@ class ImagePaths {
String get icDeleteAttachment => _getImagePath('ic_delete_attachment.svg');
String get icSendMobile => _getImagePath('ic_send_mobile.svg');
String get icSendMobileDisable => _getImagePath('ic_send_mobile_disable.svg');
String get icArrowDown => _getImagePath('ic_arrow_down.svg');
String get icFilterWeb => _getImagePath('ic_filter_web.svg');
String get icMarkAllAsRead => _getImagePath('ic_mark_all_as_read.svg');
String get icRefresh => _getImagePath('ic_refresh.svg');
String get icSelectAll => _getImagePath('ic_select_all.svg');
String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
core/lib/presentation/views/button/button_builder.dart
+56 -4
View File
@@ -4,10 +4,13 @@ import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
typedef OnPressActionClick = void Function();
typedef OnPressActionWithPositionClick = void Function(RelativeRect? position);
class ButtonBuilder {
OnPressActionClick? _onPressActionClick;
OnPressActionWithPositionClick? _onPressActionWithPositionClick;
BuildContext? _context;
String? _icon;
String? _text;
double? _size;
@@ -15,12 +18,21 @@ class ButtonBuilder {
bool? _isVertical;
Key? _key;
Color? _iconColor;
Color? _colorButton;
TextStyle? _textStyle;
BoxDecoration? _decoration;
Widget? _iconAction;
double? _radiusSplash;
EdgeInsets? _padding;
void key(Key key) {
_key = key;
}
void context(BuildContext context) {
_context = context;
}
void size(double size) {
_size = size;
}
@@ -29,6 +41,26 @@ class ButtonBuilder {
_iconColor = color;
}
void colorButton(Color color) {
_colorButton = color;
}
void decoration(BoxDecoration decoration) {
_decoration = decoration;
}
void addIconAction(Widget icon) {
_iconAction = icon;
}
void radiusSplash(double? radius) {
_radiusSplash = radius;
}
void padding(EdgeInsets? padding) {
_padding = padding;
}
void textStyle(TextStyle style) {
_textStyle = style;
}
@@ -48,13 +80,33 @@ class ButtonBuilder {
_onPressActionClick = onPressActionClick;
}
void addOnPressActionWithPositionClick(OnPressActionWithPositionClick onPressActionClick) {
_onPressActionWithPositionClick = onPressActionClick;
}
Widget build() {
return InkWell(
onTap: () => _onPressActionClick?.call(),
onTap: () => _onPressActionClick != null ? _onPressActionClick?.call() : null,
onTapDown: (detail) {
if (_onPressActionWithPositionClick != null && _context != null) {
final screenSize = MediaQuery.of(_context!).size;
final offset = detail.globalPosition;
final position = RelativeRect.fromLTRB(
offset.dx,
offset.dy,
screenSize.width - offset.dx,
screenSize.height - offset.dy,
);
_onPressActionWithPositionClick?.call(position);
}
},
borderRadius: BorderRadius.all(Radius.circular(_radiusSplash ?? 0)),
child: Container(
key: _key,
alignment: Alignment.center,
color: Colors.white,
color: _decoration == null ? _colorButton ?? Colors.white : null,
decoration: _decoration,
padding: _padding ?? EdgeInsets.zero,
child: _buildBody()
)
);
@@ -64,18 +116,18 @@ class ButtonBuilder {
if (_text != null) {
return _isVertical!
? Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildIcon(),
_buildText(),
if (_iconAction != null) _iconAction!
])
: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildIcon(),
_buildText(),
if (_iconAction != null) _iconAction!
]);
} else {
return _buildIcon();
core/lib/presentation/views/button/icon_button_web.dart
+8 -2
View File
@@ -12,9 +12,15 @@ Widget buildIconWeb({
double? iconSize,
}) {
return Material(
type: MaterialType.circle,
color: Colors.transparent,
child: IconButton(icon: icon, iconSize: iconSize, padding: iconPadding ?? EdgeInsets.all(8.0), tooltip: tooltip, onPressed: onTap)
shape: CircleBorder(),
child: IconButton(
icon: icon,
iconSize: iconSize,
padding: iconPadding ?? EdgeInsets.all(8.0),
splashRadius: 20,
tooltip: tooltip,
onPressed: onTap)
);
}
core/lib/presentation/views/image/avatar_builder.dart
+19 -33
View File
@@ -57,40 +57,26 @@ class AvatarBuilder {
_onTapAvatarActionClick!();
}},
child: Container(
key: _key,
width: _size ?? 40,
height: _size ?? 40,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
alignment: Alignment.center,
child: Stack(
children: [
Container(
width: _size ?? 40,
height: _size ?? 40,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular((_size ?? 40) * 0.5),
border: Border.all(color: Colors.transparent),
boxShadow: _boxShadows ?? [],
gradient: _avatarColors?.isNotEmpty == true
? LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
tileMode: TileMode.decal,
colors: _avatarColors ?? [])
key: _key,
width: _size ?? 40,
height: _size ?? 40,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular((_size ?? 40) * 0.5),
border: Border.all(color: Colors.transparent),
boxShadow: _boxShadows ?? [],
gradient: _avatarColors?.isNotEmpty == true
? LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, tileMode: TileMode.decal, colors: _avatarColors ?? [])
: null,
color: _bgColor ?? AppColor.avatarColor
),
child: Text(
'${_text ?? ''}',
style: _textStyle ?? TextStyle(fontSize: 20, color: _textColor ?? AppColor.avatarTextColor, fontWeight: FontWeight.w500)
)
),
],
)),
color: _bgColor ?? AppColor.avatarColor
),
child: Text(
'${_text ?? ''}',
style: _textStyle ?? TextStyle(fontSize: 20, color: _textColor ?? AppColor.avatarTextColor, fontWeight: FontWeight.w500)
)
),
);
}
}
core/lib/presentation/views/search/search_bar_view.dart
+89
View File
@@ -0,0 +1,89 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
typedef OnOpenSearchViewAction = Function();
class SearchBarView {
OnOpenSearchViewAction? _onOpenSearchViewAction;
final ImagePaths _imagePaths;
double? _heightSearchBar;
EdgeInsets? _padding;
EdgeInsets? _margin;
String? _hintTextSearch;
double? _maxSizeWidth;
SearchBarView(this._imagePaths);
void addOnOpenSearchViewAction(OnOpenSearchViewAction onOpenSearchViewAction) {
_onOpenSearchViewAction = onOpenSearchViewAction;
}
void setHeightSearchBar(double heightSearchBar) {
_heightSearchBar = heightSearchBar;
}
void addPadding(EdgeInsets padding) {
_padding = padding;
}
void addMargin(EdgeInsets margin) {
_margin = margin;
}
void hintTextSearch(String text) {
_hintTextSearch = text;
}
void maxSizeWidth(double? size) {
_maxSizeWidth = size;
}
Widget build() {
return InkWell(
onTap: () => _onOpenSearchViewAction?.call(),
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
key: Key('search_bar_widget'),
alignment: Alignment.topCenter,
height: _heightSearchBar ?? 40,
width: _maxSizeWidth ?? double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColor.colorBgSearchBar),
padding: _padding ?? EdgeInsets.zero,
margin: _margin ?? EdgeInsets.zero,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildSearchButton(),
Expanded(child: Text(
_hintTextSearch ?? '',
maxLines: 1,
style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar)))
]
)
)
),
);
}
Widget _buildSearchButton() {
return Material(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
child: Padding(
padding: EdgeInsets.only(left: 2),
child: IconButton(
icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
onPressed: () => _onOpenSearchViewAction?.call()
)
)
);
}
}
core/lib/presentation/views/text/slogan_builder.dart
+32 -21
View File
@@ -3,67 +3,78 @@ import 'package:flutter_svg/flutter_svg.dart';
/// A builder which builds a reusable slogan widget.
/// This contains the logo and the slogan text.
/// The elements are arranged in a column.
/// The elements are arranged in a column or row.
class SloganBuilder {
final bool arrangedByHorizontal;
Key? _key;
String? _text;
TextStyle? _textStyle;
TextAlign? _textAlign;
String? _logoSVG;
String? _logo;
double? _sizeLogo;
SloganBuilder key(Key key) {
SloganBuilder({this.arrangedByHorizontal = false});
void key(Key key) {
_key = key;
return this;
}
SloganBuilder setSloganText(String text) {
void setSloganText(String text) {
_text = text;
return this;
}
SloganBuilder setSloganTextStyle(TextStyle textStyle) {
void setSloganTextStyle(TextStyle textStyle) {
_textStyle = textStyle;
return this;
}
SloganBuilder setSloganTextAlign(TextAlign textAlign) {
void setSloganTextAlign(TextAlign textAlign) {
_textAlign = textAlign;
return this;
}
SloganBuilder setLogo(String logo) {
void setLogo(String logo) {
_logo = logo;
return this;
}
SloganBuilder setLogoSVG(String logoSVG) {
void setLogoSVG(String logoSVG) {
_logoSVG = logoSVG;
return this;
}
void setSizeLogo(double? size) {
_sizeLogo = size;
}
Widget build() {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (!arrangedByHorizontal) {
return Column(children: [
_logoApp(),
Padding(
padding: EdgeInsets.only(top: 16, left: 16, right: 16),
child: Text(_text ?? '', key: _key, style: _textStyle, textAlign: _textAlign),
),
],
);
]);
} else {
return Row(children: [
_logoApp(),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text(_text ?? '', key: _key, style: _textStyle, textAlign: _textAlign),
),
]);
}
}
Widget _logoApp() {
if (_logoSVG != null) {
return SvgPicture.asset(_logoSVG!, width: 150, height: 150);
return SvgPicture.asset(_logoSVG!, width: _sizeLogo ?? 150, height: _sizeLogo ?? 150);
} else if (_logo != null) {
return Image(
image: AssetImage(_logo!),
fit: BoxFit.fill,
width: 150,
height: 150,
width: _sizeLogo ?? 150,
height: _sizeLogo ?? 150,
alignment: Alignment.center);
}
return SizedBox.shrink();