From bba3b5d3d10d94e638b77059216ae0caf28fe14b Mon Sep 17 00:00:00 2001
From: debuggerx <dx8917312@163.com>
Date: Tue, 28 Sep 2021 18:35:35 +0800
Subject: [PATCH] feat: add dde_button widget.

---
 app/lib/constants/constants.dart       | 12 ++++--
 app/lib/pages/footer.dart              |  5 ++-
 app/lib/pages/gesture_editor.dart      | 68 ++++++++++++++++++----------------
 app/lib/pages/local_manager.dart       | 56 +++++++++++++++++-----------
 app/lib/pages/market.dart              | 53 +++++++++++++++-----------
 app/lib/themes/dark.dart               | 11 ++++++
 app/lib/themes/light.dart              | 11 ++++++
 app/lib/widgets/dde_button.dart        | 54 +++++++++++++++++++++++++++
 app/lib/widgets/help_button.dart       | 28 ++++++++++++++
 app/lib/widgets/language_switcher.dart |  3 +-
 app/lib/widgets/theme_switcher.dart    |  4 +-
 app/pubspec.yaml                       |  1 +
 app/resources/langs/en.json            | 10 ++++-
 app/resources/langs/zh-CN.json         | 10 ++++-
 14 files changed, 240 insertions(+), 86 deletions(-)
 create mode 100644 app/lib/widgets/dde_button.dart
 create mode 100644 app/lib/widgets/help_button.dart

diff --git a/app/lib/constants/constants.dart b/app/lib/constants/constants.dart
index 30e9c29..f55a401 100644
--- a/app/lib/constants/constants.dart
+++ b/app/lib/constants/constants.dart
@@ -1,8 +1,10 @@
 import 'package:flutter/cupertino.dart';
 
-const double localManagerPanelWidth = 200;
+/// [UOS设计指南](https://docs.uniontech.com/zh/content/t_dbG3kBK9iDf9B963ok)
 
-const double marketPanelWidth = 200;
+const double localManagerPanelWidth = 260;
+
+const double marketPanelWidth = 300;
 
 const shortDuration = const Duration(milliseconds: 100);
 
@@ -12,7 +14,11 @@ const longDuration = const Duration(milliseconds: 500);
 
 const minWindowSize = const Size(800, 600);
 
+const double defaultBorderRadius = 8;
+
+const double defaultButtonHeight = 36;
+
 enum PanelType {
   local_manager,
   market,
-}
\ No newline at end of file
+}
diff --git a/app/lib/pages/footer.dart b/app/lib/pages/footer.dart
index 38a1f95..a4eaaf3 100644
--- a/app/lib/pages/footer.dart
+++ b/app/lib/pages/footer.dart
@@ -1,4 +1,5 @@
 import 'package:dde_gesture_manager/extensions.dart';
+import 'package:dde_gesture_manager/widgets/help_button.dart';
 import 'package:dde_gesture_manager/widgets/language_switcher.dart';
 import 'package:dde_gesture_manager/widgets/theme_switcher.dart';
 import 'package:dde_gesture_manager/widgets/version_checker.dart';
@@ -27,9 +28,9 @@ class _FooterState extends State<Footer> {
             Row(
               children: [
                 LanguageSwitcher(),
-                Container(width: 6),
                 ThemeSwitcher(),
-              ],
+                HelpButton(),
+              ].map((e) => Padding(padding: EdgeInsets.only(right: 6), child: e)).toList(),
             )
           ],
         ),
diff --git a/app/lib/pages/gesture_editor.dart b/app/lib/pages/gesture_editor.dart
index f5ae806..3041209 100644
--- a/app/lib/pages/gesture_editor.dart
+++ b/app/lib/pages/gesture_editor.dart
@@ -1,9 +1,10 @@
 import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:dde_gesture_manager/extensions.dart';
 import 'package:dde_gesture_manager/models/content_layout.provider.dart';
 import 'package:dde_gesture_manager/utils/helper.dart';
+import 'package:dde_gesture_manager/widgets/dde_button.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:dde_gesture_manager/extensions.dart';
 
 class GestureEditor extends StatelessWidget {
   const GestureEditor({Key? key}) : super(key: key);
@@ -19,42 +20,47 @@ class GestureEditor extends StatelessWidget {
             color: context.t.backgroundColor,
             borderRadius: BorderRadius.circular(10),
           ),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  Visibility(
-                    visible: layoutProvider.localManagerOpened == false,
-                    child: IconButton(
-                      onPressed: () => H.openPanel(context, PanelType.local_manager),
-                      icon: Icon(
-                        CupertinoIcons.square_list,
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Visibility(
+                      visible: layoutProvider.localManagerOpened == false,
+                      child: DButton(
+                        width: defaultButtonHeight,
+                        onTap: () => H.openPanel(context, PanelType.local_manager),
+                        child: Icon(
+                          CupertinoIcons.square_list,
+                        ),
                       ),
                     ),
-                  ),
-                  Visibility(
-                    visible: layoutProvider.marketOpened == false,
-                    child: IconButton(
-                      onPressed: () => H.openPanel(context, PanelType.market),
-                      icon: Icon(
-                        CupertinoIcons.cart,
+                    Visibility(
+                      visible: layoutProvider.marketOpened == false,
+                      child: DButton(
+                        width: defaultButtonHeight,
+                        onTap: () => H.openPanel(context, PanelType.market),
+                        child: Icon(
+                          CupertinoIcons.cart,
+                        ),
                       ),
                     ),
-                  ),
-                ],
-              ),
-              Container(
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    Text("<编辑器区域"),
-                    Text("编辑器区域>"),
                   ],
                 ),
-              ),
-            ],
+                Container(
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text("<编辑器区域"),
+                      Text("编辑器区域>"),
+                    ],
+                  ),
+                ),
+              ],
+            ),
           ),
         ),
       ),
diff --git a/app/lib/pages/local_manager.dart b/app/lib/pages/local_manager.dart
index 78f4b85..ae95fba 100644
--- a/app/lib/pages/local_manager.dart
+++ b/app/lib/pages/local_manager.dart
@@ -1,9 +1,11 @@
+import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:dde_gesture_manager/extensions.dart';
 import 'package:dde_gesture_manager/models/content_layout.provider.dart';
+import 'package:dde_gesture_manager/widgets/dde_button.dart';
 import 'package:flutter/animation.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:dde_gesture_manager/extensions.dart';
-import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:flutter/painting.dart';
 
 class LocalManager extends StatelessWidget {
   const LocalManager({
@@ -24,29 +26,39 @@ class LocalManager extends StatelessWidget {
         child: Material(
           color: context.t.backgroundColor,
           elevation: isOpen ? 10 : 0,
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: [
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  Flexible(
-                    child: Center(
-                      child: Text(
-                        "本地配置",
-                        textAlign: TextAlign.center,
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Container(width: defaultButtonHeight),
+                    Flexible(
+                      child: Center(
+                        child: Text(
+                          "本地方案管理",
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
                       ),
                     ),
-                  ),
-                  IconButton(
-                    onPressed: () => context.read<ContentLayoutProvider>().setProps(localManagerOpened: !isOpen),
-                    icon: Icon(
-                      CupertinoIcons.chevron_left_2,
+                    DButton(
+                      width: defaultButtonHeight - 2,
+                      height: defaultButtonHeight - 2,
+                      onTap: () => context.read<ContentLayoutProvider>().setProps(localManagerOpened: !isOpen),
+                      child: Icon(
+                        CupertinoIcons.chevron_left_2,
+                        size: 20,
+                      ),
                     ),
-                  ),
-                ],
-              ),
-            ],
+                  ],
+                ),
+              ],
+            ),
           ),
         ),
       ),
diff --git a/app/lib/pages/market.dart b/app/lib/pages/market.dart
index 16fc90c..98f02bd 100644
--- a/app/lib/pages/market.dart
+++ b/app/lib/pages/market.dart
@@ -1,8 +1,9 @@
 import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:dde_gesture_manager/extensions.dart';
 import 'package:dde_gesture_manager/models/content_layout.provider.dart';
+import 'package:dde_gesture_manager/widgets/dde_button.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:dde_gesture_manager/extensions.dart';
 
 class Market extends StatelessWidget {
   const Market({
@@ -23,29 +24,39 @@ class Market extends StatelessWidget {
         child: Material(
           color: context.t.backgroundColor,
           elevation: isOpen ? 10 : 0,
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: [
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  IconButton(
-                    onPressed: () => context.read<ContentLayoutProvider>().setProps(marketOpened: !isOpen),
-                    icon: Icon(
-                      CupertinoIcons.chevron_right_2,
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    DButton(
+                      width: defaultButtonHeight - 2,
+                      height: defaultButtonHeight - 2,
+                      onTap: () => context.read<ContentLayoutProvider>().setProps(marketOpened: !isOpen),
+                      child: Icon(
+                        CupertinoIcons.chevron_right_2,
+                        size: 20,
+                      ),
                     ),
-                  ),
-                  Flexible(
-                    child: Center(
-                      child: Text(
-                        "配置市场",
-                        textAlign: TextAlign.center,
+                    Flexible(
+                      child: Center(
+                        child: Text(
+                          "方案市场",
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
                       ),
                     ),
-                  ),
-                ],
-              ),
-            ],
+                    Container(width: defaultButtonHeight),
+                  ],
+                ),
+              ],
+            ),
           ),
         ),
       ),
diff --git a/app/lib/themes/dark.dart b/app/lib/themes/dark.dart
index 39f81d5..719fc94 100644
--- a/app/lib/themes/dark.dart
+++ b/app/lib/themes/dark.dart
@@ -4,4 +4,15 @@ var darkTheme = ThemeData.dark().copyWith(
   primaryColor: Colors.grey,
   scaffoldBackgroundColor: Color(0xff252525),
   backgroundColor: Color(0xff282828),
+  iconTheme: IconThemeData(
+    color: Color(0xffc0c6d4),
+  ),
+  textTheme: ThemeData.dark().textTheme.copyWith(
+        headline1: TextStyle(
+          color: Color(0xffc0c6d4),
+        ),
+        bodyText2: TextStyle(
+          color: Color(0xffc0c6d4),
+        ),
+      ),
 );
diff --git a/app/lib/themes/light.dart b/app/lib/themes/light.dart
index a10c4b4..3911633 100644
--- a/app/lib/themes/light.dart
+++ b/app/lib/themes/light.dart
@@ -4,4 +4,15 @@ var lightTheme = ThemeData.light().copyWith(
   primaryColor: Colors.blue,
   scaffoldBackgroundColor: Color(0xfff8f8f8),
   backgroundColor: Color(0xffffffff),
+  iconTheme: IconThemeData(
+    color: Color(0xff414d68),
+  ),
+  textTheme: ThemeData.light().textTheme.copyWith(
+        headline1: TextStyle(
+          color: Color(0xff414d68),
+        ),
+        bodyText2: TextStyle(
+          color: Color(0xff414d68),
+        ),
+      ),
 );
