adds style stack editor

src/main/base/store.ts

@@ -115,6 +115,7 @@ export class Store {
         },
         "visual": {
             "theme": "",
+            "styles": [],
             "scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
             "refresh_rate": 0,
             "window_background_style": "artwork", // "none", "artwork", "color"

src/renderer/main/vueapp.js

@@ -956,6 +956,31 @@ const app = new Vue({
                 less.refresh()
             }
         },
+        async reloadStyles() {
+            const styles = this.cfg.visual.styles
+            document.querySelectorAll(`[id*='less']`).forEach(el => {
+                el.remove()
+            });
+            this.chrome.appliedTheme.info = {}
+            await asyncForEach(styles, async (style) => {
+                let styleEl = document.createElement("link")
+                styleEl.id = `less-${style.replace(".less", "")}`
+                styleEl.rel = "stylesheet/less"
+                styleEl.href = `themes/${style}`
+                styleEl.type = "text/css"
+                document.head.appendChild(styleEl)
+                try {
+                    let infoResponse = await fetch("themes/" + style.replace("index.less", "theme.json"))
+                    this.chrome.appliedTheme.info = Object.assign(this.chrome.appliedTheme.info, await infoResponse.json())
+                } catch (e) {
+                    e = null
+                    console.warn("failed to get theme.json")
+                }
+            })
+            less.registerStylesheetsImmediately()
+            less.refresh(true, true, true)
+            this.$forceUpdate()
+        },
         macOSEmu() {
             this.chrome.forceDirectives["macosemu"] = {
                 value: true

src/renderer/views/pages/settings.ejs

@@ -840,6 +840,17 @@
                             </div>
                         </div>
 
+                        <div class="md-option-line">
+                            <!-- Do not translate -->
+                            <div class="md-option-segment">
+                                Style Stack Editor
+                            </div>
+                        </div>
+
+                        <div class="md-option-line">
+                            <stylestack-editor :themes="themes"/>
+                        </div>
+
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.experimental.unknownPlugin')}}
@@ -938,6 +949,77 @@
     </div>
 </script>
 
+<script>
+    // do not translate
+    Vue.component('stylestack-editor', {
+        /*html*/
+        template: `
+            <b-row>
+                <b-col>
+                    <select size="6" v-model="selected" style="width:100%;">
+                        <option v-for="theme in $root.cfg.visual.styles" :value="theme">{{theme}}</option>
+                    </select>    
+                    <div class="btn-group" style="width: 100%">
+                        <button @click="moveUp" class="md-btn md-btn-small">Up</button>
+                        <button @click="remove" class="md-btn md-btn-small">Remove</button>
+                        <button @click="moveDown" class="md-btn md-btn-small">Down</button>
+                    </div>
+                </b-col>    
+                <b-col>
+                    <select class="md-select" style="width:100%;" v-model="newTheme">
+                        <option v-for="theme in themes" :value="theme.file">{{theme.name}}</option>
+                    </select>    
+                    <button class="md-btn" @click="addStyle()">Add</button>
+                </b-col>    
+            </b-row>
+        `,
+        props: {
+            themes: {
+                type: Array,
+                default: []
+            }
+        },
+        data: function () {
+            return {
+                selected: null,
+                newTheme: null
+            }
+        },
+        methods: {
+            moveUp() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                if (index > 0) {
+                    styles.splice(index, 1)
+                    styles.splice(index - 1, 0, this.selected)
+                }
+                this.$root.reloadStyles()
+            },
+            moveDown() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                if (index < styles.length - 1) {
+                    styles.splice(index, 1)
+                    styles.splice(index + 1, 0, this.selected)
+                }
+                this.$root.reloadStyles()
+            },
+            remove() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                styles.splice(index, 1)
+                this.$root.reloadStyles()
+            },
+            addStyle() {
+                const styles = this.$root.cfg.visual.styles
+                styles.push(this.newTheme)
+                this.newTheme = null
+                this.$root.reloadStyles()
+            }
+        }
+    })
+</script>
+
 <script>
     Vue.component('cider-settings', {
         template: "#cider-settings",
@@ -1018,7 +1100,8 @@
                                     CiderAudio.spatialOn()
                                     CiderAudio.hierarchical_loading();
                                 }
-                        }})
+                            }
+                        })
                     }
                     else {
                         CiderAudio.init();