From ca89f84b9a3f28c3e78337c181e6355e732bcdfd Mon Sep 17 00:00:00 2001 From: Computroniks Date: Thu, 27 Jan 2022 18:57:14 +0000 Subject: [PATCH 1/6] Added sign-out-alt icon Signed-off-by: Computroniks --- src/icon.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/icon.js b/src/icon.js index 88b8a8ec..2c99f819 100644 --- a/src/icon.js +++ b/src/icon.js @@ -34,6 +34,7 @@ import { faAward, faLink, faChevronDown, + faSignOutAlt, } from "@fortawesome/free-solid-svg-icons"; library.add( @@ -67,6 +68,7 @@ library.add( faAward, faLink, faChevronDown, + faSignOutAlt, ); export { FontAwesomeIcon }; From 97a5b400db0c575cbfd69552882750407ceffb03 Mon Sep 17 00:00:00 2001 From: Computroniks Date: Thu, 27 Jan 2022 19:45:31 +0000 Subject: [PATCH 2/6] Added log out button to nav bar Implements Logout button in navbar #1209 Signed-off-by: Computroniks --- src/layouts/Layout.vue | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 75173e1f..8f9df8bf 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -28,11 +28,14 @@ {{ $t("Dashboard") }} -
  • +
  • {{ $t("Settings") }}
    • +
  • + +
    • @@ -71,6 +74,10 @@
    {{ $t("Settings") }} + @@ -146,9 +153,9 @@ export default { white-space: nowrap; padding: 0 10px; - a { + a, button { text-align: center; - width: 25%; + width: 20%; display: inline-block; height: 100%; padding: 8px 10px 0; @@ -156,6 +163,7 @@ export default { color: #c1c1c1; overflow: hidden; text-decoration: none; + vertical-align: top; &.router-link-exact-active { color: $primary; @@ -166,6 +174,12 @@ export default { font-size: 20px; } } + + button { + border: none; + background: none; + color: #dc3545; + } } main { From 17d4003e5c620d24f453de129c0339b3ede3fa57 Mon Sep 17 00:00:00 2001 From: Louis Lam Date: Tue, 19 Apr 2022 00:39:49 +0800 Subject: [PATCH 3/6] Add dropdown menu --- .../cloudflared-socket-handler.js | 4 +- src/icon.js | 2 + src/layouts/Layout.vue | 116 +++++++++++++++--- src/pages/Settings.vue | 12 ++ 4 files changed, 113 insertions(+), 21 deletions(-) diff --git a/server/socket-handlers/cloudflared-socket-handler.js b/server/socket-handlers/cloudflared-socket-handler.js index 37c12256..298ed658 100644 --- a/server/socket-handlers/cloudflared-socket-handler.js +++ b/server/socket-handlers/cloudflared-socket-handler.js @@ -86,5 +86,7 @@ module.exports.autoStart = async (token) => { module.exports.stop = async () => { console.log("Stop cloudflared"); - cloudflared.stop(); + if (cloudflared) { + cloudflared.stop(); + } }; diff --git a/src/icon.js b/src/icon.js index 1b129a90..d83034fa 100644 --- a/src/icon.js +++ b/src/icon.js @@ -40,6 +40,7 @@ import { faSpinner, faUndo, faPlusCircle, + faAngleDown, } from "@fortawesome/free-solid-svg-icons"; library.add( @@ -79,6 +80,7 @@ library.add( faSpinner, faUndo, faPlusCircle, + faAngleDown, ); export { FontAwesomeIcon }; diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 6f750c79..b6fa026d 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -31,13 +31,28 @@ {{ $t("Dashboard") }} -
  • - - {{ $t("Settings") }} - -
    • -
  • - +
  • +
    +
    +
    L
    + +
    +
      +
    • Signed in as louislamlouislam
      • +
      • +
    • + + {{ $t("Settings") }} + +
      • +
    • + +
      • +
    +
    • @@ -77,10 +92,6 @@
    {{ $t("Settings") }} - @@ -156,9 +167,9 @@ export default { white-space: nowrap; padding: 0 10px; - a, button { + a { text-align: center; - width: 20%; + width: 25%; display: inline-block; height: 100%; padding: 8px 10px 0; @@ -166,7 +177,6 @@ export default { color: #c1c1c1; overflow: hidden; text-decoration: none; - vertical-align: top; &.router-link-exact-active, &.active { color: $primary; @@ -177,12 +187,6 @@ export default { font-size: 20px; } } - - button { - border: none; - background: none; - color: #dc3545; - } } main { @@ -206,6 +210,78 @@ main { z-index: 99999; } +// Profile Pic Button with Dropdown +.dropdown-profile-pic { + user-select: none; + + .nav-link { + cursor: pointer; + display: flex; + gap: 6px; + align-items: center; + background-color: rgba(200, 200, 200, 0.2); + padding: 0.5rem 0.8rem; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + } + + .dropdown-menu { + transition: all 0.2s; + padding-left: 0; + + .dropdown-divider { + margin: 0; + border-top: 1px solid rgba(0, 0, 0, 0.4); + background-color: transparent; + } + + .dropdown-item-text { + font-size: 14px; + padding-bottom: 0.7rem; + } + + .dropdown-item { + padding: 0.7rem 1rem; + } + + .dark & { + background-color: $dark-bg; + color: $dark-font-color; + border-color: $dark-border-color; + + .dropdown-item { + color: $dark-font-color; + + &.active { + color: $dark-font-color2; + background-color: $highlight !important; + } + + &:hover { + background-color: $dark-bg2; + } + } + } + } + + .profile-pic { + display: flex; + align-items: center; + justify-content: center; + color: white; + background-color: $primary; + width: 24px; + height: 24px; + margin-right: 5px; + border-radius: 50rem; + font-weight: bold; + font-size: 10px; + + } +} + .dark { header { background-color: $dark-header-bg; diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue index b0e17764..4f01572e 100644 --- a/src/pages/Settings.vue +++ b/src/pages/Settings.vue @@ -16,6 +16,14 @@ {{ item.title }} + + + +
    + + {{ $t("Logout") }} +
    +
    @@ -233,4 +241,8 @@ footer { } } } + +.logout { + color: $danger !important; +} From cb55e2371876710eef222cbd1b69ff18bec18be5 Mon Sep 17 00:00:00 2001 From: Louis Lam Date: Tue, 19 Apr 2022 19:40:28 +0800 Subject: [PATCH 4/6] Add $root.username --- src/components/settings/Security.vue | 15 +-------------- src/layouts/Layout.vue | 4 ++-- src/mixins/socket.js | 15 +++++++++++++-- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue index e5960004..a72b0727 100644 --- a/src/components/settings/Security.vue +++ b/src/components/settings/Security.vue @@ -4,7 +4,7 @@