lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Add an option to add additional classes to toasts

This commit is contained in:
Samuel Elliott 2018-07-20 12:04:16 +01:00
parent a95b97b3c0
commit 1d887967d9
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/ui/components/BdToasts.vue
View File

@ -10,9 +10,10 @@
<template> <template>
<div class="bd-toasts"> <div class="bd-toasts">
<Toast v-for="(toast, index) in toasts" :message="toast.message" :type="toast.type" :icon="toast.icon" :closing="toast.closing" :key="`${toast.id}`"></Toast> <Toast v-for="(toast, index) in toasts" :message="toast.message" :type="toast.type" :icon="toast.icon" :class="toast.additionalClasses" :closing="toast.closing" :key="toast.id"></Toast>
</div> </div>
</template> </template>
<script> <script>
// Imports // Imports
import { Toasts } from 'ui'; import { Toasts } from 'ui';

14
client/src/ui/components/common/Toast.vue
View File

@ -9,13 +9,13 @@
*/ */
<template> <template>
<div :class="['bd-toast', 'bd-toast-' + type, {'bd-toast-has-icon': type != 'basic' || icon, 'bd-toast-closing': closing}]"> <div :class="['bd-toast', 'bd-toast-' + type, {'bd-toast-has-icon': type !== 'basic' || icon, 'bd-toast-closing': closing}]">
<div class="bd-toast-icon" v-if="type != 'basic' || icon"> <div class="bd-toast-icon" v-if="type !== 'basic' || icon">
<img v-if="icon" :src="icon" width="20" height="20" /> <img v-if="icon" :src="icon" width="20" height="20" />
<MiSuccess v-else-if="type == 'success'" size="20" /> <MiSuccess v-else-if="type === 'success'" size="20" />
<MiWarning v-else-if="type == 'warning'" size="20" /> <MiWarning v-else-if="type === 'warning'" size="20" />
<MiInfo v-else-if="type == 'info'" size="20" /> <MiInfo v-else-if="type === 'info'" size="20" />
<MiError v-else-if="type == 'error'" size="20" /> <MiError v-else-if="type === 'error'" size="20" />
</div> </div>
<div class="bd-toast-text"> <div class="bd-toast-text">
{{message}} {{message}}
@ -33,7 +33,7 @@
icon: String, icon: String,
type: { type: {
default: 'basic', default: 'basic',
validator: function (value) { validator(value) {
return ['success', 'warning', 'error', 'info', 'basic'].indexOf(value) !== -1 return ['success', 'warning', 'error', 'info', 'basic'].indexOf(value) !== -1
} }
}, },

7
client/src/ui/toasts.js
View File

@ -8,6 +8,8 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
let toasts = 0;
export default class Toasts { export default class Toasts {
/** /**
@ -17,12 +19,13 @@ export default class Toasts {
* @param {Object} options Options object. Optional parameter. * @param {Object} options Options object. Optional parameter.
* @param {string} options.type Changes the type of the toast stylistically and semantically. Choices: "basic", "info", "success", "error", "warning". Default: "basic" * @param {string} options.type Changes the type of the toast stylistically and semantically. Choices: "basic", "info", "success", "error", "warning". Default: "basic"
* @param {string} options.icon URL to custom icon to show in the toast. Having this overrides the default icon for the toast type. * @param {string} options.icon URL to custom icon to show in the toast. Having this overrides the default icon for the toast type.
* @param {string|Object|Array} options.additionalClasses Additional classes to add to the toast element. Can be used to style it. Optional.
* @param {number} options.timeout Adjusts the time (in ms) the toast should be shown for before disappearing automatically. Default: 3000 * @param {number} options.timeout Adjusts the time (in ms) the toast should be shown for before disappearing automatically. Default: 3000
* @returns {Promise} This promise resolves when the toast is removed from the DOM. * @returns {Promise} This promise resolves when the toast is removed from the DOM.
*/ */
static async push(message, options = {}) { static async push(message, options = {}) {
const {type = 'basic', icon, timeout = 3000} = options; const {type = 'basic', icon, additionalClasses, timeout = 3000} = options;
const toast = {id: Math.random(), message, type, icon, closing: false}; const toast = {id: toasts++, message, type, icon, additionalClasses, closing: false};
this.stack.push(toast); this.stack.push(toast);
await new Promise(resolve => setTimeout(resolve, timeout)); await new Promise(resolve => setTimeout(resolve, timeout));
toast.closing = true; toast.closing = true;