From 770953ddec7eabdeb2ea67120077b0aec2244bc6 Mon Sep 17 00:00:00 2001
From: chiragkr04 <chiragkumar6921@gmail.com>
Date: Sun, 7 Aug 2022 20:01:43 +0530
Subject: [PATCH] feat: tooltip for open row as page

---
 .../app_flowy/assets/translations/en.json     |  5 ++--
 .../grid/src/widgets/cell/cell_accessory.dart | 28 ++++++++++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/app_flowy/assets/translations/en.json b/frontend/app_flowy/assets/translations/en.json
index 2dbb970611..a60ff02dc1 100644
--- a/frontend/app_flowy/assets/translations/en.json
+++ b/frontend/app_flowy/assets/translations/en.json
@@ -94,7 +94,8 @@
   },
   "tooltip": {
     "lightMode": "Switch to Light mode",
-    "darkMode": "Switch to Dark mode"
+    "darkMode": "Switch to Dark mode",
+    "openAsPage": "Open as a Page"
   },
   "notifications": {
     "export": {
@@ -215,4 +216,4 @@
       "timeHintTextInTwentyFourHour": "12:00"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_accessory.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_accessory.dart
index 88eadb39c4..6e3a70061c 100644
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_accessory.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_accessory.dart
@@ -6,6 +6,8 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:styled_widget/styled_widget.dart';
+import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class GridCellAccessoryBuildContext {
   final BuildContext anchorContext;
@@ -39,7 +41,13 @@ class PrimaryCellAccessory extends StatelessWidget with GridCellAccessory {
       return const SizedBox();
     } else {
       final theme = context.watch<AppTheme>();
-      return svgWidget("grid/expander", color: theme.main1);
+      return Tooltip(
+        message: LocaleKeys.tooltip_openAsPage.tr(),
+        child: svgWidget(
+          "grid/expander",
+          color: theme.main1,
+        ),
+      );
     }
   }
 
@@ -50,7 +58,8 @@ class PrimaryCellAccessory extends StatelessWidget with GridCellAccessory {
   bool enable() => !isCellEditing;
 }
 
-typedef AccessoryBuilder = List<GridCellAccessory> Function(GridCellAccessoryBuildContext buildContext);
+typedef AccessoryBuilder = List<GridCellAccessory> Function(
+    GridCellAccessoryBuildContext buildContext);
 
 abstract class CellAccessory extends Widget {
   const CellAccessory({Key? key}) : super(key: key);
@@ -81,7 +90,8 @@ class _AccessoryHoverState extends State<AccessoryHover> {
   @override
   void initState() {
     _hoverState = AccessoryHoverState();
-    _listenerFn = () => _hoverState.onHover = widget.child.onAccessoryHover?.value ?? false;
+    _listenerFn = () =>
+        _hoverState.onHover = widget.child.onAccessoryHover?.value ?? false;
     widget.child.onAccessoryHover?.addListener(_listenerFn!);
 
     super.initState();
@@ -159,7 +169,8 @@ class _Background extends StatelessWidget {
       builder: (context, state, child) {
         if (state.onHover) {
           return FlowyHoverContainer(
-            style: HoverStyle(borderRadius: Corners.s6Border, hoverColor: theme.shader6),
+            style: HoverStyle(
+                borderRadius: Corners.s6Border, hoverColor: theme.shader6),
           );
         } else {
           return const SizedBox();
@@ -171,14 +182,17 @@ class _Background extends StatelessWidget {
 
 class CellAccessoryContainer extends StatelessWidget {
   final List<GridCellAccessory> accessories;
-  const CellAccessoryContainer({required this.accessories, Key? key}) : super(key: key);
+  const CellAccessoryContainer({required this.accessories, Key? key})
+      : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    final children = accessories.where((accessory) => accessory.enable()).map((accessory) {
+    final children =
+        accessories.where((accessory) => accessory.enable()).map((accessory) {
       final hover = FlowyHover(
-        style: HoverStyle(hoverColor: theme.bg3, backgroundColor: theme.surface),
+        style:
+            HoverStyle(hoverColor: theme.bg3, backgroundColor: theme.surface),
         builder: (_, onHover) => Container(
           width: 26,
           height: 26,