TF-788 Correct the padding for All Settings screens

This commit is contained in:
Dat PHAM HOANG
2022-08-24 21:49:54 +07:00
committed by Dat H. Pham
parent 2532959483
commit 199cb2529c
8 changed files with 42 additions and 77 deletions
@@ -5,6 +5,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_controller.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/widgets/list_email_rules_widget.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
class EmailRulesView extends GetWidget<EmailRulesController> with AppLoaderMixin {
final _responsiveUtils = Get.find<ResponsiveUtils>();
@@ -20,7 +21,7 @@ class EmailRulesView extends GetWidget<EmailRulesController> with AppLoaderMixin
: Colors.white,
body: Container(
width: double.infinity,
margin: _getMarginView(context),
margin: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Column(
@@ -41,28 +42,6 @@ class EmailRulesView extends GetWidget<EmailRulesController> with AppLoaderMixin
);
}
EdgeInsets _getMarginView(BuildContext context) {
if (BuildUtils.isWeb) {
if (_responsiveUtils.isDesktop(context)) {
return const EdgeInsets.only(left: 16, top: 16, right: 24, bottom: 24);
} else if (_responsiveUtils.isTabletLarge(context) ||
_responsiveUtils.isTablet(context)) {
return const EdgeInsets.only(right: 24, top: 16, bottom: 16);
} else {
return const EdgeInsets.only(right: 24, top: 16, bottom: 16);
}
} else {
if (_responsiveUtils.isDesktop(context) ||
_responsiveUtils.isLandscapeTablet(context) ||
_responsiveUtils.isTabletLarge(context) ||
_responsiveUtils.isTablet(context)) {
return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
} else {
return const EdgeInsets.only(right: 18, top: 16, bottom: 16, left: 10);
}
}
}
Widget _buildLoadingView() {
return Obx(() => controller.viewState.value.fold(
(failure) => const SizedBox.shrink(),
@@ -5,6 +5,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/forward_header_widget.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/list_email_forward_widget.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
final _responsiveUtils = Get.find<ResponsiveUtils>();
@@ -20,7 +21,7 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
: Colors.white,
body: Container(
width: double.infinity,
margin: _getMarginView(context),
margin: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -37,28 +38,6 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
);
}
EdgeInsets _getMarginView(BuildContext context) {
if (BuildUtils.isWeb) {
if (_responsiveUtils.isDesktop(context)) {
return const EdgeInsets.only(left: 16, top: 16, right: 24, bottom: 24);
} else if (_responsiveUtils.isTabletLarge(context) ||
_responsiveUtils.isTablet(context)) {
return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
} else {
return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
}
} else {
if (_responsiveUtils.isDesktop(context) ||
_responsiveUtils.isLandscapeTablet(context) ||
_responsiveUtils.isTabletLarge(context) ||
_responsiveUtils.isTablet(context)) {
return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
} else {
return const EdgeInsets.only(top: 16, bottom: 16, right: 28, left: 20);
}
}
}
Widget _buildLoadingView() {
return Obx(() => controller.viewState.value.fold(
(failure) => const SizedBox.shrink(),
@@ -5,6 +5,7 @@ import 'package:get/get.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/change_language_widget.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
@@ -22,7 +23,7 @@ class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
width: double.infinity,
margin: _responsiveUtils.isWebDesktop(context)
? const EdgeInsets.all(24)
: EdgeInsets.zero,
: EdgeInsets.symmetric(horizontal: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
decoration: _responsiveUtils.isWebDesktop(context)
? BoxDecoration(
@@ -71,11 +71,7 @@ class SettingsView extends GetWidget<SettingsController> {
return const SizedBox.shrink();
}
}),
Expanded(child: Padding(
padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context)
? const EdgeInsets.only(left: 8)
: const EdgeInsets.only(left: 24),
child: _bodySettingsScreen()))
Expanded(child: _bodySettingsScreen())
]
)
);
@@ -115,7 +111,6 @@ class SettingsView extends GetWidget<SettingsController> {
Widget _buildSettingLevel1AppBar(BuildContext context) {
return Row(children: [
_buildBackButton(context),
const SizedBox(width: 8),
Expanded(
child: Text(
AppLocalizations.of(context).settings,
@@ -129,7 +124,7 @@ class SettingsView extends GetWidget<SettingsController> {
Widget _buildBackButton(BuildContext context) {
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icBack, width: 18, height: 18, color: AppColor.colorTextButton, fit: BoxFit.fill),
icon: SvgPicture.asset(_imagePaths.icBack, width: 9, height: 16, color: AppColor.colorTextButton, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).back,
onTap: controller.backToUniversalSettings
);
@@ -137,7 +132,7 @@ class SettingsView extends GetWidget<SettingsController> {
Widget _buildCloseSettingButton(BuildContext context) {
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icCloseMailbox, width: 28, height: 28, fit: BoxFit.fill),
icon: SvgPicture.asset(_imagePaths.icClose, width: 28, height: 28, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).close,
onTap: closeAction);
}
@@ -1,12 +1,13 @@
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/utils/build_utils.dart';
import 'package:flutter/widgets.dart';
class SettingsUtils {
static double getHorizontalPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
if (responsiveUtils.isMobile(context)) {
return 17;
return 16;
} else {
return 33;
return 32;
}
}
@@ -17,4 +18,27 @@ class SettingsUtils {
return const EdgeInsets.only(left: 32, top: 12, bottom: 12, right: 32);
}
}
static EdgeInsets getMarginViewForSettingDetails(BuildContext context, ResponsiveUtils responsiveUtils) {
if (BuildUtils.isWeb) {
if (responsiveUtils.isDesktop(context)) {
return const EdgeInsets.only(left: 16, top: 16, right: 24, bottom: 24);
} else if (responsiveUtils.isTabletLarge(context) ||
responsiveUtils.isTablet(context)) {
return const EdgeInsets.only(right: 32, top: 16, bottom: 16, left: 32);
} else {
return const EdgeInsets.only(right: 16, top: 16, bottom: 16, left: 16);
}
} else {
if (responsiveUtils.isLandscapeTablet(context) ||
responsiveUtils.isTabletLarge(context) ||
responsiveUtils.isTablet(context)) {
return const EdgeInsets.only(right: 32, top: 16, bottom: 16, left: 32);
} else if (responsiveUtils.isDesktop(context)) {
return const EdgeInsets.only(right: 32, top: 16, bottom: 16);
} else {
return const EdgeInsets.only(right: 16, top: 16, bottom: 16, left: 16);
}
}
}
}
@@ -72,6 +72,7 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
]
)),
IconButton(
padding: EdgeInsets.only(right: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
icon: SvgPicture.asset(
_imagePath.icCollapseFolder,
fit: BoxFit.fill,
@@ -2,6 +2,7 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/model/profiles_tab_type.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/identities_view.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/profiles/profiles_controller.dart';
@@ -21,7 +22,7 @@ class ProfilesView extends GetWidget<ProfilesController> {
body: Container(
margin: _responsiveUtils.isWebDesktop(context)
? const EdgeInsets.all(24)
: EdgeInsets.zero,
: EdgeInsets.symmetric(horizontal: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
decoration: _responsiveUtils.isWebDesktop(context)
? BoxDecoration(
@@ -4,10 +4,11 @@ import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:tmail_ui_user/features/base/widget/border_button_field.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_controller.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_input_decoration_builder.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/date_type.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/vacation_responder_status.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_controller.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_input_decoration_builder.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class VacationView extends GetWidget<VacationController> {
@@ -37,7 +38,7 @@ class VacationView extends GetWidget<VacationController> {
border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
color: Colors.white)
: null,
padding: _getPaddingView(context),
padding: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
child: ResponsiveWidget(
responsiveUtils: _responsiveUtils,
desktop: SingleChildScrollView(
@@ -482,20 +483,4 @@ class VacationView extends GetWidget<VacationController> {
.build();
});
}
EdgeInsets _getPaddingView(BuildContext context) {
if (BuildUtils.isWeb) {
if (_responsiveUtils.isDesktop(context)) {
return const EdgeInsets.all(16);
} else {
return const EdgeInsets.only(top: 16, bottom: 16, left: 0, right: 24);
}
} else {
if (_responsiveUtils.isPortraitMobile(context)) {
return const EdgeInsets.only(top: 16, bottom: 16, left: 16, right: 24);
} else {
return const EdgeInsets.only(top: 16, bottom: 16, left: 0, right: 24);
}
}
}
}