UI Improvements (#2228)

* UI Improvements

Better Table
Update QR Code Modal
Better Info Modal
Compression HTML files
Better Dropdown Menu
Better Calendar
and more ..
Remove files
Minor Fixes

5 files changed, 146 insertions, 155 deletions

diff --git a/web/html/xui/form/stream/external_proxy.html b/web/html/xui/form/stream/external_proxy.html
index 9c3ed2e0..defed984 100644
--- a/web/html/xui/form/stream/external_proxy.html
+++ b/web/html/xui/form/stream/external_proxy.html
@@ -1,26 +1,29 @@
 {{define "form/externalProxy"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-divider style="margin:5px 0 0;"></a-divider>
-    <a-form-item label="External Proxy">
-        <a-switch v-model="externalProxy"></a-switch>
-        <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
-    </a-form-item>
-    <a-input-group style="margin: 8px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
-        <template>
-            <a-tooltip title="Force TLS">
-                <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
-                    <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
-                    <a-select-option value="none">{{ i18n "none" }}</a-select-option>
-                    <a-select-option value="tls">TLS</a-select-option>
-                </a-select>
-            </a-tooltip>
-        </template>
-        <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
-        <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
-            <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
-        </a-tooltip>
-        <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
-        <a-button style="width: 10%; margin: 0px; border-radius: 0 1rem 1rem 0;" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
-    </a-input-group>
+  <a-divider style="margin:5px 0 0;"></a-divider>
+  <a-form-item label="External Proxy">
+    <a-switch v-model="externalProxy"></a-switch>
+    <a-button icon="plus" v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})"></a-button>
+  </a-form-item>
+  <a-input-group style="margin: 8px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
+    <template>
+      <a-tooltip title="Force TLS">
+        <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
+          <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
+          <a-select-option value="none">{{ i18n "none" }}</a-select-option>
+          <a-select-option value="tls">TLS</a-select-option>
+        </a-select>
+      </a-tooltip>
+    </template>
+    <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
+    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
+      <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
+    </a-tooltip>
+    <a-input style="width: 30%; top: 0;" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'>
+      <template slot="addonAfter">
+        <a-button icon="minus" size="small" @click="inbound.stream.externalProxy.splice(index, 1)"></a-button>
+      </template>
+    </a-input>
+  </a-input-group>
 </a-form>
 {{end}}
diff --git a/web/html/xui/form/stream/stream_http.html b/web/html/xui/form/stream/stream_http.html
index 3a05655f..b562c112 100644
--- a/web/html/xui/form/stream/stream_http.html
+++ b/web/html/xui/form/stream/stream_http.html
@@ -1,19 +1,17 @@
 {{define "form/streamHTTP"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.http.path"></a-input>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">{{ i18n "host" }}
-            <a-button size="small" @click="inbound.stream.http.addHost()">+</a-button>
-        </template>
-        <template v-for="(host, index) in inbound.stream.http.host">
-            <a-input v-model.trim="inbound.stream.http.host[index]">
-                <a-button size="small" slot="addonAfter"
-                @click="inbound.stream.http.removeHost(index)"
-                v-if="inbound.stream.http.host.length>1">-</a-button>
-            </a-input>
-        </template>
-    </a-form-item>
+  <a-form-item label='{{ i18n "path" }}'>
+    <a-input v-model.trim="inbound.stream.http.path"></a-input>
+  </a-form-item>
+  <a-form-item>
+    <template slot="label">{{ i18n "host" }}
+      <a-button icon="plus" size="small" @click="inbound.stream.http.addHost()"></a-button>
+    </template>
+    <template v-for="(host, index) in inbound.stream.http.host">
+      <a-input v-model.trim="inbound.stream.http.host[index]">
+        <a-button icon="minus" size="small" slot="addonAfter" @click="inbound.stream.http.removeHost(index)" v-if="inbound.stream.http.host.length>1"></a-button>
+      </a-input>
+    </template>
+  </a-form-item>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_httpupgrade.html b/web/html/xui/form/stream/stream_httpupgrade.html
index 5a498076..d1cd2e02 100644
--- a/web/html/xui/form/stream/stream_httpupgrade.html
+++ b/web/html/xui/form/stream/stream_httpupgrade.html
@@ -1,26 +1,26 @@
 {{define "form/streamHTTPUpgrade"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="PROXY Protocol">
-        <a-switch v-model="inbound.stream.httpupgrade.acceptProxyProtocol"></a-switch>
-    </a-form-item>
-    <a-form-item label='{{ i18n "host" }}'>
-        <a-input v-model.trim="inbound.stream.httpupgrade.host"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.httpupgrade.addHeader('host', '')">+</a-button>
-    </a-form-item>
-    <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
-            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
-            <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <a-button slot="addonAfter" size="small" @click="inbound.stream.httpupgrade.removeHeader(index)">-</a-button>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
+  <a-form-item label="PROXY Protocol">
+    <a-switch v-model="inbound.stream.httpupgrade.acceptProxyProtocol"></a-switch>
+  </a-form-item>
+  <a-form-item label='{{ i18n "host" }}'>
+    <a-input v-model.trim="inbound.stream.httpupgrade.host"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "path" }}'>
+    <a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.httpupgrade.addHeader('host', '')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+      </a-input>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.httpupgrade.removeHeader(index)"></a-button>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
 </a-form>
 {{end}}
diff --git a/web/html/xui/form/stream/stream_tcp.html b/web/html/xui/form/stream/stream_tcp.html
index 8576df8c..cf1a03ca 100644
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -1,82 +1,72 @@
 {{define "form/streamTCP"}}
 <!-- tcp type -->
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="PROXY Protocol" v-if="inbound.canEnableTls()">
-        <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
-    </a-form-item>
-    <a-form-item label='HTTP {{ i18n "camouflage" }}'>
-        <a-switch :checked="inbound.stream.tcp.type === 'http'"
-            @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
-        </a-switch>
-    </a-form-item>
+  <a-form-item label="PROXY Protocol" v-if="inbound.canEnableTls()">
+    <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
+  </a-form-item>
+  <a-form-item label='HTTP {{ i18n "camouflage" }}'>
+    <a-switch :checked="inbound.stream.tcp.type === 'http'" @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'"></a-switch>
+  </a-form-item>
 </a-form>
 
-<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }"
-    :wrapper-col="{ md: {span:14} }">
-    <!-- tcp request -->
-    <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
-            <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
-        </template>
-        <template v-for="(path, index) in inbound.stream.tcp.request.path">
-            <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
-                <a-button size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)"
-                    v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
-            </a-input>
-        </template>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')">+</a-button>
-    </a-form-item>
-    <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
-            <a-input style="width: 50%" v-model.trim="header.name"
-                placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
-                placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <a-button slot="addonAfter" size="small"
-                    @click="inbound.stream.tcp.request.removeHeader(index)">-</a-button>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
+<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <!-- tcp request -->
+  <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
+  </a-form-item>
+  <a-form-item>
+    <template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
+      <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addPath('/')"></a-button>
+    </template>
+    <template v-for="(path, index) in inbound.stream.tcp.request.path">
+      <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
+        <a-button icon="minus" size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)" v-if="inbound.stream.tcp.request.path.length>1"></a-button>
+      </a-input>
+    </template>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+      </a-input>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.tcp.request.removeHeader(index)"></a-button>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
 
