diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 8b239311..154705b4 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -3688,10 +3688,6 @@ input:checked + .toggleSwitchSlider:before { position: relative; background: rgba(131, 131, 131, 0.25); } -.serverListing[selected] { - cursor: default; - opacity: 1.0; -} .serverListing:hover, .serverListing:focus { outline: none; @@ -3854,7 +3850,8 @@ input:checked + .toggleSwitchSlider:before { /* Server selection confirm button styles. */ #serverSelectConfirm, -#accountSelectConfirm { +#accountSelectConfirm, +#accountSelectManage { background: none; border: 1px solid #ffffff; color: white; diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index 1a1c1768..314a863b 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -133,14 +133,6 @@ document.getElementById('settingsMediaButton').onclick = async e => { switchView(getCurrentView(), VIEWS.settings) } -// Bind avatar overlay button. -document.getElementById('avatarOverlay').onclick = async e => { - await prepareSettings() - switchView(getCurrentView(), VIEWS.settings, 500, 500, () => { - settingsNavItemListener(document.getElementById('settingsNavAccount'), false) - }) -} - // Bind selected account function updateSelectedAccount(authUser){ let username = Lang.queryJS('landing.selectedAccount.noAccountSelected') @@ -176,6 +168,12 @@ server_selection_button.onclick = async e => { await toggleServerSelection(true) } +// Bind avatar overlay button. +document.getElementById('avatarOverlay').onclick = async e => { + e.target.blur() + await toggleAccountSelection(true, true) +} + // Update Mojang Status Color const refreshMojangStatuses = async function(){ loggerLanding.info('Refreshing Mojang Statuses..') diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js index 0d6ab2ae..5caf6c6c 100644 --- a/app/assets/js/scripts/overlay.js +++ b/app/assets/js/scripts/overlay.js @@ -15,6 +15,9 @@ function isOverlayVisible(){ let overlayHandlerContent +let overlayContainer = document.getElementById('overlayContainer') +let accountSelectContent = document.getElementById('accountSelectContent') + /** * Overlay keydown handler for a non-dismissable overlay. * @@ -22,7 +25,11 @@ let overlayHandlerContent */ function overlayKeyHandler (e){ if(e.key === 'Enter' || e.key === 'Escape'){ - document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click() + if (overlayContainer.hasAttribute('popup')) { + toggleOverlay(false) + } else { + document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click() + } } } /** @@ -64,8 +71,9 @@ function bindOverlayKeys(state, content, dismissable){ * @param {boolean} toggleState True to display, false to hide. * @param {boolean} dismissable Optional. True to show the dismiss option, otherwise false. * @param {string} content Optional. The content div to be shown. + * @param {boolean} popup Optional. True to show the overlay as a popup that is easily dismissable and interactible. */ -function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent'){ +function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent', popup = false){ if(toggleState == null){ toggleState = !document.getElementById('main').hasAttribute('overlay') } @@ -76,6 +84,9 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte bindOverlayKeys(toggleState, content, dismissable) if(toggleState){ document.getElementById('main').setAttribute('overlay', true) + overlayContainer.setAttribute('content', content) + overlayContainer.setAttribute('popup', popup) + // Make things untabbable. $('#main *').attr('tabindex', '-1') $('#' + content).parent().children().hide() @@ -95,6 +106,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte }) } else { document.getElementById('main').removeAttribute('overlay') + overlayContainer.removeAttribute('content') + // Make things tabbable. $('#main *').removeAttr('tabindex') $('#overlayContainer').fadeOut({ @@ -119,7 +132,21 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte async function toggleServerSelection(toggleState){ await prepareServerSelectionList() - toggleOverlay(toggleState, true, 'serverSelectContent') + toggleOverlay(toggleState, false, 'serverSelectContent', true) +} + +async function toggleAccountSelection(toggleState, popup = false){ + if (popup) { + // set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function + document.getElementById('accountSelectActions').style.display = 'none' + } else { + // set the overlayContainer div to display: block, this is not done while closing the overlay because of the fadeOut effect + document.getElementById('accountSelectActions').style.display = 'block' + } + + // show the overlay + await prepareAccountSelectionList() + toggleOverlay(toggleState, false, 'accountSelectContent', popup) } /** @@ -169,27 +196,9 @@ function setDismissHandler(handler){ } } -/* Server Select View */ - -document.getElementById('serverSelectConfirm').addEventListener('click', async () => { - const listings = document.getElementsByClassName('serverListing') - for(let i=0; i 0){ - const serv = (await DistroAPI.getDistribution()).getServerById(listings[i].getAttribute('servid')) - updateSelectedServer(serv) - toggleOverlay(false) - } -}) +/* Account Select button */ +// Bind account select confirm button. document.getElementById('accountSelectConfirm').addEventListener('click', async () => { const listings = document.getElementsByClassName('accountListing') for(let i=0; i { - toggleOverlay(false) -}) - +// Bind account select cancel button. document.getElementById('accountSelectCancel').addEventListener('click', () => { $('#accountSelectContent').fadeOut(250, () => { $('#overlayContent').fadeIn(250) }) }) -function setServerListingHandlers(){ +// Bind account select manage button. +document.getElementById('accountSelectManage').addEventListener('click', async () => { + await prepareSettings() + switchView(getCurrentView(), VIEWS.settings, 500, 500, () => { + settingsNavItemListener(document.getElementById('settingsNavAccount'), false) + }) + toggleOverlay(false) +}) + +// Make the Server Selection background clickable to close the overlay. +overlayContainer.addEventListener('click', e => { + if (e.target === overlayContainer) { + // This function only works if the overlay is a popup + if(overlayContainer.hasAttribute('popup')) { + toggleOverlay(false) + } + } +}) + +async function setServerListingHandlers(){ const listings = Array.from(document.getElementsByClassName('serverListing')) - listings.map((val) => { - val.onclick = e => { - if(val.hasAttribute('selected')){ - return - } - const cListings = document.getElementsByClassName('serverListing') - for(let i=0; i { + val.onclick = async e => { + const serv = (await DistroAPI.getDistribution()).getServerById(val.getAttribute('servid')) + updateSelectedServer(serv) + refreshServerStatus(true) + toggleOverlay(false) } }) } -function setAccountListingHandlers(){ +async function setAccountListingHandlers(){ const listings = Array.from(document.getElementsByClassName('accountListing')) - listings.map((val) => { - val.onclick = e => { - if(val.hasAttribute('selected')){ - return - } - const cListings = document.getElementsByClassName('accountListing') - for(let i=0; i { + val.onclick = async e => { + // popup mode + if(overlayContainer.hasAttribute('popup')){ + const authAcc = ConfigManager.setSelectedAccount(val.getAttribute('uuid')) + ConfigManager.save() + updateSelectedAccount(authAcc) + if(getCurrentView() === VIEWS.settings) { + await prepareSettings() } + toggleOverlay(false) + validateSelectedAccount() + return + } else { + if(val.hasAttribute('selected')){ + return + } + const cListings = document.getElementsByClassName('accountListing') + for(let i=0; iaccountsObj[v]) let htmlString = '' for(let i=0; i + htmlString += `` @@ -315,10 +345,10 @@ function populateAccountListings(){ async function prepareServerSelectionList(){ await populateServerListings() - setServerListingHandlers() + await setServerListingHandlers() } -function prepareAccountSelectionList(){ +async function prepareAccountSelectionList(){ populateAccountListings() - setAccountListingHandlers() + await setAccountListingHandlers() } \ No newline at end of file diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js index 5fe79df5..eaf5dd7a 100644 --- a/app/assets/js/scripts/uibinder.js +++ b/app/assets/js/scripts/uibinder.js @@ -381,9 +381,9 @@ async function validateSelectedAccount(){ toggleOverlay(false) switchView(getCurrentView(), VIEWS.loginOptions) }) - setDismissHandler(() => { + setDismissHandler(async () => { if(accLen > 1){ - prepareAccountSelectionList() + await prepareAccountSelectionList() $('#overlayContent').fadeOut(250, () => { bindOverlayKeys(true, 'accountSelectContent', true) $('#accountSelectContent').fadeIn(250) diff --git a/app/assets/lang/en_US.toml b/app/assets/lang/en_US.toml index b9f64cfb..d29cd70a 100644 --- a/app/assets/lang/en_US.toml +++ b/app/assets/lang/en_US.toml @@ -1,7 +1,7 @@ [ejs.landing] updateAvailableTooltip = "Update Available" usernamePlaceholder = "Username" -usernameEditButton = "Edit" +usernameEditButton = "Switch" settingsTooltip = "Settings" serverStatus = "SERVER" serverStatusPlaceholder = "OFFLINE" @@ -42,11 +42,10 @@ cancelButton = "Cancel" [ejs.overlay] serverSelectHeader = "Available Servers" -serverSelectConfirm = "Select" -serverSelectCancel = "Cancel" accountSelectHeader = "Select an Account" accountSelectConfirm = "Select" accountSelectCancel = "Cancel" +accountSelectManage = "Manage Accounts" [ejs.settings] navHeaderText = "Settings" diff --git a/app/overlay.ejs b/app/overlay.ejs index 7faab15b..95a90ed6 100644 --- a/app/overlay.ejs +++ b/app/overlay.ejs @@ -6,12 +6,6 @@ -
- -
- -
-
+
Lorem Ipsum:
Finis Illud