Merge pull request #100 from JsSucks/theme-manager

Theme manager

client/src/modules/thememanager.js

@@ -9,6 +9,45 @@
 */
 
 import ContentManager from './contentmanager';
+import { DOM } from 'ui';
+import { FileUtils } from 'common';
+
+class Theme {
+
+    constructor(themeInternals) {
+        this.__themeInternals = themeInternals;
+        this.enable = this.enable.bind(this);
+        this.disable = this.disable.bind(this);
+    }
+
+    get configs() { return this.__themeInternals.configs }
+    get info() { return this.__themeInternals.info }
+    get icon() { return this.info.icon }
+    get paths() { return this.__themeInternals.paths }
+    get main() { return this.__themeInternals.main }
+    get defaultConfig() { return this.configs.defaultConfig }
+    get userConfig() { return this.configs.userConfig }
+    get name() { return this.info.name }
+    get authors() { return this.info.authors }
+    get version() { return this.info.version }
+    get themePath() { return this.paths.contentPath }
+    get dirName() { return this.paths.dirName }
+    get enabled() { return this.userConfig.enabled }
+    get themeConfig() { return this.userConfig.config }
+    get css() { return this.__themeInternals.css }
+    get id() { return this.name.toLowerCase().replace(/\s+/g, '-') }
+
+    enable() {
+        this.userConfig.enabled = true;
+        DOM.injectTheme(this.css, this.id);
+    }
+
+    disable() {
+        this.userConfig.enabled = false;
+        DOM.deleteTheme(this.id);
+    }
+
+}
 
 export default class extends ContentManager {
 
@@ -24,4 +63,32 @@ export default class extends ContentManager {
         return this.loadAllContent;
     }
 
+    static get loadContent() { return this.loadTheme }
+    static async loadTheme(paths, configs, info, main) {
+        try {
+            const css = await FileUtils.readFile(paths.mainPath);
+            const instance = new Theme({ configs, info, main, paths: { contentPath: paths.contentPath, dirName: paths.dirName }, css });
+            return instance;
+        } catch (err) {
+            throw err;
+        }
+    }
+
+
+    static async loadPlugin(paths, configs, info, main) {
+        const plugin = window.require(paths.mainPath)(Plugin, {}, {});
+        const instance = new plugin({ configs, info, main, paths: { contentPath: paths.contentPath, dirName: paths.dirName } });
+
+        if (instance.enabled) instance.start();
+        return instance;
+    }
+
+    static enableTheme(theme) {
+        theme.enable();
+    }
+
+    static disableTheme(theme) {
+        theme.disable();
+    }
+
 }

client/src/styles/partials/bdsettings/card.scss

@@ -1,4 +1,4 @@
-.bd-plugin-card {
+.bd-card {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -9,14 +9,14 @@
     color: #b9bbbe;
     margin-top: 10px;
 
-    .bd-plugin-header {
+    .bd-card-header {
         padding-bottom: 5px;
         display: flex;
         flex-grow: 0;
         font-weight: 700;
         align-items: center;
 
-        .bd-plugin-icon {
+        .bd-card-icon {
             width: 30px;
             height: 30px;
         }
@@ -30,12 +30,12 @@
         }
     }
 
-    .bd-plugin-body {
+    .bd-card-body {
         display: flex;
         flex-grow: 1;
         flex-direction: column;
 
-        .bd-plugin-description {
+        .bd-card-description {
             flex-grow: 1;
             overflow-y: auto;
             max-height: 60px;
@@ -48,12 +48,12 @@
             margin-top: 5px;
         }
 
-        .bd-plugin-footer {
+        .bd-card-footer {
             display: flex;
             flex-grow: 1;
             align-items: flex-end;
 
-            .bd-plugin-extra {
+            .bd-card-extra {
                 color: rgba(255, 255, 255, 0.15);
                 font-size: 10px;
                 font-weight: 700;

client/src/styles/partials/bdsettings/index.scss

@@ -1,6 +1,6 @@
 @import './button.scss';
 @import './sidebarview.scss';
 @import './plugins.scss';
-@import './plugincard.scss';
+@import './card.scss';
 @import './tooltips.scss';
 @import './plugin-settings-modal.scss';

client/src/ui/components/BdSettings.vue

@@ -49,6 +49,9 @@
                 <div v-if="activeContent('plugins') || animatingContent('plugins')" :class="{active: activeContent('plugins'), animating: animatingContent('plugins')}">
                     <PluginsView />
                 </div>
+                <div v-if="activeContent('themes') || animatingContent('themes')" :class="{active: activeContent('themes'), animating: animatingContent('themes')}">
+                    <ThemesView />
+                </div>
             </ContentColumn>
         </SidebarView>
     </div>
@@ -58,7 +61,7 @@
     import { shell } from 'electron';
     import { Settings } from 'modules';
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
-    import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
+    import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, ThemesView } from './bd';
     import { SvgX, MiGithubCircle, MiWeb, MiClose, MiTwitterCircle } from './common';
 
     // Constants
@@ -92,7 +95,7 @@
         },
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
-            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView,
+            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, ThemesView,
             MiGithubCircle, MiWeb, MiClose, MiTwitterCircle
         },
         methods: {

client/src/ui/components/bd/Card.vue

@@ -0,0 +1,42 @@
+/**
+ * BetterDiscord Card Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-card">
+        <div class="bd-card-header">
+            <div class="bd-card-icon" :style="{backgroundImage: item.icon ? `url(${item.icon})` : null}">
+                <MiExtension v-if="!item.icon" :size="30" />
+            </div>
+            <span>{{item.name}}</span>
+            <div class="bd-flex-spacer" />
+            <slot name="toggle"/>
+        </div>
+        <div class="bd-card-body">
+            <div class="bd-card-description">{{item.description}}</div>
+            <div class="bd-card-footer">
+                <div class="bd-card-extra">v{{item.version}} by {{item.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
+                <div class="bd-controls">
+                    <slot name="controls"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    // Imports
+    import { MiExtension } from '../common';
+
+    export default {
+        props: ['item'],
+        components: {
+            MiExtension
+        }
+    }
+</script>

client/src/ui/components/bd/PluginCard.vue

@@ -9,45 +9,31 @@
 */
 
 <template>
-    <div class="bd-plugin-card">
-        <div class="bd-plugin-header">
-            <div class="bd-plugin-icon" :style="{backgroundImage: plugin.icon ? `url(${plugin.icon})` : null}">
-                <MiExtension v-if="!plugin.icon" :size="30"/>
-            </div>
-            <span>{{plugin.name}}</span>
-            <div class="bd-flex-spacer" />
-            <label class="bd-switch-wrapper" @click="() => { togglePlugin(plugin); this.$forceUpdate(); }">
-                <input type="checkbox" class="bd-switch-checkbox" />
-                <div class="bd-switch" :class="{'bd-checked': plugin.enabled}" />
-            </label>
-        </div>
-        <div class="bd-plugin-body">
-            <div class="bd-plugin-description">{{plugin.description}}</div>
-            <div class="bd-plugin-footer">
-                <div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
-                <div class="bd-controls">
-                    <ButtonGroup>
-                        <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
-                            <MiSettings size="18"/>
-                        </Button>
-                        <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
-                            <MiRefresh size="18" />
-                        </Button>
-                        <Button v-tooltip="'Edit'" :onClick="editPlugin">
-                            <MiPencil size="18" />
-                        </Button>
-                        <Button v-tooltip="'Uninstall'" type="err">
-                            <MiDelete size="18" />
-                        </Button>
-                    </ButtonGroup>
-                </div>
-            </div>
-        </div>
-    </div>
+    <Card :item="plugin">
+        <label slot="toggle" class="bd-switch-wrapper" @click="() => { togglePlugin(plugin); this.$forceUpdate(); }">
+            <input type="checkbox" class="bd-switch-checkbox" />
+            <div class="bd-switch" :class="{'bd-checked': plugin.enabled}" />
+        </label>
+        <ButtonGroup slot="controls">
+            <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
+                <MiSettings size="18" />
+            </Button>
+            <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
+                <MiRefresh size="18" />
+            </Button>
+            <Button v-tooltip="'Edit'" :onClick="editPlugin">
+                <MiPencil size="18" />
+            </Button>
+            <Button v-tooltip="'Uninstall'" type="err">
+                <MiDelete size="18" />
+            </Button>
+        </ButtonGroup>
+    </Card>
 </template>
 <script>
     // Imports
     import { shell } from 'electron';
+    import Card from './Card.vue';
     import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
 
     export default {
@@ -58,7 +44,7 @@
         },
         props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
         components: {
-            Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+            Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
         },
         methods: {
             editPlugin() {

client/src/ui/components/bd/ThemeCard.vue

@@ -0,0 +1,60 @@
+/**
+ * BetterDiscord Theme Card Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <Card :item="theme">
+        <label slot="toggle" class="bd-switch-wrapper" @click="() => { toggleTheme(theme); this.$forceUpdate(); }">
+            <input type="checkbox" class="bd-switch-checkbox" />
+            <div class="bd-switch" :class="{'bd-checked': theme.enabled}" />
+        </label>
+        <ButtonGroup slot="controls">
+            <Button v-tooltip="'Settings'" v-if="theme.hasSettings" :onClick="() => showSettings(theme)">
+                <MiSettings size="18" />
+            </Button>
+            <Button v-tooltip="'Reload'" :onClick="() => reloadTheme(theme)">
+                <MiRefresh size="18" />
+            </Button>
+            <Button v-tooltip="'Edit'" :onClick="editTheme">
+                <MiPencil size="18" />
+            </Button>
+            <Button v-tooltip="'Uninstall'" type="err">
+                <MiDelete size="18" />
+            </Button>
+        </ButtonGroup>
+    </Card>
+</template>
+<script>
+    // Imports
+    import { shell } from 'electron';
+    import Card from './Card.vue';
+    import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
+
+    export default {
+        data() {
+            return {
+                settingsOpen: false
+            }
+        },
+        props: ['theme', 'toggleTheme', 'reloadTheme', 'showSettings'],
+        components: {
+            Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+        },
+        methods: {
+            editTheme() {
+                try {
+                    shell.openItem(this.theme.themePath);
+                } catch (err) {
+                    console.log(err);
+                }
+            }
+        }
+
+    }
+</script>

client/src/ui/components/bd/ThemesView.vue

@@ -0,0 +1,100 @@
+/**
+ * BetterDiscord Themes View Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <SettingsWrapper headertext="Themes">
+        <div class="bd-flex bd-flex-col bd-themesView">
+            <div class="bd-flex bd-tabheader">
+                <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
+                    <h3>Local</h3>
+                    <div class="bd-material-button" @click="refreshLocal">
+                        <MiRefresh />
+                    </div>
+                </div>
+                <div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
+                    <h3>Online</h3>
+                    <div class="bd-material-button">
+                        <MiRefresh />
+                    </div>
+                </div>
+            </div>
+            <div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-themes-container bd-local-themes">
+                <ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :toggleTheme="toggleTheme" :reloadTheme="reloadTheme" :showSettings="showSettings" />
+            </div>
+            <div v-if="!local" class="bd-spinner-container">
+                <div class="bd-spinner-2"></div>
+            </div>
+        </div>
+    </SettingsWrapper>
+</template>
+
+<script>
+    // Imports
+    import { ThemeManager } from 'modules';
+    import { SettingsWrapper } from './';
+    import { MiRefresh } from '../common';
+    import ThemeCard from './ThemeCard.vue';
+
+    export default {
+        data() {
+            return {
+                local: true,
+                settingsOpen: null,
+                localThemes: ThemeManager.localThemes
+            }
+        },
+        components: {
+            SettingsWrapper, ThemeCard,
+            MiRefresh
+        },
+        methods: {
+            showLocal() {
+                this.local = true;
+            },
+            showOnline() {
+                this.local = false;
+            },
+            refreshLocal() {
+                (async () => {
+                    await ThemeManager.refreshTheme();
+                })();
+            },
+            toggleTheme(theme) {
+                // TODO Display error if theme fails to enable/disable
+                try {
+                    if (theme.enabled) {
+                        ThemeManager.disableTheme(theme);
+                    } else {
+                        ThemeManager.enableTheme(theme);
+                    }
+                } catch (err) {
+                    console.log(err);
+                }
+            },
+            reloadTheme(theme) {
+                (async () => {
+                    try {
+                        await ThemeManager.reloadTheme(theme);
+                        this.$forceUpdate();
+                    } catch (err) {
+                        console.log(err);
+                    }
+                })();
+            },
+            showSettings(theme) {
+                this.settingsOpen = theme;
+            },
+            closeSettings() {
+                this.settingsOpen = null;
+            }
+        }
+    }
+
+</script>

client/src/ui/components/bd/index.js

@@ -4,4 +4,5 @@ export { default as UISettings } from './UISettings.vue';
 export { default as EmoteSettings } from './EmoteSettings.vue';
 export { default as CssEditorView } from './CssEditor.vue';
 export { default as PluginsView } from './PluginsView.vue';
+export { default as ThemesView } from './ThemesView.vue';
 export { default as BdBadge } from './BdBadge.vue';

tests/themes/Example/config.json

@@ -0,0 +1,10 @@
+{
+    "info": {
+        "name": "Example Theme 1",
+        "authors": [ "Jiiks" ],
+        "version": 1.0,
+        "description": "Example Theme 1 Description",
+        "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg=="
+    },
+    "main": "index.css"
+}

tests/themes/Example/index.css

@@ -0,0 +1,7 @@
+div {
+    background: red;
+}
+
+span {
+    border: 1px solid brown;
+}