diff --git a/app/lib/widgets/dde_button.dart b/app/lib/widgets/dde_button.dart
new file mode 100644
index 0000000..70b87b9
--- /dev/null
+++ b/app/lib/widgets/dde_button.dart
@@ -0,0 +1,54 @@
+import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:flutter/material.dart';
+import 'package:glass_kit/glass_kit.dart';
+
+class DButton extends StatefulWidget {
+  final double width;
+  final double height;
+  final Widget child;
+  final GestureTapCallback? onTap;
+
+  const DButton({
+    Key? key,
+    required this.width,
+    this.height = defaultButtonHeight,
+    required this.child,
+    this.onTap,
+  }) : super(key: key);
+
+  @override
+  State<DButton> createState() => _DButtonState();
+}
+
+class _DButtonState extends State<DButton> {
+  bool _hovering = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: widget.onTap,
+      child: GlassContainer(
+        width: widget.width,
+        height: widget.height,
+        gradient: LinearGradient(
+          colors: [Colors.white.withOpacity(_hovering ? 0.1 : 0.15), Colors.white.withOpacity(0.1)],
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+        ),
+        borderColor: Color(0xff565656),
+        borderWidth: 1,
+        borderRadius: BorderRadius.circular(defaultBorderRadius),
+        child: MouseRegion(
+          onEnter: (event) => setState(() {
+            _hovering = true;
+          }),
+          onExit: (event) => setState(() {
+            _hovering = false;
+          }),
+          cursor: SystemMouseCursors.click,
+          child: Center(child: widget.child),
+        ),
+      ),
+    );
+  }
+}
diff --git a/app/lib/widgets/help_button.dart b/app/lib/widgets/help_button.dart
new file mode 100644
index 0000000..3c6e929
--- /dev/null
+++ b/app/lib/widgets/help_button.dart
@@ -0,0 +1,28 @@
+import 'package:dde_gesture_manager/extensions.dart';
+import 'package:flutter/material.dart';
+
+class HelpButton extends StatelessWidget {
+  const HelpButton({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {},
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: Tooltip(
+          message: LocaleKeys.help_tip.tr(),
+          child: Row(
+            children: [
+              Icon(Icons.help_outline, size: 20),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 3),
+                child: Text(LocaleKeys.help_label).tr(),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/app/lib/widgets/language_switcher.dart b/app/lib/widgets/language_switcher.dart
index 8e649de..50c7df1 100644
--- a/app/lib/widgets/language_switcher.dart
+++ b/app/lib/widgets/language_switcher.dart
@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:dde_gesture_manager/constants/sp_keys.dart';
 import 'package:dde_gesture_manager/constants/supported_locales.dart';
 import 'package:dde_gesture_manager/extensions.dart';
@@ -6,7 +7,6 @@ import 'package:dde_gesture_manager/utils/helper.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:collection/collection.dart';
 import 'package:window_manager/window_manager.dart';
 
 class LanguageSwitcher extends StatelessWidget {
@@ -18,6 +18,7 @@ class LanguageSwitcher extends StatelessWidget {
     var _supportedLocale = supportedLocales.firstWhereOrNull((element) => element == _locale);
 
     return PopupMenuButton<SupportedLocale>(
+    tooltip: LocaleKeys.language_tip.tr(),
       child: Row(
         children: [
           Icon(Icons.language_outlined, size: 20),
diff --git a/app/lib/widgets/theme_switcher.dart b/app/lib/widgets/theme_switcher.dart
index c15ef4a..a0f4df8 100644
--- a/app/lib/widgets/theme_switcher.dart
+++ b/app/lib/widgets/theme_switcher.dart
@@ -1,9 +1,9 @@
+import 'package:dde_gesture_manager/extensions.dart';
 import 'package:dde_gesture_manager/generated/locale_keys.g.dart';
 import 'package:dde_gesture_manager/models/configs.dart';
 import 'package:dde_gesture_manager/models/configs.provider.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:dde_gesture_manager/extensions.dart';
 
 class ThemeSwitcher extends StatelessWidget {
   const ThemeSwitcher({Key? key}) : super(key: key);
@@ -23,7 +23,7 @@ class ThemeSwitcher extends StatelessWidget {
         ],
       ),
       padding: EdgeInsets.zero,
-      tooltip: LocaleKeys.theme_label.tr(),
+      tooltip: LocaleKeys.theme_tip.tr(),
       itemBuilder: (BuildContext context) => [
         PopupMenuItem<BrightnessMode>(
           child: ListTile(
diff --git a/app/pubspec.yaml b/app/pubspec.yaml
index e326624..1f35e3f 100644
--- a/app/pubspec.yaml
+++ b/app/pubspec.yaml
@@ -36,6 +36,7 @@ dependencies:
   xdg_directories_web:
     path: 3rd_party/xdg_directories_web
   easy_localization: ^3.0.0
+  glass_kit: ^2.0.1
 
 dev_dependencies:
   flutter_test:
diff --git a/app/resources/langs/en.json b/app/resources/langs/en.json
index 9eacfe6..63aa5ee 100644
--- a/app/resources/langs/en.json
+++ b/app/resources/langs/en.json
@@ -3,7 +3,8 @@
     "label": "Theme",
     "dark": "Dark",
     "light": "Light",
-    "system": "System"
+    "system": "System",
+    "tip": "Choose a theme"
   },
   "version": {
     "current": "current version",
@@ -11,6 +12,11 @@
   },
   "app_name": "Gesture Manager for DDE",
   "language": {
-    "label": "Language"
+    "label": "Language",
+    "tip": "Choose a language"
+  },
+  "help": {
+    "label": "Help",
+    "tip": "Display help documentation"
   }
 }
\ No newline at end of file
diff --git a/app/resources/langs/zh-CN.json b/app/resources/langs/zh-CN.json
index 3e859cb..858e496 100644
--- a/app/resources/langs/zh-CN.json
+++ b/app/resources/langs/zh-CN.json
@@ -3,7 +3,8 @@
     "label": "主题",
     "dark": "深色",
     "light": "浅色",
-    "system": "跟随系统"
+    "system": "跟随系统",
+    "tip": "选择界面主题"
   },
   "version": {
     "current": "当前版本",
@@ -11,6 +12,11 @@
   },
   "app_name": "DDE手势管理器",
   "language": {
-    "label": "语言"
+    "label": "语言",
+    "tip": "选择语言"
+  },
+  "help": {
+    "label": "帮助",
+    "tip": "显示帮助文档"
   }
 }
\ No newline at end of file