Merge remote-tracking branch 'origin/develop' into shigusegubu

* origin/develop:
  Added Traditional Chinese to language swithcer
  Newer chromedriver works on MacOS aarch64
  make with-load-more not use computeds when they don't work for it
  update changelog with latest release
  simplified code, review
  change your log
  theme ui
  Basic no-wallpaper support

CHANGELOG.md

@@ -5,11 +5,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 
 ## [Unreleased]
+### Fixed
+- Follows/Followers tabs on user profiles now display the content properly.
+
+## [2.2.2] - 2020-12-22
 ### Added
 - Mouseover titles for emojis in reaction picker
 - Support to input emoji into the search box in reaction picker
 - Added some missing unicode emoji
 - Added the upload limit to the Features panel in the About page
+- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
 
 ### Fixed
 - Fixed the occasional bug where screen would scroll 1px when typing into a reply form
@@ -21,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed error handling when updating various profile images
 - Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
 - Fixed custom emoji not showing in poll options before voting
+- Fixed link color not applied to instance name in topbar
 
 ### Changed
 - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
@@ -28,6 +34,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Adjusted timeline menu clickable area to match the visible button
 - Moved external source link from status heading to the ellipsis menu
 - Disabled horizontal textarea resize
+- Wallpaper is now top-aligned, horizontally centered.
 
 
 ## [2.2.1] - 2020-11-11

package.json

@@ -55,7 +55,7 @@
     "babel-plugin-lodash": "^3.3.4",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",
-    "chromedriver": "^2.21.2",
+    "chromedriver": "^87.0.1",
     "connect-history-api-fallback": "^1.1.0",
     "cross-spawn": "^4.0.2",
     "css-loader": "^0.28.0",

src/App.js

@@ -15,6 +15,7 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'app',
@@ -50,17 +51,18 @@ export default {
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
-    background () {
+    userBackground () { return this.currentUser.background_image },
-      return this.currentUser.background_image || this.$store.state.instance.background
+    instanceBackground () {
+      return this.mergedConfig.hideInstanceWallpaper
+        ? null
+        : this.$store.state.instance.background
     },
+    background () { return this.userBackground || this.instanceBackground },
     bgStyle () {
-      return {
+      if (this.background) {
-        'background-image': `url(${this.background})`
+        return {
-      }
+          '--body-background-image': `url(${this.background})`
-    },
+        }
-    bgAppStyle () {
-      return {
-        '--body-background-image': `url(${this.background})`
       }
     },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
@@ -77,7 +79,8 @@ export default {
       return {
         'order': this.$store.state.instance.sidebarRight ? 99 : 0
       }
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   },
   methods: {
     updateMobileState () {

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-'] {

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 />

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;

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -63,7 +63,8 @@ export default {
       const specialLanguageNames = {
         'ja': 'Japanese (日本語)',
         'ja_easy': 'Japanese (やさしいにほんご)',
-        'zh': 'Chinese (简体中文)'
+        'zh': 'Simplified Chinese (简体中文)',
+        'zh_Hant': 'Traditional Chinese (繁體中文)'
       }
       return specialLanguageNames[code] || ISO6391.getName(code)
     }

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()
   }
 }

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">

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%;
 

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -616,6 +616,15 @@
               :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
+            <ColorInput
+              v-model="wallpaperColorLocal"
+              name="wallpaper"
+              :label="$t('settings.style.advanced_colors.wallpaper')"
+              :fallback="previewTheme.colors.wallpaper"
+            />
+          </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
             <ColorInput

src/hocs/with_load_more/with_load_more.js

@@ -29,12 +29,8 @@ const withLoadMore = ({
       return {
         loading: false,
         bottomedOut: false,
-        error: false
+        error: false,
-      }
+        entries: []
-    },
-    computed: {
-      entries () {
-        return select(this.$props, this.$store) || []
       }
     },
     created () {
@@ -48,6 +44,11 @@ const withLoadMore = ({
       destroy && destroy(this.$props, this.$store)
     },
     methods: {
+      // Entries is not a computed because computed can't track the dynamic
+      // selector for changes and won't trigger after fetch.
+      updateEntries () {
+        this.entries = select(this.$props, this.$store) || []
+      },
       fetchEntries () {
         if (!this.loading) {
           this.loading = true
@@ -61,6 +62,9 @@ const withLoadMore = ({
               this.loading = false
               this.error = true
             })
+            .finally(() => {
+              this.updateEntries()
+            })
         }
       },
       scrollLoad (e) {

src/i18n/en.json

@@ -329,6 +329,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)",
@@ -516,6 +517,7 @@
         "inputs": "Input fields",
         "faint_text": "Faded text",
         "underlay": "Underlay",
+        "wallpaper": "Wallpaper",
         "poll": "Poll graph",
         "icons": "Icons",
         "highlight": "Highlighted elements",

src/i18n/messages.js

@@ -34,7 +34,8 @@ const loaders = {
   ru: () => import('./ru.json'),
   te: () => import('./te.json'),
   uk: () => import('./uk.json'),
-  zh: () => import('./zh.json')
+  zh: () => import('./zh.json'),
+  zh_Hant: () => import('./zh_Hant.json')
 }
 
 const messages = {

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

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

static/themes/redmond-xx-se.json

@@ -267,6 +267,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",

static/themes/redmond-xx.json

@@ -258,6 +258,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",

static/themes/redmond-xxi.json

@@ -240,6 +240,7 @@
     },
     "colors": {
       "bg": "#d6d6ce",
+      "wallpaper": "#396ba5",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#0a246a",