replaced style editor in settings with manage styles

src/main/base/browserwindow.ts

@@ -46,6 +46,7 @@ export class BrowserWindow {
                 "pages/library-artists",
                 "pages/browse",
                 "pages/settings",
+                "pages/installed-themes",
                 "pages/listen_now",
                 "pages/home",
                 "pages/artist-feed",
@@ -178,6 +179,10 @@ export class BrowserWindow {
                     page: "settings",
                     component: `<cider-settings></cider-settings>`,
                     condition: `page == 'settings'`
+                }, {
+                    page: "installed-themes",
+                    component: `<installed-themes></installed-themes>`,
+                    condition: `page == 'installed-themes'`
                 }, {
                     page: "search",
                     component: `<cider-search :search="search"></cider-search>`,

src/renderer/less/pages.less

@@ -497,12 +497,14 @@
   flex-direction: column;
   height        : 100%;
   overflow      : hidden;
+
   .cd-mediaitem-list-item {
     &:hover {
       .heart-icon {
         display: flex;
       }
     }
+
     .heart-icon {
       left: -25px;
     }
@@ -522,7 +524,8 @@
 
   .mediaContainer {
     transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
-    width: 260px;height:260px;
+    width     : 260px;
+    height    : 260px;
   }
 
   .playlist-body {
@@ -547,6 +550,7 @@
           height  : 100%;
           overflow: hidden;
           margin  : 0px;
+
           .tab-pane {
             height            : 100%;
             overflow-y        : overlay;
@@ -554,6 +558,7 @@
             padding           : var(--contentInnerPadding);
             padding-inline    : 40px;
             -webkit-mask-image: linear-gradient(180deg, transparent, white 20px);
+
             .well {
               margin: 0px;
             }
@@ -824,9 +829,7 @@
       transition: min-height 0.5s ease-in-out;
       min-height: 200px;
 
-      .playlistInfo {
+      .playlistInfo {}
-
-      }
 
       .mediaContainer {
         transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
@@ -1123,9 +1126,46 @@
 
 /* Artist Page End */
 
-// Settings page
+
-.settings-page {
+.installed-themes-page {
+
+  .themeContextMenu {
+    background: transparent;
+    color     : var(--keyColor);
+    border    : 0px;
+  }
+
+  .repo-header {
+    font-size      : 16px;
+    position       : sticky;
+    top            : 0;
+    left           : 0;
+    right          : 0;
+    width          : 100%;
+    height         : 50px;
+    z-index        : 1;
+    background     : rgba(36, 36, 36, 0.5);
+    display        : flex;
+    justify-content: center;
+    align-items    : center;
+    backdrop-filter: var(--glassFilter);
+    overflow       : hidden;
+    border-bottom  : 1px solid rgb(0 0 0 / 18%);
+    border-top     : 1px solid rgb(135 135 135 / 18%);
+  }
+
+  .style-editor-container {
+    height    : 100%;
+    flex      : 1;
+    background: var(--color2);
     padding   : 0px;
+    overflow-y: overlay;
+
+    .list-group-item {
+      border-radius: 0px;
+    }
+  }
+
 
   .stylestack-editor {
     width: 100%;
@@ -1156,7 +1196,11 @@
       }
     }
   }
+}
 
+// Settings page
+.settings-page {
+  padding: 0px;
 
   .nav {
     width : 90%;
@@ -1176,6 +1220,7 @@
     height: 100%;
     width : 100%;
   }
+
   .settings-option-body {
     margin: 16px;
   }

src/renderer/views/pages/installed-themes.ejs

@@ -0,0 +1,291 @@
+<script type="text/x-template" id="installed-themes">
+    <div class="content-inner github-themes-page installed-themes-page">
+        <div class="gh-header">
+            <div class="row">
+                <div class="col nopadding">
+                    <h1 class="header-text">
+                        Manage Styles    
+                    </h1>
+                </div>
+                <div class="col-auto flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="openThemesFolder()">
+                        {{$root.getLz('settings.option.visual.theme.github.openfolder')}}
+                    </button>
+                </div>
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
+                        {{$root.getLz('settings.option.visual.theme.github.download')}}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="gh-content">
+            <div class="repos-list">
+                <div class="repo-header">
+                    <h4>Available</h4>
+                </div>
+                <ul class="list-group list-group-flush">
+                    <li @click="addStyle(theme.file)" 
+                    @contextmenu="contextMenu"
+                    class="list-group-item list-group-item-dark"
+                        v-for="theme in themes" :value="theme.file"
+                        v-if="!$root.cfg.visual.styles.includes(theme.file)">
+                        
+                        <b-row>
+                            <b-col class="themeLabel">{{theme.name}}</b-col>
+                            <b-col sm="auto">
+                                <button @click.stop="contextMenu" class="themeContextMenu codicon codicon-list-unordered"></button>
+                            </b-col>
+                        </b-row>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="style-editor-container">
+                <div class="repo-header">
+                    <h4>Applied</h4>
+                </div>
+                <stylestack-editor ref="stackEditor"  v-if="themes.length != 0" :themes="themes"/>
+            </div>
+            </transition>
+        </div>
+    </div>
+</script>
+
+<script>
+    // do not translate
+    Vue.component('stylestack-editor', {
+        /*html*/
+        template: `
+            <div class="stylestack-editor" >
+                <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
+                    <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
+                        <b-row>
+                            <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
+                            <b-col sm="auto">
+                                <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
+                            </b-col>
+                        </b-row>
+                        </b-list-group-item>
+                </draggable>    
+            </div>
+        `,
+        props: {
+            themes: {
+                type: Array,
+                default: [],
+                required: true
+            }
+        },
+        data: function () {
+            return {
+                selected: null,
+                newTheme: null,
+                themeList: []
+            }
+        },
+        mounted() {
+            console.log(this.themes)
+            this.themeList = [...this.themes]
+            this.themeList.unshift({
+                name: "Acrylic Grain",
+                file: "grain.less"
+            })
+            this.themeList.unshift({
+                name: "Sweetener",
+                file: "sweetener.less"
+            })
+            this.themeList.unshift({
+                name: "Reduce Visuals",
+                file: "reduce_visuals.less"
+            })
+            this.themeList.unshift({
+                name: "Inline Drawer",
+                file: "inline_drawer.less"
+            })
+        },
+        methods: {
+
+            gitHubExplore() {
+                this.$root.appRoute("themes-github")
+            },
+            getThemeName(filename) {
+                try {
+                    return this.themeList.find(theme => theme.file === filename).name;
+                } catch (e) {
+                    return filename;
+                }
+            },
+            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(style) {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(style)
+                styles.splice(index, 1)
+                this.$root.reloadStyles()
+            },
+            addStyle(style) {
+                const styles = this.$root.cfg.visual.styles
+                styles.push(style)
+                this.$root.reloadStyles()
+            }
+        }
+    })
+</script>
+
+<script>
+    Vue.component('installed-themes', {
+        template: "#installed-themes",
+        props: [],
+        data: function () {
+            return {
+                repos: [],
+                openRepo: {
+                    id: -1,
+                    name: '',
+                    description: '',
+                    html_url: '',
+                    stargazers_count: 0,
+                    owner: {
+                        avatar_url: ''
+                    },
+                    readme: ""
+                },
+                themesInstalled: [],
+                themes: []
+            }
+        },
+        mounted() {
+            this.themes = ipcRenderer.sendSync("get-themes")
+            // this.getRepos();
+            this.getInstalledThemes();
+            // app.checkForThemeUpdates()
+        },
+        methods: {
+            contextMenu(event) {
+                let menu = {
+                    items: [{
+                        name: "Uninstall",
+                        action: () => {
+                            
+                        }
+                    },
+                    {
+                        name: "View Info",
+                        action: () => {
+                            
+                        }
+                    }
+                    ]
+                }
+                this.$root.showMenuPanel(menu, event)
+            },
+            openThemesFolder() {
+                ipcRenderer.invoke("open-path", "themes")
+            },
+            getInstalledThemes() {
+                let self = this
+                const themes = ipcRenderer.sendSync("get-themes")
+                // for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
+                themes.forEach(theme => {
+                    if (theme.github_repo !== "" && typeof theme.commit != "") {
+                        self.themesInstalled.push(theme.github_repo.toLowerCase())
+                    }
+                })
+            },
+            addStyle(filename) {
+                this.$refs.stackEditor.addStyle(filename)
+            },
+            showRepo(repo) {
+                const self = this
+                const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch(readmeUrl, requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        self.openRepo = repo
+                        self.openRepo.readme = self.convertReadMe(result);
+                    })
+                    .catch(error => {
+                        self.openRepo = repo
+                        self.openRepo.readme = `This repository doesn't have a README.md file.`;
+                        console.log('error', error)
+                    });
+            },
+            convertReadMe(text) {
+                return marked.parse(text)
+            },
+            installThemeRepo(repo) {
+                let self = this
+                let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
+                    repo: repo.full_name
+                });
+                bootbox.confirm(msg, (res) => {
+                    if (res) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                self.getInstalledThemes()
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", repo.html_url)
+                    }
+                })
+            },
+            installThemeURL() {
+                let self = this
+                bootbox.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
+                    if (result) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", result)
+                    }
+                });
+            },
+            getRepos() {
+                let self = this
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        let items = JSON.parse(result).items
+                        self.repos = items
+                    })
+                    .catch(error => console.log('error', error));
+            }
+        }
+    })
+</script>

