theme selector new

src/components/settings_modal/tabs/appearance_tab.js

@@ -35,6 +35,7 @@ const AppearanceTab = {
   data () {
     return {
       availableStyles: [],
+      intersectionObserver: null,
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
         key: mode,
         value: mode,
@@ -62,9 +63,7 @@ const AppearanceTab = {
     FontControl,
     Preview
   },
-  created () {
-    const self = this
-
+  mounted () {
     getThemes()
       .then((promises) => {
         return Promise.all(
@@ -74,19 +73,48 @@ const AppearanceTab = {
       })
       .then(themes => themes.reduce((acc, [k, v]) => {
         if (v) {
-          return {
+          return [
             ...acc,
-            [k]: v
-          }
+            {
+              name: v.name || v[0],
+              key: k,
+              data: v
+            }
+          ]
         } else {
           return acc
         }
-      }, {}))
+      }, []))
       .then((themesComplete) => {
-        self.availableStyles = themesComplete
+        this.availableStyles = themesComplete
       })
+
+    if (window.IntersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(({ target, isIntersecting }) => {
+          if (!isIntersecting) return
+          const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
+          this.$nextTick(() => {
+            theme.ready = true
+          })
+          observer.unobserve(target)
+        })
+      }, {
+        root: this.$refs.themeList
+      })
+    }
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
+        this.intersectionObserver.observe(node)
+      })
+    })
   },
   computed: {
+    noIntersectionObserver () {
+      return !window.IntersectionObserver
+    },
     horizontalUnits () {
       return defaultHorizontalUnits
     },
@@ -119,7 +147,12 @@ const AppearanceTab = {
     ...SharedComputedObject()
   },
   methods: {
-    previewTheme (input) {
+    isThemeActive (key, name) {
+      console.log(this.$store.getters.mergedConfig)
+      const { customTheme, themeName, customThemeSource } = this.$store.getters.mergedConfig
+      console.log(customTheme, customThemeSource, themeName)
+    },
+    previewTheme (key, input) {
       const style = normalizeThemeData(input)
       const x = 2
       if (x === 1) return
@@ -128,12 +161,13 @@ const AppearanceTab = {
         inputRuleset: theme2,
         ultimateBackgroundColor: '#000000',
         liteMode: true,
+        debug: true,
         onlyNormalState: true
       })
 
       return getScopedVersion(
         getCssRules(theme3.eager),
-        '#theme-preview-' + (input.name || input[0]).replace(/ /g, '_')
+        '#theme-preview-' + key
       ).join('\n')
     }
   }

src/components/settings_modal/tabs/appearance_tab.vue

@@ -2,18 +2,26 @@
   <div :label="$t('settings.general')">
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
-      <ul class="theme-list">
-        <li
+      <ul
+        class="input theme-list"
+        ref="themeList"
+      >
+        <button
           v-for="style in availableStyles"
-          :key="style.name || style[0]"
-          class="theme-preview"
+          :data-theme-key="style.key"
+          :key="style.key"
+          class="button-default theme-preview"
         >
-          <h6>{{ style[0] || style.name }}</h6>
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-          <component :is="'style'" v-html="previewTheme(style)"/>
+          <component
+            :is="'style'"
+            v-if="style.ready || noIntersectionObserver"
+            v-html="previewTheme(style.key, style.data)"
+          />
           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-          <preview :id="'theme-preview-' + (style[0] || style.name).replace(/ /g,'_')"/>
-        </li>
+          <preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
+          <h4 class="theme-name">{{ style.name }}</h4>
+        </button>
       </ul>
     </div>
     <div class="setting-item">
@@ -252,13 +260,28 @@
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-}
+  margin: 0 -0.5em;
+  height: 15em;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
 
-.theme-preview {
-  width: 10rem;
+  .theme-preview {
+    width: 21rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0.5em;
 
-  .preview-container {
-    zoom: 0.33;
+    &.placeholder {
+      opacity: 0.2;
+    }
+
+    .preview-container {
+      zoom: 0.5;
+      border: none;
+      border-radius: var(--roundness);
+    }
   }
 }
 </style>