From 5a16416db5a30a383c0886ebee37d4b3c088b4b9 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Wed, 20 Jun 2018 06:15:10 -0400 Subject: [PATCH] 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. --- app/assets/css/launcher.css | 190 ++++++++++++++++++++++++++++++ app/assets/js/scripts/settings.js | 122 +++++++++++++++---- app/settings.ejs | 52 ++++++-- 3 files changed, 331 insertions(+), 33 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 20ffd8e15b..63b070cf07 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -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) * diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js index 0465585704..18f5a77f5e 100644 --- a/app/assets/js/scripts/settings.js +++ b/app/assets/js/scripts/settings.js @@ -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 { + 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. diff --git a/app/settings.ejs b/app/settings.ejs index c5e9d98504..561d95281e 100644 --- a/app/settings.ejs +++ b/app/settings.ejs @@ -8,11 +8,11 @@
+
-
@@ -90,6 +90,12 @@
+