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

@@ -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)                                            *

app/assets/js/scripts/settings.js

@@ -1,26 +1,6 @@
-const os                      = require('os')
+// Requirements
-
+const os     = require('os')
-const settingsNavDone         = document.getElementById('settingsNavDone')
+const semver = require('semver')
-
-// 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')
 
 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.

app/settings.ejs

@@ -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="settingsAboutCurrentContainer">
-        <div id="settingsTabUpdates" class="settingsTab" style="display: none;">
+                <div id="settingsAboutCurrentContent">
-            <div class="settingsTabHeader">
+                    <div id="settingsAboutCurrentHeadline">
-                <span class="settingsTabHeaderText">Software Updates</span>
+                        <img id="settingsAboutLogo" src="./assets/images/WesterosSealSquare.png">
-                <span class="settingsTabHeaderDesc">Manage and review application updates.</span>
+                        <span id="settingsAboutTitle">WesterosCraft Launcher</span>
+                    </div>
+                    <div id="settingsAboutCurrentVersion">
+                        <div id="settingsAboutCurrentVersionCheck">&#10003;</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>