Commit cace9e66 authored by Tasso Evangelista's avatar Tasso Evangelista

Update about dialog styles

parent 8d1dcf6a
......@@ -3,63 +3,100 @@
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../stylesheets/main.css" />
<script>
document.addEventListener('DOMContentLoaded', () => {
const { remote, ipcRenderer } = require('electron');
const i18n = require('../i18n/index');
</script>
</head>
<body class="about-page">
<img src="./images/icon.png">
<div class="app-name"></div>
<div class="app-version"></div>
<div class="update-container">
<span class="update-spin icon-spin3 animate-spin" style="display:none;"></span>
<button class="update"><script>document.write(i18n.__('Check_for_Updates'))</script></button>
<p class="auto-update-container"><input type="checkbox" id="auto-update" checked /> <script>document.write(i18n.__('Check_for_Updates_on_Start'))</script></p>
</div>
<p class="copyright"><script>document.write(i18n.__('Copyright', require('../../package.json').copyright))</script></p>
<script>
const { remote, ipcRenderer } = require('electron');
const { copyright } = require('../../package.json');
document.querySelector('.app-name').innerHTML = remote.app.getName();
document.querySelector('.app-version').innerHTML = `${i18n.__('Version')} <span class="version">${remote.app.getVersion()}</span>`;
document.querySelector('.app-version').innerHTML = `${i18n.__('Version')} <span class="version">${remote.app.getVersion()}</span>`;
document.querySelector('.check-for-updates').innerHTML = i18n.__('Check_for_Updates');
document.querySelector('.check-for-updates-on-start + span').innerHTML = i18n.__('Check_for_Updates_on_Start');
document.querySelector('.copyright').innerHTML = i18n.__('Copyright', copyright);
const canUpdate = ipcRenderer.sendSync('can-update');
const canUpdate = ipcRenderer.sendSync('can-update');
if (canUpdate) {
const canAutoUpdate = ipcRenderer.sendSync('can-auto-update');
if (canUpdate) {
const canAutoUpdate = ipcRenderer.sendSync('can-auto-update');
if (canAutoUpdate) {
document.querySelector('#auto-update').setAttribute('checked', 'checked');
} else {
document.querySelector('#auto-update').removeAttribute('checked');
}
if (canAutoUpdate) {
document.querySelector('.check-for-updates-on-start').setAttribute('checked', 'checked');
} else {
document.querySelector('.check-for-updates-on-start').removeAttribute('checked');
}
const canSetAutoUpdate = ipcRenderer.sendSync('can-set-auto-update');
if (canSetAutoUpdate) {
document.querySelector('.check-for-updates-on-start').addEventListener('change', (event) => {
ipcRenderer.send('set-auto-update', event.target.checked);
});
} else {
document.querySelector('.check-for-updates-on-start').setAttribute('disabled', 'disabled');
}
document.querySelector('.check-for-updates').addEventListener('click', (e) => {
e.preventDefault();
document.querySelector('.check-for-updates').setAttribute('disabled', 'disabled');
document.querySelector('.check-for-updates').classList.add('hidden');
document.querySelector('.checking-for-updates').classList.remove('hidden');
ipcRenderer.send('check-for-updates');
}, false);
ipcRenderer.on('update-result', (e, updateAvailable) => {
const resetUpdatesSection = () => {
document.querySelector('.check-for-updates').removeAttribute('disabled');
document.querySelector('.check-for-updates').classList.remove('hidden');
document.querySelector('.checking-for-updates').classList.add('hidden');
};
const canSetAutoUpdate = ipcRenderer.sendSync('can-set-auto-update');
if (canSetAutoUpdate) {
document.querySelector('#auto-update').addEventListener('change', (event) => {
ipcRenderer.send('set-auto-update', event.target.checked);
if (updateAvailable) {
resetUpdatesSection();
return;
}
document.querySelector('.checking-for-updates .message').innerHTML = i18n.__('No updates are available.');
document.querySelector('.checking-for-updates').classList.add('message-shown');
setTimeout(() => {
resetUpdatesSection();
document.querySelector('.checking-for-updates .message').innerHTML = '';
document.querySelector('.checking-for-updates').classList.remove('message-shown');
}, 5000);
});
} else {
document.querySelector('#auto-update').setAttribute('disabled', 'disabled');
document.querySelector('.updates').classList.remove('hidden');
}
}, false);
</script>
</head>
<body class="about-page">
<section class="app-info">
<div class="app-logo">
<img src="./images/logo.svg">
</div>
<div class="app-version">
Version <span class="version">%s</span>
</div>
</section>
document.querySelector('.update').onclick = function(e) {
document.querySelector('.update-spin').setAttribute('style', '');
document.querySelector('.update').setAttribute('disabled', 'disabled');
ipcRenderer.send('check-for-updates');
};
ipcRenderer.on('update-result', (e, updateAvailable) => {
document.querySelector('.update-spin').setAttribute('style', 'display:none');
document.querySelector('.update').removeAttribute('disabled');
if (!updateAvailable) {
alert('No updates are available.');
}
});
<section class="updates hidden">
<button class="check-for-updates button primary">
Check for Updates
</button>
document.querySelector('.update-container').classList.add('update-container--enabled');
}
</script>
<div class="checking-for-updates hidden">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="message"></span>
</div>
<label class="check-for-updates-on-start__label">
<input class="check-for-updates-on-start" type="checkbox" checked /> <span>Check for Updates on Start</span>
</label>
</section>
<div class="copyright"></div>
</body>
</html>
.about-page {
background-color: #ececec;
padding: 10px;
text-align: center;
display: flex;
flex-direction: column;
padding: 0.25rem 0.75rem;
min-height: 100vh;
background-color: @secondary-background-color;
cursor: default;
user-select: none;
img {
height: 60px;
margin-bottom: 5px;
.hidden {
display: none !important;
}
.app-name {
font-size: 14px;
font-weight: bold;
}
.app-info {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
.app-version {
margin-top: 15px;
font-size: 11px;
}
.app-logo img {
width: 100%;
}
.app-version .version {
font-weight: bold;
}
.app-version {
margin: 0 auto;
font-size: 0.75rem;
.update {
margin-top:5px;
.version {
cursor: text;
user-select: text;
font-weight: bold;
}
}
}
.copyright {
font-size: 10px;
position: absolute;
bottom: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.updates {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
.update-container {
display: none;
}
.check-for-updates {
height: 2.5rem;
}
.checking-for-updates {
display: flex;
justify-content: center;
align-items: center;
height: 2.5rem;
margin: 4px;
color: @secondary-font-color;
.update-container.update-container--enabled {
display: block;
.dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
margin: 0.1rem;
background-color: currentColor;
animation: loading-bouncedelay 1.4s infinite ease-in-out both;
&:nth-of-type(1) {
animation-delay: -0.32s;
}
&:nth-of-type(2) {
animation-delay: -0.16s;
}
}
.message {
display: none;
font-size: 1rem;
}
&.message-shown {
.dot {
display: none;
}
.message {
display: inline-flex;
}
}
}
.check-for-updates-on-start__label {
margin: 0.1rem auto;
font-size: 0.8rem;
}
}
.auto-update-container {
margin: auto 0;
.copyright {
margin: 0 auto;
font-size: 0.65rem;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment