TW-1795: Change style loading dialog (#1889)

* TW-1795: Change style loading dialog * TW-1795: Update hide dialog
linagora · Jun 26, 2024 · 7180006 · 7180006
1 parent 613c470
commit 7180006
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 26 deletions.
diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb
@@ -3081,5 +3081,7 @@
   "selectAccount": "Select account",
   "privacyPolicy": "Privacy Policy",
   "byContinuingYourAgreeingToOur": "By continuing, you're agreeing to our",
-  "youDontHaveAnyContactsYet": "You dont have any contacts yet."
+  "youDontHaveAnyContactsYet": "You dont have any contacts yet.",
+  "loading": "Loading...",
+  "errorDialogTitle": "Oops, something went wrong"
 }
diff --git a/lib/pages/bootstrap/tom_bootstrap_dialog.dart b/lib/pages/bootstrap/tom_bootstrap_dialog.dart
@@ -5,6 +5,7 @@ import 'package:fluffychat/domain/usecase/recovery/delete_recovery_words_interac
 import 'package:fluffychat/domain/usecase/recovery/get_recovery_words_interactor.dart';
 import 'package:fluffychat/domain/usecase/recovery/save_recovery_words_interactor.dart';
 import 'package:fluffychat/pages/bootstrap/tom_bootstrap_dialog_style.dart';
