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

TF-3956 Support click outside to close the date time dialog picker on web

Browse Source 
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2025-08-18 13:22:25 +07:00
committed by Dat H. Pham
parent 5423a9096c
commit 3386b89f3b
6 changed files with 174 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/base/widget/dialog_picker/date_time_dialog_picker.dart
+113
View File
@@ -0,0 +1,113 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
class DateTimeDialogPicker {
static final _instance = DateTimeDialogPicker._();
factory DateTimeDialogPicker() => _instance;
DateTimeDialogPicker._();
final _isOpened = RxBool(false);
RxBool get isOpened => _isOpened;
Future<TimeOfDay?> showTwakeTimePicker({
required BuildContext context,
required TimeOfDay initialTime,
bool use24HourFormat = false,
String? cancelText,
String? confirmText,
}) {
_isOpened.value = true;
return showTimePicker(
context: context,
initialTime: initialTime,
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(
primary: AppColor.primaryColor,
onPrimary: Colors.white,
onSurface: Colors.black,
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: AppColor.primaryColor,
),
),
),
child: MediaQuery(
data: MediaQueryData(alwaysUse24HourFormat: use24HourFormat),
child: PlatformInfo.isWeb
? KeyboardListener(
focusNode: FocusNode(),
autofocus: true,
onKeyEvent: (event) {
if (event.logicalKey == LogicalKeyboardKey.escape) {
Navigator.of(context).pop();
}
},
child: child!,
)
: child!,
),
);
},
cancelText: cancelText,
confirmText: confirmText,
).whenComplete(() => _isOpened.value = false);
}
Future<DateTime?> showTwakeDatePicker({
required BuildContext context,
required DateTime initialDate,
String? cancelText,
String? confirmText,
}) {
_isOpened.value = true;
return showDatePicker(
context: context,
initialDate: initialDate,
initialDatePickerMode: DatePickerMode.day,
firstDate: DateTime(1900),
lastDate: DateTime(2100),
locale: Localizations.localeOf(context),
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(
primary: AppColor.primaryColor,
onPrimary: Colors.white,
onSurface: Colors.black,
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: AppColor.primaryColor,
),
),
),
child: PlatformInfo.isWeb
? KeyboardListener(
focusNode: FocusNode(),
autofocus: true,
onKeyEvent: (event) {
if (event.logicalKey == LogicalKeyboardKey.escape) {
Navigator.of(context).pop();
}
},
child: child!,
)
: child!,
);
},
cancelText: cancelText,
confirmText: confirmText,
).whenComplete(() => _isOpened.value = false);
}
}
lib/features/manage_account/presentation/manage_account_dashboard_controller.dart
+2 -2
View File
@@ -15,6 +15,7 @@ import 'package:rule_filter/rule_filter/capability_rule_filter.dart';
import 'package:server_settings/server_settings/capability_server_settings.dart';
import 'package:tmail_ui_user/features/base/action/ui_action.dart';
import 'package:tmail_ui_user/features/base/reloadable/reloadable_controller.dart';
import 'package:tmail_ui_user/features/base/widget/dialog_picker/date_time_dialog_picker.dart';
import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
import 'package:tmail_ui_user/features/manage_account/domain/state/export_trace_log_state.dart';
import 'package:tmail_ui_user/features/manage_account/domain/state/get_all_vacation_state.dart';
@@ -57,7 +58,6 @@ class ManageAccountDashBoardController extends ReloadableController {
final ownEmailAddress = Rx<String>('');
Session? sessionCurrent;
bool? isVacationDateDialogDisplayed;
Uri? previousUri;
int minInputLengthAutocomplete = AppConfig.defaultMinInputLengthAutocomplete;
@@ -383,7 +383,7 @@ class ManageAccountDashBoardController extends ReloadableController {
bool _onBackButtonInterceptor(bool stopDefaultButtonEvent, RouteInfo routeInfo) {
log('ManageAccountDashBoardController::_onBackButtonInterceptor:currentRoute: ${Get.currentRoute} | _isDialogViewOpen: $_isDialogViewOpen');
if (_isDialogViewOpen || isVacationDateDialogDisplayed == true) {
if (_isDialogViewOpen || DateTimeDialogPicker().isOpened.isTrue) {
popBack();
_replaceBrowserHistory();
return true;
lib/features/manage_account/presentation/vacation/vacation_controller.dart
+7 -48
View File
@@ -3,10 +3,10 @@ import 'package:dartz/dartz.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/mail/vacation/vacation_response.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:rich_text_composer/rich_text_composer.dart';
import 'package:rich_text_composer/views/commons/constants.dart';
import 'package:tmail_ui_user/features/base/base_controller.dart';
import 'package:tmail_ui_user/features/base/widget/dialog_picker/date_time_dialog_picker.dart';
import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart';
import 'package:tmail_ui_user/features/manage_account/domain/state/update_vacation_state.dart';
import 'package:tmail_ui_user/features/manage_account/domain/usecases/update_vacation_interactor.dart';
@@ -138,34 +138,10 @@ class VacationController extends BaseController {
}
FocusScope.of(context).unfocus();
_accountDashBoardController.isVacationDateDialogDisplayed = true;
final datePicked = await showDatePicker(
context: context,
initialDate: currentDate ?? DateTime.now(),
initialDatePickerMode: DatePickerMode.day,
firstDate: DateTime(1900),
lastDate: DateTime(2100),
locale: Localizations.localeOf(context),
builder: (context, child) {
return PointerInterceptor(
child: Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(
primary: AppColor.primaryColor,
onPrimary: Colors.white,
onSurface: Colors.black
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: AppColor.primaryColor
)
)
),
child: child!
),
);
}
).whenComplete(() => _accountDashBoardController.isVacationDateDialogDisplayed = false);
final datePicked = await DateTimeDialogPicker().showTwakeDatePicker(
context: context,
initialDate: currentDate ?? DateTime.now(),
);
if (datePicked == null) {
return;
@@ -184,27 +160,10 @@ class VacationController extends BaseController {
}
FocusScope.of(context).unfocus();
_accountDashBoardController.isVacationDateDialogDisplayed = true;
final timePicked = await showTimePicker(
final timePicked = await DateTimeDialogPicker().showTwakeTimePicker(
context: context,
initialTime: currentTime ?? TimeOfDay.now(),
builder: (context, child) {
return PointerInterceptor(
child: Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(
primary: AppColor.primaryColor,
onPrimary: Colors.white,
onSurface: Colors.black),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(foregroundColor: AppColor.primaryColor))),
child: MediaQuery(
data: const MediaQueryData(alwaysUse24HourFormat: false),
child: child!),
),
);
}
).whenComplete(() => _accountDashBoardController.isVacationDateDialogDisplayed = false);
);
if (timePicked == null) {
return;
lib/features/manage_account/presentation/vacation/vacation_view.dart
+38 -2
View File
@@ -12,8 +12,10 @@ import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:get/get.dart';
import 'package:html_editor_enhanced/html_editor.dart' as html_editor_browser;
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:rich_text_composer/rich_text_composer.dart';
import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
import 'package:tmail_ui_user/features/base/widget/dialog_picker/date_time_dialog_picker.dart';
import 'package:tmail_ui_user/features/base/widget/label_border_button_field.dart';
import 'package:tmail_ui_user/features/base/widget/switch_label_button_widget.dart';
import 'package:tmail_ui_user/features/base/widget/label_input_field_builder.dart';
@@ -399,7 +401,24 @@ class VacationView extends GetWidget<VacationController> {
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(child: _buildMessageHtmlTextEditor(context)),
Flexible(
child: Stack(
children: [
_buildMessageHtmlTextEditor(context),
Obx(() {
if (DateTimeDialogPicker().isOpened.isTrue) {
return Positioned.fill(
child: PointerInterceptor(
child: const SizedBox.expand(),
),
);
} else {
return const SizedBox.shrink();
}
}),
],
),
),
ToolbarRichTextWidget(
richTextController: controller.richTextControllerForWeb!,
scrollListController: controller.richTextButtonScrollController,
@@ -444,7 +463,24 @@ class VacationView extends GetWidget<VacationController> {
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(child: _buildMessageHtmlTextEditor(context)),
Flexible(
child: Stack(
children: [
_buildMessageHtmlTextEditor(context),
Obx(() {
if (DateTimeDialogPicker().isOpened.isTrue) {
return Positioned.fill(
child: PointerInterceptor(
child: const SizedBox.expand(),
),
);
} else {
return const SizedBox.shrink();
}
}),
],
),
),
const SizedBox(height: 8),
ToolbarRichTextWidget(
richTextController: controller.richTextControllerForWeb!,
lib/l10n/intl_messages.arb
+7 -1
View File
@@ -1,5 +1,5 @@
{
"@@last_modified": "2025-08-08T16:24:37.279860",
"@@last_modified": "2025-08-18T13:21:17.206262",
"initializing_data": "Initializing data...",
"@initializing_data": {
"type": "text",
@@ -4647,5 +4647,11 @@
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"ok": "OK",
"@ok": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
lib/main/localizations/app_localizations.dart
+7
View File
@@ -4898,4 +4898,11 @@ class AppLocalizations {
name: 'creatingAnArchiveForDownloading',
);
}
String get ok {
return Intl.message(
'OK',
name: 'ok',
);
}
}