src/renderer/views/pages/settings.ejs

@@ -1224,8 +1224,8 @@
                                 <small>Mix and match various theme components to get Cider looking exactly how you
                                     want.</small>
                             </div>
-                            <div class="md-option-segment">
+                            <div class="md-option-segment md-option-segment_auto">
-                                <stylestack-editor :themes="themes"/>
+                                <button class="md-btn" @click="app.appRoute('installed-themes')">Manage Styles</button>
                             </div>
                         </div>
 
@@ -1436,112 +1436,6 @@
     </div>
 </script>
 
-<script>
-    // do not translate
-    Vue.component('stylestack-editor', {
-        /*html*/
-        template: `
-            <div class="stylestack-editor">
-                <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
-                    <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
-                        <b-row>
-                            <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
-                            <b-col sm="auto">
-                                <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
-                            </b-col>
-                        </b-row>
-                        </b-list-group-item>
-                        <b-list-group-item slot="footer" style="-webkit-user-drag: none" variant="dark">
-                            <b-row>
-                                <b-col>
-                                    <b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
-                                        <b-dropdown-item v-for="theme in themeList" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
-                                    </b-dropdown>
-                                </b-col>
-                                <b-col>
-                                    <b-btn @click="gitHubExplore()">{{$root.getLz('settings.option.visual.theme.github.explore')}}</b-btn>    
-                                </b-col>
-                            </b-row>
-                        </b-list-group-item>
-                </draggable>    
-            </div>
-        `,
-        props: {
-            themes: {
-                type: Array,
-                default: []
-            }
-        },
-        data: function () {
-            return {
-                selected: null,
-                newTheme: null,
-                themeList: []
-            }
-        },
-        mounted() {
-            this.themeList = [...this.themes]
-            this.themeList.unshift({
-                name: "Acrylic Grain",
-                file: "grain.less"
-            })
-            this.themeList.unshift({
-                name: "Sweetener",
-                file: "sweetener.less"
-            })
-            this.themeList.unshift({
-                name: "Reduce Visuals",
-                file: "reduce_visuals.less"
-            })
-            this.themeList.unshift({
-                name: "Inline Drawer",
-                file: "inline_drawer.less"
-            })
-        },
-        methods: {
-            gitHubExplore() {
-                this.$root.appRoute("themes-github")
-            },
-            getThemeName(filename) {
-                try {
-                    return this.themeList.find(theme => theme.file === filename).name;
-                } catch (e) {
-                    return filename;
-                }
-            },
-            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(style) {
-                const styles = this.$root.cfg.visual.styles
-                const index = styles.indexOf(style)
-                styles.splice(index, 1)
-                this.$root.reloadStyles()
-            },
-            addStyle(style) {
-                const styles = this.$root.cfg.visual.styles
-                styles.push(style)
-                this.$root.reloadStyles()
-            }
-        }
-    })
-</script>
-
 <script>
     Vue.component('cider-settings', {
         template: "#cider-settings",