lightcordwarez
/
BetterDiscordApp-v1
mirror of https://github.com/jiiks/betterdiscordapp.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Added loading/update splash base and quit modal

This commit is contained in:
Jiiks 2016-05-25 22:14:03 +03:00
parent b55607f1b2
commit b68a850750
6 changed files with 193 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
Installers/Electron/src/data/css/main.css
View File

@ -223,3 +223,95 @@ input.path {
border-style: solid; border-style: solid;
border-color: #111; border-color: #111;
} }
.modal {
position: absolute;
background: rgba(29, 29, 29, 0.71);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 900000;
}
.modal-container {
background: #212229;
width: 600px;
height: 200px;
position: relative;
margin: auto;
top: 100px;
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.39);
}
.modal-header {
height: 30px;
line-height: 30px;
background: #212229;
padding-left: 10px;
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #303030;
}
.modal-body {
padding:30px;
}
.modal-footer {
position: absolute;
bottom: 0;
left:0;
right: 0;
height: 35px;
padding-top:10px;
background:#212229;
box-shadow: 0 1px 0 0 #303030 inset;
border-top: 1px solid #000;
}
.modal-footer button {
margin-right:5px;
float: right;
}
.splash {
width:300px !important;
height:100px !important;
}
.splash .wrapper {
top:20px;
width:40px;
margin:auto;
position:relative;
}
.splash .wrapper .spinner {
width:30px;
height:30px;
border-radius:30px;
border-width:5px;
border-color:#121212 #404040 #404040 #404040;
border-style:solid;
animation: spin 0.7s linear infinite;
}
.splash .spinnertext {
position: absolute;
bottom: 0;
width: 100%;
display: block;
text-align: center;
bottom: 10px;
color: rgb(171, 171, 171);
-webkit-animation: spinnertext-opacity 2s linear 0s infinite;
}
@-webkit-keyframes spin {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spinnertext-opacity {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1}
100%{opacity: 0}
}

33
Installers/Electron/src/data/index.html
View File

@ -1,8 +1,6 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head> </head>
<body> <body>
<div id="titleBar"> <div id="titleBar">
@ -17,10 +15,10 @@
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-inner"> <div class="sidebar-inner">
<ul> <ul>
<li id="li-0" class="active">Introduction</li> <li id="li-0" class="navli active">Introduction</li>
<li id="li-1">License</li> <li id="li-1" class="navli">License</li>
<li id="li-2">Destination</li> <li id="li-2" class="navli">Destination</li>
<li id="li-3">Installation</li> <li id="li-3" class="navli">Installation</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -74,6 +72,27 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal" id="quit" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<span>Exit Setup?</span>
</div>
<div class="modal-body">
Setup is not complete. If you exit now, BetterDiscord will not be installed.
<br>
Exit Setup?
</div>
<div class="modal-footer">
<button id="modal-exit">
Yes
</button>
<button id="modal-cancel">
No
</button>
</div>
</div>
</div>
</body> </body>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html> </html>

31
Installers/Electron/src/data/js/main.js
View File

