Requested changes from JsSucks/BetterDiscordApp#194
This commit is contained in:
Samuel Elliott
parent
007637a557
commit
a95b97b3c0
|
|
@ -306,7 +306,7 @@ export default class PluginApi {
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
/**
|
||||
* Toasts
|
||||
*/
|
||||
showToast(message, options = {}) {
|
||||
|
|
@ -324,6 +324,15 @@ export default class PluginApi {
|
|||
showWarningToast(message, options = {}) {
|
||||
return Toasts.warning(message, options);
|
||||
}
|
||||
get Toasts() {
|
||||
return {
|
||||
push: this.showToast.bind(this),
|
||||
success: this.showSuccessToast.bind(this),
|
||||
error: this.showErrorToast.bind(this),
|
||||
info: this.showInfoToast.bind(this),
|
||||
warning: this.showWarningToast.bind(this)
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default new class Settings {
|
|||
Logger.log('Settings', [`${set.id}/${category.id}/${setting.id} was changed from`, old_value, 'to', value]);
|
||||
Events.emit('setting-updated', event);
|
||||
Events.emit(`setting-updated-${set.id}_${category.id}_${setting.id}`, event);
|
||||
Toasts.success(`${set.id}/${category.id}/${setting.id} was changed from ${old_value} to ${value}`); // Just for debugging purposes remove in prod
|
||||
Toasts.success(`${set.id}/${category.id}/${setting.id} was changed from ${old_value} to ${value}`); // Just for debugging purposes remove in prod
|
||||
});
|
||||
|
||||
set.on('settings-updated', async event => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
bd-toasts {
|
||||
display: flex;
|
||||
.bd-toasts {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 700px;
|
||||
|
|
@ -11,45 +11,44 @@ bd-toasts {
|
|||
justify-content: flex-end;
|
||||
pointer-events: none;
|
||||
z-index: 4000;
|
||||
|
||||
|
||||
.bd-toast {
|
||||
position: relative;
|
||||
animation: bd-toast-up 300ms ease;
|
||||
background: #36393F;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
user-select: text;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
background: #36393F;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
user-select: text;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
&.bd-toast-error {
|
||||
background: #f04747;
|
||||
}
|
||||
|
||||
|
||||
&.bd-toast-info {
|
||||
background: #4a90e2;
|
||||
}
|
||||
|
||||
|
||||
&.bd-toast-warning {
|
||||
background: #FFA600;
|
||||
}
|
||||
|
||||
|
||||
&.bd-toast-success {
|
||||
background: #43b581;
|
||||
}
|
||||
|
||||
|
||||
&.bd-toast-has-icon {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bd-toast-icon {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 0;
|
||||
|
|
@ -57,13 +56,13 @@ bd-toasts {
|
|||
width: 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bd-toast.bd-toast-closing {
|
||||
animation: bd-toast-down 300ms ease;
|
||||
}
|
||||
}
|
||||
animation: bd-toast-down 300ms ease;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,13 +43,13 @@ export default class {
|
|||
static injectUi() {
|
||||
DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
|
||||
DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
|
||||
DOM.createElement('div', null, 'bd-toasts').appendTo(DOM.bdToasts);
|
||||
DOM.createElement('bd-tooltips').appendTo(DOM.bdBody);
|
||||
DOM.createElement('bd-toasts').appendTo(DOM.bdBody);
|
||||
|
||||
const toasts = new Vue({
|
||||
el: 'bd-toasts',
|
||||
this.toasts = new Vue({
|
||||
el: '#bd-toasts',
|
||||
components: { BdToasts },
|
||||
template: '<BdToasts/>'
|
||||
template: '<BdToasts />'
|
||||
});
|
||||
|
||||
this.modals = new Vue({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* BetterDiscord Modals Component
|
||||
* BetterDiscord Toasts Component
|
||||
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||
* All rights reserved.
|
||||
* https://betterdiscord.net
|
||||
|
|
@ -9,9 +9,9 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</bd-toasts>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Imports
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* BetterDiscord Modal Component
|
||||
* BetterDiscord Toast Component
|
||||
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||
* All rights reserved.
|
||||
* https://betterdiscord.net
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div :class="['bd-toast', {'bd-toast-has-icon': type != 'basic' || icon}, 'bd-toast-' + type, {'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">
|
||||
<img v-if="icon" :src="icon" width="20" height="20" />
|
||||
<MiSuccess v-else-if="type == 'success'" size="20" />
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
message: String,
|
||||
icon: String,
|
||||
type: {
|
||||
default: "basic",
|
||||
default: 'basic',
|
||||
validator: function (value) {
|
||||
return ['success', 'warning', 'error', 'info', 'basic'].indexOf(value) !== -1
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* BetterDiscord Modals
|
||||
* BetterDiscord Toasts
|
||||
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||
* All rights reserved.
|
||||
* https://betterdiscord.net
|
||||
|
|
@ -12,7 +12,7 @@ export default class Toasts {
|
|||
|
||||
/**
|
||||
* This shows a popup message at the bottom of the screen similar to Android Toasts. This is useful for small user feedback.
|
||||
*
|
||||
*
|
||||
* @param {string} message The message to be displayed in the toast
|
||||
* @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"
|
||||
|
|
@ -21,7 +21,7 @@ export default class Toasts {
|
|||
* @returns {Promise} This promise resolves when the toast is removed from the DOM.
|
||||
*/
|
||||
static async push(message, options = {}) {
|
||||
const {type = "basic", icon, timeout = 3000} = options;
|
||||
const {type = 'basic', icon, timeout = 3000} = options;
|
||||
const toast = {id: Math.random(), message, type, icon, closing: false};
|
||||
this.stack.push(toast);
|
||||
await new Promise(resolve => setTimeout(resolve, timeout));
|
||||
|
|
@ -34,7 +34,7 @@ export default class Toasts {
|
|||
* This is a shortcut for `type = "success"` in {@link Toasts#push}. The parameters and options are the same.
|
||||
*/
|
||||
static async success(message, options = {}) {
|
||||
options.type = "success";
|
||||
options.type = 'success';
|
||||
return this.push(message, options);
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ export default class Toasts {
|
|||
* This is a shortcut for `type = "error"` in {@link Toasts#push}. The parameters and options are the same.
|
||||
*/
|
||||
static async error(message, options = {}) {
|
||||
options.type = "error";
|
||||
options.type = 'error';
|
||||
return this.push(message, options);
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ export default class Toasts {
|
|||
* This is a shortcut for `type = "info"` in {@link Toasts#push}. The parameters and options are the same.
|
||||
*/
|
||||
static async info(message, options = {}) {
|
||||
options.type = "info";
|
||||
options.type = 'info';
|
||||
return this.push(message, options);
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ export default class Toasts {
|
|||
* This is a shortcut for `type = "warning"` in {@link Toasts#push}. The parameters and options are the same.
|
||||
*/
|
||||
static async warning(message, options = {}) {
|
||||
options.type = "warning";
|
||||
options.type = 'warning';
|
||||
return this.push(message, options);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue