From 194f0365b2baec9b4736935566406d0622f90307 Mon Sep 17 00:00:00 2001 From: Kalitsune Date: Sun, 12 May 2024 16:19:51 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A5=20Fluid=20account=20selection?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Edited the account selection menu so that it can be oppened in "popup" mode, allowing similar behavior to the fluid server selection without disturbing the account selection already in place in case of an account validation failure. This new popup menu also adds a "manage accounts" button to open the settings in the same way the old account selection menu did --- app/assets/css/launcher.css | 3 +- app/assets/js/scripts/landing.js | 14 +++-- app/assets/js/scripts/overlay.js | 90 +++++++++++++++++++++++-------- app/assets/js/scripts/uibinder.js | 4 +- app/assets/lang/en_US.toml | 3 +- app/overlay.ejs | 1 + 6 files changed, 82 insertions(+), 33 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index cd304db6..154705b4 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -3850,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 7d420981..551d2dac 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. * @@ -76,6 +79,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte bindOverlayKeys(toggleState, content, dismissable) if(toggleState){ document.getElementById('main').setAttribute('overlay', true) + overlayContainer.setAttribute('content', content) + // Make things untabbable. $('#main *').attr('tabindex', '-1') $('#' + content).parent().children().hide() @@ -95,6 +100,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({ @@ -122,6 +129,22 @@ async function toggleServerSelection(toggleState){ toggleOverlay(toggleState, true, 'serverSelectContent') } +async function toggleAccountSelection(toggleState, popup = false){ + if (popup) { + // set the popup=true attribute to the accountSelectContent div and set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function + accountSelectContent.setAttribute('popup', 'true') + document.getElementById('accountSelectActions').style.display = 'none' + } else { + // remove the popup attribute and set the accountSelectActions div to display: block, this is not done while closing the overlay because of the fadeOut effect + accountSelectContent.removeAttribute('popup') + document.getElementById('accountSelectActions').style.display = 'block' + } + + // show the overlay + await prepareAccountSelectionList() + toggleOverlay(toggleState, true, 'accountSelectContent') +} + /** * Set the content of the overlay. * @@ -169,8 +192,9 @@ function setDismissHandler(handler){ } } -/* Account Select View */ +/* Account Select button */ +// Bind account select confirm button. document.getElementById('accountSelectConfirm').addEventListener('click', async () => { const listings = document.getElementsByClassName('accountListing') for(let i=0; i { $('#accountSelectContent').fadeOut(250, () => { $('#overlayContent').fadeIn(250) }) }) +// 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. -let overlayContainer = document.getElementById('overlayContainer') overlayContainer.addEventListener('click', e => { - if(e.target === overlayContainer){ - toggleOverlay(false) + if (e.target === overlayContainer) { + // This function only works for the server selection overlay or if the account selection is a popup + if(overlayContainer.getAttribute('content') === 'serverSelectContent') { + toggleOverlay(false) + } else if(overlayContainer.getAttribute('content') === 'accountSelectContent' && accountSelectContent.hasAttribute('popup')) { + toggleOverlay(false) + } } }) @@ -219,7 +255,6 @@ async function setServerListingHandlers(){ const listings = Array.from(document.getElementsByClassName('serverListing')) listings.map(async (val) => { val.onclick = async e => { - console.log(e) const serv = (await DistroAPI.getDistribution()).getServerById(val.getAttribute('servid')) updateSelectedServer(serv) refreshServerStatus(true) @@ -228,21 +263,34 @@ async function setServerListingHandlers(){ }) } -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(accountSelectContent.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 += `` @@ -298,7 +346,7 @@ async function prepareServerSelectionList(){ 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 57f4bc85..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" @@ -45,6 +45,7 @@ serverSelectHeader = "Available Servers" 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 e262ed62..95a90ed6 100644 --- a/app/overlay.ejs +++ b/app/overlay.ejs @@ -20,6 +20,7 @@ +
Lorem Ipsum:
Finis Illud