From 063309dbb70723e2087209f76a4dcdfed886f78d Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Sat, 5 Aug 2023 17:41:20 +0200
Subject: [PATCH] [front] better table design

---
 web/html/xui/inbounds.html | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index cd9cd054..8124e55a 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -11,6 +11,9 @@
     .ant-col-sm-24 {
         margin-top: 10px;
     }
+    tr.hideExpandIcon .ant-table-row-expand-icon {
+        display: none;
+    }
 </style>
 
 <body>
@@ -121,8 +124,12 @@
                         </a-radio-group>
                         <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
                                  :data-source="searchedInbounds"
-                                 :loading="spinning" :scroll="{ x: 1300 }"
+                                 :loading="spinning" :scroll="{ x: 1200 }"
                                  :pagination="false"
+                                 :expand-icon-as-cell="false"
+                                 :expand-row-by-click="false"
+                                 :expand-icon-column-index="0"
+                                 :row-class-name="dbInbound => (dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess || (dbInbound.isSS && dbInbound.toInbound().isSSMultiUser) ? '' : 'hideExpandIcon')"
                                  style="margin-top: 20px"
                                  @change="() => getDBInbounds()">
                             <template slot="action" slot-scope="text, dbInbound">
@@ -137,7 +144,7 @@
                                             <a-icon type="qrcode"></a-icon>
                                             {{ i18n "qrCode" }}
                                         </a-menu-item>
-                                        <template v-if="dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess || dbInbound.toInbound().isSSMultiUser">
+                                        <template v-if="dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess || (dbInbound.isSS && dbInbound.toInbound().isSSMultiUser)">
                                             <a-menu-item key="addClient">
                                                 <a-icon type="user-add"></a-icon>
                                                 {{ i18n "pages.client.add"}}
@@ -254,6 +261,7 @@
                                     :columns="innerColumns"
                                     :data-source="getInboundClients(record)"
                                     :pagination="false"
+                                    style="margin-left: 20px;"
                                 >
                                     {{template "client_table"}}
                                 </a-table>
@@ -263,6 +271,7 @@
                                     :columns="innerTrojanColumns"
                                     :data-source="getInboundClients(record)"
                                     :pagination="false"
+                                    style="margin-left: 20px;"
                                 >
                                     {{template "client_table"}}
                                 </a-table>
@@ -278,6 +287,11 @@
 {{template "component/themeSwitcher" .}}
 <script>
     const columns = [{
+        title: "ID",
+        align: 'right',
+        dataIndex: "id",
+        width: 30,
+    }, {
         title: '{{ i18n "pages.inbounds.operate" }}',
         align: 'center',
         width: 30,
@@ -287,11 +301,6 @@
         align: 'center',
         width: 30,
         scopedSlots: { customRender: 'enable' },
-    }, {
-        title: "ID",
-        align: 'center',
-        dataIndex: "id",
-        width: 20,
     }, {
         title: '{{ i18n "pages.inbounds.remark" }}',
         align: 'center',
@@ -328,8 +337,8 @@
         { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
         { title: '{{ i18n "pages.inbounds.enable" }}', width: 30, scopedSlots: { customRender: 'enable' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 50, scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 50, scopedSlots: { customRender: 'expiryTime' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 60, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 55, scopedSlots: { customRender: 'expiryTime' } },
         { title: 'UUID', width: 120, dataIndex: "id" },
     ];
 
@@ -338,8 +347,8 @@
         { title: '{{ i18n "pages.inbounds.enable" }}', width: 30, scopedSlots: { customRender: 'enable' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
         { title: '{{ i18n "pages.inbounds.traffic" }}', width: 50, scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 50, scopedSlots: { customRender: 'expiryTime' } },
-        { title: 'Password', width: 120, dataIndex: "password" },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 55, scopedSlots: { customRender: 'expiryTime' } },
+        { title: '{{ i18n "password" }}', width: 165, dataIndex: "password" },
     ];
 
     const app = new Vue({