-    <!-- tcp response -->
-    <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
-        <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
-        <a-button size="small"
-            @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">+</a-button>
-    </a-form-item>
-    <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
-            <a-input style="width: 50%" v-model.trim="header.name"
-                placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
-                placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <template slot="addonAfter">
-                    <a-button size="small" @click="inbound.stream.tcp.response.removeHeader(index)">-</a-button>
-                </template>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
+  <!-- tcp response -->
+  <a-divider style="margin:0;">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
+    <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+      </a-input>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <template slot="addonAfter">
+          <a-button icon="minus" size="small" @click="inbound.stream.tcp.response.removeHeader(index)"></a-button>
+        </template>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
 </a-form>
 {{end}}
diff --git a/web/html/xui/form/stream/stream_ws.html b/web/html/xui/form/stream/stream_ws.html
index 1aa02e72..9b71070c 100644
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/web/html/xui/form/stream/stream_ws.html
@@ -1,26 +1,26 @@
 {{define "form/streamWS"}}
 <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="PROXY Protocol">
-        <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
-    </a-form-item>
-    <a-form-item label='{{ i18n "host" }}'>
-        <a-input v-model.trim="inbound.stream.ws.host"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "path" }}'>
-        <a-input v-model.trim="inbound.stream.ws.path"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.ws.addHeader('host', '')">+</a-button>
-    </a-form-item>
-    <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
-            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
-            <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <a-button slot="addonAfter" size="small" @click="inbound.stream.ws.removeHeader(index)">-</a-button>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
+  <a-form-item label="PROXY Protocol">
+    <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
+  </a-form-item>
+  <a-form-item label='{{ i18n "host" }}'>
+    <a-input v-model.trim="inbound.stream.ws.host"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "path" }}'>
+    <a-input v-model.trim="inbound.stream.ws.path"></a-input>
+  </a-form-item>
+  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+    <a-button icon="plus" size="small" @click="inbound.stream.ws.addHeader('host', '')"></a-button>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
+      <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+      </a-input>
+      <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.ws.removeHeader(index)"></a-button>
+      </a-input>
+    </a-input-group>
+  </a-form-item>
 </a-form>
 {{end}}