Added server status bar to the top of the mods tab.

The user is also given the option to switch servers from this status bar.

app/assets/css/launcher.css

@@ -1409,6 +1409,7 @@ input:checked + .toggleSwitchSlider:before {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    transition: opacity 0.25s ease;
 }
 
 .settingsModMainWrapper {
@@ -1436,6 +1437,11 @@ input:checked + .toggleSwitchSlider:before {
     background-color: rgb(165, 195, 37);
 }
 
+.settingsMod:not([enabled]) > .settingsSubModContainer .settingsModContent,
+.settingsSubMod:not([enabled]) > .settingsSubModContainer .settingsModContent {
+    opacity: 0.5;
+}
+
 .settingsSubModContainer > .settingsSubMod:first-child {
     border-top-left-radius: 10px;
 }
@@ -1453,6 +1459,55 @@ settingsSubModContainer > .settingsSubMod:only-child {
     margin-top: 10px;
 }
 
+#settingsSelServContainer {
+    background: rgba(0, 0, 0, 0.25);
+    width: 75%;
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 0px;
+}
+
+#settingsSelServContent {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 5px 0px;
+}
+
+#settingsSwitchServerContainer {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+}
+
+#settingsSwitchServerButton {
+    opacity: 0;
+    border: 1px solid rgb(255, 255, 255);
+    color: rgb(255, 255, 255);
+    background: none;
+    font-size: 12px;
+    border-radius: 3px;
+    font-family: 'Avenir Medium';
+    transition: 0.25s ease;
+    cursor: pointer;
+    outline: none;
+}
+#settingsSwitchServerButton:hover,
+#settingsSwitchServerButton:focus {
+    box-shadow: 0px 0px 20px rgb(255, 255, 255);
+    background: rgba(255, 255, 255, 0.25);
+}
+#settingsSwitchServerButton:active {
+    box-shadow: 0px 0px 20px rgb(187, 187, 187);
+    background: rgba(187, 187, 187, 0.25);
+    border: 1px solid rgb(187, 187, 187);
+    color: rgb(187, 187, 187);
+}
+#settingsSelServContainer:hover #settingsSwitchServerButton {
+    opacity: 1;
+}
+
 /* * *
 * Settings View (Java Tab)
 * * */

app/assets/js/scripts/landing.js

@@ -139,6 +139,9 @@ function updateSelectedServer(serverName){
         serverName = 'No Server Selected'
     }
     server_selection_button.innerHTML = '\u2022 ' + serverName
+    if(getCurrentView() === VIEWS.settings){
+        animateModsTabRefresh()
+    }
 }
 // Real text is set in uibinder.js on distributionIndexDone.
 updateSelectedServer('Loading..')

app/assets/js/scripts/settings.js

@@ -439,7 +439,7 @@ function resolveModsForUI(){
 
 }
 
-function parseModulesForUI(mdls, submodules = false, servConf){
+function parseModulesForUI(mdls, submodules, servConf){
 
     let reqMods = ''
     let optMods = ''
@@ -556,12 +556,52 @@ function _saveModConfiguration(modConf){
     return modConf
 }
 
+function loadSelectedServerOnModsTab(){
+
+    const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
+
+    document.getElementById('settingsSelServContent').innerHTML = `
+        <img class="serverListingImg" src="${serv.getIcon()}"/>
+        <div class="serverListingDetails">
+            <span class="serverListingName">${serv.getName()}</span>
+            <span class="serverListingDescription">${serv.getDescription()}</span>
+            <div class="serverListingInfo">
+                <div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
+                <div class="serverListingRevision">${serv.getVersion()}</div>
+                ${serv.isMainServer() ? `<div class="serverListingStarWrapper">
+                    <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
+                        <defs>
+                            <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
+                        </defs>
+                        <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
+                        <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
+                    </svg>
+                    <span class="serverListingStarTooltip">Main Server</span>
+                </div>` : ''}
+            </div>
+        </div>
+    `
+}
+
+document.getElementById("settingsSwitchServerButton").addEventListener('click', (e) => {
+    e.target.blur()
+    toggleServerSelection(true)
+})
+
+function animateModsTabRefresh(){
+    $('#settingsTabMods').fadeOut(500, () => {
+        prepareModsTab()
+        $('#settingsTabMods').fadeIn(500)
+    })
+}
+
 /**
- * Prepare the Java tab for display.
+ * Prepare the Mods tab for display.
  */
-function prepareModsTab(){
+function prepareModsTab(first){
     resolveModsForUI()
     bindModsToggleSwitch()
+    loadSelectedServerOnModsTab()
 }
 
 /**

app/overlay.ejs

@@ -3,7 +3,7 @@
         <span id="serverSelectHeader">Available Servers</span>
         <div id="serverSelectList">
             <div id="serverSelectListScrollable">
-                <!-- Server sistings populated here. -->
+                <!-- Server listings populated here. -->
             </div>
         </div>
         <div id="serverSelectActions">

app/settings.ejs

@@ -96,6 +96,16 @@
                 <span class="settingsTabHeaderText">Mod Settings</span>
                 <span class="settingsTabHeaderDesc">Enable or disable mods.</span>
             </div>
+            <div id="settingsSelServContainer">
+                <div id="settingsSelServContent">
+
+                </div>
+                <div id="settingsSwitchServerContainer">
+                    <div id="settingsSwitchServerContent">
+                        <button id="settingsSwitchServerButton">Switch</button>
+                    </div>
+                </div>
+            </div>
             <div id="settingsModsContainer">
                 <div id="settingsReqModsContainer">
                     <div class="settingsModsHeader">Required Mods</div>