feat: show tooltip when hovering on plus avatar

LucasXu0 · Apr 5, 2024 · baca743 · baca743
1 parent 46d8ff1
commit baca743
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/frontend/appflowy_flutter/lib/plugins/document/document.dart b/frontend/appflowy_flutter/lib/plugins/document/document.dart
@@ -145,7 +145,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
               ? [
                   DocumentCollaborators(
                     key: ValueKey('collaborators_${view.id}'),
-                    width: 100,
+                    width: 150,
                     height: 32,
                     view: view,
                   ),

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/collaborator_avater_stack.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/collaborator_avater_stack.dart
@@ -13,6 +13,7 @@ class CollaboratorAvatarStack extends StatelessWidget {
     this.borderWidth,
     this.borderColor,
     this.backgroundColor,
+    required this.plusWidgetBuilder,
   });
 
   final List<Widget> avatars;
@@ -31,41 +32,29 @@ class CollaboratorAvatarStack extends StatelessWidget {
 
   final Color? backgroundColor;
 
+  final Widget Function(int value, BorderSide border) plusWidgetBuilder;
+
   @override
   Widget build(BuildContext context) {
     final settings = this.settings ??
         RestrictedPositions(
           maxCoverage: 0.3,
-          minCoverage: 0.1,
+          minCoverage: 0.2,
           align: StackAlign.right,
+          laying: StackLaying.first,
         );
 
     final border = BorderSide(
       color: borderColor ?? Theme.of(context).colorScheme.onPrimary,
       width: borderWidth ?? 2.0,
     );
 
-    Widget textInfoWidgetBuilder(surplus) => BorderedCircleAvatar(
-          border: border,
-          backgroundColor: backgroundColor,
-          child: FittedBox(
-            child: Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: Text(
-                '+$surplus',
-                style: Theme.of(context).textTheme.titleLarge,
-              ),
-            ),
-          ),
-        );
-    final infoWidgetBuilder = this.infoWidgetBuilder ?? textInfoWidgetBuilder;
-
     return SizedBox(
       height: height,
       width: width,
       child: WidgetStack(
         positions: settings,
-        buildInfoWidget: infoWidgetBuilder,
+        buildInfoWidget: (value) => plusWidgetBuilder(value, border),
         stackedWidgets: avatars
             .map(
               (avatar) => CircleAvatar(

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/document_collaborators.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/document_collaborators.dart
@@ -2,6 +2,7 @@ import 'package:appflowy/plugins/document/application/doc_collaborators_bloc.dar
 import 'package:appflowy/plugins/document/presentation/collaborator_avater_stack.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:avatar_stack/avatar_stack.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flutter/material.dart';
@@ -41,8 +42,30 @@ class DocumentCollaborators extends StatelessWidget {
               height: height,
               width: width,
               borderWidth: 1.0,
-              backgroundColor:
-                  Theme.of(context).colorScheme.onSecondaryContainer,
+              plusWidgetBuilder: (value, border) {
+                final lastXCollaborators = collaborators.sublist(
+                  collaborators.length - value,
+                );
+                return BorderedCircleAvatar(
+                  border: border,
+                  backgroundColor: Theme.of(context).hoverColor,
+                  child: FittedBox(
+                    child: Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: FlowyTooltip(
+                        message: lastXCollaborators
+                            .map((e) => e.userName)
+                            .join('\n'),
+                        child: FlowyText(
+                          '+$value',
+                          fontSize: fontSize,
+                          color: Colors.black,
+                        ),
+                      ),
+                    ),
+                  ),
+                );
+              },
               avatars: collaborators
                   .map(
                     (c) => FlowyTooltip(