Added loading/update splash base and quit modal
This commit is contained in:
Jiiks
parent
b55607f1b2
commit
b68a850750
|
|
@ -222,4 +222,96 @@ input.path {
|
|||
border-width: 1px 0px 0px 1px;
|
||||
border-style: solid;
|
||||
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}
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
<html>
|
||||
<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/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titleBar">
|
||||
|
|
@ -17,10 +15,10 @@
|
|||
<div class="sidebar">
|
||||
<div class="sidebar-inner">
|
||||
<ul>
|
||||
<li id="li-0" class="active">Introduction</li>
|
||||
<li id="li-1">License</li>
|
||||
<li id="li-2">Destination</li>
|
||||
<li id="li-3">Installation</li>
|
||||
<li id="li-0" class="navli active">Introduction</li>
|
||||
<li id="li-1" class="navli">License</li>
|
||||
<li id="li-2" class="navli">Destination</li>
|
||||
<li id="li-3" class="navli">Installation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,6 +72,27 @@
|
|||
</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>
|
||||
|
||||
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,6 @@ $(function() {
|
|||
var currentPanel = 0;
|
||||
|
||||
$("#accept").on("change", function() {
|
||||
console.log("WTF");
|
||||
$("#next").prop("disabled", true);
|
||||
if($(this).prop("checked")) {
|
||||
$("#next").prop("disabled", false);
|
||||
|
|
@ -40,6 +39,8 @@ $(function() {
|
|||
}
|
||||
});
|
||||
|
||||
$("#cancel").on("click", quit);
|
||||
|
||||
$("#licensetext").on("scroll", function() {
|
||||
var e = $(this);
|
||||
if(e.height() + e.scrollTop() >= e[0].scrollHeight) {
|
||||
|
|
@ -59,20 +60,48 @@ $(function() {
|
|||
$("#next").show();
|
||||
$("#next").text("Next");
|
||||
$("#next").prop("disabled", false);
|
||||
$(".navli").removeClass("active").removeClass("visited");
|
||||
$("#li-0").addClass("active").removeClass("visited");
|
||||
$("#li-1").removeClass("active").removeClass("visited");
|
||||
break;
|
||||
case 1:
|
||||
$("#back").show();
|
||||
$("#next").text("Next");
|
||||
$("#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;
|
||||
case 2:
|
||||
$("#back").show();
|
||||
$("#next").show();
|
||||
$("#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;
|
||||
}
|
||||
}
|
||||
|
||||
$(".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'));
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
'use strict';
|
||||
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -11,23 +11,34 @@ const {dialog} = require('electron');
|
|||
|
||||
var installPath = process.platform == "win32" ? process.env.LOCALAPPDATA + "\\Discord\\app-0.0.290\\" :
|
||||
process.platform == "darwin" ? "\\Applications\\Discord.app\\" : "";
|
||||
function createWindow() {
|
||||
function loadMain() {
|
||||
var width = 800;
|
||||
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({
|
||||
width: width,
|
||||
height: height,
|
||||
maxWidth: width,
|
||||
maxHeight: height,
|
||||
minWidth: width,
|
||||
minHeight: height,
|
||||
height: height,
|
||||
fullscreenable: 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) {
|
||||
|
|
@ -44,10 +55,13 @@ ipcMain.on('sync', function(event, arg) {
|
|||
case "getInstallPath":
|
||||
event.returnValue = installPath;
|
||||
break;
|
||||
case "loadMain":
|
||||
loadMain();
|
||||
break;
|
||||
case 'quit':
|
||||
quit();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
app.on('ready', createWindow);
|
||||
app.on('ready', createSplash);
|
||||
Loading…
Reference in New Issue