From c1977567677385bef3f27ba0f8d20e13e07cd9e9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Dec 2020 18:25:07 +0200
Subject: [PATCH] Basic no-wallpaper support

---
 src/App.js                                      | 17 ++++++++++-------
 src/App.scss                                    |  4 +++-
 src/App.vue                                     |  3 +--
 src/components/desktop_nav/desktop_nav.scss     |  4 ++++
 .../settings_modal/tabs/general_tab.js          |  4 ++++
 .../settings_modal/tabs/general_tab.vue         |  5 +++++
 .../tabs/theme_tab/theme_tab.scss               |  3 ++-
 src/i18n/en.json                                |  1 +
 src/modules/config.js                           |  1 +
 src/services/theme_data/pleromafe.js            |  4 ++++
 static/themes/redmond-xx-se.json                |  1 +
 static/themes/redmond-xx.json                   |  1 +
 static/themes/redmond-xxi.json                  |  1 +
 13 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 52700319..c79184ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -54,13 +54,16 @@ export default {
       return this.currentUser.background_image || this.$store.state.instance.background
     },
     bgStyle () {
-      return {
-        'background-image': `url(${this.background})`
-      }
-    },
-    bgAppStyle () {
-      return {
-        '--body-background-image': `url(${this.background})`
+      if (
+        this.currentUser.background_image ||
+          (
+            this.$store.state.instance.background &&
+              !this.$store.getters.mergedConfig.hideInstanceWallpaper
+          )
+      ) {
+        return {
+          '--body-background-image': `url(${this.background})`
+        }
       }
     },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
diff --git a/src/App.scss b/src/App.scss
index cdc3209c..394d6434 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -14,7 +14,9 @@
   right: -20px;
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: 0 50%;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-position: 50% 50px;
 }
 
 i[class^='icon-'] {
diff --git a/src/App.vue b/src/App.vue
index b4eb0524..1a166778 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,11 @@
 <template>
   <div
     id="app"
-    :style="bgAppStyle"
+    :style="bgStyle"
   >
     <div
       id="app_bg_wrapper"
       class="app-bg-wrapper"
-      :style="bgStyle"
     />
     <MobileNav v-if="isMobileLayout" />
     <DesktopNav v-else />
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 8fd8e620..2d468588 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -5,6 +5,10 @@
   width: 100%;
   position: fixed;
 
+  a {
+    color: var(--topBarLink, $fallback--link);
+  }
+
   .inner-nav {
     display: grid;
     grid-template-rows: 50px;
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index df592a10..029ee7a1 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -34,6 +34,10 @@ const GeneralTab = {
       return this.$store.state.instance.postFormats || []
     },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index c1d0d0ec..a9081793 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -11,6 +11,11 @@
             {{ $t('settings.hide_isp') }}
           </Checkbox>
         </li>
+        <li v-if="instanceWallpaperUsed">
+          <Checkbox v-model="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </Checkbox>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 926eceff..1b7d9f31 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -165,7 +165,8 @@
     border-color: var(--border, $fallback--border);
     margin: 1em 0;
     padding: 1em;
-    background: var(--body-background-image);
+    background-color: var(--wallpaper);
+    background-image: var(--body-background-image);
     background-size: cover;
     background-position: 50% 50%;
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ef23efd6..7c8bfec2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -328,6 +328,7 @@
     "hide_muted_posts": "Hide posts of muted users",
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
+    "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
diff --git a/src/modules/config.js b/src/modules/config.js
index 444b8ec7..cd088737 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -20,6 +20,7 @@ export const defaultState = {
   customTheme: undefined,
   customThemeSource: undefined,
   hideISP: false,
+  hideInstanceWallpaper: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 7ed85797..bec1eebd 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -84,6 +84,10 @@ export const SLOT_INHERITANCE = {
     opacity: 'bg',
     priority: 1
   },
+  wallpaper: {
+    depends: ['bg'],
+    color: (mod, bg) => brightness(-2 * mod, bg).rgb
+  },
   fg: {
     depends: [],
     priority: 1
diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json
index 24480d2c..b62769db 100644
--- a/static/themes/redmond-xx-se.json
+++ b/static/themes/redmond-xx-se.json
@@ -267,6 +267,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",
diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json
index cf9010fe..83b59109 100644
--- a/static/themes/redmond-xx.json
+++ b/static/themes/redmond-xx.json
@@ -258,6 +258,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",
diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json
index 7fdc4a6d..60ceae7c 100644
--- a/static/themes/redmond-xxi.json
+++ b/static/themes/redmond-xxi.json
@@ -240,6 +240,7 @@
     },
     "colors": {
       "bg": "#d6d6ce",
+      "wallpaper": "#396ba5",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#0a246a",