Code refactoring (#2865)

* refactor: use vue inline styles in entire application

* refactor: setting row in dashboard page

* refactor: use blob for download file in text modal

* refactor: move all html templates in `web/html` folder

* refactor: `DeviceUtils` -> `MediaQueryMixin`
The transition to mixins has been made, as they can update themselves.

* chore: pretty right buttons in `outbounds` tab in xray settings

* refactor: add translations for system status

* refactor: adjust gutter spacing in setting list item

* refactor: use native `a-input-password` for password field

* chore: return old system status
with new translations

* chore: add missing translation

1 files changed, 0 insertions, 103 deletions

diff --git a/web/html/xui/component/aSidebar.html b/web/html/xui/component/aSidebar.html
deleted file mode 100644
index dfaebb17..00000000
--- a/web/html/xui/component/aSidebar.html
+++ /dev/null
@@ -1,103 +0,0 @@
-{{define "component/sidebar/content"}}
-<template>
-    <div class="ant-sidebar">
-        <a-layout-sider :theme="themeSwitcher.currentTheme" collapsible :collapsed="collapsed"
-            @collapse="(isCollapsed, type) => collapseHandle(isCollapsed, type)" breakpoint="md">
-            <a-theme-switch></a-theme-switch>
-            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
-                @click="({key}) => openLink(key)">
-                <a-menu-item v-for="tab in tabs" :key="tab.key">
-                    <a-icon :type="tab.icon"></a-icon>
-                    <span v-text="tab.title"></span>
-                </a-menu-item>
-            </a-menu>
-        </a-layout-sider>
-        <a-drawer placement="left" :closable="false" @close="closeDrawer" :visible="visible"
-            :wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }" :style="{ height: '100%' }">
-            <div class="drawer-handle" @click="toggleDrawer" slot="handle">
-                <a-icon :type="visible ? 'close' : 'menu-fold'"></a-icon>
-            </div>
-            <a-theme-switch></a-theme-switch>
-            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
-                @click="({key}) => openLink(key)">
-                <a-menu-item v-for="tab in tabs" :key="tab.key">
-                    <a-icon :type="tab.icon"></a-icon>
-                    <span v-text="tab.title"></span>
-                </a-menu-item>
-            </a-menu>
-        </a-drawer>
-    </div>
-</template>
-{{end}}
-
-{{define "component/aSidebar"}}
-<style>
-    .ant-sidebar>.ant-layout-sider {
-        height: 100%;
-    }
-</style>
-
-<script>
-    const SIDEBAR_COLLAPSED_KEY = "isSidebarCollapsed"
-
-    Vue.component('a-sidebar', {
-        data() {
-            return {
-                tabs: [
-                    {
-                        key: 'panel/',
-                        icon: 'dashboard',
-                        title: '{{ i18n "menu.dashboard"}}'
-                    },
-                    {
-                        key: 'panel/inbounds',
-                        icon: 'user',
-                        title: '{{ i18n "menu.inbounds"}}'
-                    },
-                    {
-                        key: 'panel/settings',
-                        icon: 'setting',
-                        title: '{{ i18n "menu.settings"}}'
-                    },
-                    {
-                        key: 'panel/xray',
-                        icon: 'tool',
-                        title: '{{ i18n "menu.xray"}}'
-                    },
-                    {
-                        key: 'logout/',
-                        icon: 'logout',
-                        title: '{{ i18n "menu.logout"}}'
-                    },
-                ],
-                activeTab: [
-                    '{{ .request_uri }}'
-                ],
-                visible: false,
-                collapsed: JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY)),
-            }
-        },
-        methods: {
-            openLink(key) {
-                return key.startsWith('http') ? 
-                    window.open(`{{ .base_path }}${key}`) : 
-                    location.href = `{{ .base_path }}${key}`
-            },
-            closeDrawer() {
-                this.visible = false;
-            },
-            toggleDrawer() {
-                this.visible = !this.visible;
-            },
-            collapseHandle(collapsed, type) {
-                if (type === "clickTrigger") {
-                    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed);
-
-                    this.collapsed = JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY));
-                }
-            }
-        },
-        template: `{{template "component/sidebar/content"}}`,
-    });
-</script>
-{{end}}
\ No newline at end of file