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.
2018-08-07 00:58:32 -04:00 · 2018-08-07 00:58:32 -04:00 · ff3f2bfb8d
commit ff3f2bfb8d
parent 7301dfc71a
5 changed files with 112 additions and 4 deletions
--- a/app/assets/css/launcher.css
+++ b/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)
 * * */
--- a/app/assets/js/scripts/landing.js
+++ b/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..')
--- a/app/assets/js/scripts/settings.js
+++ b/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()
 }

 /**
--- a/app/overlay.ejs
+++ b/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">
--- a/app/settings.ejs
+++ b/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>