Further progress on settings UI.

Added a tooltip to the settings button on the landing UI.
Settings button now opens to the (incomplete) settings UI.
Added navigation bar to the settings UI.
Implemented tabbing between settings tabs.
More to come.

app/assets/css/launcher.css

@@ -826,6 +826,8 @@ body, button {
 #settingsContainerLeft {
     height: 100%;
     width: 25%;
+    padding: 5% 0px;
+    box-sizing: border-box;
 }
 
 #settingsNavContainer {
@@ -833,9 +835,74 @@ body, button {
     flex-direction: column;
 }
 
+#settingsNavHeader {
+    display: flex;
+    justify-content: center;
+}
+
+#settingsNavHeaderText {
+    font-size: 20px;
+}
+
+#settingsNavItemsContainer {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 25%;
+    box-sizing: border-box;
+}
+
+#settingsNavItemsContent {
+    display: flex;
+    flex-direction: column;
+}
+
+.settingsNavItem {
+    background: none;
+    border: none;
+    border-radius: 7px;
+    text-align: left;
+    margin: 5px 0px;
+    padding: 0px 20px;
+    color: grey;
+    cursor: pointer;
+    outline: none;
+    transition: 0.25s ease;
+}
+.settingsNavItem:hover,
+.settingsNavItem:focus {
+    color: #c1c1c1;
+    text-shadow: 0px 0px 20px #c1c1c1;
+}
+.settingsNavItem[selected] {
+    cursor: default;
+    color: white;
+    text-shadow: none;
+}
+
 #settingsContainerRight {
     height: 100%;
     width: 75%;
+    padding: 5% 0%;
+    box-sizing: border-box;
+}
+
+.settingsTab {
+    width: 100%;
+    height: 100%;
+}
+
+.settingsTabHeader {
+    display: flex;
+    flex-direction: column;
+}
+
+.settingsTabHeaderText {
+    font-size: 20px;
+    font-family: 'Avenir Medium';
+}
+.settingsTabHeaderDesc {
+    font-size: 12px;
 }
 
 /*******************************************************************************
@@ -1401,15 +1468,65 @@ body, button {
     outline: none;
 }
 
+/* Internal media button shared styles. */
+.mediaButton {
+    background: none;
+    border: none;
+    padding: 0px;
+    display: flex;
+    align-items: center;
+    outline: none;
+}
+
+#settingsMediaContainer {
+    position: relative;
+}
+
 /* Settings icon colors. */
 #settingsSVG {
     stroke: #ffffff;
     height: 15px;
 }
-#settingsSVG:hover {
+.mediaButton:hover #settingsSVG,
+.mediaButton:focus #settingsSVG,
+.mediaButton:active #settingsSVG {
     height: 23px;
 }
 
+/* Settings tooltip styles. */
+#settingsTooltip {
+    visibility: hidden;
+    opacity: 0;
+    width: 75px;
+    height: 20px;
+    background-color: rgba(0, 0, 0, 0.75);
+    text-align: center;
+    border-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    right: 130%;
+    font-size: 12px;
+    line-height: 20px;
+    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+#settingsTooltip::after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
+}
+.mediaButton:hover #settingsTooltip,
+.mediaButton:focus #settingsTooltip,
+.mediaButton:active #settingsTooltip {
+    visibility: visible;
+    opacity: 1;
+    transition-delay:0s;
+}
+
 /* Twitter icon colors. */
 #twitterSVG:hover,
 #twitterURL:focus #twitterSVG {

app/assets/js/scripts/landing.js

@@ -114,6 +114,11 @@ document.getElementById('launch_button').addEventListener('click', function(e){
     }
 })
 
+// Bind settings button
+document.getElementById('settingsMediaButton').onclick = (e) => {
+    switchView(getCurrentView(), VIEWS.settings)
+}
+
 // Bind selected account
 function updateSelectedAccount(authUser){
     let username = 'No Account Selected'

app/assets/js/scripts/settings.js

@@ -0,0 +1,25 @@
+let selectedTab = 'settingsTabAccount'
+
+function setupSettingsTabs(){
+    Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => {
+        val.onclick = (e) => {
+            if(val.hasAttribute('selected')){
+                return
+            }
+            const navItems = document.getElementsByClassName('settingsNavItem')
+            for(let i=0; i<navItems.length; i++){
+                if(navItems[i].hasAttribute('selected')){
+                    navItems[i].removeAttribute('selected')
+                }
+            }
+            val.setAttribute('selected', '')
+            let prevTab = selectedTab
+            selectedTab = val.getAttribute('rSc')
+            $(`#${prevTab}`).fadeOut(250, () => {
+                $(`#${selectedTab}`).fadeIn(250)
+            })
+        }
+    })
+}
+
+setupSettingsTabs()

app/landing.ejs