@ -7,7 +7,6 @@ $(function() {
var currentPanel = 0; var currentPanel = 0;
$("#accept").on("change", function() { $("#accept").on("change", function() {
console.log("WTF");
$("#next").prop("disabled", true); $("#next").prop("disabled", true);
if($(this).prop("checked")) { if($(this).prop("checked")) {
$("#next").prop("disabled", false); $("#next").prop("disabled", false);
@ -40,6 +39,8 @@ $(function() {
} }
}); });
$("#cancel").on("click", quit);
$("#licensetext").on("scroll", function() { $("#licensetext").on("scroll", function() {
var e = $(this); var e = $(this);
if(e.height() + e.scrollTop() >= e[0].scrollHeight) { if(e.height() + e.scrollTop() >= e[0].scrollHeight) {
@ -59,20 +60,48 @@ $(function() {
$("#next").show(); $("#next").show();
$("#next").text("Next"); $("#next").text("Next");
$("#next").prop("disabled", false); $("#next").prop("disabled", false);
$(".navli").removeClass("active").removeClass("visited");
$("#li-0").addClass("active").removeClass("visited");
$("#li-1").removeClass("active").removeClass("visited");
break; break;
case 1: case 1:
$("#back").show(); $("#back").show();
$("#next").text("Next"); $("#next").text("Next");
$("#next").prop("disabled", !$("#accept").prop("checked")); $("#next").prop("disabled", !$("#accept").prop("checked"));
$("#li-0").addClass("visited").removeClass("active");
$("#li-1").addClass("active").removeClass("visited");
$("#li-2").removeClass("active").removeClass("visited");
break; break;
case 2: case 2:
$("#back").show(); $("#back").show();
$("#next").show(); $("#next").show();
$("#next").text("Install"); $("#next").text("Install");
$("#li-1").addClass("visited").removeClass("active");
$("#li-2").addClass("active").removeClass("visited");
$("#li-3").removeClass("active");
break;
case 3:
$("#li-2").removeClass("active").addClass("visited");
$("#li-3").addClass("active");
break; break;
} }
} }
$(".modal").on("click", function(e) {
if(e.target.className != "modal") return;
$(this).hide();
});
$("#modal-cancel").on("click", function() {
$(".modal").hide();
});
$("#modal-exit").on("click", function() {
ipcRenderer.send('sync', 'quit');
});
function quit() {
$("#quit").show();
}
$("#discordPath").val(ipcRenderer.sendSync('sync', 'getInstallPath')); $("#discordPath").val(ipcRenderer.sendSync('sync', 'getInstallPath'));
})(); })();

4
Installers/Electron/src/data/js/splash.js Normal file
View File

@ -0,0 +1,4 @@
'use strict';
const ipcRenderer = require('electron').ipcRenderer;

15
Installers/Electron/src/data/splash.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/splash.js"></script>
</head>
</head>
<body class="splash">
<div class="wrapper">
<div class="spinner"></div>
</div>
<span class="spinnertext">Checking for updates...</span>
</body>
</html>

36
Installers/Electron/src/main.js
View File

@ -11,23 +11,34 @@ const {dialog} = require('electron');
var installPath = process.platform == "win32" ? process.env.LOCALAPPDATA + "\\Discord\\app-0.0.290\\" : var installPath = process.platform == "win32" ? process.env.LOCALAPPDATA + "\\Discord\\app-0.0.290\\" :
process.platform == "darwin" ? "\\Applications\\Discord.app\\" : ""; process.platform == "darwin" ? "\\Applications\\Discord.app\\" : "";
function createWindow() { function loadMain() {
var width = 800; var width = 800;
var height = 400; var height = 400;
mainWindow.setSize(width, height);
mainWindow.center();
mainWindow.loadURL('file://' + __dirname + '/data/index.html');
}
function createSplash() {
var width = 300;
var height = 100;
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: width, width: width,
height: height, height: height,
maxWidth: width,
maxHeight: height,
minWidth: width,
minHeight: height,
fullscreenable: false, fullscreenable: false,
maximizable: false, maximizable: false,
frame: false frame: false,
resizable: false,
alwaysOnTop: true
}); });
mainWindow.loadURL('file://' + __dirname + '/data/index.html'); mainWindow.loadURL('file://' + __dirname + '/data/splash.html');
loadMain();
}
function quit() {
app.quit();
} }
ipcMain.on('sync', function(event, arg) { ipcMain.on('sync', function(event, arg) {
@ -44,10 +55,13 @@ ipcMain.on('sync', function(event, arg) {
case "getInstallPath": case "getInstallPath":
event.returnValue = installPath; event.returnValue = installPath;
break; break;
case "loadMain":
loadMain();
break;
case 'quit':
quit();
break;
} }
}); });
app.on('ready', createSplash);
app.on('ready', createWindow);