+import 'package:fluffychat/resource/image_paths.dart';
 import 'package:fluffychat/utils/dialog/twake_dialog.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -230,7 +231,7 @@ class TomBootstrapDialogState extends State<TomBootstrapDialog>
                 Padding(
                   padding: TomBootstrapDialogStyle.lottiePadding,
                   child: LottieBuilder.asset(
-                    'assets/twake_loading.json',
+                    ImagePaths.lottieTwakeLoading,
                     width: TomBootstrapDialogStyle.lottieSize,
                     height: TomBootstrapDialogStyle.lottieSize,
                   ),

diff --git a/lib/resource/assets_paths.dart b/lib/resource/assets_paths.dart
@@ -1,4 +1,5 @@
 class AssetsPaths {
   static const images = 'assets/images/';
   static const configurationImages = 'configurations/icons/';
+  static const assets = 'assets/';
 }
diff --git a/lib/resource/image_paths.dart b/lib/resource/image_paths.dart
@@ -49,6 +49,7 @@ class ImagePaths {
   static String get icFileError => _getImagePath('ic_file_error.svg');
   static String get icGoTo => _getImagePath('ic_goto.svg');
   static String get icShowInChat => _getImagePath('ic_show_in_chat.svg');
+  static String get lottieTwakeLoading => _getAssetPath('twake_loading.json');
 
   static String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;
@@ -57,4 +58,8 @@ class ImagePaths {
   static String getConfigurationImagePath(String imageName) {
     return AssetsPaths.configurationImages + imageName;
   }
+
+  static String _getAssetPath(String assetName) {
+    return AssetsPaths.assets + assetName;
+  }
 }
diff --git a/lib/utils/dialog/twake_dialog.dart b/lib/utils/dialog/twake_dialog.dart
@@ -1,33 +1,49 @@
 import 'dart:async';
-
 import 'package:fluffychat/pages/bootstrap/init_client_dialog.dart';
+import 'package:fluffychat/resource/image_paths.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/twake_app.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:linagora_design_flutter/linagora_design_flutter.dart';
+import 'package:lottie/lottie.dart';
 import 'package:matrix/matrix.dart';
 
 class TwakeDialog {
+  static const double maxWidthLoadingDialogWeb = 448;
+
+  static const double lottieSizeWeb = 80;
+
+  static const double lottieSizeMobile = 48;
+
   static void hideLoadingDialog(BuildContext context) {
     if (PlatformInfos.isWeb) {
-      TwakeApp.router.routerDelegate.pop();
+      if (TwakeApp.routerKey.currentContext != null) {
+        Navigator.pop(TwakeApp.routerKey.currentContext!);
+      } else {
+        Navigator.pop(context);
+      }
     } else {
       Navigator.pop(context);
     }
   }
 
   static void showLoadingDialog(BuildContext context) {
     showGeneralDialog(
+      barrierColor: LinagoraSysColors.material().onPrimary.withOpacity(0.75),
       useRootNavigator: PlatformInfos.isWeb,
       transitionDuration: const Duration(milliseconds: 700),
       transitionBuilder: (context, animation, secondaryAnimation, child) {
         return FadeTransition(
           opacity: Tween<double>(begin: 0, end: 1).animate(animation),
-          child: const PopScope(
+          child: PopScope(
             canPop: false,
-            child: ProgressDialog(),
+            child: ProgressDialog(
+              lottieSize:
+                  PlatformInfos.isWeb ? lottieSizeWeb : lottieSizeMobile,
+            ),
           ),
         );
       },
@@ -51,9 +67,70 @@ class TwakeDialog {
         stackTrace: StackTrace.current,
       );
     }
+
+    if (PlatformInfos.isWeb) {
+      return _dialogFullScreenWeb(future: future, context: twakeContext);
+    } else {
+      return _dialogFullScreenMobile(future: future, context: twakeContext);
+    }
+  }
+
+  static Future<LoadingDialogResult<T>> _dialogFullScreenWeb<T>({
+    required Future<T> Function() future,
+    required BuildContext context,
+  }) async {
     return await showFutureLoadingDialog(
-      context: twakeContext,
+      context: context,
       future: future,
+      loadingIcon: LottieBuilder.asset(
+        ImagePaths.lottieTwakeLoading,
+        width: lottieSizeWeb,
+        height: lottieSizeWeb,
+      ),
+      barrierColor: LinagoraSysColors.material().onPrimary.withOpacity(0.75),
+      loadingTitle: L10n.of(context)!.loading,
+      loadingTitleStyle: Theme.of(context).textTheme.titleLarge,
+      maxWidth: maxWidthLoadingDialogWeb,
+      errorTitle: L10n.of(context)!.errorDialogTitle,
+      errorTitleStyle: Theme.of(context).textTheme.titleLarge,
+      errorBackLabel: L10n.of(context)!.cancel,
+      errorBackLabelStyle: Theme.of(context).textTheme.titleLarge?.copyWith(
+            color: Theme.of(context).colorScheme.primary,
+          ),
+      errorNextLabel: L10n.of(context)!.next,
+      errorNextLabelStyle: Theme.of(context).textTheme.titleLarge?.copyWith(
+            color: Theme.of(context).colorScheme.onPrimary,
+          ),
+      backgroundNextLabel: Theme.of(context).colorScheme.primary,
+    );
+  }
+
+  static Future<LoadingDialogResult<T>> _dialogFullScreenMobile<T>({
+    required Future<T> Function() future,
+    required BuildContext context,
+  }) async {
+    return await showFutureLoadingDialog(
+      context: context,
+      future: future,
+      loadingIcon: LottieBuilder.asset(
+        ImagePaths.lottieTwakeLoading,
+        width: lottieSizeMobile,
+        height: lottieSizeMobile,
+      ),
+      barrierColor: LinagoraSysColors.material().onPrimary.withOpacity(0.75),
+      loadingTitle: L10n.of(context)!.loading,
+      loadingTitleStyle: Theme.of(context).textTheme.titleMedium,
+      errorTitle: L10n.of(context)!.errorDialogTitle,
+      errorTitleStyle: Theme.of(context).textTheme.titleMedium,
+      errorBackLabel: L10n.of(context)!.cancel,
+      errorBackLabelStyle: Theme.of(context).textTheme.titleMedium?.copyWith(
+            color: Theme.of(context).colorScheme.primary,
+          ),
+      errorNextLabel: L10n.of(context)!.next,
+      errorNextLabelStyle: Theme.of(context).textTheme.titleMedium?.copyWith(
+            color: Theme.of(context).colorScheme.onPrimary,
+          ),
+      backgroundNextLabel: Theme.of(context).colorScheme.primary,
     );
   }
 
@@ -118,22 +195,32 @@ class TwakeDialog {
 }
 
 class ProgressDialog extends StatelessWidget {
-  const ProgressDialog({super.key});
+  final double lottieSize;
+
+  const ProgressDialog({
+    super.key,
+    required this.lottieSize,
+  });
 
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
-      content: Row(
+      backgroundColor: Colors.transparent,
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
         children: [
-          const Padding(
-            padding: EdgeInsets.only(right: 16.0),
-            child: CircularProgressIndicator.adaptive(),
+          LottieBuilder.asset(
+            ImagePaths.lottieTwakeLoading,
+            width: lottieSize,
+            height: lottieSize,
           ),
-          Expanded(
-            child: Text(
-              L10n.of(context)!.loadingPleaseWait,
-              overflow: TextOverflow.ellipsis,
-            ),
+          const SizedBox(height: 24),
+          Text(
+            L10n.of(context)!.loading,
+            style: PlatformInfos.isWeb
+                ? Theme.of(context).textTheme.titleLarge
+                : Theme.of(context).textTheme.titleMedium,
+            overflow: TextOverflow.ellipsis,
           ),
         ],
       ),

diff --git a/lib/widgets/matrix.dart b/lib/widgets/matrix.dart
@@ -306,14 +306,11 @@ class MatrixState extends State<Matrix>
       } else {
         initConfigMobile().then((_) => initSettings());
       }
-      initLoadingDialog();
     });
   }
 
   void initLoadingDialog() {
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      LoadingDialog.defaultTitle = L10n.of(context)!.loadingPleaseWait;
-      LoadingDialog.defaultBackLabel = L10n.of(context)!.close;
       LoadingDialog.defaultOnError =
           (e) => (e as Object?)!.toLocalizedString(context);
     });

diff --git a/pubspec.lock b/pubspec.lock
@@ -1293,11 +1293,12 @@ packages:
   future_loading_dialog:
     dependency: "direct main"
     description:
-      name: future_loading_dialog
-      sha256: "6227dddb32ad5c7d233a54668f862acb4beb5a5e0dde072de372347cc0799e63"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.2.4"
+      path: "."
+      ref: main
+      resolved-ref: "08e1e697919615410f8a855e500ef5617f90333b"
+      url: "[email protected]:linagora/future-loading-dialog.git"
+    source: git
+    version: "0.3.0"
   gal:
     dependency: "direct main"
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -55,6 +55,11 @@ dependencies:
       url: [email protected]:linagora/inview_notifier_list.git
       ref: master
 
+  future_loading_dialog:
+    git:
+      url: [email protected]:linagora/future-loading-dialog.git
+      ref: main
+
   adaptive_dialog: ^1.8.0+1
   flutter_adaptive_scaffold: ^0.1.4
   animations: ^2.0.7
@@ -96,7 +101,6 @@ dependencies:
   # flutter_webrtc: # Until https://github.com/flutter-webrtc/flutter-webrtc/issues/1212 is fixed
   #   git: https://github.com/radzio-it/flutter-webrtc.git
   flutter_webrtc: ^0.10.6
-  future_loading_dialog: ^0.2.3
   handy_window: ^0.1.9
   hive: ^2.2.3
   hive_flutter: ^1.1.0