@@ -18,10 +18,13 @@
                 </div>
                 <div id="mediaContent">
                     <div id="internalMedia">
-                        <div class="mediaContainer">
+                        <div class="mediaContainer" id="settingsMediaContainer">
+                            <button class="mediaButton" id="settingsMediaButton">
                                 <svg id="settingsSVG" class="mediaSVG" viewBox="0 0 141.36 137.43">
                                     <path d="M70.70475616319865,83.36934004916053 a15.320781354859122,15.320781354859122 0 1 1 14.454501310561755,-15.296030496450625 A14.850515045097694,14.850515045097694 0 0 1 70.70475616319865,83.36934004916053 M123.25082856443602,55.425620905968366 h-12.375429204248078 A45.54157947163293,45.54157947163293 0 0 0 107.21227231573047,46.243052436416285 l8.613298726156664,-9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-3.465120177189462,-3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 l-8.613298726156664,9.108315894326587 A40.442902639482725,40.442902639482725 0 0 0 81.99114759747292,25.427580514871032 V12.532383284044531 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,-9.306322761594556 h-4.950171681699231 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,9.306322761594556 v12.895197230826497 a40.17064319698927,40.17064319698927 0 0 0 -9.331073620003052,4.0591407789933704 l-8.613298726156664,-9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 L25.58394128451018,23.967279868769744 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 L34.19724001066683,46.243052436416285 a45.07131316187151,45.07131316187151 0 0 0 -3.6631270444574313,9.083565035918088 h-12.375429204248078 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,9.306322761594556 v5.197680265784193 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,9.306322761594556 h11.979415469712139 a45.69008462208391,45.69008462208391 0 0 0 4.0591407789933704,10.642869115653347 l-8.613298726156664,9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 l3.465120177189462,3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l8.613298726156664,-9.108315894326587 a40.49240435629971,40.49240435629971 0 0 0 9.331073620003052,4.0591407789933704 v12.895197230826497 a9.083565035918088,9.083565035918088 0 0 0 8.811305593424633,9.306322761594556 h4.950171681699231 A9.083565035918088,9.083565035918088 0 0 0 81.99114759747292,123.68848839660077 V110.79329116577425 a40.78941465720167,40.78941465720167 0 0 0 9.331073620003052,-4.0591407789933704 l8.613298726156664,9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l3.465120177189462,-3.6631270444574313 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-8.613298726156664,-9.108315894326587 a45.665333763675406,45.665333763675406 0 0 0 4.034389920584874,-10.642869115653347 h12.004166328120636 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,-9.306322761594556 v-5.197680265784193 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,-9.306322761594556 " id="svg_3" class=""/>
                                 </svg>
+                                <div id="settingsTooltip">Settings</div>
+                            </button>
                         </div>
                     </div>
                     <div class="mediaDivider"></div>

app/settings.ejs

@@ -4,12 +4,41 @@
             <div id="settingsNavHeader">
                 <span id="settingsNavHeaderText">Settings</span>
             </div>
-            <div id="settingsNavItems">
+            <div id="settingsNavItemsContainer">
-                <div class="settingsNavItem">
+                <div id="settingsNavItemsContent">
-
+                    <button class="settingsNavItem" rSc="settingsTabAccount" selected>Account</button>
+                    <button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
+                    <button class="settingsNavItem" rSc="settingsTabJava">Java</button>
+                    <button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
                 </div>
             </div>
         </div>
     </div>
-    <div id="settingsContainerRight"></div>
+    <div id="settingsContainerRight">
+        <div id="settingsTabAccount" class="settingsTab">
+            <div class="settingsTabHeader">
+                <span class="settingsTabHeaderText">Account Settings</span>
+                <span class="settingsTabHeaderDesc">Add new accounts or manage existing ones.</span>
+            </div>
+        </div>
+        <div id="settingsTabMinecraft" class="settingsTab" style="display: none;">
+            <div class="settingsTabHeader">
+                <span class="settingsTabHeaderText">Minecraft Settings</span>
+                <span class="settingsTabHeaderDesc">Options related to game launch.</span>
+            </div>
+        </div>
+        <div id="settingsTabJava" class="settingsTab" style="display: none;">
+            <div class="settingsTabHeader">
+                <span class="settingsTabHeaderText">Java Settings</span>
+                <span class="settingsTabHeaderDesc">Manage the Java configuration (advanced).</span>
+            </div>
+        </div>
+        <div id="settingsTabLauncher" class="settingsTab" style="display: none;">
+            <div class="settingsTabHeader">
+                <span class="settingsTabHeaderText">Launcher Settings</span>
+                <span class="settingsTabHeaderDesc">Options related to the launcher itself.</span>
+            </div>
+        </div>
+    </div>
+    <script src="./assets/js/scripts/settings.js"></script>
 </div>