From 88b29e5954223f69c4f351a7c746a2dce4a7ecf2 Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Fri, 3 Nov 2017 13:34:26 -0400 Subject: [PATCH] new modals --- css/main.css | 230 ++++++++++++- js/main.js | 890 ++++++++++++++++----------------------------------- 2 files changed, 509 insertions(+), 611 deletions(-) diff --git a/css/main.css b/css/main.css index c16db590..429a0335 100644 --- a/css/main.css +++ b/css/main.css @@ -2119,6 +2119,232 @@ } +/* New Startup Modal, New Alert */ +@keyframes bd-backdrop { + to { opacity: 0.85; } +} + +@keyframes bd-modal-wrapper { + to { transform: scale(1); opacity: 1; } +} + +@keyframes bd-backdrop-closing { + to { opacity: 0; } +} + +@keyframes bd-modal-wrapper-closing { + to { transform: scale(0.7); opacity: 0; } +} + +.bd-backdrop { + animation: bd-backdrop 250ms ease; + animation-fill-mode: forwards; + opacity: 0; + background-color: rgb(0, 0, 0); + transform: translateZ(0px); +} + +.bd-modal-wrapper.closing .bd-backdrop { + animation: bd-backdrop-closing 200ms linear; + animation-fill-mode: forwards; + animation-delay: 50ms; + opacity: 0.85; +} + +.bd-modal-wrapper.closing .bd-modal { + animation: bd-modal-wrapper-closing 250ms cubic-bezier(0.19, 1, 0.22, 1); + animation-fill-mode: forwards; + opacity: 1; + transform: scale(1); +} + +.bd-modal-wrapper .bd-modal { + animation: bd-modal-wrapper 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + animation-fill-mode: forwards; + transform: scale(0.7); + transform-origin: 50% 50%; + display: flex; + align-items: center; + box-sizing: border-box; + contain: content; + justify-content: center; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0; + pointer-events: none; + position: absolute; + z-index: 1000; +} + +.bd-modal-wrapper .bd-modal-inner { + display: flex; + contain: layout; + flex-direction: column; + pointer-events: auto; + border: 1px solid rgba(28,36,43,.6); + border-radius: 5px; + box-shadow: 0 2px 10px 0 rgba(0,0,0,.2); + overflow: hidden; + max-height: 660px; + min-height: 200px; + width: 440px; + user-select: text; +} + +.bd-modal-wrapper .bd-startup-modal .bd-modal-inner { + height: 500px; + width: 700px; +} + +.bd-modal-wrapper .header { + background-color: #35393e; + box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); + padding: 12px 20px; + z-index: 1; + color: #fff; + font-size: 16px; + font-weight: 700; + line-height: 19px; +} + +.bd-modal-wrapper .bd-modal-body { + background-color: #36393f; + color: #fff; + flex-direction: row; + overflow: hidden; + display: flex; + flex-direction: column; + flex: 1; + contain: layout; + position: relative; +} + +.bd-modal-wrapper .scroller { + padding: 10px; +} + +.bd-modal-wrapper .bd-startup-modal .bd-modal-body { + padding: 0; +} + +.bd-modal-wrapper .scroller { + overflow-y: auto; +} + +.bd-modal-wrapper .footer { + display: flex; + justify-content: flex-end; + padding: 10px 20px; +} + +.bd-modal-wrapper .footer button { + background-color: #7289da; + color: #fff; + min-height: 32px; + min-width: 60px; + align-items: center; + border-radius: 3px; + display: flex; + font-size: 14px; + font-weight: 500; + justify-content: center; + line-height: 16px; + padding: 2px 16px; + user-select: none; +} + +.bd-modal-wrapper .footer button:hover { + background-color: #677bc4; +} + +.bd-modal-wrapper .footer button:active { + background-color: #5f6fb9; +} + + +.bd-modal-wrapper .tab-bar-container { + align-items: center; + border-bottom: 0; + background: rgba(0,0,0, 0.2); + box-shadow: 0 2px 3px 0 rgba(0,0,0,.1); + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 15px; +} + +.bd-modal-wrapper .tab-bar.TOP { + margin: 0; + border: 0; +} + +.bd-modal-wrapper .tab-bar-container .tab-bar-item { + margin: 0 15px; + padding: 15px 0; + color: #fff !important; + opacity: 0.5; + transition: opacity 200ms ease; +} + +.bd-modal-wrapper .tab-bar-container .tab-bar-item:hover { + border-color: #fff; +} + +.bd-modal-wrapper .tab-bar-container .tab-bar-item.selected { + opacity: 1; + border-color: #fff; +} + +.bd-modal-wrapper .tab-bar.TOP .tab-bar-item+.tab-bar-item { + margin: 0; +} + +.bd-modal-wrapper .table-header { + display: flex; + justify-content: space-between; + color: #fff; + font-weight: 700; + padding-bottom: 10px; + margin: 3px 15px 0 15px; + border-bottom: 1px solid #fff; + font-size: 14px; +} + +.bd-modal-wrapper .table-column { + width: 25%; +} + +.bd-modal-wrapper .table-column.column-error { + width: 50%; +} + +.bd-modal-wrapper .table-column { + word-wrap: break-word; +} + +.bd-modal-wrapper .errors { + display: flex; + flex-direction: column; + padding: 0; + font-size: 14px; + padding: 0 5px; +} + +.bd-modal-wrapper .error { + display: flex; + color: #fff; + border-bottom: 1px solid rgba(255,255,255, 0.25); + padding: 15px 0; + align-items: center; +} + +.bd-modal-wrapper .bd-startup-modal .scroller { + padding-top: 0; +} + + /*BD BLUE*/ .bd-blue .bd-pfbtn { background: #3a71c1; } .bd-blue .bot-tag {background: #3a71c1;} @@ -2345,4 +2571,6 @@ .bd-blue *[style*="background-color: rgb(114, 137, 218)"] { background-color: #3a71c1 !important; } .bd-blue .bda-slist .bda-footer button {background-color: #3a71c1;} .bd-blue .bda-slist .bda-footer a {color: #3a71c1;} - +.bd-blue .bd-modal-wrapper .footer button {background-color: #3a71c1;} +.bd-blue .bd-modal-wrapper .footer button:hover {background-color: #356bbb;} +.bd-blue .bd-modal-wrapper .footer button:active {background-color: #2a61b1;} diff --git a/js/main.js b/js/main.js index 76a7dc3d..a4234595 100644 --- a/js/main.js +++ b/js/main.js @@ -22,7 +22,7 @@ let __data = {}; if(__fs.existsSync(`${__dataPath}localStorage.json`)) { try { - __data = JSON.parse(__fs.readFileSync(`${__dataPath}localStorage.json`)) + __data = JSON.parse(__fs.readFileSync(`${__dataPath}localStorage.json`)); }catch(err) { console.log(err); } @@ -324,7 +324,7 @@ Core.prototype.initObserver = function () { // onSwitch() // Not a channel, but still a switch (Activity Feed/Friends menu) - if ( node.classList.contains("activityFeed-HeiGwL") || node.id === "friends") { + if (node.classList.contains("activityFeed-HeiGwL") || node.id === "friends") { pluginModule.channelSwitch(); } @@ -402,6 +402,109 @@ Core.prototype.injectColoredText = function(node) { }); }; +Core.prototype.alert = function(title, content) { + let modal = $(`
+
+
+
+
+
${title}
+
+
+
+
+ ${content} +
+
+
+
+ +
+
+
+
`); + modal.find('.footer button').on('click', () => { + modal.addClass('closing'); + setTimeout(() => { modal.remove(); }, 300); + }); + modal.find('.bd-backdrop').on('click', () => { + modal.addClass('closing'); + setTimeout(() => { modal.remove(); }, 300); + }); + modal.appendTo("#app-mount"); +}; + +Core.prototype.showStartupErrors = function() { + let modal = $(`
+
+
+
+
Startup Errors
+
+
+
+
Plugins
+
Themes
+
+
+
+
Name
+
Reason
+
Error
+
+
+
+ +
+
+
+
+ +
+
+
+
`); + + function generateTab(errors) { + let container = $(`
`); + for (let err of errors) { + let error = $(`
+
${err.name ? err.name : err.file}
+
${err.reason}
+
${err.error ? err.error.message : ""}
+
`); + container.append(error); + if (err.error) { + error.find('a').on('click', (e) => { + e.preventDefault(); + utils.err(`Error details for ${err.name ? err.name : err.file}.`, err.error); + }); + } + } + return container; + } + + let tabs = [generateTab(bdpluginErrors), generateTab(bdthemeErrors)]; + + modal.find('.tab-bar-item').on('click', (e) => { + e.preventDefault(); + modal.find('.tab-bar-item').removeClass('selected'); + $(e.target).addClass('selected'); + modal.find('.scroller').empty().append(tabs[$(e.target).index()]); + }); + + modal.find('.footer button').on('click', () => { + modal.addClass('closing'); + setTimeout(() => { modal.remove(); }, 300); + }); + modal.find('.bd-backdrop').on('click', () => { + modal.addClass('closing'); + setTimeout(() => { modal.remove(); }, 300); + }); + modal.appendTo("#app-mount"); + modal.find('.tab-bar-item')[0].click(); +}; + /* BetterDiscordApp EmoteModule JavaScript * Version: 1.5 @@ -654,163 +757,6 @@ EmoteModule.prototype.capitalize = function (value) { } }; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* BetterDiscordApp QuickEmoteMenu JavaScript * Version: 1.3 * Author: Jiiks | http://jiiks.net @@ -1328,6 +1274,19 @@ BdApi.clearCSS = function (id) { $("#" + utils.escapeID(id)).remove(); }; +//Inject CSS to document head +//id = id of element +//css = custom css +BdApi.linkJS = function (id, url) { + $("head").append($('