BetterDiscordApp-v2/client/src/ui/components/bd/SettingsScheme.vue

48 lines
1.6 KiB
Vue

/**
* BetterDiscord Settings Scheme 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-settings-scheme" :class="{'bd-active': isActive}" @click="$emit('apply')">
<div class="bd-settings-scheme-icon" :style="{'background-image': iconURL}"></div>
<div class="bd-settings-scheme-name" v-if="scheme.name">{{ scheme.name }}</div>
<div class="bd-settings-scheme-hint" v-if="scheme.hint">{{ scheme.hint }}</div>
</div>
</template>
<script>
import { FileUtils, ClientLogger as Logger } from 'common';
import path from 'path';
export default {
props: ['scheme', 'is-active'],
data() {
return {
iconURL: undefined
};
},
methods: {
async getIconURLFromPath() {
if (!this.scheme.icon_path) return;
try {
const iconPath = path.join(this.scheme.path, this.scheme.icon_path);
const iconURL = await FileUtils.toDataURI(iconPath, this.scheme.icon_type);
return `url(${iconURL})`;
} catch (err) {
Logger.err('SettingsScheme', ['Invalid icon URL', this.scheme, err]);
}
}
},
async created() {
this.iconURL = this.scheme.icon_url || await this.getIconURLFromPath();
}
}
</script>