From b82ce31ec17096081247e990f520581b36af9907 Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza.ahmadi@tzconnect.com>
Date: Wed, 22 Feb 2023 20:34:49 +0100
Subject: [PATCH] Change menu to icons for client actions

---
 web/html/xui/inbound_client_table.html | 32 ++++++++++++++++----------
 web/html/xui/inbounds.html             |  4 ++--
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html
index 0b50b220..30bc5c9d 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -1,17 +1,25 @@
 {{define "client_table"}}
 <template slot="actions" slot-scope="text, client, index">
-    <a-dropdown>
-        <a-icon @click="e => e.preventDefault()" type="menu"></a-icon>
-        <template #overlay>
-          <a-menu>
-            <a-menu-item v-if="record.hasLink()" @click="showQrcode(record,index);"><a-icon type="qrcode"></a-icon>{{ i18n "qrCode" }}</a-menu-item>
-            <a-menu-item @click="openEditClient(record,index);"><a-icon type="edit"></a-icon>{{ i18n "pages.client.edit" }}</a-menu-item>
-            <a-menu-item @click="showInfo(record,index);"><a-icon type="info-circle"></a-icon>{{ i18n "info" }}</a-menu-item>
-            <a-menu-item @click="resetClientTraffic(client,record,$event)" v-if="client.email != ''"><a-icon type="retweet"></a-icon>{{ i18n "pages.inbounds.resetTraffic" }}</a-menu-item>
-            <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,index)"><span style="color: #FF4D4F"><a-icon type="delete"></a-icon> {{ i18n "delete"}}</span></a-menu-item>
-          </a-menu>
-        </template>
-    </a-dropdown>
+    <a-tooltip>
+        <template slot="title">{{ i18n "qrCode" }}</template>
+        <a-icon style="font-size: 24px;" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record,index);"></a-icon>
+    </a-tooltip>
+    <a-tooltip>
+        <template slot="title">{{ i18n "pages.client.edit" }}</template>
+        <a-icon style="font-size: 24px;" type="edit" @click="openEditClient(record,index);"></a-icon>
+    </a-tooltip>
+    <a-tooltip>
+        <template slot="title">{{ i18n "info" }}</template>
+        <a-icon style="font-size: 24px;" type="info-circle" @click="showInfo(record,index);"></a-icon>
+    </a-tooltip>
+    <a-tooltip>
+        <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
+        <a-icon style="font-size: 24px;" type="retweet" @click="resetClientTraffic(client,record,$event)" v-if="client.email != ''"></a-icon>
+    </a-tooltip>
+    <a-tooltip>
+        <template slot="title"><span style="color: #FF4D4F"> {{ i18n "delete"}}</span></template>
+        <a-icon style="font-size: 24px;" type="delete" v-if="isRemovable(record.id)" @click="delClient(record.id,index)"></a-icon>
+    </a-tooltip>
 </template>
 <template slot="client" slot-scope="text, client">
     [[ client.email ]]
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index c6f1bb2a..0dd8be35 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -191,7 +191,7 @@
     }];
 
     const innerColumns = [
-        { title: '', width: 20, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 60, scopedSlots: { customRender: 'actions' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
         { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 80, scopedSlots: { customRender: 'traffic' } },
         { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
@@ -199,7 +199,7 @@
     ];
 
     const innerTrojanColumns = [
-        { title: '', width: 20, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 60, scopedSlots: { customRender: 'actions' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
         { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 80, scopedSlots: { customRender: 'traffic' } },
         { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },