Added about settings tab.
This tab displays information about the current version of the application. Release notes are fetched from GitHub's atom feed and displayed here as well.
This commit is contained in:
Daniel Scalzi
parent
e7752b4374
commit
5a16416db5
@ -1564,6 +1564,196 @@ input:checked + .toggleSwitchSlider:before {
|
||||
width: 89%;
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Settings View (About Tab)
|
||||
* * */
|
||||
|
||||
/* Main about content container. */
|
||||
#settingsAboutCurrentContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(126, 126, 126, 0.57);
|
||||
border-radius: 3px;
|
||||
width: 75%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* About content. */
|
||||
#settingsAboutCurrentContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* About header elements. */
|
||||
#settingsAboutCurrentHeadline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid rgba(126, 126, 126, 0.57);
|
||||
}
|
||||
#settingsAboutLogo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
#settingsAboutTitle {
|
||||
font-size: 23px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Current version container. */
|
||||
#settingsAboutCurrentVersion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* Checkmark next to the version information. */
|
||||
#settingsAboutCurrentVersionCheck {
|
||||
border-radius: 50%;
|
||||
background: #23aa23;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin: 11px 12px;
|
||||
color: white;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
/* Current version details container. */
|
||||
#settingsAboutCurrentVersionDetails {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Release type text. */
|
||||
#settingsAboutCurrentVersionTitle {
|
||||
font-size: 12px;
|
||||
font-family: 'Avenir Medium';
|
||||
color: #23aa23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Current version text. */
|
||||
#settingsAboutCurrentVersionLine {
|
||||
font-size: 10px;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* About information links. */
|
||||
#settingsAboutButtons {
|
||||
display: flex;
|
||||
padding: 0px 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.settingsAboutButton {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 10px;
|
||||
color: grey;
|
||||
padding: 0px 5px;
|
||||
transition: 0.25s ease;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.settingsAboutButton:hover,
|
||||
.settingsAboutButton:focus {
|
||||
color: rgb(165, 165, 165);
|
||||
}
|
||||
.settingsAboutButton:active {
|
||||
color: rgba(124, 124, 124, 0.75);
|
||||
}
|
||||
|
||||
/* Main changelog container. */
|
||||
#settingsChangelogContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(126, 126, 126, 0.57);
|
||||
border-radius: 3px;
|
||||
width: 75%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Changelog content container. */
|
||||
#settingsChangelogContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Changelog header container. */
|
||||
#settingsChangelogHeadline {
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(126, 126, 126, 0.57);
|
||||
}
|
||||
/* Changelog header label. */
|
||||
#settingsChangelogLabel {
|
||||
font-size: 12px;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Changelog text content container. */
|
||||
#settingsChangelogText {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Styles for the changelog elements. */
|
||||
#settingsChangelogText p {
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#settingsChangelogText blockquote {
|
||||
border-left: 0.25em solid rgba(126, 126, 126, 0.95);
|
||||
margin: 0px;
|
||||
padding: 0 0 0 1em;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
#settingsChangelogText code {
|
||||
padding: 0.1em 0.4em;
|
||||
font-size: 85%;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
font-family: 'Avenir Book';
|
||||
}
|
||||
#settingsChangelogText li+li {
|
||||
margin-top: .25em;
|
||||
}
|
||||
#settingsChangelogText a.commit-link {
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
#settingsChangelogText a.commit-link:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: black;
|
||||
}
|
||||
#settingsChangelogText tt {
|
||||
padding: 0.1em 0.4em;
|
||||
font-size: 86%;
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Container for the changelog button. */
|
||||
#settingsChangelogActions {
|
||||
padding: 0px 15px 5px 15px;
|
||||
}
|
||||
|
||||
/* Open changelog on GitHub. */
|
||||
#settingsChangelogButton {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* Landing View (Structural Styles) *
|
||||
|
||||
@ -1,26 +1,6 @@
|
||||
const os = require('os')
|
||||
|
||||
const settingsNavDone = document.getElementById('settingsNavDone')
|
||||
|
||||
// Account Management Tab
|
||||
const settingsAddAccount = document.getElementById('settingsAddAccount')
|
||||
const settingsCurrentAccounts = document.getElementById('settingsCurrentAccounts')
|
||||
|
||||
// Minecraft Tab
|
||||
const settingsGameWidth = document.getElementById('settingsGameWidth')
|
||||
const settingsGameHeight = document.getElementById('settingsGameHeight')
|
||||
|
||||
// Java Tab
|
||||
const settingsMaxRAMRange = document.getElementById('settingsMaxRAMRange')
|
||||
const settingsMinRAMRange = document.getElementById('settingsMinRAMRange')
|
||||
const settingsMaxRAMLabel = document.getElementById('settingsMaxRAMLabel')
|
||||
const settingsMinRAMLabel = document.getElementById('settingsMinRAMLabel')
|
||||
const settingsMemoryTotal = document.getElementById('settingsMemoryTotal')
|
||||
const settingsMemoryAvail = document.getElementById('settingsMemoryAvail')
|
||||
const settingsJavaExecDetails = document.getElementById('settingsJavaExecDetails')
|
||||
const settingsJavaExecVal = document.getElementById('settingsJavaExecVal')
|
||||
const settingsJavaExecSel = document.getElementById('settingsJavaExecSel')
|
||||
const settingsJVMOptsVal = document.getElementById('settingsJVMOptsVal')
|
||||
// Requirements
|
||||
const os = require('os')
|
||||
const semver = require('semver')
|
||||
|
||||
const settingsState = {
|
||||
invalid: new Set()
|
||||
@ -187,6 +167,8 @@ function setupSettingsTabs(){
|
||||
})
|
||||
}
|
||||
|
||||
const settingsNavDone = document.getElementById('settingsNavDone')
|
||||
|
||||
/**
|
||||
* Set if the settings save (done) button is disabled.
|
||||
*
|
||||
@ -208,7 +190,7 @@ settingsNavDone.onclick = () => {
|
||||
*/
|
||||
|
||||
// Bind the add account button.
|
||||
settingsAddAccount.onclick = (e) => {
|
||||
document.getElementById('settingsAddAccount').onclick = (e) => {
|
||||
switchView(getCurrentView(), VIEWS.login, 500, 500, () => {
|
||||
loginViewOnCancel = VIEWS.settings
|
||||
loginViewOnSuccess = VIEWS.settings
|
||||
@ -318,6 +300,8 @@ function refreshAuthAccountSelected(uuid){
|
||||
})
|
||||
}
|
||||
|
||||
const settingsCurrentAccounts = document.getElementById('settingsCurrentAccounts')
|
||||
|
||||
/**
|
||||
* Add auth account elements for each one stored in the authentication database.
|
||||
*/
|
||||
@ -374,12 +358,12 @@ function prepareAccountsTab() {
|
||||
/**
|
||||
* Disable decimals, negative signs, and scientific notation.
|
||||
*/
|
||||
settingsGameWidth.addEventListener('keydown', (e) => {
|
||||
document.getElementById('settingsGameWidth').addEventListener('keydown', (e) => {
|
||||
if(/[-\.eE]/.test(e.key)){
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
settingsGameHeight.addEventListener('keydown', (e) => {
|
||||
document.getElementById('settingsGameHeight').addEventListener('keydown', (e) => {
|
||||
if(/[-\.eE]/.test(e.key)){
|
||||
e.preventDefault()
|
||||
}
|
||||
@ -389,6 +373,17 @@ settingsGameHeight.addEventListener('keydown', (e) => {
|
||||
* Java Tab
|
||||
*/
|
||||
|
||||
// DOM Cache
|
||||
const settingsMaxRAMRange = document.getElementById('settingsMaxRAMRange')
|
||||
const settingsMinRAMRange = document.getElementById('settingsMinRAMRange')
|
||||
const settingsMaxRAMLabel = document.getElementById('settingsMaxRAMLabel')
|
||||
const settingsMinRAMLabel = document.getElementById('settingsMinRAMLabel')
|
||||
const settingsMemoryTotal = document.getElementById('settingsMemoryTotal')
|
||||
const settingsMemoryAvail = document.getElementById('settingsMemoryAvail')
|
||||
const settingsJavaExecDetails = document.getElementById('settingsJavaExecDetails')
|
||||
const settingsJavaExecVal = document.getElementById('settingsJavaExecVal')
|
||||
const settingsJavaExecSel = document.getElementById('settingsJavaExecSel')
|
||||
|
||||
// Store maximum memory values.
|
||||
const SETTINGS_MAX_MEMORY = ConfigManager.getAbsoluteMaxRAM()
|
||||
const SETTINGS_MIN_MEMORY = ConfigManager.getAbsoluteMinRAM()
|
||||
@ -597,6 +592,80 @@ function prepareJavaTab(){
|
||||
populateMemoryStatus()
|
||||
}
|
||||
|
||||
/**
|
||||
* About Tab
|
||||
*/
|
||||
|
||||
const settingsAboutCurrentVersionCheck = document.getElementById('settingsAboutCurrentVersionCheck')
|
||||
const settingsAboutCurrentVersionTitle = document.getElementById('settingsAboutCurrentVersionTitle')
|
||||
const settingsAboutCurrentVersionValue = document.getElementById('settingsAboutCurrentVersionValue')
|
||||
const settingsChangelogTitle = document.getElementById('settingsChangelogTitle')
|
||||
const settingsChangelogText = document.getElementById('settingsChangelogText')
|
||||
const settingsChangelogButton = document.getElementById('settingsChangelogButton')
|
||||
|
||||
// Bind the devtools toggle button.
|
||||
document.getElementById('settingsAboutDevToolsButton').onclick = (e) => {
|
||||
let window = remote.getCurrentWindow()
|
||||
window.toggleDevTools()
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve the version information and display it on the UI.
|
||||
*/
|
||||
function populateVersionInformation(){
|
||||
const version = remote.app.getVersion()
|
||||
|
||||
settingsAboutCurrentVersionValue.innerHTML = version
|
||||
const preRelComp = semver.prerelease(version)
|
||||
if(preRelComp != null && preRelComp.length > 0){
|
||||
settingsAboutCurrentVersionTitle.innerHTML = 'Pre-release'
|
||||
settingsAboutCurrentVersionTitle.style.color = '#ff886d'
|
||||
settingsAboutCurrentVersionCheck.style.background = '#ff886d'
|
||||
} else {
|
||||
settingsAboutCurrentVersionTitle.innerHTML = 'Stable Release'
|
||||
settingsAboutCurrentVersionTitle.style.color = null
|
||||
settingsAboutCurrentVersionCheck.style.background = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches the GitHub atom release feed and parses it for the release notes
|
||||
* of the current version. This value is displayed on the UI.
|
||||
*/
|
||||
function populateReleaseNotes(){
|
||||
$.ajax({
|
||||
url: 'https://github.com/WesterosCraftCode/ElectronLauncher/releases.atom',
|
||||
success: (data) => {
|
||||
const version = 'v' + remote.app.getVersion()
|
||||
const entries = $(data).find('entry')
|
||||
|
||||
for(let i=0; i<entries.length; i++){
|
||||
const entry = $(entries[i])
|
||||
let id = entry.find('id').text()
|
||||
id = id.substring(id.lastIndexOf('/')+1)
|
||||
|
||||
if(id === version){
|
||||
settingsChangelogTitle.innerHTML = entry.find('title').text()
|
||||
settingsChangelogText.innerHTML = entry.find('content').text()
|
||||
settingsChangelogButton.href = entry.find('link').attr('href')
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
timeout: 2500
|
||||
}).catch(err => {
|
||||
settingsChangelogText.innerHTML = 'Failed to load release notes.'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare account tab for display.
|
||||
*/
|
||||
function prepareAboutTab(){
|
||||
populateVersionInformation()
|
||||
populateReleaseNotes()
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Settings preparation functions.
|
||||
@ -615,6 +684,7 @@ function prepareSettings(first = false) {
|
||||
initSettingsValues()
|
||||
prepareAccountsTab()
|
||||
prepareJavaTab()
|
||||
prepareAboutTab()
|
||||
}
|
||||
|
||||
// Prepare the settings UI on startup.
|
||||
|
||||
@ -8,11 +8,11 @@
|
||||
<div id="settingsNavItemsContent">
|
||||
<button class="settingsNavItem" rSc="settingsTabAccount" selected>Account</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabMods">Mods</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabJava">Java</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
|
||||
<div class="settingsNavSpacer"></div>
|
||||
<button class="settingsNavItem" rSc="settingsTabAbout">About</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabUpdates">Updates</button>
|
||||
<div id="settingsNavContentBottom">
|
||||
<div class="settingsNavDivider"></div>
|
||||
<button id="settingsNavDone">Done</button>
|
||||
@ -90,6 +90,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settingsTabMods" class="settingsTab" style="display: none;">
|
||||
<div class="settingsTabHeader">
|
||||
<span class="settingsTabHeaderText">Mod Settings</span>
|
||||
<span class="settingsTabHeaderDesc">Enable or disable mods.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settingsTabJava" class="settingsTab" style="display: none;">
|
||||
<div class="settingsTabHeader">
|
||||
<span class="settingsTabHeaderText">Java Settings</span>
|
||||
@ -204,13 +210,45 @@
|
||||
<div id="settingsTabAbout" class="settingsTab" style="display: none;">
|
||||
<div class="settingsTabHeader">
|
||||
<span class="settingsTabHeaderText">About</span>
|
||||
<span class="settingsTabHeaderDesc">Lorem ipsum dolor sit amet.</span>
|
||||
<span class="settingsTabHeaderDesc">View information and release notes for the current version.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settingsTabUpdates" class="settingsTab" style="display: none;">
|
||||
<div class="settingsTabHeader">
|
||||
<span class="settingsTabHeaderText">Software Updates</span>
|
||||
<span class="settingsTabHeaderDesc">Manage and review application updates.</span>
|
||||
<div id="settingsAboutCurrentContainer">
|
||||
<div id="settingsAboutCurrentContent">
|
||||
<div id="settingsAboutCurrentHeadline">
|
||||
<img id="settingsAboutLogo" src="./assets/images/WesterosSealSquare.png">
|
||||
<span id="settingsAboutTitle">WesterosCraft Launcher</span>
|
||||
</div>
|
||||
<div id="settingsAboutCurrentVersion">
|
||||
<div id="settingsAboutCurrentVersionCheck">✓</div>
|
||||
<div id="settingsAboutCurrentVersionDetails">
|
||||
<span id="settingsAboutCurrentVersionTitle">Stable Release</span>
|
||||
<div id="settingsAboutCurrentVersionLine">
|
||||
<span id="settingsAboutCurrentVersionText">Version </span>
|
||||
<span id="settingsAboutCurrentVersionValue">0.0.1-alpha.12</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settingsAboutButtons">
|
||||
<a href="https://github.com/WesterosCraftCode/ElectronLauncher" id="settingsAboutSourceButton" class="settingsAboutButton">Source (GitHub)</a>
|
||||
<a href="http://www.westeroscraft.com/forum/support.40/" id="settingsAboutSupportButton" class="settingsAboutButton">Support</a>
|
||||
<a href="#" id="settingsAboutDevToolsButton" class="settingsAboutButton">DevTools Console</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settingsAboutDivider"></div>
|
||||
<div id="settingsChangelogContainer">
|
||||
<div id="settingsChangelogContent">
|
||||
<div id="settingsChangelogHeadline">
|
||||
<div id="settingsChangelogLabel">Release Notes</div>
|
||||
<div id="settingsChangelogTitle">Changelog</div>
|
||||
</div>
|
||||
<div id="settingsChangelogText">
|
||||
No Release Notes
|
||||
</div>
|
||||
</div>
|
||||
<div id="settingsChangelogActions">
|
||||
<a id="settingsChangelogButton" class="settingsAboutButton" href="#">View Release Notes on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user