add toasts

css/main.css

@@ -2345,6 +2345,105 @@
 }
 
 
+
+
+/* Toast CSS */
+
+.bd-toasts {
+  position: fixed;
+  display: flex;
+  top: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  pointer-events: none;
+  z-index: 4000;
+}
+
+@keyframes bd-toast-up {
+  from {
+      transform: translateY(0);
+      opacity: 0;
+  }
+}
+
+.bd-toast {
+  animation: bd-toast-up 300ms ease;
+  transform: translateY(-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;
+  opacity: 1;
+  margin-top: 10px;
+  pointer-events: auto;
+}
+
+@keyframes bd-toast-down {
+  to {
+      transform: translateY(0px);
+      opacity: 0;
+  }
+}
+
+.bd-toast.closing {
+  animation: bd-toast-down 200ms ease;
+  animation-fill-mode: forwards;
+  opacity: 1;
+  transform: translateY(-10px);
+}
+
+
+.bd-toast.icon {
+  padding-left: 30px;
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position: 6px 50%;
+}
+
+.bd-toast.toast-info {
+  background-color: #4a90e2;
+}
+
+.bd-toast.toast-info.icon {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMSAxNWgtMnYtNmgydjZ6bTAtOGgtMlY3aDJ2MnoiLz48L3N2Zz4=);
+}
+
+.bd-toast.toast-success {
+  background-color: #43b581;
+}
+
+.bd-toast.toast-success.icon {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz48L3N2Zz4=);
+}
+.bd-toast.toast-danger,
+.bd-toast.toast-error {
+  background-color: #f04747;
+}
+
+.bd-toast.toast-danger.icon,
+.bd-toast.toast-error.icon {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTEyIDJDNi40NyAyIDIgNi40NyAyIDEyczQuNDcgMTAgMTAgMTAgMTAtNC40NyAxMC0xMFMxNy41MyAyIDEyIDJ6bTUgMTMuNTlMMTUuNTkgMTcgMTIgMTMuNDEgOC40MSAxNyA3IDE1LjU5IDEwLjU5IDEyIDcgOC40MSA4LjQxIDcgMTIgMTAuNTkgMTUuNTkgNyAxNyA4LjQxIDEzLjQxIDEyIDE3IDE1LjU5eiIvPiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+);
+}
+
+.bd-toast.toast-warning,
+.bd-toast.toast-warn {
+  background-color: #FFA600;
+  color: white;
+}
+
+.bd-toast.toast-warning.icon,
+.bd-toast.toast-warn.icon {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMSAyMWgyMkwxMiAyIDEgMjF6bTEyLTNoLTJ2LTJoMnYyem0wLTRoLTJ2LTRoMnY0eiIvPjwvc3ZnPg==);
+}
+
+
+
+
 /*BD BLUE*/
 .bd-blue .bd-pfbtn { background: #3a71c1; }
 .bd-blue .bot-tag {background: #3a71c1;}

js/main.js

@@ -204,11 +204,6 @@ Core.prototype.init = function () {
             themeModule = new ThemeModule();
             themeModule.loadThemes();
 
-            // Show loading errors
-            if (settingsCookie["bda-gs-9"]) {
-                self.showStartupErrors();
-            }
-
             settingsPanel = new V2_SettingsPanel();
             settingsPanel.updateSettings();
 
@@ -232,6 +227,10 @@ Core.prototype.init = function () {
             $("head").append("<style>.CodeMirror{ min-width:100%; }</style>");
             $("head").append('<style id="bdemotemenustyle"></style>');
             document.getElementsByClassName("bd-loaderv2")[0].remove();
+            // Show loading errors
+            if (settingsCookie["bda-gs-9"]) {
+                self.showStartupErrors();
+            }
             self.initObserver();
         } else {
             setTimeout(gwDefer, 100);
@@ -1305,6 +1304,41 @@ BdApi.alert = function (title, content) {
     mainCore.alert(title, content);
 };
 
+/**
+ * This shows a toast similar to android towards the bottom of the screen.
+ * 
+ * @param {string} content The string to show in the toast.
+ * @param {object} options Options object. Optional parameter.
+ * @param {string} options.type Changes the type of the toast stylistically and semantically. Choices: "", "info", "success", "danger"/"error", "warning"/"warn". Default: ""
+ * @param {boolean} options.icon Determines whether the icon should show corresponding to the type. A toast without type will always have no icon. Default: true
+ * @param {number} options.timeout Adjusts the time (in ms) the toast should be shown for before disappearing automatically. Default: 3000
+ */
+BdApi.showToast = function(content, options = {}) {
+    if (!document.querySelector('.bd-toasts')) {
+        let toastWrapper = document.createElement("div");
+        toastWrapper.classList.add("bd-toasts");
+        let boundingElement = document.querySelector('.chat form, #friends, .noChannel-2EQ0a9, .activityFeed-HeiGwL');
+        toastWrapper.style.setProperty("left", boundingElement ? boundingElement.getBoundingClientRect().left + "px" : "0px");
+        toastWrapper.style.setProperty("width", boundingElement ? boundingElement.offsetWidth + "px" : "100%");
+        toastWrapper.style.setProperty("bottom", (document.querySelector('.chat form') ? document.querySelector('.chat form').offsetHeight : 80) + "px");
+        document.querySelector('.app').appendChild(toastWrapper);
+    }
+    const {type = "", icon = true, timeout = 3000} = options;
+    let toastElem = document.createElement("div");
+    toastElem.classList.add("bd-toast");
+	if (type) toastElem.classList.add("toast-" + type);
+	if (type && icon) toastElem.classList.add("icon");
+    toastElem.innerText = content;
+    document.querySelector('.bd-toasts').appendChild(toastElem);
+    setTimeout(() => {
+        toastElem.classList.add('closing');
+        setTimeout(() => {
+            toastElem.remove();
+            if (!document.querySelectorAll('.bd-toasts .bd-toast').length) document.querySelector('.bd-toasts').remove();
+        }, 300);
+    }, timeout);
+};
+
 /* BetterDiscordApp DevMode JavaScript
  * Version: 1.0
  * Author: Jiiks | http://jiiks.net