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.
This commit is contained in:
Daniel Scalzi 2018-08-07 00:58:32 -04:00
parent 7301dfc71a
commit ff3f2bfb8d
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
5 changed files with 112 additions and 4 deletions

View File

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

View File

@ -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..')

View File

@ -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()
}
/**

View File

@ -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">

View File

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