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, 62 insertions, 0 deletions

diff --git a/web/html/modals/text_modal.html b/web/html/modals/text_modal.html
new file mode 100644
index 00000000..cd90821d
--- /dev/null
+++ b/web/html/modals/text_modal.html
@@ -0,0 +1,62 @@
+{{define "modals/textModal"}}
+<a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title" :closable="true"
+    :class="themeSwitcher.currentTheme">
+    <a-input :style="{ overflowY: 'auto' }" type="textarea" v-model="txtModal.content"
+        :autosize="{ minRows: 10, maxRows: 20}"></a-input>
+    <template slot="footer">
+        <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
+            @click="txtModal.download(txtModal.content, txtModal.fileName)">
+            <span>[[ txtModal.fileName ]]</span>
+        </a-button>
+        <a-button type="primary" icon="copy" @click="txtModal.copy(txtModal.content)">
+            <span>{{ i18n "copy" }}</span>
+        </a-button>
+    </template>
+</a-modal>
+
+<script>
+    const txtModal = {
+        title: '',
+        content: '',
+        fileName: '',
+        qrcode: null,
+        visible: false,
+        show: function (title = '', content = '', fileName = '') {
+            this.title = title;
+            this.content = content;
+            this.fileName = fileName;
+            this.visible = true;
+        },
+        copy: function (content = '') {
+            ClipboardManager
+                .copyText(content)
+                .then(() => {
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.close();
+                })
+        },
+        download: function (content = '', fileName = '') {
+            let link = document.createElement('a');
+
+            link.download = fileName;
+            link.href = URL.createObjectURL(new Blob([content], { type: 'text/plain' }));
+            link.click();
+
+            URL.revokeObjectURL(link.href);
+
+            link.remove();
+        },
+        close: function () {
+            this.visible = false;
+        },
+    };
+
+    const textModalApp = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#text-modal',
+        data: {
+            txtModal: txtModal,
+        },
+    });
+</script>
+{{end}}
\ No newline at end of file