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.pull/2/head
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