TF-1018 Apply AppGrid for Tablet/Mobile web
This commit is contained in:
committed by
Dat H. Pham
parent
5d234ff9b6
commit
0943e18552
@@ -112,6 +112,8 @@ class DestinationPickerController extends BaseMailboxController {
|
||||
mailboxCategoriesExpandMode.value.folderMailbox = newExpandMode;
|
||||
mailboxCategoriesExpandMode.refresh();
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@ import 'package:tmail_ui_user/features/mailbox/domain/model/rename_mailbox_reque
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/create_new_mailbox_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/delete_multiple_mailbox_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/get_all_mailboxes_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/move_mailbox_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/refresh_changes_all_mailboxes_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/rename_mailbox_state.dart';
|
||||
@@ -54,7 +55,6 @@ import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_na
|
||||
import 'package:tmail_ui_user/features/mailbox_creator/presentation/extensions/validator_failure_extension.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/mailbox_creator_arguments.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/new_mailbox_arguments.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/remove_email_drafts_state.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
|
||||
import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
|
||||
@@ -848,9 +848,21 @@ class MailboxController extends BaseMailboxController {
|
||||
mailboxCategoriesExpandMode.value.folderMailbox = newExpandMode;
|
||||
mailboxCategoriesExpandMode.refresh();
|
||||
break;
|
||||
case MailboxCategories.appGrid:
|
||||
final currentExpandMode = mailboxDashBoardController.appGridDashboardController.appDashboardExpandMode.value;
|
||||
if (currentExpandMode == ExpandMode.COLLAPSE) {
|
||||
_showAppDashboardAction();
|
||||
} else {
|
||||
mailboxDashBoardController.appGridDashboardController.toggleAppGridDashboard();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
void _showAppDashboardAction() {
|
||||
mailboxDashBoardController.showAppDashboardAction();
|
||||
}
|
||||
|
||||
void handleMailboxAction(BuildContext context, MailboxActions actions,
|
||||
PresentationMailbox mailbox) {
|
||||
popBack();
|
||||
|
||||
@@ -16,8 +16,10 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_bott
|
||||
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/app_dashboard/app_list_dashboard_item.dart';
|
||||
import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_config.dart';
|
||||
|
||||
class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, PopupMenuWidgetMixin {
|
||||
|
||||
@@ -159,6 +161,12 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
|
||||
return _buildUserInformation(context);
|
||||
}),
|
||||
_buildLoadingView(),
|
||||
AppConfig.appGridDashboardAvailable && _responsiveUtils.isWebNotDesktop(context)
|
||||
? _buildAppGridDashboard(context)
|
||||
: const SizedBox.shrink(),
|
||||
const SizedBox(height: 8),
|
||||
const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
|
||||
const SizedBox(height: 8),
|
||||
Obx(() => controller.defaultMailboxHasChild
|
||||
? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultRootNode)
|
||||
: const SizedBox.shrink()),
|
||||
@@ -467,4 +475,90 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
Widget _buildAppGridDashboard(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
_buildGoToApplicationsCategory(context, MailboxCategories.appGrid),
|
||||
AnimatedContainer(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
duration: const Duration(milliseconds: 400),
|
||||
child: controller.mailboxDashBoardController.appGridDashboardController.appDashboardExpandMode.value == ExpandMode.EXPAND
|
||||
? _buildAppGridInMailboxView(context)
|
||||
: const Offstage())
|
||||
]);
|
||||
}
|
||||
|
||||
Widget _buildGoToApplicationsCategory(BuildContext context, MailboxCategories categories) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 8,
|
||||
left: _responsiveUtils.isDesktop(context) ? 0 : 36,
|
||||
right: _responsiveUtils.isDesktop(context) ? 0 : 28
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
buildIconWeb(
|
||||
splashRadius: 5,
|
||||
iconPadding: EdgeInsets.zero,
|
||||
minSize: 12,
|
||||
iconSize: 28,
|
||||
icon: SvgPicture.asset(
|
||||
_imagePaths.icAppDashboard,
|
||||
color: AppColor.primaryColor,
|
||||
fit: BoxFit.fill
|
||||
),
|
||||
tooltip: AppLocalizations.of(context).appGridTittle),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 12),
|
||||
child: Text(categories.getTitle(context),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
color: AppColor.colorTextButton,
|
||||
fontWeight: FontWeight.w500
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
buildIconWeb(
|
||||
splashRadius: 5,
|
||||
iconPadding: EdgeInsets.zero,
|
||||
minSize: 12,
|
||||
iconSize: 28,
|
||||
icon: Obx(() => SvgPicture.asset(
|
||||
controller.mailboxDashBoardController.appGridDashboardController.appDashboardExpandMode.value == ExpandMode.COLLAPSE
|
||||
? _imagePaths.icCollapseFolder
|
||||
: _imagePaths.icExpandFolder,
|
||||
color: AppColor.primaryColor,
|
||||
fit: BoxFit.fill
|
||||
)),
|
||||
tooltip: AppLocalizations.of(context).appGridTittle,
|
||||
onTap: () => controller.toggleMailboxCategories(categories)
|
||||
),
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAppGridInMailboxView(BuildContext context) {
|
||||
return Obx(() {
|
||||
final linagoraApps = controller.mailboxDashBoardController.appGridDashboardController.linagoraApplications.value;
|
||||
if (linagoraApps != null && linagoraApps.apps.isNotEmpty) {
|
||||
return ListView.separated(
|
||||
shrinkWrap: true,
|
||||
itemCount: linagoraApps.apps.length,
|
||||
itemBuilder: (context, index) {
|
||||
return AppListDashboardItem(linagoraApps.apps[index]);
|
||||
},
|
||||
separatorBuilder: (context, index) {
|
||||
return const SizedBox.shrink();
|
||||
},
|
||||
);
|
||||
}
|
||||
return const SizedBox.shrink();
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
enum MailboxCategories {
|
||||
exchange,
|
||||
folders,
|
||||
appGrid,
|
||||
}
|
||||
|
||||
extension MailboxCategoriessExtension on MailboxCategories {
|
||||
@@ -17,6 +18,8 @@ extension MailboxCategoriessExtension on MailboxCategories {
|
||||
return 'exchange';
|
||||
case MailboxCategories.folders:
|
||||
return 'folders';
|
||||
case MailboxCategories.appGrid:
|
||||
return 'appGrid';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,6 +29,8 @@ extension MailboxCategoriessExtension on MailboxCategories {
|
||||
return AppLocalizations.of(context).exchange;
|
||||
case MailboxCategories.folders:
|
||||
return AppLocalizations.of(context).myFolders;
|
||||
case MailboxCategories.appGrid:
|
||||
return AppLocalizations.of(context).appGridTittle;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,6 +40,8 @@ extension MailboxCategoriessExtension on MailboxCategories {
|
||||
return categoriesExpandMode.defaultMailbox;
|
||||
case MailboxCategories.folders:
|
||||
return categoriesExpandMode.folderMailbox;
|
||||
default:
|
||||
return ExpandMode.COLLAPSE;
|
||||
}
|
||||
}
|
||||
}
|
||||
+7
@@ -3,12 +3,14 @@ import 'package:core/presentation/state/success.dart';
|
||||
import 'package:core/utils/app_logger.dart';
|
||||
import 'package:dartz/dartz.dart';
|
||||
import 'package:get/get_rx/get_rx.dart';
|
||||
import 'package:model/mailbox/expand_mode.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/domain/app_dashboard/linagora_applications.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_app_dashboard_configuration_interactor.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_config.dart';
|
||||
|
||||
class AppGridDashboardController {
|
||||
final isAppGridDashboardOverlayOpen = false.obs;
|
||||
final appDashboardExpandMode = ExpandMode.COLLAPSE.obs;
|
||||
final linagoraApplications = Rxn<LinagoraApplications>();
|
||||
|
||||
final GetAppDashboardConfigurationInteractor _getAppDashboardConfigurationInteractor;
|
||||
@@ -17,6 +19,10 @@ class AppGridDashboardController {
|
||||
|
||||
void toggleAppGridDashboard() {
|
||||
isAppGridDashboardOverlayOpen.toggle();
|
||||
final newExpandMode = appDashboardExpandMode.value == ExpandMode.EXPAND
|
||||
? ExpandMode.COLLAPSE
|
||||
: ExpandMode.EXPAND;
|
||||
appDashboardExpandMode.value = newExpandMode;
|
||||
}
|
||||
|
||||
Stream<Either<Failure, Success>> showDashboardAction() {
|
||||
@@ -26,6 +32,7 @@ class AppGridDashboardController {
|
||||
void handleShowAppDashboard(LinagoraApplications linagoraApps) {
|
||||
log('AppGridDashboardController::handleShowAppDashboard(): $linagoraApps');
|
||||
isAppGridDashboardOverlayOpen.value = true;
|
||||
appDashboardExpandMode.value = ExpandMode.EXPAND;
|
||||
linagoraApplications.value = linagoraApps;
|
||||
}
|
||||
}
|
||||
+5
-4
@@ -89,8 +89,8 @@ class MailboxDashBoardController extends ReloadableController {
|
||||
final EmailReceiveManager _emailReceiveManager = Get.find<EmailReceiveManager>();
|
||||
final SearchController searchController = Get.find<SearchController>();
|
||||
final DownloadController downloadController = Get.find<DownloadController>();
|
||||
final AppGridDashboardController _appGridDashboardController = Get.find<AppGridDashboardController>();
|
||||
final NetworkConnectionController networkConnectionController = Get.find<NetworkConnectionController>();
|
||||
final AppGridDashboardController appGridDashboardController = Get.find<AppGridDashboardController>();
|
||||
|
||||
final MoveToMailboxInteractor _moveToMailboxInteractor;
|
||||
final DeleteEmailPermanentlyInteractor _deleteEmailPermanentlyInteractor;
|
||||
@@ -275,7 +275,7 @@ class MailboxDashBoardController extends ReloadableController {
|
||||
|| success is DeleteMultipleEmailsPermanentlyHasSomeEmailFailure) {
|
||||
_deleteMultipleEmailsPermanentlySuccess(success);
|
||||
} else if (success is GetAppDashboardConfigurationSuccess) {
|
||||
_appGridDashboardController.handleShowAppDashboard(success.linagoraApplications);
|
||||
appGridDashboardController.handleShowAppDashboard(success.linagoraApplications);
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -1123,12 +1123,13 @@ class MailboxDashBoardController extends ReloadableController {
|
||||
}
|
||||
|
||||
void showAppDashboardAction() async {
|
||||
final apps = _appGridDashboardController.linagoraApplications.value;
|
||||
log('MailboxDashBoardController::showAppDashboardAction(): begin');
|
||||
final apps = appGridDashboardController.linagoraApplications.value;
|
||||
if (apps != null) {
|
||||
consumeState(Stream.value(Right(GetAppDashboardConfigurationSuccess(apps))));
|
||||
return;
|
||||
}
|
||||
consumeState(_appGridDashboardController.showDashboardAction());
|
||||
consumeState(appGridDashboardController.showDashboardAction());
|
||||
}
|
||||
|
||||
@override
|
||||
|
||||
-2
@@ -7,8 +7,6 @@ import 'package:get/get.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/domain/app_dashboard/linagora_app.dart';
|
||||
import 'package:url_launcher/url_launcher.dart' as launcher;
|
||||
|
||||
typedef OnTapCallback = void Function();
|
||||
|
||||
class AppGridDashboardItem extends StatelessWidget {
|
||||
final LinagoraApp app;
|
||||
|
||||
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
import 'package:core/core.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get_core/get_core.dart';
|
||||
import 'package:get/get_instance/get_instance.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/domain/app_dashboard/linagora_app.dart';
|
||||
import 'package:url_launcher/url_launcher.dart' as launcher;
|
||||
|
||||
class AppListDashboardItem extends StatefulWidget {
|
||||
final LinagoraApp app;
|
||||
|
||||
const AppListDashboardItem(this.app, {Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<AppListDashboardItem> createState() => _AppListDashboardItemState();
|
||||
}
|
||||
|
||||
class _AppListDashboardItemState extends State<AppListDashboardItem> {
|
||||
final _imagePaths = Get.find<ImagePaths>();
|
||||
final _responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
bool _isHoverItem = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return StatefulBuilder(
|
||||
builder: (BuildContext context, StateSetter setState) {
|
||||
return InkWell(
|
||||
onTap: () => _openApp(widget.app.appUri),
|
||||
onHover: (value) => setState(() => _isHoverItem = value),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
color: _backgroundColorItem(context)),
|
||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 18),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: _buildAppItem(context)
|
||||
),
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAppItem(BuildContext context) {
|
||||
final builder = SloganBuilder(arrangedByHorizontal: true)
|
||||
..setSizeLogo(32.0)
|
||||
..setPadding(const EdgeInsets.only(left: 12))
|
||||
..setSloganText(widget.app.appName)
|
||||
..addOnTapCallback(() async {
|
||||
final url = widget.app.appUri;
|
||||
if (await launcher.canLaunchUrl(url)) {
|
||||
await launcher.launchUrl(url);
|
||||
}
|
||||
})
|
||||
..setSloganTextStyle(const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorNameEmail));
|
||||
if (widget.app.iconName.endsWith('svg')) {
|
||||
builder.setLogoSVG(_imagePaths.getConfigurationImagePath(widget.app.iconName));
|
||||
} else {
|
||||
builder.setLogo(_imagePaths.getConfigurationImagePath(widget.app.iconName));
|
||||
}
|
||||
return builder.build();
|
||||
}
|
||||
|
||||
Color _backgroundColorItem(BuildContext context) {
|
||||
if (_isHoverItem) {
|
||||
return AppColor.colorBgMailboxSelected;
|
||||
}
|
||||
return _responsiveUtils.isDesktop(context)
|
||||
? AppColor.colorBgDesktop
|
||||
: Colors.white;
|
||||
}
|
||||
|
||||
void _openApp(Uri appLink) async {
|
||||
if (await launcher.canLaunchUrl(appLink)) {
|
||||
await launcher.launchUrl(appLink);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"@@last_modified": "2022-10-18T14:05:06.644786",
|
||||
"@@last_modified": "2022-10-19T11:34:56.881127",
|
||||
"initializing_data": "Initializing data...",
|
||||
"@initializing_data": {
|
||||
"type": "text",
|
||||
@@ -2295,5 +2295,11 @@
|
||||
"type": "text",
|
||||
"placeholders_order": [],
|
||||
"placeholders": {}
|
||||
},
|
||||
"appGridTittle": "Go to applications",
|
||||
"@appGridTittle": {
|
||||
"type": "text",
|
||||
"placeholders_order": [],
|
||||
"placeholders": {}
|
||||
}
|
||||
}
|
||||
@@ -2373,7 +2373,14 @@ class AppLocalizations {
|
||||
String get requestReadReceipt {
|
||||
return Intl.message(
|
||||
'Request read receipt',
|
||||
name: 'requestReadReceipt',
|
||||
name: 'requestReadReceipt'
|
||||
);
|
||||
}
|
||||
|
||||
String get appGridTittle {
|
||||
return Intl.message(
|
||||
'Go to applications',
|
||||
name: 'appGridTittle'
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user