feat: add context menu for desktop & web

Allows right-clicking the sheet in the side panel on desktop and web which opens a context menu to easily remove the sheet.
Merrit · Aug 6, 2024 · 3e5d91e · 3e5d91e
1 parent 2355672
commit 3e5d91e
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 74 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -49,7 +49,8 @@ android {
         applicationId = "codes.merritt.bargain"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
-        minSdk = flutter.minSdkVersion
+        // minSdk = flutter.minSdkVersion
+        minSdk = 23 // Specified to accomodate super_context_menu
         targetSdk = flutter.targetSdkVersion
         versionCode = flutterVersionCode.toInteger()
         versionName = flutterVersionName

diff --git a/lib/calculator/widgets/side_panel/sheet_tile.dart b/lib/calculator/widgets/side_panel/sheet_tile.dart
@@ -1,7 +1,9 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:helpers/helpers.dart';
+import 'package:super_context_menu/super_context_menu.dart';
 
 import '../../../purchases/cubit/purchases_cubit.dart';
 import '../../../purchases/pages/purchases_page.dart';
@@ -56,32 +58,27 @@ class _SheetTileState extends State<SheetTile> {
               .proPurchased;
           final bool proFeaturesDisabled = !proPurchased && (index > 4);
 
-          // List<PopupMenuItem> buildListContextMenuItems(Sheet sheet) {
-          //   return [
-          //     PopupMenuItem(
-          //       child: const Text(
-          //         'Remove',
-          //         style: TextStyle(color: Colors.red),
-          //       ),
-          //       onTap: () => _showConfirmRemovalDialog(context, sheet),
-          //     ),
-          //   ];
-          // }
-
           final Widget? subtitle = (sheet.subtitle != null) //
               ? Text(sheet.subtitle!)
               : null;
 
-          return Opacity(
-            opacity: (proFeaturesDisabled) ? 0.4 : 1.0,
-            child: GestureDetector(
-              // onSecondaryTapUp: (TapUpDetails details) {
-              //   showContextMenu(
-              //     context: context,
-              //     offset: details.globalPosition,
-              //     items: buildListContextMenuItems(sheet),
-              //   );
-              // },
+          return ContextMenuWidget(
+            // Context menu is disabled on mobile, as it conflicts with the long
+            // press to reorder sheets.
+            // Instead, users can access such settings via the app bar.
+            contextMenuIsAllowed: (_) => !defaultTargetPlatform.isMobile,
+            menuProvider: (_) {
+              return Menu(
+                children: [
+                  MenuAction(
+                    title: 'Remove',
+                    callback: () => _showConfirmRemovalDialog(context, sheet),
+                  ),
+                ],
+              );
+            },
+            child: Opacity(
+              opacity: (proFeaturesDisabled) ? 0.4 : 1.0,
               child: MouseRegion(
                 onEnter: (_) => setState(() => isHovered = true),
                 onExit: (_) => setState(() => isHovered = false),
@@ -127,4 +124,35 @@ class _SheetTileState extends State<SheetTile> {
       ),
     );
   }
+
+  /// Shows a dialog to confirm the removal of a [Sheet].
+  Future<void> _showConfirmRemovalDialog(
+    BuildContext context,
+    Sheet sheet,
+  ) async {
+    final bool? result = await showDialog<bool>(
+      context: context,
+      builder: (context) {
+        return AlertDialog(
+          title: const Text('Remove sheet?'),
+          content: Text(
+              'Are you sure you want to remove the sheet "${sheet.name}"?'),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.pop(context, false),
+              child: const Text('Cancel'),
+            ),
+            TextButton(
+              onPressed: () => Navigator.pop(context, true),
+              child: const Text('Remove'),
+            ),
+          ],
+        );
+      },
+    );
+
+    if (result == true) {
+      calcCubit.removeSheet(sheet);
+    }
+  }
 }
diff --git a/lib/calculator/widgets/side_panel/side_panel_view.dart b/lib/calculator/widgets/side_panel/side_panel_view.dart
@@ -1,7 +1,6 @@
 import 'package:badges/badges.dart' as badges;
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:helpers/helpers.dart';
 
 import '../../../app/app_widget.dart';
 import '../../../app/widgets/widgets.dart';
@@ -24,7 +23,6 @@ class _SidePanelState extends State<SidePanel> {
   @override
   Widget build(BuildContext context) {
     final calcCubit = context.read<CalculatorCubit>();
-    final mediaQuery = MediaQuery.of(context);
 
     final addSheetButton = Opacity(
       opacity: 0.8,
@@ -80,13 +78,7 @@ class _SidePanelState extends State<SidePanel> {
       ],
     );
 
-    if (mediaQuery.isHandset) return panelBody;
-
-    return Container(
-      color: Theme.of(context).cardColor,
-      width: 180,
-      child: panelBody,
-    );
+    return panelBody;
   }
 }