diff --git a/client/src/modules/contentmanager.js b/client/src/modules/contentmanager.js index 5ffbd30f..3a3d8d4a 100644 --- a/client/src/modules/contentmanager.js +++ b/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*/ } diff --git a/client/src/modules/theme.js b/client/src/modules/theme.js index 3755b63f..1f2d8021 100644 --- a/client/src/modules/theme.js +++ b/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); } diff --git a/client/src/modules/thememanager.js b/client/src/modules/thememanager.js index 815d5744..599ba83b 100644 --- a/client/src/modules/thememanager.js +++ b/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))})`); } diff --git a/client/src/styles/partials/generic/forms/colourpicker.scss b/client/src/styles/partials/generic/forms/colourpicker.scss index b872c774..968b6461 100644 --- a/client/src/styles/partials/generic/forms/colourpicker.scss +++ b/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; diff --git a/client/src/styles/partials/generic/forms/main.scss b/client/src/styles/partials/generic/forms/main.scss index b4a2627c..3f153e30 100644 --- a/client/src/styles/partials/generic/forms/main.scss +++ b/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 { diff --git a/client/src/ui/components/bd/setting/File.vue b/client/src/ui/components/bd/setting/File.vue index f7f26e46..31e8b9d4 100644 --- a/client/src/ui/components/bd/setting/File.vue +++ b/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)); diff --git a/tests/themes/Example/background.jpg b/tests/themes/Example/background.jpg new file mode 100644 index 00000000..314329e0 Binary files /dev/null and b/tests/themes/Example/background.jpg differ diff --git a/tests/themes/Example/config.json b/tests/themes/Example/config.json index b9437612..8ca900a4 100644 --- a/tests/themes/Example/config.json +++ b/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" + ] + } + ] + } + ] } ] } diff --git a/tests/themes/Example/index.scss b/tests/themes/Example/index.scss index f2940326..c134c1d5 100644 --- a/tests/themes/Example/index.scss +++ b/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;