feat: add operation buttons and tooltip background.

app/lib/models/scheme.dart

@@ -7,6 +7,9 @@ import 'package:dde_gesture_manager/utils/helper.dart';
 @ProviderModel(copyable: true)
 class Scheme {
   @ProviderModelProp()
+  String? id;
+
+  @ProviderModelProp()
   String? name;
 
   @ProviderModelProp()
@@ -18,6 +21,7 @@ class Scheme {
   Scheme.parse(scheme) {
     if (scheme is String) scheme = json.decode(scheme);
     assert(scheme is Map);
+    id = scheme['id'];
     name = scheme['name'];
     description = scheme['desc'];
     gestures = (scheme['gestures'] as List? ?? []).map<GestureProp>((ele) => GestureProp.parse(ele)).toList();

app/lib/pages/local_manager.dart

@@ -21,11 +21,14 @@ class LocalManager extends StatefulWidget {
 class _LocalManagerState extends State<LocalManager> {
   late ScrollController _scrollController;
   int? _hoveringIndex;
-  int? _selectedIndex;
+  late int _selectedIndex;
 
   @override
   void initState() {
     super.initState();
+
+    /// todo: load from sp
+    _selectedIndex = 0;
     _scrollController = ScrollController();
   }
 
@@ -83,54 +86,77 @@ class _LocalManagerState extends State<LocalManager> {
                   ],
                 ),
                 Flexible(
-                  child: Column(
+                  child: Padding(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    padding: EdgeInsets.only(top: 5),
-                    children: [
+                    child: Column(
-                      Flexible(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        child: ListView.builder(
+                      children: [
-                          controller: _scrollController,
+                        Flexible(
-                          itemBuilder: (context, index) => GestureDetector(
+                          child: Container(
-                            onDoubleTap: () {
+                            decoration: BoxDecoration(
-                              context.read<SchemeProvider>().copyFrom(localSchemes[index].scheme);
+                              border: Border.all(
-                              setState(() {
+                                width: .3,
-                                _selectedIndex = index;
+                                color: context.t.dividerColor,
-                              });
+                              ),
-                            },
+                              borderRadius: BorderRadius.circular(defaultBorderRadius),
-                            onTap: () {
+                            ),
-                              setState(() {
+                            child: Padding(
-                                _selectedIndex = index;
+                              padding: EdgeInsets.symmetric(horizontal: 1, vertical: 2),
-                              });
+                              child: ListView.builder(
-                            },
+                                controller: _scrollController,
-                            child: MouseRegion(
+                                itemBuilder: (context, index) => GestureDetector(
-                              cursor: SystemMouseCursors.click,
+                                  onTap: () {
-                              onEnter: (_) {
+                                    context.read<SchemeProvider>().copyFrom(localSchemes[index].scheme);
-                                setState(() {
+                                    setState(() {
-                                  _hoveringIndex = index;
+                                      _selectedIndex = index;
-                                });
+                                    });
-                              },
+                                  },
-                              child: Container(
+                                  child: MouseRegion(
-                                color: _getItemBackgroundColor(index),
+                                    cursor: SystemMouseCursors.click,
-                                child: Padding(
+                                    onEnter: (_) {
-                                  padding: const EdgeInsets.only(right: 12.0),
+                                      setState(() {
-                                  child: Row(
+                                        _hoveringIndex = index;
-                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                      });
-                                    children: [
+                                    },
-                                      Text(localSchemes[index].scheme.name ?? ''),
+                                    child: Container(
-                                      Text('456'),
+                                      color: _getItemBackgroundColor(index),
-                                    ],
+                                      child: Padding(
+                                        padding: const EdgeInsets.only(left: 6, right: 12.0),
+                                        child: Row(
+                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                          children: [
+                                            Text(localSchemes[index].scheme.name ?? ''),
+                                            Text('456'),
+                                          ],
+                                        ),
+                                      ),
+                                    ),
                                   ),
                                 ),
+                                itemCount: localSchemes.length,
                               ),
                             ),
                           ),
-                          itemCount: localSchemes.length,
                         ),
-                      ),
+                        Container(height: 5),
-                      Container(
+                        Container(
-                        height: 150,
+                          child: Row(
-                        color: Colors.black,
+                            mainAxisAlignment: MainAxisAlignment.end,
-                      ),
+                            children: [
-                    ],
+                              DButton.add(enabled: true),
+                              DButton.delete(enabled: _selectedIndex > 0),
+                              DButton.duplicate(enabled: _selectedIndex > 0),
+                              DButton.apply(enabled: _selectedIndex > 0),
+                            ]
+                                .map((e) => Padding(
+                                      padding: const EdgeInsets.only(right: 4),
+                                      child: e,
+                                    ))
+                                .toList(),
+                          ),
+                        ),
+                      ],
+                    ),
                   ),
                 ),
               ],

app/lib/themes/dark.dart

@@ -18,9 +18,20 @@ var darkTheme = ThemeData.dark().copyWith(
         ),
       ),
   popupMenuTheme: ThemeData.dark().popupMenuTheme.copyWith(
-    shape: RoundedRectangleBorder(
+        shape: RoundedRectangleBorder(
-      borderRadius: BorderRadius.circular(defaultBorderRadius),
+          borderRadius: BorderRadius.circular(defaultBorderRadius),
-    ),
+        ),
-  ),
+      ),
   dialogBackgroundColor: Color(0xff202020),
+  tooltipTheme: ThemeData.dark().tooltipTheme.copyWith(
+        textStyle: TextStyle(
+          color: Colors.grey,
+        ),
+        padding: EdgeInsets.symmetric(horizontal: 3, vertical: 2),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: Color(0xff282828).withOpacity(.9),
+          border: Border.all(color: Colors.black38),
+        ),
+      ),
 );

app/lib/themes/light.dart

@@ -23,4 +23,15 @@ var lightTheme = ThemeData.light().copyWith(
         ),
       ),
   dialogBackgroundColor: Color(0xfffefefe),
+  tooltipTheme: ThemeData.dark().tooltipTheme.copyWith(
+        textStyle: TextStyle(
+          color: Colors.grey.shade600,
+        ),
+        padding: EdgeInsets.symmetric(horizontal: 3, vertical: 2),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: Color(0xfff8f8f8).withOpacity(.9),
+          border: Border.all(color: Colors.grey.shade400),
+        ),
+      ),
 );

app/lib/widgets/dde_button.dart

@@ -1,4 +1,5 @@
 import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:dde_gesture_manager/extensions.dart';
 import 'package:flutter/material.dart';
 import 'package:glass_kit/glass_kit.dart';
 
@@ -16,6 +17,74 @@ class DButton extends StatefulWidget {
     this.onTap,
   }) : super(key: key);
 
+  factory DButton.add({
+    Key? key,
+    required enabled,
+    GestureTapCallback? onTap,
+    height = defaultButtonHeight * .7,
+    width = defaultButtonHeight * .7,
+  }) =>
+      DButton(
+          key: key,
+          width: width,
+          height: height,
+          onTap: onTap,
+          child: Tooltip(
+            child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.add, size: 18)),
+            message: LocaleKeys.operation_add.tr(),
+          ));
+
+  factory DButton.delete({
+    Key? key,
+    required enabled,
+    GestureTapCallback? onTap,
+    height = defaultButtonHeight * .7,
+    width = defaultButtonHeight * .7,
+  }) =>
+      DButton(
+          key: key,
+          width: width,
+          height: height,
+          onTap: onTap,
+          child: Tooltip(
+            child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.remove, size: 18)),
+            message: LocaleKeys.operation_delete.tr(),
+          ));
+
+  factory DButton.apply({
+    Key? key,
+    required enabled,
+    GestureTapCallback? onTap,
+    height = defaultButtonHeight * .7,
+    width = defaultButtonHeight * .7,
+  }) =>
+      DButton(
+          key: key,
+          width: width,
+          height: height,
+          onTap: onTap,
+          child: Tooltip(
+            child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.check, size: 18)),
+            message: LocaleKeys.operation_apply.tr(),
+          ));
+
+  factory DButton.duplicate({
+    Key? key,
+    required enabled,
+    GestureTapCallback? onTap,
+    height = defaultButtonHeight * .7,
+    width = defaultButtonHeight * .7,
+  }) =>
+      DButton(
+          key: key,
+          width: width,
+          height: height,
+          onTap: onTap,
+          child: Tooltip(
+            child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.copy_rounded, size: 18)),
+            message: LocaleKeys.operation_duplicate.tr(),
+          ));
+
   @override
   State<DButton> createState() => _DButtonState();
 }