Optimize toolbar and result view components

Added toolbar tips using reactive variable and optimized redundant code in result view. Improved toolbar aesthetics with shadow support and made minor refactoring.
Wox-launcher · Sep 9, 2024 · b9f55f8 · b9f55f8
1 parent 7a5c62e
commit b9f55f8
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 43 deletions.
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
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:from_css_color/from_css_color.dart';
 import 'package:get/get.dart';
-import 'package:hotkey_manager/hotkey_manager.dart';
 import 'package:uuid/v4.dart';
 import 'package:wox/components/wox_image_view.dart';
 import 'package:wox/entity/wox_image.dart';

diff --git a/Wox.UI.Flutter/wox/lib/modules/launcher/views/wox_launcher_view.dart b/Wox.UI.Flutter/wox/lib/modules/launcher/views/wox_launcher_view.dart
@@ -21,21 +21,27 @@ class WoxLauncherView extends GetView<WoxLauncherController> {
           },
           child: Column(
             children: [
-              Padding(
-                padding: EdgeInsets.only(
-                  top: controller.woxTheme.value.appPaddingTop.toDouble(),
-                  right: controller.woxTheme.value.appPaddingRight.toDouble(),
-                  bottom: controller.woxTheme.value.appPaddingBottom.toDouble(),
-                  left: controller.woxTheme.value.appPaddingLeft.toDouble(),
-                ),
-                child: const Column(
-                  children: [
-                    WoxQueryBoxView(),
-                    WoxQueryResultView(),
-                  ],
+              Expanded(
+                child: Padding(
+                  padding: EdgeInsets.only(
+                    top: controller.woxTheme.value.appPaddingTop.toDouble(),
+                    right: controller.woxTheme.value.appPaddingRight.toDouble(),
+                    bottom: controller.woxTheme.value.appPaddingBottom.toDouble(),
+                    left: controller.woxTheme.value.appPaddingLeft.toDouble(),
+                  ),
+                  child: const Column(
+                    children: [
+                      WoxQueryBoxView(),
+                      Expanded(child: WoxQueryResultView()),
+                    ],
+                  ),
                 ),
               ),
-              controller.results.isNotEmpty ? const WoxQueryToolbarView() : const SizedBox(),
+              if (controller.results.isNotEmpty)
+                const SizedBox(
+                  height: 40,
+                  child: WoxQueryToolbarView(),
+                ),
             ],
           ),
         ),

diff --git a/Wox.UI.Flutter/wox/lib/modules/launcher/views/wox_query_result_view.dart b/Wox.UI.Flutter/wox/lib/modules/launcher/views/wox_query_result_view.dart
@@ -49,6 +49,7 @@ class WoxQueryResultView extends GetView<WoxLauncherController> {
                 itemBuilder: (context, index) {
                   WoxResultAction woxResultAction = controller.geActionByIndex(index);
                   return WoxListItemView(
+                    key: ValueKey(woxResultAction.id),
                     woxTheme: controller.woxTheme.value,
                     icon: woxResultAction.icon,
                     title: woxResultAction.name,
@@ -95,12 +96,7 @@ class WoxQueryResultView extends GetView<WoxLauncherController> {
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.start,
                     crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text("Actions", style: TextStyle(color: fromCssColor(controller.woxTheme.value.actionContainerHeaderFontColor), fontSize: 16.0)),
-                      const Divider(),
-                      getActionListView(),
-                      getActionQueryBox()
-                    ],
+                    children: [Text("Actions", style: TextStyle(color: fromCssColor(controller.woxTheme.value.actionContainerHeaderFontColor), fontSize: 16.0)), const Divider(), getActionListView(), getActionQueryBox()],
                   ),
                 ),
               ),
@@ -190,12 +186,10 @@ class WoxQueryResultView extends GetView<WoxLauncherController> {
                   controller.toggleActionPanel(const UuidV4().generate());
                   return KeyEventResult.handled;
                 case LogicalKeyboardKey.arrowDown:
-                  controller.changeActionScrollPosition(
-                      const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_DOWN.code);
+                  controller.changeActionScrollPosition(const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_DOWN.code);
                   return KeyEventResult.handled;
                 case LogicalKeyboardKey.arrowUp:
-                  controller.changeActionScrollPosition(
-                      const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_UP.code);
+                  controller.changeActionScrollPosition(const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_UP.code);
                   return KeyEventResult.handled;
                 case LogicalKeyboardKey.enter:
                   controller.executeActiveAction(const UuidV4().generate());
@@ -206,12 +200,10 @@ class WoxQueryResultView extends GetView<WoxLauncherController> {
             if (event is KeyRepeatEvent) {
               switch (event.logicalKey) {
                 case LogicalKeyboardKey.arrowDown:
-                  controller.changeActionScrollPosition(
-                      const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_DOWN.code);
+                  controller.changeActionScrollPosition(const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_DOWN.code);
                   return KeyEventResult.handled;
                 case LogicalKeyboardKey.arrowUp:
-                  controller.changeActionScrollPosition(
-                      const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_UP.code);
+                  controller.changeActionScrollPosition(const UuidV4().generate(), WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code, WoxDirectionEnum.WOX_DIRECTION_UP.code);
                   return KeyEventResult.handled;
               }
             }

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
@@ -10,7 +10,16 @@ class WoxQueryToolbarView extends GetView<WoxLauncherController> {
   const WoxQueryToolbarView({super.key});
 
   Widget leftTip() {
-    return const SizedBox();
+    return Obx(() {
+      final tipText = controller.toolbarTip.value;
+      if (tipText.isEmpty) {
+        return const SizedBox();
+      }
+      return Text(
+        tipText,
+        style: TextStyle(color: fromCssColor(controller.woxTheme.value.toolbarFontColor)),
+      );
+    });
   }
 
   Widget rightTip() {
@@ -42,7 +51,13 @@ class WoxQueryToolbarView extends GetView<WoxLauncherController> {
         child: Container(
           decoration: BoxDecoration(
             color: fromCssColor(controller.woxTheme.value.toolbarBackgroundColor),
-            //add some shadow to the top of the toolbar
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.1),
+                blurRadius: 4,
+                offset: Offset(0, 2),
+              ),
+            ],
           ),
           child: Padding(
             padding: EdgeInsets.only(left: controller.woxTheme.value.toolbarPaddingLeft.toDouble(), right: controller.woxTheme.value.toolbarPaddingRight.toDouble()),

diff --git a/Wox.UI.Flutter/wox/lib/modules/launcher/wox_launcher_controller.dart b/Wox.UI.Flutter/wox/lib/modules/launcher/wox_launcher_controller.dart
@@ -78,6 +78,9 @@ class WoxLauncherController extends GetxController {
   final isInSettingView = false.obs;
   var positionBeforeOpenSetting = const Offset(0, 0);
 
+  /// toolbar related variables
+  final toolbarTip = ''.obs;
+
   /// Triggered when received query results from the server.
   void onReceivedQueryResults(List<WoxQueryResult> receivedResults) {
     if (receivedResults.isEmpty) {
@@ -424,9 +427,7 @@ class WoxLauncherController extends GetxController {
       if (activeResultIndex.value < prevResultIndex) {
         resultScrollerController.jumpTo(0);
       } else {
-        bool shouldJump = deviceType == WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code
-            ? isResultItemAtBottom(activeResultIndex.value - 1)
-            : !isResultItemAtBottom(results.length - 1);
+        bool shouldJump = deviceType == WoxEventDeviceTypeEnum.WOX_EVENT_DEVEICE_TYPE_KEYBOARD.code ? isResultItemAtBottom(activeResultIndex.value - 1) : !isResultItemAtBottom(results.length - 1);
         if (shouldJump) {
           resultScrollerController.jumpTo(resultScrollerController.offset.ceil() + WoxThemeUtil.instance.getResultItemHeight() * (activeResultIndex.value - prevResultIndex).abs());
         }
@@ -519,8 +520,7 @@ class WoxLauncherController extends GetxController {
     RenderBox? renderBox = resultGlobalKeys[index].currentContext?.findRenderObject() as RenderBox?;
     if (renderBox == null) return false;
 
-    if (renderBox.localToGlobal(Offset.zero).dy.ceil() >=
-        WoxThemeUtil.instance.getQueryBoxHeight() + WoxThemeUtil.instance.getResultListViewHeightByCount(MAX_LIST_VIEW_ITEM_COUNT - 1)) {
+    if (renderBox.localToGlobal(Offset.zero).dy.ceil() >= WoxThemeUtil.instance.getQueryBoxHeight() + WoxThemeUtil.instance.getResultListViewHeightByCount(MAX_LIST_VIEW_ITEM_COUNT - 1)) {
       return true;
     }
     return false;
@@ -898,4 +898,8 @@ class WoxLauncherController extends GetxController {
 
     queryIcon.value = WoxImage.empty();
   }
+
+  void showToolbarTips(String tip) {
+    toolbarTip.value = tip;
+  }
 }
diff --git a/Wox/plugin/system/indicator.go b/Wox/plugin/system/indicator.go
@@ -3,11 +3,12 @@ package system
 import (
 	"context"
 	"fmt"
-	"github.com/google/uuid"
-	"github.com/samber/lo"
 	"wox/i18n"
 	"wox/plugin"
 	"wox/share"
+
+	"github.com/google/uuid"
+	"github.com/samber/lo"
 )
 
 var indicatorIcon = plugin.NewWoxImageBase64(`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACVklEQVR4nO2cQUrdUBSG30aae1Md5RZUcFSecCaOWtfRtw+ltHYB2g2cXWgp4kTX4CKqzlOS+AqVQqG+l//05fvgzIQcv48kjwzubAYAAAAAAAAAAAAAAAAAsBZSbq5TXdoXTy5Xm7SLjJUIqIfZpF1kLP+Bt8ff/3nSioNE2EVGJAkp0C4yIklIgXaREUlCCrSLjEgSUqBdZESSkALtIiOShBRol7Xyqi5HVd18S3XzuMrf+um/muaxqpvLqi7vpTGqXD7qZZRQU+XmRHZn9Ets77S7iy/t/PymNb+b5MzPb9rdxWnvoo+iuFOGx1TpF1ELsSCzt/g83Cm5XIweJOXy0F384OutXIQFmc7F8Ngq9+MHeXpmqiVYsFl6CRVka/9w9Jfp1v7hX/d4/jcv2fNP1wsbZMqTCHInj0AQ14sniOtlE8T1ggnieqkECSDSCKKXZwTRCzOC6CUZQfRijCB6GRZg+HTi+ggEcb14grheNkFcL5ggrpdKkAAijSB6eUYQvTAjiF6SEUQvxgiil2EBhk8nro9AENeLJ4jrZRPE9YIJ4nqpBAkg0giil2cE0QszguglGUH0YowgehkWYPh04voIBHG9eIK4XjZBXC+YIK6XSpAAIm2TgygODkgBDioIG2TKk2RBng6fmfKxTPZs5me/Dp/5MXqQ7gS17uLdkURqERZk9j580h3P1B3S1V98e6ePMuU7ZX52O8RYHmD2+s270YP0UXJzon65pnDTHEti/Han5HKxfKdMcnJ56BzI7gwAAAAAAAAAAAAAAAAAAJitgZ+lmGHcVGx/0gAAAABJRU5ErkJggg==`)
@@ -62,7 +63,7 @@ func (i *IndicatorPlugin) Query(ctx context.Context, query plugin.Query) []plugi
 				Icon:     pluginInstance.Metadata.GetIconOrDefault(pluginInstance.PluginDirectory, indicatorIcon),
 				Actions: []plugin.QueryResultAction{
 					{
-						Name:                   "activate",
+						Name:                   "i18n:plugin_indicator_activate",
 						PreventHideAfterAction: true,
 						Action: func(ctx context.Context, actionContext plugin.ActionContext) {
 							i.api.ChangeQuery(ctx, share.PlainQuery{
@@ -84,7 +85,7 @@ func (i *IndicatorPlugin) Query(ctx context.Context, query plugin.Query) []plugi
 					Icon:     pluginInstance.Metadata.GetIconOrDefault(pluginInstance.PluginDirectory, indicatorIcon),
 					Actions: []plugin.QueryResultAction{
 						{
-							Name:                   "activate",
+							Name:                   "i18n:plugin_indicator_activate",
 							PreventHideAfterAction: true,
 							Action: func(ctx context.Context, actionContext plugin.ActionContext) {
 								i.api.ChangeQuery(ctx, share.PlainQuery{

diff --git a/Wox/resource/lang/en_US.json b/Wox/resource/lang/en_US.json
@@ -15,7 +15,8 @@
   "plugin_clipboard_primary_action": "Primary action",
   "plugin_clipboard_primary_action_copy_to_clipboard": "Copy to clipboard",
   "plugin_clipboard_primary_action_paste_to_active_app": "Paste to active app",
-  "plugin_indicator_activate_plugin": "Activate %s plugin",
+  "plugin_indicator_activate": "Activate",
+  "plugin_indicator_activate_plugin": "Activate the %s plugin",
   "plugin_sys_empty_trash": "Empty Trash",
   "plugin_sys_lock_computer": "Lock PC",
   "plugin_sys_execute": "Execute",

diff --git a/Wox/resource/lang/zh_CN.json b/Wox/resource/lang/zh_CN.json
@@ -15,6 +15,7 @@
   "plugin_clipboard_primary_action": "主要操作",
   "plugin_clipboard_primary_action_copy_to_clipboard": "复制到剪贴板",
   "plugin_clipboard_primary_action_paste_to_active_app": "粘贴到活动应用程序",
+  "plugin_indicator_activate": "激活",
   "plugin_indicator_activate_plugin": "激活%s插件",
   "plugin_sys_empty_trash": "清空回收站",
   "plugin_sys_lock_computer": "锁定电脑",

diff --git a/Wox/ui/http.go b/Wox/ui/http.go
@@ -4,15 +4,16 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
-	"github.com/olahol/melody"
-	"github.com/rs/cors"
-	"github.com/samber/lo"
 	"net/http"
 	"strings"
 	"wox/plugin"
 	"wox/setting/definition"
 	"wox/ui/dto"
 	"wox/util"
+
+	"github.com/olahol/melody"
+	"github.com/rs/cors"
+	"github.com/samber/lo"
 )
 
 var m *melody.Melody