From 83e360ea1b4fb4ee7bd1d2f2f5b554e98c78b8c9 Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Wed, 21 Feb 2024 00:36:55 +0100
Subject: [PATCH] simplify log and text modals

---
 web/html/common/text_modal.html | 20 +++++-----
 web/html/xui/index.html         | 69 +++++++++++++++++----------------
 2 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
index 26ac5ade..68387be2 100644
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -1,14 +1,16 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
-         :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
-         :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}" :class="themeSwitcher.currentTheme">
-    <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
-              :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
-              :download="txtModal.fileName">
-        {{ i18n "download" }} [[ txtModal.fileName ]]
-    </a-button>
+         :closable="true"
+         :class="themeSwitcher.currentTheme">
+    <template slot="footer">
+        <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
+            :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
+            :download="txtModal.fileName">[[ txtModal.fileName ]]
+        </a-button>
+            <a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
+    </template>
     <a-input type="textarea" v-model="txtModal.content"
-             :autosize="{ minRows: 10, maxRows: 20}"></a-input>
+        :autosize="{ minRows: 10, maxRows: 20}"></a-input>
 </a-modal>
 
 <script>
@@ -27,7 +29,7 @@
             this.visible = true;
             textModalApp.$nextTick(() => {
                 if (this.clipboard === null) {
-                    this.clipboard = new ClipboardJS('#txt-modal-ok-btn', {
+                    this.clipboard = new ClipboardJS('#copy-btn', {
                         text: () => this.content,
                     });
                     this.clipboard.on('success', () => {
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index ce9897f0..c542ea88 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -263,52 +263,53 @@
         </template>
     </a-modal>
 
-    <a-modal id="log-modal" v-model="logModal.visible" title="Logs"
-             :closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false"
+    <a-modal id="log-modal" v-model="logModal.visible"
+             :closable="true" @cancel="() => logModal.visible = false"
              :class="themeSwitcher.currentTheme"
-             width="800px"
-             footer="">
+             width="800px" footer="">
+        <template slot="title">
+            {{ i18n "pages.index.logs" }}
+            <a-icon :spin="logModal.loading"
+                    type="sync"
+                    style="vertical-align: middle; margin-left: 10px;"
+                    :disabled="logModal.loading"
+                    @click="openLogs()">
+            </a-icon>
+        </template>
         <a-form layout="inline">
-            <a-form-item label="Count">
-                <a-select v-model="logModal.rows"
-                style="width: 80px"
-                @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option value="10">10</a-select-option>
-                    <a-select-option value="20">20</a-select-option>
-                    <a-select-option value="50">50</a-select-option>
-                    <a-select-option value="100">100</a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item label="Log Level">
-                <a-select v-model="logModal.level"
-                style="width: 120px"
-                @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option value="debug">Debug</a-select-option>
-                    <a-select-option value="info">Info</a-select-option>
-                    <a-select-option value="warning">Warning</a-select-option>
-                    <a-select-option value="err">Error</a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item label="SysLog">
-                <a-checkbox v-model="logModal.syslog" @change="openLogs()"></a-checkbox>
+            <a-form-item>
+                <a-input-group compact>
+                    <a-select v-model="logModal.rows" style="width:70px;"
+                    @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option value="10">10</a-select-option>
+                        <a-select-option value="20">20</a-select-option>
+                        <a-select-option value="50">50</a-select-option>
+                        <a-select-option value="100">100</a-select-option>
+                    </a-select>
+                    <a-select v-model="logModal.level" style="width:100px;"
+                    @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option value="debug">Debug</a-select-option>
+                        <a-select-option value="info">Info</a-select-option>
+                        <a-select-option value="warning">Warning</a-select-option>
+                        <a-select-option value="err">Error</a-select-option>
+                    </a-select>
+                </a-input-group>
             </a-form-item>
             <a-form-item>
-                <a-button class="ant-btn ant-btn-primary" :loading="logModal.loading" @click="openLogs()"><a-icon :spin="logModal.loading" type="sync"></a-icon> Reload</a-button>
+                <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
             </a-form-item>
-            <a-form-item>
-                <a-button type="primary" style="margin-bottom: 10px;"
+            <a-form-item style="float: right;">
+                <a-button type="primary" icon="download"
                 :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs)" download="x-ui.log">
-                    {{ i18n "download" }} x-ui.log
                 </a-button>
             </a-form-item>
-       </a-form>
+        </a-form>
         <div class="ant-input" style="height: auto; max-height: 500px; overflow: auto;" v-html="logModal.formattedLogs"></div>
     </a-modal>
 
     <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
-            :closable="true"
-            :class="themeSwitcher.currentTheme"
-            @ok="() => backupModal.hide()" @cancel="() => backupModal.hide()">
+            :closable="true" footer=""
+            :class="themeSwitcher.currentTheme">
             <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
             :message="backupModal.description"
             show-icon