From 862a5a86e7bdf484a6babe87f1ace12a0a959099 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztaube.ch>
Date: Sun, 28 Feb 2021 00:40:54 +0100
Subject: [PATCH] compact user panel

---
 .../settings_modal/tabs/general_tab.vue       |  5 ++++
 src/components/user_panel/user_panel.js       |  3 +++
 src/components/user_panel/user_panel.vue      | 23 ++++++++++++++++++-
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         |  1 +
 5 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index ce78df83..a1641965 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -26,6 +26,11 @@
             {{ $t('settings.compact_nav_panel') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="compactUserPanel">
+            {{ $t('settings.compact_user_panel') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
index c2f51eb6..f97fff6f 100644
--- a/src/components/user_panel/user_panel.js
+++ b/src/components/user_panel/user_panel.js
@@ -6,6 +6,9 @@ import { mapState } from 'vuex'
 const UserPanel = {
   computed: {
     signedIn () { return this.user },
+    compactUserPanel () {
+      return this.$store.getters.mergedConfig.compactUserPanel || false
+    },
     ...mapState({ user: state => state.users.currentUser })
   },
   components: {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 5685916a..1e03e1ee 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="user-panel">
+  <div
+    class="user-panel"
+    :class="{ compact: compactUserPanel }"
+  >
     <div
       v-if="signedIn"
       key="user-panel"
@@ -25,4 +28,22 @@
 .user-panel .signed-in {
   overflow: visible;
 }
+
+.user-panel.compact {
+  .background-image {
+    mask: unset; -webkit-mask: unset;
+    background-position: center;
+  }
+
+  .user-info .Avatar { width: 24px; height: 24px; }
+
+  .user-summary { margin-left: 1em; font-weight: bold; }
+
+  .user-info .container { padding-top: 6px; padding-bottom: 0; }
+
+  .bottom-line { display: none; }
+
+  .form-group .visibility-notice { margin: 0; }
+}
+
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a9da0533..594342db 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -338,6 +338,7 @@
     "hide_isp": "Hide instance-specific panel",
     "show_third_column": "Move Notifications to a seperate column",
     "compact_nav_panel": "Compact navigation panel",
+    "compact_user_panel": "Compact user panel",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
diff --git a/src/modules/config.js b/src/modules/config.js
index 704c64a3..6a98091b 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -20,6 +20,7 @@ export const defaultState = {
   customTheme: undefined,
   showThirdColumn: false,
   compactNavPanel: false,
+  compactUserPanel: false,
   customThemeSource: undefined,
   hideISP: false,
   hideInstanceWallpaper: false,