Add relative file path resolution for themes

client/src/modules/contentmanager.js

@@ -178,23 +178,20 @@ export default class {
             try {
                 const readUserConfig = await this.readUserConfig(contentPath);
                 userConfig.enabled = readUserConfig.enabled || false;
-                userConfig.config = readConfig.defaultConfig.map(category => {
-                    let newCategory = readUserConfig.config.find(c => c.category === category.category);
-                    // return userSet || config;
-                    if (!newCategory) newCategory = {settings: []};
+                for (let category of userConfig.config) {
+                    const newCategory = readUserConfig.config.find(c => c.category === category.category);
 
-                    category.settings = category.settings.map(setting => {
-                        if (setting.type === 'array' || setting.type === 'custom') setting.path = contentPath;
+                    for (let setting of category.settings) {
+                        setting.path = contentPath;
+
+                        if (!newCategory) continue;
                         const newSetting = newCategory.settings.find(s => s.id === setting.id);
-                        if (!newSetting) return setting;
+                        if (!newSetting) continue;
 
                         setting.value = newSetting.value;
-                        return setting;
-                    });
-                    return category;
-                });
+                    }
+                }
                 userConfig.css = readUserConfig.css || null;
-                // userConfig.config = readUserConfig.config;
             } catch (err) { /*We don't care if this fails it either means that user config doesn't exist or there's something wrong with it so we revert to default config*/
 
             }

client/src/modules/theme.js

@@ -12,7 +12,7 @@ import ThemeManager from './thememanager';
 import { EventEmitter } from 'events';
 import { SettingUpdatedEvent, SettingsUpdatedEvent } from 'structs';
 import { DOM, Modals } from 'ui';
-import { Utils, FileUtils, ClientIPC } from 'common';
+import { Utils, FileUtils, ClientIPC, ClientLogger as Logger } from 'common';
 import ContentConfig from './contentconfig';
 
 class ThemeEvents {
@@ -136,11 +136,17 @@ export default class Theme {
 
         let css = '';
         if (this.info.type === 'sass') {
+            const config = await ThemeManager.getConfigAsSCSS(this.config);
+
             css = await ClientIPC.send('bd-compileSass', {
-                data: await ThemeManager.getConfigAsSCSS(this.config),
+                data: config,
                 path: this.paths.mainPath.replace(/\\/g, '/')
             });
-            console.log(css);
+
+            Logger.log(this.name, ['Finished compiling theme', new class Info {
+                get SCSS_variables() { console.log(config); }
+                get Compiled_SCSS() { console.log(css); }
+            }]);
         } else {
             css = await FileUtils.readFile(this.paths.mainPath);
         }

client/src/modules/thememanager.js

@@ -11,6 +11,7 @@
 import ContentManager from './contentmanager';
 import Theme from './theme';
 import { FileUtils } from 'common';
+import path from 'path';
 
 export default class ThemeManager extends ContentManager {
 
@@ -134,11 +135,11 @@ export default class ThemeManager extends ContentManager {
         }
 
         if (type === 'file' && Array.isArray(value)) {
-            if (!value || !value.length) return [name, '(),'];
+            if (!value || !value.length) return [name, '()'];
 
             const files = [];
             for (let filepath of value) {
-                const buffer = await FileUtils.readFileBuffer(filepath);
+                const buffer = await FileUtils.readFileBuffer(path.resolve(setting.path, filepath));
                 const type = await FileUtils.getFileType(buffer);
                 files.push(`(data: ${this.toSCSSString(buffer.toString('base64'))}, type: ${this.toSCSSString(type.mime)}, url: ${this.toSCSSString(await FileUtils.toDataURI(buffer, type.mime))})`);
             }

client/src/styles/partials/generic/forms/colourpicker.scss

@@ -1,16 +1,3 @@
-.bd-form-colourpicker .bd-title {
-    display: flex;
-}
-
-.bd-form-colourpicker .bd-title h3 {
-    font-weight: 500;
-    color: #f6f6f7;
-    flex: 1;
-    line-height: 24px;
-    margin-bottom: 0;
-    margin-top: 0;
-}
-
 .bd-colourpicker-swatch {
     width: 50px;
     height: 30px;

client/src/styles/partials/generic/forms/main.scss

@@ -5,6 +5,7 @@
 .bd-form-radio,
 .bd-form-numberinput,
 .bd-form-slider,
+.bd-form-colourpicker,
 .bd-setting-switch,
 .bd-form-settingsarray {
     .bd-title {

client/src/ui/components/bd/setting/File.vue

@@ -31,6 +31,7 @@
     import { shell } from 'electron';
     import { ClientIPC } from 'common';
     import { MiOpenInNew, MiMinus } from '../../common';
+    import path from 'path';
 
     export default {
         props: ['setting', 'change'],
@@ -46,7 +47,7 @@
                     this.change(filenames);
             },
             openItem(file_path) {
-                shell.openItem(file_path);
+                shell.openItem(path.resolve(this.setting.path, file_path));
             },
             removeItem(file_path) {
                 this.change(this.setting.value.filter(f => f !== file_path));

tests/themes/Example/config.json

@@ -12,6 +12,15 @@
         {
             "category": "default",
             "settings": [
+                {
+                    "id": "relative-file-test",
+                    "type": "file",
+                    "text": "Messages background image",
+                    "hint": "Add a background to the messages area for testing relative path resolution",
+                    "value": [
+                        "background.jpg"
+                    ]
+                },
                 {
                     "id": "colourTest",
                     "type": "colour",
@@ -297,6 +306,25 @@
                     ]
                 }
             ]
+        },
+        {
+            "id": "scheme-4",
+            "name": "Reset to default background",
+            "hint": "Better than editing user.config.json.",
+            "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
+            "settings": [
+                {
+                    "category": "default",
+                    "settings": [
+                        {
+                            "id": "relative-file-test",
+                            "value": [
+                                "background.jpg"
+                            ]
+                        }
+                    ]
+                }
+            ]
         }
     ]
 }

tests/themes/Example/index.scss

@@ -10,6 +10,13 @@ span {
     opacity: $spanOpacity2 !important;
 }
 
+.chat .messages-wrapper,
+#friends .friends-table {
+    background-image: url(map-get($relative-file-test, url));
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
 .avatar-large {
     background-image: url(map-get($avatar, url)) !important;
     border-radius: $avatarRadius !important;