mirror of
https://github.com/dscalzi/HeliosLauncher.git
synced 2024-12-22 03:32:12 -08:00
Add server selection button to Java settings tab in preparation for by-instance java settings.
This commit is contained in:
Daniel Scalzi
parent
79e901051d
commit
72cb45b271
@ -1228,6 +1228,59 @@ body, button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Selected server content container */
|
||||
.settingsSelServContainer {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
width: 75%;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
/* Div which will be populated with the selected server's information. */
|
||||
.settingsSelServContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
/* Wrapper container for the switch server button. */
|
||||
.settingsSwitchServerContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Button to switch server configurations on the mods tab. */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Remove spin button from number inputs. */
|
||||
#settingsContainer input[type=number]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
@ -1638,59 +1691,6 @@ input:checked + .toggleSwitchSlider:before {
|
||||
* Settings View (Mods Tab)
|
||||
* * */
|
||||
|
||||
/* Selected server content container */
|
||||
#settingsSelServContainer {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
width: 75%;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
/* Div which will be populated with the selected server's information. */
|
||||
#settingsSelServContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
/* Wrapper container for the switch server button. */
|
||||
#settingsSwitchServerContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Button to switch server configurations on the mods tab. */
|
||||
#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;
|
||||
}
|
||||
|
||||
/* Main content container for the mod elements. */
|
||||
#settingsModsContainer {
|
||||
width: 75%;
|
||||
|
||||
@ -146,7 +146,7 @@ function updateSelectedServer(serv){
|
||||
ConfigManager.save()
|
||||
server_selection_button.innerHTML = '\u2022 ' + (serv != null ? serv.getName() : 'No Server Selected')
|
||||
if(getCurrentView() === VIEWS.settings){
|
||||
animateModsTabRefresh()
|
||||
animateSettingsTabRefresh()
|
||||
}
|
||||
setLaunchEnabled(serv != null)
|
||||
}
|
||||
|
||||
@ -1056,33 +1056,37 @@ function bindShaderpackButton() {
|
||||
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>` : ''}
|
||||
for(const el of document.getElementsByClassName('settingsSelServContent')) {
|
||||
el.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>
|
||||
</div>
|
||||
`
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
// Bind functionality to the server switch button.
|
||||
document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => {
|
||||
e.target.blur()
|
||||
toggleServerSelection(true)
|
||||
Array.from(document.getElementsByClassName('settingsSwitchServerButton')).forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
e.target.blur()
|
||||
toggleServerSelection(true)
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
@ -1095,13 +1099,13 @@ function saveAllModConfigurations(){
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to refresh the mods tab whenever the selected
|
||||
* Function to refresh the current tab whenever the selected
|
||||
* server is changed.
|
||||
*/
|
||||
function animateModsTabRefresh(){
|
||||
$('#settingsTabMods').fadeOut(500, () => {
|
||||
prepareModsTab()
|
||||
$('#settingsTabMods').fadeIn(500)
|
||||
function animateSettingsTabRefresh(){
|
||||
$(`#${selectedSettingsTab}`).fadeOut(500, () => {
|
||||
prepareSettings()
|
||||
$(`#${selectedSettingsTab}`).fadeIn(500)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -122,13 +122,13 @@
|
||||
<span class="settingsTabHeaderText">Mod Settings</span>
|
||||
<span class="settingsTabHeaderDesc">Enable or disable mods.</span>
|
||||
</div>
|
||||
<div id="settingsSelServContainer">
|
||||
<div id="settingsSelServContent">
|
||||
<div class="settingsSelServContainer">
|
||||
<div class="settingsSelServContent">
|
||||
|
||||
</div>
|
||||
<div id="settingsSwitchServerContainer">
|
||||
<div id="settingsSwitchServerContent">
|
||||
<button id="settingsSwitchServerButton">Switch</button>
|
||||
<div class="settingsSwitchServerContainer">
|
||||
<div class="settingsSwitchServerContent">
|
||||
<button class="settingsSwitchServerButton">Switch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,6 +172,16 @@
|
||||
<span class="settingsTabHeaderText">Java Settings</span>
|
||||
<span class="settingsTabHeaderDesc">Manage the Java configuration (advanced).</span>
|
||||
</div>
|
||||
<div class="settingsSelServContainer">
|
||||
<div class="settingsSelServContent">
|
||||
|
||||
</div>
|
||||
<div class="settingsSwitchServerContainer">
|
||||
<div class="settingsSwitchServerContent">
|
||||
<button class="settingsSwitchServerButton">Switch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settingsMemoryContainer">
|
||||
<div id="settingsMemoryTitle">Memory</div>
|
||||
<div id="settingsMemoryContent">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user