TF-3956 Adjust UI for vacation section in setting on mobile

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -72,7 +72,12 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
                         Obx(() {
                           if (controller.vacationResponse.value?.vacationResponderIsValid == true) {
                             return VacationNotificationMessageWidget(
-                              margin: const EdgeInsetsDirectional.only(top: 16, start: 16, end: 16),
+                              margin: EdgeInsetsDirectional.only(
+                                start: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16,
+                                end: 16,
+                                top: controller.responsiveUtils.isWebDesktop(context) ? 16 : 0,
+                                bottom: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16,
+                              ),
                               fromAccountDashBoard: true,
                               vacationResponse: controller.vacationResponse.value!,
                               actionGotoVacationSetting: !controller.inVacationSettings()
@@ -83,7 +88,12 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
                               || controller.vacationResponse.value?.vacationResponderIsStopped == true)
                               && controller.accountMenuItemSelected.value == AccountMenuItem.vacation) {
                             return VacationNotificationMessageWidget(
-                              margin: const EdgeInsetsDirectional.only(top: 16, start: 16, end: 16),
+                              margin: EdgeInsetsDirectional.only(
+                                start: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16,
+                                end: 16,
+                                top: controller.responsiveUtils.isWebDesktop(context) ? 16 : 0,
+                                bottom: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16,
+                              ),
                               fromAccountDashBoard: true,
                               vacationResponse: controller.vacationResponse.value!,
                               padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
@@ -139,7 +149,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
             return const SizedBox.shrink();
           }
         case AccountMenuItem.vacation:
-          return VacationView();
+          return const VacationView();
         case AccountMenuItem.mailboxVisibility:
           return MailboxVisibilityView();
         default:

lib/features/manage_account/presentation/menu/settings/settings_view.dart

@@ -42,7 +42,12 @@ class SettingsView extends GetWidget<SettingsController> {
         Obx(() {
           if (controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsValid == true) {
             return VacationNotificationMessageWidget(
-              margin: const EdgeInsetsDirectional.only(start: 12, end: 12, top: 8),
+              margin: EdgeInsetsDirectional.only(
+                start: 12,
+                end: 12,
+                top: controller.responsiveUtils.isWebDesktop(context) ? 8 : 0,
+                bottom: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16,
+              ),
               fromAccountDashBoard: true,
               vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
               actionGotoVacationSetting: !controller.manageAccountDashboardController.inVacationSettings()
@@ -54,7 +59,12 @@ class SettingsView extends GetWidget<SettingsController> {
               || controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsStopped == true)
               && controller.manageAccountDashboardController.inVacationSettings()) {
             return VacationNotificationMessageWidget(
-              margin: const EdgeInsetsDirectional.only(start: 12, end: 12, top: 8),
+              margin: EdgeInsetsDirectional.only(
+                start: 12,
+                end: 12,
+                top: controller.responsiveUtils.isWebDesktop(context) ? 8 : 0,
+                bottom: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16,
+              ),
               fromAccountDashBoard: true,
               vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
               padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
@@ -114,7 +124,7 @@ class SettingsView extends GetWidget<SettingsController> {
           }
         case AccountMenuItem.vacation:
           if (controller.manageAccountDashboardController.isVacationCapabilitySupported) {
-            return VacationView();
+            return const VacationView();
           } else {
             return const SizedBox.shrink();
           }

lib/features/manage_account/presentation/vacation/vacation_view.dart

@@ -54,7 +54,7 @@ class VacationView extends GetWidget<VacationController> {
                 imagePaths: controller.imagePaths,
                 label: AppLocalizations.of(context).vacationSettingToggleButtonAutoReply,
                 isActive: !isVacationDeactivated,
-                padding: const EdgeInsets.only(top: 10, bottom: 12),
+                padding: const EdgeInsets.only(top: 10),
                 onSwitchAction: () {
                   final newStatus = isVacationDeactivated
                       ? VacationResponderStatus.activated
@@ -63,39 +63,16 @@ class VacationView extends GetWidget<VacationController> {
                 },
               );
             }),
+            SizedBox(
+              height: controller.responsiveUtils.isScreenWithShortestSide(context)
+                ? 24
+                : 12,
+            ),
             Obx(() => AbsorbPointer(
               absorbing: controller.isVacationDeactivated,
               child: Opacity(
                 opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                child: controller.responsiveUtils.isScreenWithShortestSide(context)
-                  ? Column(children: [
-                      LabelBorderButtonField<DateTime>(
-                        label: AppLocalizations.of(context).startDate,
-                        value: controller.vacationPresentation.value.startDate,
-                        isEmpty: !controller.isVacationDeactivated && 
-                          controller.vacationPresentation.value.startDateIsNull,
-                        hintText: AppLocalizations.of(context).startDate,
-                        onSelectValueAction: (value) => controller.selectDate(
-                          context,
-                          DateType.start,
-                          value,
-                        ),
-                      ),
-                      const SizedBox(height: 18),
-                      LabelBorderButtonField<TimeOfDay>(
-                        label: AppLocalizations.of(context).startTime,
-                        value: controller.vacationPresentation.value.startTime,
-                        isEmpty: !controller.isVacationDeactivated && 
-                          controller.vacationPresentation.value.starTimeIsNull,
-                        hintText: 'dd/mm/yyyy',
-                        onSelectValueAction: (value) => controller.selectTime(
-                          context, 
-                          DateType.start,
-                          value,
-                        ),
-                      ),
-                    ])
-                  : Row(
+                child: Row(
                   mainAxisSize: MainAxisSize.min,
                   children: [
                     LabelBorderButtonField<DateTime>(
@@ -103,7 +80,9 @@ class VacationView extends GetWidget<VacationController> {
                       value: controller.vacationPresentation.value.startDate,
                       isEmpty: !controller.isVacationDeactivated &&
                           controller.vacationPresentation.value.startDateIsNull,
-                          hintText: AppLocalizations.of(context).startDate,
+                      hintText: 'dd/mm/yyyy',
+                      arrangeHorizontally: !controller.responsiveUtils.isScreenWithShortestSide(context),
+                      minWidth: controller.responsiveUtils.isScreenWithShortestSide(context) ? 117 : null,
                       onSelectValueAction: (value) => controller.selectDate(
                         context,
                         DateType.start,
@@ -118,7 +97,8 @@ class VacationView extends GetWidget<VacationController> {
                           controller.vacationPresentation.value.starTimeIsNull,
                       hintText: 'hh:min AM/PM',
                       horizontalSpacing: 8,
-                          minWidth: 117,
+                      arrangeHorizontally: !controller.responsiveUtils.isScreenWithShortestSide(context),
+                      minWidth: controller.responsiveUtils.isScreenWithShortestSide(context) ? 117 : null,
                       onSelectValueAction: (value) => controller.selectTime(
                         context,
                         DateType.start,
@@ -129,7 +109,11 @@ class VacationView extends GetWidget<VacationController> {
                 ),
               ),
             )),
-            const SizedBox(height: 37),
+            SizedBox(
+              height: controller.responsiveUtils.isScreenWithShortestSide(context)
+                  ? 24
+                  : 37,
+            ),
             Obx(
               () => AbsorbPointer(
                 absorbing: controller.isVacationDeactivated,
@@ -153,40 +137,16 @@ class VacationView extends GetWidget<VacationController> {
                 ),
               ),
             ),
-            const SizedBox(height: 12),
+            SizedBox(
+              height: controller.responsiveUtils.isScreenWithShortestSide(context)
+                ? 24
+                : 12,
+            ),
             Obx(() => AbsorbPointer(
               absorbing: !controller.canChangeEndDate,
               child: Opacity(
                 opacity: !controller.canChangeEndDate ? 0.3 : 1.0,
-                child: controller.responsiveUtils.isScreenWithShortestSide(context)
-                  ? Column(children: [
-                      LabelBorderButtonField<DateTime>(
-                        label: AppLocalizations.of(context).endDate,
-                        value: controller.vacationPresentation.value.endDate,
-                        isEmpty: controller.canChangeEndDate && 
-                          controller.vacationPresentation.value.endDateIsNull,
-                        hintText: 'dd/mm/yyyy',
-                        onSelectValueAction: (value) => controller.selectDate(
-                          context, 
-                          DateType.end,
-                          value,
-                        ),
-                      ),
-                      const SizedBox(height: 18),
-                      LabelBorderButtonField<TimeOfDay>(
-                        label: AppLocalizations.of(context).endTime,
-                        value: controller.vacationPresentation.value.endTime,
-                        isEmpty: controller.canChangeEndDate && 
-                          controller.vacationPresentation.value.endTimeIsNull,
-                        hintText: 'hh:min AM/PM',
-                        onSelectValueAction: (value) => controller.selectTime(
-                          context,
-                          DateType.end,
-                          value,
-                        ),
-                      ),
-                    ])
-                  : Row(
+                child: Row(
                   mainAxisSize: MainAxisSize.min,
                   children: [
                     LabelBorderButtonField<DateTime>(
@@ -194,6 +154,8 @@ class VacationView extends GetWidget<VacationController> {
                       value: controller.vacationPresentation.value.endDate,
                       isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endDateIsNull,
                       hintText: 'dd/mm/yyyy',
+                      arrangeHorizontally: !controller.responsiveUtils.isScreenWithShortestSide(context),
+                      minWidth: controller.responsiveUtils.isScreenWithShortestSide(context) ? 117 : null,
                       onSelectValueAction: (value) => controller.selectDate(
                         context,
                         DateType.end,
@@ -208,7 +170,8 @@ class VacationView extends GetWidget<VacationController> {
                           controller.vacationPresentation.value.endTimeIsNull,
                       hintText: 'hh:min AM/PM',
                       horizontalSpacing: 8,
-                          minWidth: 117,
+                      arrangeHorizontally: !controller.responsiveUtils.isScreenWithShortestSide(context),
+                      minWidth: controller.responsiveUtils.isScreenWithShortestSide(context) ? 117 : null,
                       onSelectValueAction: (value) => controller.selectTime(
                         context,
                         DateType.end,
@@ -219,7 +182,11 @@ class VacationView extends GetWidget<VacationController> {
                 ),
               )
             )),
-            const SizedBox(height: 12),
+            SizedBox(
+              height: controller.responsiveUtils.isScreenWithShortestSide(context)
+                ? 24
+                : 12,
+            ),
             Obx(() => AbsorbPointer(
               absorbing: controller.isVacationDeactivated,
               child: controller.responsiveUtils.isScreenWithShortestSide(context)
@@ -230,6 +197,7 @@ class VacationView extends GetWidget<VacationController> {
                       hintText: AppLocalizations.of(context).hintSubjectInputVacationSetting,
                       textEditingController: controller.subjectTextController,
                       focusNode: controller.subjectTextFocusNode,
+                      arrangeHorizontally: false,
                     ),
                   )
                 : Opacity(
@@ -242,7 +210,11 @@ class VacationView extends GetWidget<VacationController> {
                     ),
                   ),
             )),
-            const SizedBox(height: 12),
+            SizedBox(
+              height: controller.responsiveUtils.isScreenWithShortestSide(context)
+                ? 24
+                : 12,
+            ),
             Obx(() => AbsorbPointer(
               absorbing: controller.isVacationDeactivated,
               child: Opacity(
@@ -251,7 +223,16 @@ class VacationView extends GetWidget<VacationController> {
               ),
             )),
             Container(
-              padding: const EdgeInsets.only(top: 22),
+              padding: EdgeInsets.only(
+                top: controller.responsiveUtils.isScreenWithShortestSide(context)
+                    ? 24
+                    : 22,
+                bottom: controller.responsiveUtils.isScreenWithShortestSide(context)
+                    ? PlatformInfo.isMobile
+                        ? 64
+                        : 24
+                    : 0,
+              ),
               constraints: const BoxConstraints(maxWidth: 660),
               child: VacationListActionWidget(
                 onCancelButtonAction: () {
@@ -269,8 +250,7 @@ class VacationView extends GetWidget<VacationController> {
       ),
     );
 
-    if (PlatformInfo.isWeb) {
-      return SettingDetailViewBuilder(
+    final vacationView = SettingDetailViewBuilder(
       responsiveUtils: controller.responsiveUtils,
       child: Container(
         color: SettingsUtils.getContentBackgroundColor(
@@ -314,6 +294,9 @@ class VacationView extends GetWidget<VacationController> {
         ),
       ),
     );
+
+    if (PlatformInfo.isWeb) {
+      return vacationView;
     } else {
       return ResponsiveWidget(
         responsiveUtils: controller.responsiveUtils,
@@ -347,7 +330,8 @@ class VacationView extends GetWidget<VacationController> {
                   child: SafeArea(
                     top: false,
                     bottom: false,
-                    child: vacationInputForm),
+                    child: vacationView,
+                  ),
                 )
               ),
             ),
@@ -378,7 +362,7 @@ class VacationView extends GetWidget<VacationController> {
                     height: double.infinity,
                     color: Colors.white,
                     padding: const EdgeInsets.symmetric(horizontal: 4),
-                    child: vacationInputForm,
+                    child: vacationView,
                   ),
                 ),
               ),