TF-858 Apply rich text keyboard button for mobile on vacation

This commit is contained in:
dab246
2022-09-30 16:43:41 +07:00
committed by Dat H. Pham
parent 9240768deb
commit 31ed3750f9
7 changed files with 350 additions and 242 deletions
@@ -1,9 +1,12 @@
import 'package:core/core.dart';
import 'package:enough_html_editor/enough_html_editor.dart' as html_editor_mobile;
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
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/border_button_field.dart';
import 'package:tmail_ui_user/features/base/widget/text_input_decoration_builder.dart';
import 'package:tmail_ui_user/features/base/widget/text_input_field_builder.dart';
@@ -32,77 +35,112 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
: Colors.white,
body: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Container(
width: double.infinity,
height: double.infinity,
margin: _responsiveUtils.isWebDesktop(context)
? const EdgeInsets.all(24)
: EdgeInsets.zero,
decoration: _responsiveUtils.isWebDesktop(context)
? BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
color: Colors.white)
: null,
padding: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_responsiveUtils.isWebDesktop(context))
...[
Text(AppLocalizations.of(context).vacation,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.black)),
const SizedBox(height: 8)
],
Text(AppLocalizations.of(context).vacationSettingExplanation,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: AppColor.colorVacationSettingExplanation)),
const SizedBox(height: 24),
Row(children: [
Obx(() {
return InkWell(
onTap: () {
final newStatus = controller.isVacationDeactivated
? VacationResponderStatus.activated
: VacationResponderStatus.deactivated;
controller.updateVacationPresentation(newStatus: newStatus);
},
child: SvgPicture.asset(
controller.isVacationDeactivated
? _imagePaths.icSwitchOff
: _imagePaths.icSwitchOn,
fit: BoxFit.fill,
width: 24,
height: 24)
);
}),
const SizedBox(width: 16),
Expanded(
child: Text(AppLocalizations.of(context).vacationSettingToggleButtonAutoReply,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black)
),
)
]),
const SizedBox(height: 28),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
child: Column(children: [
Obx(() => AbsorbPointer(
absorbing: controller.isVacationDeactivated,
child: Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: _responsiveUtils.isPortraitMobile(context)
? Column(children: [
BorderButtonField<DateTime>(
child: KeyboardRichText(
richTextController: controller.richTextControllerForMobile,
backgroundKeyboardToolBarColor: Colors.grey,
keyBroadToolbar: RichTextKeyboardToolBar(
titleFormatBottomSheet: AppLocalizations.of(context).format,
richTextController: controller.richTextControllerForMobile,
insertImage: () {},
insertAttachment: () {},
titleQuickStyleBottomSheet: AppLocalizations.of(context).quickStyles,
titleBackgroundBottomSheet: AppLocalizations.of(context).background,
titleForegroundBottomSheet: AppLocalizations.of(context).foreground,
),
child: Container(
width: double.infinity,
height: double.infinity,
margin: _responsiveUtils.isWebDesktop(context)
? const EdgeInsets.all(24)
: EdgeInsets.zero,
decoration: _responsiveUtils.isWebDesktop(context)
? BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
color: Colors.white)
: null,
padding: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_responsiveUtils.isWebDesktop(context))
...[
Text(AppLocalizations.of(context).vacation,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.black)),
const SizedBox(height: 8)
],
Text(AppLocalizations.of(context).vacationSettingExplanation,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: AppColor.colorVacationSettingExplanation)),
const SizedBox(height: 24),
Row(children: [
Obx(() {
return InkWell(
onTap: () {
final newStatus = controller.isVacationDeactivated
? VacationResponderStatus.activated
: VacationResponderStatus.deactivated;
controller.updateVacationPresentation(newStatus: newStatus);
},
child: SvgPicture.asset(
controller.isVacationDeactivated
? _imagePaths.icSwitchOff
: _imagePaths.icSwitchOn,
fit: BoxFit.fill,
width: 24,
height: 24)
);
}),
const SizedBox(width: 16),
Expanded(
child: Text(AppLocalizations.of(context).vacationSettingToggleButtonAutoReply,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black)
),
)
]),
const SizedBox(height: 28),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
child: Column(children: [
Obx(() => AbsorbPointer(
absorbing: controller.isVacationDeactivated,
child: Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: _responsiveUtils.isPortraitMobile(context)
? Column(children: [
BorderButtonField<DateTime>(
label: AppLocalizations.of(context).startDate,
value: controller.vacationPresentation.value.startDate,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: !controller.isVacationDeactivated &&
controller.vacationPresentation.value.startDateIsNull,
hintText: AppLocalizations.of(context).startDate,
tapActionCallback: (value) =>
controller.selectDate(context, DateType.start, value)),
const SizedBox(height: 18),
BorderButtonField<TimeOfDay>(
label: AppLocalizations.of(context).startTime,
value: controller.vacationPresentation.value.startTime,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: !controller.isVacationDeactivated &&
controller.vacationPresentation.value.starTimeIsNull,
hintText: AppLocalizations.of(context).noStartTime,
tapActionCallback: (value) =>
controller.selectTime(context, DateType.start, value)),
])
: Row(children: [
Expanded(child: BorderButtonField<DateTime>(
label: AppLocalizations.of(context).startDate,
value: controller.vacationPresentation.value.startDate,
mouseCursor: SystemMouseCursors.text,
@@ -111,9 +149,9 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
controller.vacationPresentation.value.startDateIsNull,
hintText: AppLocalizations.of(context).startDate,
tapActionCallback: (value) =>
controller.selectDate(context, DateType.start, value)),
const SizedBox(height: 18),
BorderButtonField<TimeOfDay>(
controller.selectDate(context, DateType.start, value))),
const SizedBox(width: 24),
Expanded(child: BorderButtonField<TimeOfDay>(
label: AppLocalizations.of(context).startTime,
value: controller.vacationPresentation.value.startTime,
mouseCursor: SystemMouseCursors.text,
@@ -122,155 +160,133 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
controller.vacationPresentation.value.starTimeIsNull,
hintText: AppLocalizations.of(context).noStartTime,
tapActionCallback: (value) =>
controller.selectTime(context, DateType.start, value)),
])
: Row(children: [
Expanded(child: BorderButtonField<DateTime>(
label: AppLocalizations.of(context).startDate,
value: controller.vacationPresentation.value.startDate,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: !controller.isVacationDeactivated &&
controller.vacationPresentation.value.startDateIsNull,
hintText: AppLocalizations.of(context).startDate,
tapActionCallback: (value) =>
controller.selectDate(context, DateType.start, value))),
const SizedBox(width: 24),
Expanded(child: BorderButtonField<TimeOfDay>(
label: AppLocalizations.of(context).startTime,
value: controller.vacationPresentation.value.startTime,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: !controller.isVacationDeactivated &&
controller.vacationPresentation.value.starTimeIsNull,
hintText: AppLocalizations.of(context).noStartTime,
tapActionCallback: (value) =>
controller.selectTime(context, DateType.start, value))),
]),
),
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
controller.selectTime(context, DateType.start, value))),
]),
),
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
absorbing: controller.isVacationDeactivated,
child: Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: Row(children: [
Obx(() => InkWell(
onTap: () {
final value = !controller.vacationPresentation.value.vacationStopEnabled;
controller.updateVacationPresentation(vacationStopEnabled: value);
},
child: SvgPicture.asset(
controller.vacationPresentation.value.vacationStopEnabled
? _imagePaths.icSwitchOn
: _imagePaths.icSwitchOff,
fit: BoxFit.fill,
width: 24,
height: 24)
)
),
const SizedBox(width: 16),
Expanded(
child: Text(AppLocalizations.of(context).vacationStopsAt,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black)
),
)
]),
)
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
absorbing: !controller.canChangeEndDate,
child: Opacity(
opacity: !controller.canChangeEndDate ? 0.3 : 1.0,
child: _responsiveUtils.isPortraitMobile(context)
? Column(children: [
BorderButtonField<DateTime>(
label: AppLocalizations.of(context).endDate,
value: controller.vacationPresentation.value.endDate,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endDateIsNull,
hintText: AppLocalizations.of(context).noEndDate,
tapActionCallback: (value) =>
controller.selectDate(context, DateType.end, value)),
const SizedBox(height: 18),
BorderButtonField<TimeOfDay>(
label: AppLocalizations.of(context).endTime,
value: controller.vacationPresentation.value.endTime,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endTimeIsNull,
hintText: AppLocalizations.of(context).noEndTime,
tapActionCallback: (value) =>
controller.selectTime(context, DateType.end, value)),
])
: Row(children: [
Expanded(child: BorderButtonField<DateTime>(
label: AppLocalizations.of(context).endDate,
value: controller.vacationPresentation.value.endDate,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endDateIsNull,
hintText: AppLocalizations.of(context).noEndDate,
tapActionCallback: (value) =>
controller.selectDate(context, DateType.end, value))),
const SizedBox(width: 24),
Expanded(child: BorderButtonField<TimeOfDay>(
label: AppLocalizations.of(context).endTime,
value: controller.vacationPresentation.value.endTime,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endTimeIsNull,
hintText: AppLocalizations.of(context).noEndTime,
tapActionCallback: (value) =>
controller.selectTime(context, DateType.end, value))),
]),
)
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
absorbing: controller.isVacationDeactivated,
child: _responsiveUtils.isPortraitMobile(context)
? Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: TextInputFieldBuilder(
label: AppLocalizations.of(context).subject,
hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
editingController: controller.subjectTextController),
)
: Row(children: [
Expanded(child: Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: TextInputFieldBuilder(
label: AppLocalizations.of(context).subject,
hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
editingController: controller.subjectTextController),
)),
const SizedBox(width: 24),
const Expanded(child: SizedBox.shrink())
])
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
absorbing: controller.isVacationDeactivated,
child: Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: Row(children: [
Obx(() => InkWell(
onTap: () {
final value = !controller.vacationPresentation.value.vacationStopEnabled;
controller.updateVacationPresentation(vacationStopEnabled: value);
},
child: SvgPicture.asset(
controller.vacationPresentation.value.vacationStopEnabled
? _imagePaths.icSwitchOn
: _imagePaths.icSwitchOff,
fit: BoxFit.fill,
width: 24,
height: 24)
)
),
const SizedBox(width: 16),
Expanded(
child: Text(AppLocalizations.of(context).vacationStopsAt,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black)
),
)
]),
)
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
absorbing: !controller.canChangeEndDate,
child: Opacity(
opacity: !controller.canChangeEndDate ? 0.3 : 1.0,
child: _responsiveUtils.isPortraitMobile(context)
? Column(children: [
BorderButtonField<DateTime>(
label: AppLocalizations.of(context).endDate,
value: controller.vacationPresentation.value.endDate,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endDateIsNull,
hintText: AppLocalizations.of(context).noEndDate,
tapActionCallback: (value) =>
controller.selectDate(context, DateType.end, value)),
const SizedBox(height: 18),
BorderButtonField<TimeOfDay>(
label: AppLocalizations.of(context).endTime,
value: controller.vacationPresentation.value.endTime,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endTimeIsNull,
hintText: AppLocalizations.of(context).noEndTime,
tapActionCallback: (value) =>
controller.selectTime(context, DateType.end, value)),
])
: Row(children: [
Expanded(child: BorderButtonField<DateTime>(
label: AppLocalizations.of(context).endDate,
value: controller.vacationPresentation.value.endDate,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endDateIsNull,
hintText: AppLocalizations.of(context).noEndDate,
tapActionCallback: (value) =>
controller.selectDate(context, DateType.end, value))),
const SizedBox(width: 24),
Expanded(child: BorderButtonField<TimeOfDay>(
label: AppLocalizations.of(context).endTime,
value: controller.vacationPresentation.value.endTime,
mouseCursor: SystemMouseCursors.text,
backgroundColor: AppColor.colorBackgroundVacationSettingField,
isEmpty: controller.canChangeEndDate &&
controller.vacationPresentation.value.endTimeIsNull,
hintText: AppLocalizations.of(context).noEndTime,
tapActionCallback: (value) =>
controller.selectTime(context, DateType.end, value))),
]),
)
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
absorbing: controller.isVacationDeactivated,
child: _responsiveUtils.isPortraitMobile(context)
? Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: TextInputFieldBuilder(
label: AppLocalizations.of(context).subject,
hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
editingController: controller.subjectTextController),
)
: Row(children: [
Expanded(child: Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: TextInputFieldBuilder(
label: AppLocalizations.of(context).subject,
hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
editingController: controller.subjectTextController),
)),
const SizedBox(width: 24),
const Expanded(child: SizedBox.shrink())
])
)),
const SizedBox(height: 24),
Obx(() => AbsorbPointer(
absorbing: controller.isVacationDeactivated,
child: Opacity(
opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
child: _buildVacationMessage(context),
),
)),
const SizedBox(height: 24),
_buildListButtonAction(context)
]),
)
]
child: _buildVacationMessage(context),
),
)),
const SizedBox(height: 24),
_buildListButtonAction(context)
]),
)
]
),
),
),
),
@@ -308,7 +324,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
width: 156,
height: 44,
radius: 10,
onTap: () => controller.backToUniversalSettings()),
onTap: () => controller.backToUniversalSettings(context)),
),
const SizedBox(width: 12),
Expanded(
@@ -338,7 +354,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
width: 156,
height: 44,
radius: 10,
onTap: () => controller.backToUniversalSettings()),
onTap: () => controller.backToUniversalSettings(context)),
const SizedBox(width: 12),
buildTextButton(
AppLocalizations.of(context).saveChanges,
@@ -385,14 +401,15 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
padding: const EdgeInsets.only(left: 12, right: 12, top: 12),
child: Column(children: [
_buildMessageHtmlTextEditor(context),
Center(child: Obx(() {
return PointerInterceptor(
child: buildToolbarRichTextForWeb(
context,
controller.richTextControllerForWeb,
layoutType: ButtonLayoutType.scrollHorizontal),
);
}))
if (BuildUtils.isWeb)
Center(child: Obx(() {
return PointerInterceptor(
child: buildToolbarRichTextForWeb(
context,
controller.richTextControllerForWeb,
layoutType: ButtonLayoutType.scrollHorizontal),
);
}))
]),
);
}
@@ -450,7 +467,13 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
),
);
} else {
return const SizedBox.shrink();
return html_editor_mobile.HtmlEditor(
key: const Key('vacation_message_html_text_editor_mobile'),
minHeight: 150,
addDefaultSelectionMenuItems: false,
initialContent: controller.vacationMessageHtmlText ?? '',
onCreated: controller.richTextControllerForMobile.onCreateHTMLEditor
);
}
}