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.pull/19/head
Daniel Scalzi
parent
7301dfc71a
commit
ff3f2bfb8d
|
|
@ -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)
|
||||
* * */
|
||||
|
|
|
|||
|
|
@ -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..')
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue