TF-2893 Apply the standard app grid icon

2024-07-23 13:35:02 +07:00
parent 47b006f685
commit 8b7ac1f039
27 changed files with 173 additions and 77 deletions
@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+
+class AppGridDashboardStyle {
+  static const double iconSize = 42;
+  static const double hoverIconSize = 80;
+  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 10, vertical: 14);
+  static final List<BoxShadow> cardShadow = [
+    BoxShadow(
+      color: Colors.black.withOpacity(0.15),
+      blurRadius: 20,
+      offset: Offset.zero
+    ),
+  ];
+}
@@ -0,0 +1,61 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_portal/flutter_portal.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/app_grid_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/app_dashboard/app_grid_dashboard_overlay.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
+
+class AppGridDashboardIcon extends StatelessWidget {
+
+  final ImagePaths _imagePaths = Get.find<ImagePaths>();
+
+  final AppGridDashboardController appGridController;
+  final VoidCallback? onShowAppDashboardAction;
+
+  AppGridDashboardIcon({
+    super.key,
+    required this.appGridController,
+    this.onShowAppDashboardAction
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(() {
+      final isAppGridOpen = appGridController.isAppGridDashboardOverlayOpen.value;
+      return PortalTarget(
+        visible: isAppGridOpen,
+        portalFollower: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: appGridController.toggleAppGridDashboard
+        ),
+        child: PortalTarget(
+          anchor: Aligned(
+            follower: AppUtils.isDirectionRTL(context)
+              ? Alignment.topLeft
+              : Alignment.topRight,
+            target: AppUtils.isDirectionRTL(context)
+              ? Alignment.bottomLeft
+              : Alignment.bottomRight
+          ),
+          portalFollower: Obx(() {
+            final listApps = appGridController.linagoraApplications.value;
+            if (listApps?.apps.isNotEmpty == true) {
+              return AppDashboardOverlay(listApps!);
+            }
+            return const SizedBox.shrink();
+          }),
+          visible: isAppGridOpen,
+          child: TMailButtonWidget.fromIcon(
+            icon: _imagePaths.icAppDashboard,
+            backgroundColor: Colors.transparent,
+            iconSize: 30,
+            padding: const EdgeInsets.all(6),
+            onTapActionCallback: onShowAppDashboardAction,
+          ),
+        )
+      );
+    });
+  }
+}
@@ -1,11 +1,11 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/style_utils.dart';
 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/link_browser_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/app_dashboard/linagora_app.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/app_grid_dashboard_style.dart';
 import 'package:tmail_ui_user/main/utils/app_utils.dart';

 class AppGridDashboardItem extends StatelessWidget {
@@ -26,31 +26,46 @@ class AppGridDashboardItem extends StatelessWidget {
          borderRadius: const BorderRadius.all(Radius.circular(16)),
          hoverColor: AppColor.colorBgMailboxSelected,
          child: Container(
-            width: 98,
+            width: AppGridDashboardStyle.hoverIconSize,
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Column(children: [
-              app.iconName.endsWith("svg")
-                ? SvgPicture.asset(
-                    _imagePaths.getConfigurationImagePath(app.iconName),
-                    width: 56,
-                    height: 56,
-                    fit: BoxFit.fill)
-                : Image.asset(
-                    _imagePaths.getConfigurationImagePath(app.iconName),
-                    width: 56,
-                    height: 56,
-                    fit: BoxFit.fill),
+              if (app.iconName?.isNotEmpty == true)
+                app.iconName!.endsWith("svg")
+                  ? SvgPicture.asset(
+                      _imagePaths.getConfigurationImagePath(app.iconName!),
+                      width: AppGridDashboardStyle.iconSize,
+                      height: AppGridDashboardStyle.iconSize,
+                      fit: BoxFit.fill)
+                  : Image.asset(
+                      _imagePaths.getConfigurationImagePath(app.iconName!),
+                      width: AppGridDashboardStyle.iconSize,
+                      height: AppGridDashboardStyle.iconSize,
+                      fit: BoxFit.fill)
+              else if (app.publicIconUri != null)
+                Image.network(
+                  app.publicIconUri.toString(),
+                  width: AppGridDashboardStyle.iconSize,
+                  height: AppGridDashboardStyle.iconSize,
+                  fit: BoxFit.fill,
+                  errorBuilder: (_, error, stackTrace) {
+                    return Container(
+                      width: AppGridDashboardStyle.iconSize,
+                      height: AppGridDashboardStyle.iconSize,
+                      color: AppColor.textFieldHintColor,
+                    );
+                  }
+                ),
              Padding(
                padding: const EdgeInsets.only(top: 8),
                child: Text(
                  app.appName,
                  maxLines: 1,
                  textAlign: TextAlign.center,
-                  softWrap: CommonTextStyle.defaultSoftWrap,
-                  overflow: CommonTextStyle.defaultTextOverFlow,
-                  style: const TextStyle(
-                    color: AppColor.colorNameEmail,
-                    fontSize: 15
+                  overflow: TextOverflow.ellipsis,
+                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                    color: Colors.black,
+                    fontSize: 12,
+                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
@@ -1,6 +1,6 @@
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/app_dashboard/linagora_applications.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/app_grid_dashboard_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/app_dashboard/app_grid_dashboard_item.dart';

 class AppDashboardOverlay extends StatelessWidget {
@@ -17,18 +17,9 @@ class AppDashboardOverlay extends StatelessWidget {
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(24),
-          boxShadow: const [
-            BoxShadow(
-              color: AppColor.colorShadowLayerBottom,
-              blurRadius: 96,
-              offset: Offset.zero),
-            BoxShadow(
-              color: AppColor.colorShadowLayerTop,
-              blurRadius: 2,
-              offset: Offset.zero),
-          ]
+          boxShadow: AppGridDashboardStyle.cardShadow
        ),
-        padding: const EdgeInsets.all(24),
+        padding: AppGridDashboardStyle.padding,
        child: Wrap(children: _linagoraApplications.apps
          .map((app) => AppGridDashboardItem(app))
          .toList()),
@@ -38,13 +29,11 @@ class AppDashboardOverlay extends StatelessWidget {

  double get _widthAppGrid {
    if (_linagoraApplications.apps.length >= 3) {
-      return 342;
+      return AppGridDashboardStyle.hoverIconSize * 3 + AppGridDashboardStyle.padding.horizontal;
    } else if (_linagoraApplications.apps.length == 2) {
-      return 244;
-    } else if (_linagoraApplications.apps.length == 1) {
-      return 146;
+      return AppGridDashboardStyle.hoverIconSize * 2 + AppGridDashboardStyle.padding.horizontal;
    } else {
-      return 0;
+      return AppGridDashboardStyle.hoverIconSize + AppGridDashboardStyle.padding.horizontal;
    }
  }
 }
@@ -26,8 +26,10 @@ class AppListDashboardItem extends StatelessWidget {
      text: app.appName,
      textAlign: TextAlign.center,
      textStyle: const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorNameEmail),
-      logo: !app.iconName.endsWith('svg') ? imagePaths.getConfigurationImagePath(app.iconName) : null,
-      logoSVG: app.iconName.endsWith('svg') ? imagePaths.getConfigurationImagePath(app.iconName) : null,
+      logo: app.iconName?.isNotEmpty == true
+        ? imagePaths.getConfigurationImagePath(app.iconName!)
+        : null,
+      publicLogoUri: app.publicIconUri,
      onTapCallback: () => _openApp(context, app),
      padding: const EdgeInsetsDirectional.symmetric(vertical: 12, horizontal: 20),
      hoverColor: AppColor.colorBgMailboxSelected