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

TF-295 Apply new UI for composer web browser

Browse Source
This commit is contained in:
dab246
2022-03-16 15:57:59 +07:00
committed by Dat H. Pham
parent 8c66ef9105
commit 1f9fd7c0a7
38 changed files with 1181 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/core.dart
+1
View File
@@ -32,6 +32,7 @@ export 'presentation/views/text/rich_text_builder.dart';
export 'presentation/views/responsive/responsive_widget.dart';
export 'presentation/views/list/tree_view.dart';
export 'presentation/views/button/button_builder.dart';
export 'presentation/views/button/icon_button_web.dart';
export 'presentation/views/image/avatar_builder.dart';
export 'presentation/views/list/sliver_grid_delegate_fixed_height.dart';
export 'presentation/views/text/text_form_field_builder.dart';
core/lib/presentation/extensions/color_extension.dart
+10 -6
View File
@@ -79,12 +79,12 @@ extension AppColor on Color {
static const colorInputBorderCreateMailbox = Color(0x1F000000);
static const colorInputBackgroundErrorVerifyName = Color(0xFFFAEBEB);
static const colorInputBackgroundCreateMailbox = Color(0xFFF2F3F5);
static const colorHintInputCreateMailbox= Color(0xFFA9B4C2);
static const colorMessageConfirmDialog= Color(0xFF6D7885);
static const colorActionDeleteConfirmDialog= Color(0xFFE64646);
static const colorActionCancelDialog= Color(0xFF007AFF);
static const colorMessageDialog= Color(0xFF222222);
static const colorConfirmActionDialog= Color(0xFFF2F2F2);
static const colorHintInputCreateMailbox = Color(0xFFA9B4C2);
static const colorMessageConfirmDialog = Color(0xFF6D7885);
static const colorActionDeleteConfirmDialog = Color(0xFFE64646);
static const colorActionCancelDialog = Color(0xFF007AFF);
static const colorMessageDialog = Color(0xFF222222);
static const colorConfirmActionDialog = Color(0xFFF2F2F2);
static const colorEmailAddress = Color(0xFF333333);
static const colorHintEmailAddressInput = Color(0x993C3C43);
static const colorDividerComposer = Color(0xFFC6C6C8);
@@ -94,6 +94,10 @@ extension AppColor on Color {
static const colorEmailAddressPrefix = Color(0xFF9AA7B6);
static const colorEmailAddressTag = Color(0x146D7885);
static const colorLineLeftEmailView = Color(0x2999A2AD);
static const colorShadowComposer = Color(0x1F000000);
static const colorBottomBarComposer = Color(0x5CEBEDF0);
static const colorShadowComposerFullScreen = Color(0x33000000);
static const colorCancelButton = Color(0xFFF2F2F2);
static const mapGradientColor = [
[Color(0xFF21D4FD), Color(0xFFB721FF)],
core/lib/presentation/resources/image_paths.dart
+8 -1
View File
@@ -10,7 +10,6 @@ class ImagePaths {
String get icBack => _getImagePath('ic_back.svg');
String get icEyeDisable => _getImagePath('ic_eye_disable.svg');
String get icShare => _getImagePath('ic_share.svg');
String get icAttachmentFile => _getImagePath('ic_attachment_file.svg');
String get icMoreReceiver => _getImagePath('ic_more_receiver.svg');
String get icComposerClose => _getImagePath('ic_composer_close.svg');
String get icComposerSend => _getImagePath('ic_composer_send.svg');
@@ -66,6 +65,14 @@ class ImagePaths {
String get icDeleteEmail => _getImagePath('ic_delete_email.svg');
String get icNewMessage => _getImagePath('ic_new_message.svg');
String get icUnreadStatus => _getImagePath('ic_unread_status.svg');
String get icAttachmentsComposer => _getImagePath('ic_attachments_composer.svg');
String get icCloseComposer => _getImagePath('ic_close_composer.svg');
String get icFullScreenComposer => _getImagePath('ic_fullscreen_composer.svg');
String get icMinimizeComposer => _getImagePath('ic_minimize_composer.svg');
String get icSendComposer => _getImagePath('ic_send_composer.svg');
String get icDeleteComposer => _getImagePath('ic_delete_composer.svg');
String get icFileAttachment => _getImagePath('ic_file_attachment.svg');
String get icDeleteAttachment => _getImagePath('ic_delete_attachment.svg');
String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
core/lib/presentation/utils/responsive_utils.dart
+1 -1
View File
@@ -15,7 +15,7 @@ class ResponsiveUtils {
final double desktopVerticalMargin = 120.0;
final double desktopHorizontalMargin = 200.0;
bool isMobileDevice(BuildContext context) => MediaQuery.of(context).size.shortestSide < 600;
bool isMobileDevice(BuildContext context) => MediaQuery.of(context).size.shortestSide < minTabletWidth;
double getSizeWidthScreen(BuildContext context) => MediaQuery.of(context).size.width;
core/lib/presentation/views/bottom_popup/confirmation_dialog_action_sheet_builder.dart
+27 -11
View File
@@ -2,6 +2,7 @@
import 'package:core/core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
typedef OnConfirmActionClick = void Function();
typedef OnCancelActionClick = void Function();
@@ -15,6 +16,9 @@ class ConfirmationDialogActionSheetBuilder {
String? _cancelText;
OnConfirmActionClick?_onConfirmActionClick;
OnCancelActionClick? _onCancelActionClick;
TextStyle? _styleConfirmButton;
TextStyle? _styleCancelButton;
TextStyle? _styleMessage;
ConfirmationDialogActionSheetBuilder(this._context);
@@ -32,11 +36,23 @@ class ConfirmationDialogActionSheetBuilder {
_messageText = message;
}
void styleMessage(TextStyle? style) {
_styleMessage = style;
}
void styleConfirmButton(TextStyle? style) {
_styleConfirmButton = style;
}
void styleCancelButton(TextStyle? style) {
_styleCancelButton = style;
}
void show() {
showCupertinoModalPopup(
context: _context,
barrierColor: AppColor.colorDefaultCupertinoActionSheet,
builder: (context) => CupertinoActionSheet(
builder: (context) => PointerInterceptor(child: CupertinoActionSheet(
actions: [
Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
@@ -45,27 +61,27 @@ class ConfirmationDialogActionSheetBuilder {
child: Text(
_messageText ?? '',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 14, color: AppColor.colorMessageConfirmDialog)),
style: _styleMessage ?? TextStyle(fontSize: 14, color: AppColor.colorMessageConfirmDialog)),
onPressed: () => {},
)
),
Container(
color: Colors.white,
child: CupertinoActionSheetAction(
child: Text(
_confirmText ?? '',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20, color: AppColor.colorActionDeleteConfirmDialog)),
onPressed: () => _onConfirmActionClick?.call(),
)
color: Colors.white,
child: CupertinoActionSheetAction(
child: Text(
_confirmText ?? '',
style: _styleConfirmButton ?? TextStyle(fontWeight: FontWeight.w500, fontSize: 20, color: AppColor.colorActionDeleteConfirmDialog)),
onPressed: () => _onConfirmActionClick?.call(),
)
),
],
cancelButton: CupertinoActionSheetAction(
child: Text(
_cancelText ?? '',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20, color: AppColor.colorActionCancelDialog)),
style: _styleCancelButton ?? TextStyle(fontWeight: FontWeight.w500, fontSize: 20, color: AppColor.colorActionCancelDialog)),
onPressed: () => _onCancelActionClick?.call(),
),
)
))
);
}
}
core/lib/presentation/views/button/icon_button_web.dart
+43
View File
@@ -0,0 +1,43 @@
import 'package:flutter/material.dart';
typedef IconWebCallback = void Function();
typedef IconWebHasPositionCallback = void Function(RelativeRect);
Widget buildIconWeb({
required Widget icon,
String? tooltip,
IconWebCallback? onTap,
EdgeInsets? iconPadding,
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)
);
}
Widget buildIconWebHasPosition(BuildContext context, {
required Widget icon,
String? tooltip,
IconWebHasPositionCallback? onTap
}) {
return GestureDetector(
onTapDown: (detail) {
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,
);
onTap?.call(position);
},
child: Tooltip(
message: tooltip,
child: icon,
)
);
}
core/lib/presentation/views/dialog/confirmation_dialog_builder.dart
+75 -35
View File
@@ -16,6 +16,13 @@ class ConfirmDialogBuilder {
String _confirmText = '';
String _cancelText = '';
Widget? _iconWidget;
Color? _colorCancelButton;
Color? _colorConfirmButton;
TextStyle? _styleTextCancelButton;
TextStyle? _styleTextConfirmButton;
TextStyle? _styleTitle;
TextStyle? _styleContent;
double? _radiusButton;
OnConfirmButtonAction? _onConfirmButtonAction;
OnCancelButtonAction? _onCancelButtonAction;
@@ -39,6 +46,34 @@ class ConfirmDialogBuilder {
_iconWidget = icon;
}
void colorCancelButton(Color? color) {
_colorCancelButton = color;
}
void colorConfirmButton(Color? color) {
_colorConfirmButton = color;
}
void styleTextCancelButton(TextStyle? style) {
_styleTextCancelButton = style;
}
void styleTextConfirmButton(TextStyle? style) {
_styleTextConfirmButton = style;
}
void styleTitle(TextStyle? style) {
_styleTitle = style;
}
void styleContent(TextStyle? style) {
_styleContent = style;
}
void radiusButton(double? radius) {
_radiusButton = radius;
}
void onConfirmButtonAction(String confirmText, OnConfirmButtonAction? onConfirmButtonAction) {
_confirmText = confirmText;
_onConfirmButtonAction = onConfirmButtonAction;
@@ -66,52 +101,57 @@ class ConfirmDialogBuilder {
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(16))),
child: Wrap(children: [
Align(
alignment: Alignment.centerRight,
child: IconButton(
padding: EdgeInsets.only(top: 16, right: 16),
onPressed: () => _onCloseButtonAction?.call(),
icon: SvgPicture.asset(_imagePath.icCloseMailbox, width: 30, height: 30, fit: BoxFit.fill))),
if (_onCloseButtonAction != null)
Align(
alignment: Alignment.centerRight,
child: IconButton(
padding: EdgeInsets.only(top: 16, right: 16),
onPressed: () => _onCloseButtonAction?.call(),
icon: SvgPicture.asset(_imagePath.icCloseMailbox, width: 30, height: 30, fit: BoxFit.fill))),
if (_iconWidget != null)
Container(
margin: EdgeInsets.only(top: 24),
alignment: Alignment.center,
child: _iconWidget,
),
Padding(
padding: EdgeInsets.only(top: 12),
child: Center(
child: Text(
_title,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0, color: AppColor.colorActionDeleteConfirmDialog, fontWeight: FontWeight.w500)
if (_title.isNotEmpty)
Padding(
padding: EdgeInsets.only(top: 12),
child: Center(
child: Text(
_title,
textAlign: TextAlign.center,
style: _styleTitle ?? TextStyle(fontSize: 20.0, color: AppColor.colorActionDeleteConfirmDialog, fontWeight: FontWeight.w500)
)
)
)
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24),
child: Center(
child: Text(_content,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 17.0, color: AppColor.colorMessageDialog)
),
if (_content.isNotEmpty)
Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24),
child: Center(
child: Text(_content,
textAlign: TextAlign.center,
style: _styleContent ?? TextStyle(fontSize: 17.0, color: AppColor.colorMessageDialog)
),
),
),
),
Padding(
padding: EdgeInsets.only(bottom: 16, left: 16, right: 16),
child: Row(
children: [
Expanded(
child: _buildButton(name: _cancelText, action: _onCancelButtonAction)
),
Expanded(child: _buildButton(
name: _cancelText,
bgColor: _colorCancelButton,
radius: _radiusButton,
textStyle: _styleTextCancelButton,
action: _onCancelButtonAction)),
SizedBox(width: 16),
Expanded(
child: _buildButton(
name: _confirmText,
bgColor: AppColor.colorConfirmActionDialog,
nameColor: AppColor.colorActionDeleteConfirmDialog,
action: _onConfirmButtonAction)
)
Expanded(child: _buildButton(
name: _confirmText,
bgColor: _colorConfirmButton,
radius: _radiusButton,
textStyle: _styleTextConfirmButton,
action: _onConfirmButtonAction))
]
))
])
@@ -120,7 +160,7 @@ class ConfirmDialogBuilder {
}
Widget _buildButton({
String? name, Color? nameColor, Color? bgColor, Function? action
String? name, TextStyle? textStyle, Color? bgColor, double? radius, Function? action
}) {
return SizedBox(
width: double.infinity,
@@ -133,7 +173,7 @@ class ConfirmDialogBuilder {
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) => bgColor ?? AppColor.colorTextButton),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(radius ?? 8),
side: BorderSide(width: 0, color: bgColor ?? AppColor.colorTextButton),
)),
padding: MaterialStateProperty.resolveWith<EdgeInsets>(
@@ -141,7 +181,7 @@ class ConfirmDialogBuilder {
elevation: MaterialStateProperty.resolveWith<double>((Set<MaterialState> states) => 0)),
child: Text(name ?? '',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: nameColor ?? Colors.white)),
style: textStyle ?? TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: Colors.white)),
)
);
}
core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart
+3 -2
View File
@@ -5,6 +5,7 @@ import 'dart:math';
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/html_viewer/html_viewer_controller_for_web.dart';
import 'package:flutter/material.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'dart:developer' as developer;
import 'package:universal_html/html.dart' as html;
import 'package:core/presentation/utils/shims/dart_ui.dart' as ui;
@@ -221,10 +222,10 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
future: webInit,
builder: (context, snapshot) {
if (snapshot.hasData) {
return HtmlElementView(
return PointerInterceptor(child: HtmlElementView(
key: ValueKey(htmlData),
viewType: createdViewId,
);
));
} else {
return Container();
}
core/pubspec.yaml
+2
View File
@@ -74,6 +74,8 @@ dependencies:
http: 0.13.4
pointer_interceptor: 0.9.1
dev_dependencies:
flutter_test:
sdk: flutter