From f9bb48de137eb83c458c9cdc2275a736b9d2ab83 Mon Sep 17 00:00:00 2001 From: Nelson Chan Date: Wed, 20 Oct 2021 18:54:20 +0800 Subject: [PATCH 1/9] WIP: Convert Settings to components --- src/assets/vars.scss | 1 + src/components/MonitorList.vue | 2 +- src/components/settings/About.vue | 25 + src/components/settings/Appearance.vue | 149 +++++ src/components/settings/Backup.vue | 213 ++++++ src/components/settings/General.vue | 191 ++++++ src/components/settings/MonitorHistory.vue | 127 ++++ src/components/settings/Notifications.vue | 46 ++ src/components/settings/Security.vue | 323 +++++++++ src/languages/en.js | 1 + src/layouts/Layout.vue | 4 +- src/pages/Settings.vue | 741 +++------------------ 12 files changed, 1190 insertions(+), 633 deletions(-) create mode 100644 src/components/settings/About.vue create mode 100644 src/components/settings/Appearance.vue create mode 100644 src/components/settings/Backup.vue create mode 100644 src/components/settings/General.vue create mode 100644 src/components/settings/MonitorHistory.vue create mode 100644 src/components/settings/Notifications.vue create mode 100644 src/components/settings/Security.vue diff --git a/src/assets/vars.scss b/src/assets/vars.scss index 2f4369832..91ab917e5 100644 --- a/src/assets/vars.scss +++ b/src/assets/vars.scss @@ -12,6 +12,7 @@ $dark-font-color2: #020b05; $dark-bg: #0d1117; $dark-bg2: #070a10; $dark-border-color: #1d2634; +$dark-header-bg: #161b22; $easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97); $easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue index bd771f8f0..ef51e89cd 100644 --- a/src/components/MonitorList.vue +++ b/src/components/MonitorList.vue @@ -137,7 +137,7 @@ export default { justify-content: space-between; .dark & { - background-color: #161b22; + background-color: $dark-header-bg; border-bottom: 0; } } diff --git a/src/components/settings/About.vue b/src/components/settings/About.vue new file mode 100644 index 000000000..baa72f39a --- /dev/null +++ b/src/components/settings/About.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/components/settings/Appearance.vue b/src/components/settings/Appearance.vue new file mode 100644 index 000000000..e0a3d6430 --- /dev/null +++ b/src/components/settings/Appearance.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/src/components/settings/Backup.vue b/src/components/settings/Backup.vue new file mode 100644 index 000000000..6ac28d468 --- /dev/null +++ b/src/components/settings/Backup.vue @@ -0,0 +1,213 @@ + + + + + diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue new file mode 100644 index 000000000..308f21aee --- /dev/null +++ b/src/components/settings/General.vue @@ -0,0 +1,191 @@ + + + + + diff --git a/src/components/settings/MonitorHistory.vue b/src/components/settings/MonitorHistory.vue new file mode 100644 index 000000000..85853ea1a --- /dev/null +++ b/src/components/settings/MonitorHistory.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/src/components/settings/Notifications.vue b/src/components/settings/Notifications.vue new file mode 100644 index 000000000..b2cbcf48a --- /dev/null +++ b/src/components/settings/Notifications.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue new file mode 100644 index 000000000..1cbfb034e --- /dev/null +++ b/src/components/settings/Security.vue @@ -0,0 +1,323 @@ + + + + + diff --git a/src/languages/en.js b/src/languages/en.js index 15c3cd0f3..a503b5235 100644 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -307,4 +307,5 @@ export default { steamApiKeyDescription: "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key here: ", "Current User": "Current User", recent: "Recent", + shrinkDatabaseDescription: "Trigger database VACCUM for SQLite. If your database is created after 1.10.0, AUTO_VACCUM is already enabled and this action is not needed.", }; diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 7228a460d..2f4f689ab 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -188,8 +188,8 @@ main { .dark { header { - background-color: #161b22; - border-bottom-color: #161b22 !important; + background-color: $dark-header-bg; + border-bottom-color: $dark-header-bg !important; span { color: #f0f6fc; diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue index 9d501407d..9ff234150 100644 --- a/src/pages/Settings.vue +++ b/src/pages/Settings.vue @@ -7,521 +7,90 @@
-
-

{{ $t("Appearance") }}

- -
- - +
+
+ {{ item.title }}
- -
- - -
-
- - - - - - - - -
-
-
- -
- -
-
- - - - - - - - -
-
-
- - -

{{ $t("General") }}

- -
- -
- - -
- - -
- - -
- - -
-
- - -
-
- - -
- - -
- - -
- -
- - -
-
- - -
- - -
- - -
- -
-
-
- - -
- - -
- {{ $t("steamApiKeyDescription") }}https://steamcommunity.com/dev -
-
- - -
-

{{ $t("Monitor History") }}

-
- - -
-
- - -
- -
-
- -
- -
-
- - -
-

{{ $t("Notifications") }}

-

- {{ $t("Not available, please setup.") }} -

-

- {{ $t("notificationDescription") }} -

- - - - +
+
+ {{ subMenus[currentSubMenu].title }} +
+
+
- - -

{{ $t("Info") }}

- - {{ $t("Version") }}: {{ $root.info.version }}
- {{ $t("Check Update On GitHub") }}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{ $t("confirmClearStatisticsMsg") }} - - - {{ $t("confirmImportMsg") }} -
@@ -667,37 +126,8 @@ export default { .shadow-box { padding: 20px; -} - -.btn-check:active + .btn-outline-primary, -.btn-check:checked + .btn-outline-primary, -.btn-check:hover + .btn-outline-primary { - color: #fff; -} - -.dark { - .list-group-item { - background-color: $dark-bg2; - color: $dark-font-color; - } - - .btn-check:active + .btn-outline-primary, - .btn-check:checked + .btn-outline-primary, - .btn-check:hover + .btn-outline-primary { - color: #000; - } - - #importBackup { - &::file-selector-button { - color: $primary; - background-color: $dark-bg; - } - - &:hover:not(:disabled):not([readonly])::file-selector-button { - color: $dark-font-color2; - background-color: $primary; - } - } + min-height: calc(100vh - 155px); + max-height: calc(100vh - 30px); } footer { @@ -707,4 +137,55 @@ footer { padding-bottom: 30px; text-align: center; } + +.settings-menu { + flex: 0 0 auto; + width: 300px; + + .menu-item { + border-radius: 10px; + margin: 0.5em; + padding: 0.7em 1em; + cursor: pointer; + } + + .menu-item:hover { + background: $highlight-white; + + .dark & { + background: $dark-header-bg; + } + } + + .menu-item.active { + background: $highlight-white; + border-left: 4px solid $primary; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + .dark & { + background: $dark-header-bg; + } + } +} + +.settings-content { + flex: 0 0 auto; + width: calc(100% - 300px); + + .settings-content-header { + width: calc(100% + 20px); + border-bottom: 1px solid #dee2e6; + border-radius: 0 10px 0 0; + margin-top: -20px; + margin-right: -20px; + padding: 12.5px 1em; + font-size: 26px; + + .dark & { + background: $dark-header-bg; + border-bottom: 0; + } + } +} From 369cad90c1c2e938a7651947dbffaed6bd2ebd4f Mon Sep 17 00:00:00 2001 From: Nelson Chan Date: Wed, 3 Nov 2021 17:03:40 +0800 Subject: [PATCH 2/9] WIP: Convert to use vue-router & improve layout WIP: Fix security page & improve layout WIP: Fix displaying current page UI: Improve spacing Chore: Improve styling --- src/components/settings/General.vue | 6 +-- src/components/settings/MonitorHistory.vue | 8 ++-- src/components/settings/Security.vue | 10 ++--- src/pages/Settings.vue | 51 ++++++++++------------ src/router.js | 46 +++++++++++++++++++ 5 files changed, 82 insertions(+), 39 deletions(-) diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue index 308f21aee..a1b42d85f 100644 --- a/src/components/settings/General.vue +++ b/src/components/settings/General.vue @@ -163,13 +163,13 @@ export default { computed: { settings() { - return this.$parent.$parent.settings; + return this.$parent.$parent.$parent.settings; }, saveSettings() { - return this.$parent.$parent.saveSettings; + return this.$parent.$parent.$parent.saveSettings; }, settingsLoaded() { - return this.$parent.$parent.settingsLoaded; + return this.$parent.$parent.$parent.settingsLoaded; }, guessTimezone() { return dayjs.tz.guess(); diff --git a/src/components/settings/MonitorHistory.vue b/src/components/settings/MonitorHistory.vue index 85853ea1a..95efff0e2 100644 --- a/src/components/settings/MonitorHistory.vue +++ b/src/components/settings/MonitorHistory.vue @@ -23,7 +23,7 @@ -
{{ $t("shrinkDatabaseDescription") }}
+
{{ $t("shrinkDatabaseDescription") }}

{{ $t("Change Password") }}
@@ -60,7 +61,7 @@ -
+
{{ $t("Two Factor Authentication") }}
@@ -82,7 +83,6 @@
-
@@ -244,13 +244,13 @@ export default { computed: { settings() { - return this.$parent.$parent.settings; + return this.$parent.$parent.$parent.settings; }, saveSettings() { - return this.$parent.$parent.saveSettings; + return this.$parent.$parent.$parent.saveSettings; }, settingsLoaded() { - return this.$parent.$parent.settingsLoaded; + return this.$parent.$parent.$parent.settingsLoaded; } }, diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue index 9ff234150..0cff13678 100644 --- a/src/pages/Settings.vue +++ b/src/pages/Settings.vue @@ -8,21 +8,25 @@
-
- {{ item.title }} -
+
+ {{ item.title }} +
+
- {{ subMenus[currentSubMenu].title }} + {{ subMenus[$route.name.split("-")[1]].title }}
- +
@@ -32,16 +36,6 @@