chore: Update WoxHotkeyView to support custom colors

Wox-launcher · Sep 5, 2024 · 3a987b3 · 3a987b3
1 parent 0a1033a
commit 3a987b3
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 19 deletions.
diff --git a/Wox.UI.Flutter/wox/lib/components/wox_hotkey_view.dart b/Wox.UI.Flutter/wox/lib/components/wox_hotkey_view.dart
@@ -4,17 +4,41 @@ import 'package:hotkey_manager/hotkey_manager.dart';
 
 class WoxHotkeyView extends StatelessWidget {
   final HotKey hotkey;
+  final Color backgroundColor;
+  final Color borderColor;
+  final Color textColor;
 
-  const WoxHotkeyView({super.key, required this.hotkey});
+  const WoxHotkeyView({
+    super.key,
+    required this.hotkey,
+    required this.backgroundColor,
+    required this.borderColor,
+    required this.textColor,
+  });
 
-  Widget buildSingleView(String key) {
+  Widget buildSingleKey(String key) {
     return Container(
-      constraints: BoxConstraints.tight(const Size(24, 24)),
-      decoration: BoxDecoration(color: Colors.grey[200], border: Border.all(color: Colors.grey[400]!), borderRadius: BorderRadius.circular(5)),
+      constraints: BoxConstraints.tight(const Size(28, 22)),
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        border: Border.all(color: borderColor),
+        borderRadius: BorderRadius.circular(4),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.1),
+            blurRadius: 2,
+            offset: const Offset(0, 1),
+          ),
+        ],
+      ),
       child: Center(
         child: Text(
           key,
-          style: const TextStyle(fontSize: 10),
+          style: TextStyle(
+            fontSize: 11,
+            fontWeight: FontWeight.w500,
+            color: textColor,
+          ),
         ),
       ),
     );
@@ -92,16 +116,13 @@ class WoxHotkeyView extends StatelessWidget {
   Widget build(BuildContext context) {
     var hotkeyWidgets = <Widget>[];
     if (hotkey.modifiers != null) {
-      hotkeyWidgets.addAll(hotkey.modifiers!.map((o) => buildSingleView(getModifierName(o))));
+      hotkeyWidgets.addAll(hotkey.modifiers!.map((o) => buildSingleKey(getModifierName(o))));
     }
-    hotkeyWidgets.add(buildSingleView(getKeyName(hotkey.key)));
+    hotkeyWidgets.add(buildSingleKey(getKeyName(hotkey.key)));
 
-    return Row(children: [
-      for (final widget in hotkeyWidgets)
-        Padding(
-          padding: const EdgeInsets.only(left: 10.0),
-          child: widget,
-        )
-    ]);
+    return Wrap(
+      spacing: 4,
+      children: hotkeyWidgets,
+    );
   }
 }
diff --git a/Wox.UI.Flutter/wox/lib/components/wox_list_item_view.dart b/Wox.UI.Flutter/wox/lib/components/wox_list_item_view.dart
@@ -78,7 +78,12 @@ class WoxListItemView extends StatelessWidget {
                 else if (tail.type == WoxQueryResultTailTypeEnum.WOX_QUERY_RESULT_TAIL_TYPE_HOTKEY.code && tail.hotkey != null)
                   Padding(
                     padding: const EdgeInsets.only(left: 10.0),
-                    child: WoxHotkeyView(hotkey: tail.hotkey!),
+                    child: WoxHotkeyView(
+                      hotkey: tail.hotkey!,
+                      backgroundColor: isActive ? fromCssColor(woxTheme.resultItemActiveBackgroundColor) : fromCssColor(woxTheme.actionContainerBackgroundColor),
+                      borderColor: fromCssColor(isActive ? woxTheme.resultItemActiveTailTextColor : woxTheme.resultItemTailTextColor),
+                      textColor: fromCssColor(isActive ? woxTheme.resultItemActiveTailTextColor : woxTheme.resultItemTailTextColor),
+                    ),
                   )
                 else if (tail.type == WoxQueryResultTailTypeEnum.WOX_QUERY_RESULT_TAIL_TYPE_IMAGE.code && tail.image != null && tail.image!.imageData.isNotEmpty)
                   Padding(
@@ -144,9 +149,7 @@ class WoxListItemView extends StatelessWidget {
                   title.value,
                   style: TextStyle(
                     fontSize: 16,
-                    color: isAction()
-                        ? fromCssColor(isActive ? woxTheme.actionItemActiveFontColor : woxTheme.actionItemFontColor)
-                        : fromCssColor(isActive ? woxTheme.resultItemActiveTitleColor : woxTheme.resultItemTitleColor),
+                    color: isAction() ? fromCssColor(isActive ? woxTheme.actionItemActiveFontColor : woxTheme.actionItemFontColor) : fromCssColor(isActive ? woxTheme.resultItemActiveTitleColor : woxTheme.resultItemTitleColor),
                   ),
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,

diff --git a/Wox.UI.Flutter/wox/lib/modules/launcher/views/wox_query_toolbar_view.dart b/Wox.UI.Flutter/wox/lib/modules/launcher/views/wox_query_toolbar_view.dart
@@ -23,7 +23,13 @@ class WoxQueryToolbarView extends GetView<WoxLauncherController> {
     return Row(
       children: [
         Text(action.name.value, style: TextStyle(color: fromCssColor(controller.woxTheme.value.toolbarFontColor))),
-        WoxHotkeyView(hotkey: hotkey!),
+        const SizedBox(width: 8),
+        WoxHotkeyView(
+          hotkey: hotkey!,
+          backgroundColor: fromCssColor(controller.woxTheme.value.toolbarBackgroundColor),
+          borderColor: fromCssColor(controller.woxTheme.value.toolbarFontColor),
+          textColor: fromCssColor(controller.woxTheme.value.toolbarFontColor),
+        )
       ],
     );
   }