feat(connections): shorten the tab names

MetaCubeX · Sep 13, 2023 · 1a37a10 · 1a37a10
1 parent 716fc2e
commit 1a37a10
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/src/components/ConnectionsTableDetailsModal.tsx b/src/components/ConnectionsTableDetailsModal.tsx
@@ -5,7 +5,10 @@ export const ConnectionsTableDetailsModal: Component<{
   selectedConnectionID?: string
 }> = (props) => {
   return (
-    <dialog id="connections-table-details-modal" class="modal">
+    <dialog
+      id="connections-table-details-modal"
+      class="modal modal-bottom sm:modal-middle"
+    >
       <div class="modal-box">
         <Show when={props.selectedConnectionID}>
           <pre>

diff --git a/src/components/ConnectionsTableOrderingModal.tsx b/src/components/ConnectionsTableOrderingModal.tsx
@@ -95,8 +95,11 @@ export const ConnectionsTableOrderingModal = (props: {
   }
 
   return (
-    <dialog id="connections-table-ordering-modal" class="modal">
-      <div class="modal-box w-80" onContextMenu={(e) => e.preventDefault()}>
+    <dialog
+      id="connections-table-ordering-modal"
+      class="modal modal-bottom sm:modal-middle"
+    >
+      <div class="modal-box" onContextMenu={(e) => e.preventDefault()}>
         <DragDropProvider
           onDragStart={onDragStart}
           onDragEnd={onDragEnd as DragEventHandler}
@@ -115,15 +118,17 @@ export const ConnectionsTableOrderingModal = (props: {
           </DragOverlay>
         </DragDropProvider>
 
-        <Button
-          class="btn-neutral btn-sm ml-auto mt-4 block"
-          onClick={() => {
-            props.onOrderChange(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER)
-            props.onVisibleChange(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY)
-          }}
-        >
-          {t('reset')}
-        </Button>
+        <div class="modal-action">
+          <Button
+            class="btn-neutral btn-sm ml-auto mt-4 block"
+            onClick={() => {
+              props.onOrderChange(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER)
+              props.onVisibleChange(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY)
+            }}
+          >
+            {t('reset')}
+          </Button>
+        </div>
       </div>
 
       <form method="dialog" class="modal-backdrop">

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -68,7 +68,6 @@ export default {
   switchEndpoint: 'Switch Endpoint',
   switchLanguage: 'Switch Language',
   latencyTestTimeoutDuration: 'Latency Test Timeout Duration',
-  closedConnections: 'Closed Connections',
   all: 'All',
   sequence: 'Sequence',
   payload: 'Payload',
@@ -78,4 +77,6 @@ export default {
   global: 'Global',
   rule: 'Rule',
   direct: 'Direct',
+  active: 'Active',
+  closed: 'Closed',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -68,7 +68,6 @@ export default {
   switchEndpoint: '切换后端',
   switchLanguage: '切换语言',
   latencyTestTimeoutDuration: '测速超时时间',
-  closedConnections: '已关闭连接',
   all: '全部',
   sequence: '序列号',
   payload: '内容',
@@ -78,4 +77,6 @@ export default {
   global: '全局',
   rule: '规则',
   direct: '直连',
+  active: '活动',
+  closed: '已关闭',
 }
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
@@ -2,13 +2,13 @@ import { writeClipboard } from '@solid-primitives/clipboard'
 import { useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
 import {
-  IconCircleX,
-  IconInfoCircle,
+  IconInfoSmall,
   IconPlayerPause,
   IconPlayerPlay,
   IconSettings,
   IconSortAscending,
   IconSortDescending,
+  IconX,
   IconZoomInFilled,
   IconZoomOutFilled,
 } from '@tabler/icons-solidjs'
@@ -113,7 +113,7 @@ export default () => {
               modal?.showModal()
             }}
           >
-            <IconInfoCircle size="16" />
+            <IconInfoSmall size="16" />
           </Button>
         </div>
       ),
@@ -131,7 +131,7 @@ export default () => {
             class="btn-circle btn-xs"
             onClick={() => closeSingleConnectionAPI(row.original.id)}
           >
-            <IconCircleX size="16" />
+            <IconX size="16" />
           </Button>
         </div>
       ),
@@ -293,12 +293,12 @@ export default () => {
   const tabs = createMemo(() => [
     {
       type: ActiveTab.activeConnections,
-      name: t('activeConnections'),
+      name: t('active'),
       count: activeConnections().length,
     },
     {
       type: ActiveTab.closedConnections,
-      name: t('closedConnections'),
+      name: t('closed'),
       count: closedConnections().length,
     },
   ])
@@ -350,7 +350,7 @@ export default () => {
               }
             }}
           >
-            <IconCircleX />
+            <IconX />
           </Button>
 
           <Button