Cleaned up icons + labels a bit (#5)

deephaven · Jul 2, 2024 · 74bb7cb · 74bb7cb
1 parent 2ab33ac
commit 74bb7cb
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -8,4 +8,4 @@ export const SELECT_CONNECTION_COMMAND = `${CONFIG_KEY}.selectConnection`;
 
 export const STATUS_BAR_DISCONNECTED_TEXT = 'Deephaven: Disconnected';
 export const STATUS_BAR_DISCONNECT_TEXT = 'Deephaven: Disconnect';
-export const STATUS_BAR_CONNECTING_TEXT = 'Deephaven: ...Connecting';
+export const STATUS_BAR_CONNECTING_TEXT = 'Deephaven: Connecting...';
diff --git a/src/extension.ts b/src/extension.ts
@@ -2,7 +2,7 @@ import * as vscode from 'vscode';
 import {
   ConnectionOption,
   createConnectStatusBarItem,
-  createConnectText,
+  createConnectTextAndTooltip,
   createConnectionOptions,
   createConnectionQuickPick,
   getTempDir,
@@ -51,7 +51,9 @@ export function activate(context: vscode.ExtensionContext) {
   function clearConnection() {
     selectedConnectionUrl = null;
     selectedDhService = null;
-    connectStatusBarItem.text = createConnectText(STATUS_BAR_DISCONNECTED_TEXT);
+    const { text, tooltip } = createConnectTextAndTooltip('disconnected');
+    connectStatusBarItem.text = text;
+    connectStatusBarItem.tooltip = tooltip;
     dhcServiceRegistry.clearCache();
   }
 
@@ -115,13 +117,20 @@ export function activate(context: vscode.ExtensionContext) {
       return;
     }
 
-    connectStatusBarItem.text = createConnectText(STATUS_BAR_CONNECTING_TEXT);
+    const { text, tooltip } = createConnectTextAndTooltip('connecting', option);
+    connectStatusBarItem.text = text;
+    connectStatusBarItem.tooltip = tooltip;
 
     selectedConnectionUrl = connectionUrl;
     selectedDhService = await dhcServiceRegistry.get(selectedConnectionUrl);
 
     if (selectedDhService.isInitialized || (await selectedDhService.initDh())) {
-      connectStatusBarItem.text = createConnectText(option.label);
+      const { text, tooltip } = createConnectTextAndTooltip(
+        'connected',
+        option
+      );
+      connectStatusBarItem.text = text;
+      connectStatusBarItem.tooltip = tooltip;
       outputChannel.appendLine(`Initialized: ${selectedConnectionUrl}`);
     } else {
       clearConnection();

diff --git a/src/util/uiUtils.ts b/src/util/uiUtils.ts
@@ -2,6 +2,7 @@ import * as vscode from 'vscode';
 import {
   ConnectionType,
   SELECT_CONNECTION_COMMAND,
+  STATUS_BAR_CONNECTING_TEXT,
   STATUS_BAR_DISCONNECTED_TEXT,
   STATUS_BAR_DISCONNECT_TEXT,
 } from '../common';
@@ -33,7 +34,7 @@ export async function createConnectionQuickPick(
   selectedUrl?: string | null
 ): Promise<ConnectionOption | DisconnectOption | undefined> {
   function padLabel(label: string, isSelected: boolean) {
-    return isSelected ? `$(circle-filled) ${label}` : `      ${label}`;
+    return isSelected ? `$(vm-connect) ${label}` : `$(blank) ${label}`;
   }
 
   const options: (ConnectionOption | DisconnectOption)[] = [
@@ -62,7 +63,9 @@ export function createConnectStatusBarItem() {
     100
   );
   statusBarItem.command = SELECT_CONNECTION_COMMAND;
-  statusBarItem.text = createConnectText(STATUS_BAR_DISCONNECTED_TEXT);
+  const { text, tooltip } = createConnectTextAndTooltip('disconnected');
+  statusBarItem.text = text;
+  statusBarItem.tooltip = tooltip;
   statusBarItem.show();
 
   return statusBarItem;
@@ -73,7 +76,7 @@ export function createConnectStatusBarItem() {
  * @param type The type of connection
  */
 export function createConnectionOption(type: ConnectionType) {
-  return (serverUrl: string) => {
+  return (serverUrl: string): ConnectionOption => {
     const url = new URL(serverUrl ?? '');
     const label = `${type}: ${url.hostname}:${url.port}`;
 
@@ -95,11 +98,38 @@ export function createConnectionOptions(): ConnectionOption[] {
 }
 
 /**
- * Create display text for the connection status bar item.
- * @param connectionDisplay The connection display text
+ * Create display text and tooltip for the connection status bar item.
+ * @param status The connection status
+ * @param option The connection option
  */
-export function createConnectText(connectionDisplay: string) {
-  return `$(debug-disconnect) ${connectionDisplay.trim()}`;
+export function createConnectTextAndTooltip(
+  status: 'connecting' | 'connected' | 'disconnected',
+  option?: ConnectionOption
+): { text: string; tooltip: string } {
+  const icon = {
+    connecting: '$(sync~spin)',
+    connected: '$(vm-connect)',
+    disconnected: '$(debug-disconnect)',
+  }[status];
+
+  const label = {
+    connecting: STATUS_BAR_CONNECTING_TEXT,
+    connected: option?.label,
+    disconnected: STATUS_BAR_DISCONNECTED_TEXT,
+  }[status];
+
+  const tooltip = {
+    connecting: `Connecting to ${option?.url}...`,
+    connected: `Connected to ${option?.url}`,
+    disconnected: 'Connect to Deephaven',
+  }[status];
+
+  const text = `${icon} ${label}`;
+
+  return {
+    text,
+    tooltip,
+  };
 }
 
 // Copied from @deephaven/console `ConsoleUtils`