Added functionality to avatar overlay.
Overlay changed from div to button. Clicking on the overlay will bring you directly to the settings account tab. Modified overlay background color.pull/2/head
parent
a68abaf89c
commit
c0714ecbc6
|
@ -2308,16 +2308,21 @@ input:checked + .toggleSwitchSlider:before {
|
|||
transition: 0.25s ease;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(65deg, rgba(0, 0, 0, 0.4), rgba(136, 77, 77, 0.4) 60%);
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
-webkit-user-select: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#avatarOverlay:hover {
|
||||
#avatarOverlay:hover,
|
||||
#avatarOverlay:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
#avatarOverlay:active {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
/* User profile name text. */
|
||||
#user_text {
|
||||
|
|
|
@ -110,6 +110,14 @@ document.getElementById('settingsMediaButton').onclick = (e) => {
|
|||
switchView(getCurrentView(), VIEWS.settings)
|
||||
}
|
||||
|
||||
// Bind avatar overlay button.
|
||||
document.getElementById('avatarOverlay').onclick = (e) => {
|
||||
prepareSettings()
|
||||
switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
|
||||
settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
|
||||
})
|
||||
}
|
||||
|
||||
// Bind selected account
|
||||
function updateSelectedAccount(authUser){
|
||||
let username = 'No Account Selected'
|
||||
|
|
|
@ -140,7 +140,7 @@ function saveSettingsValues(){
|
|||
})
|
||||
}
|
||||
|
||||
let selectedTab = 'settingsTabAccount'
|
||||
let selectedSettingsTab = 'settingsTabAccount'
|
||||
|
||||
/**
|
||||
* Modify the settings container UI when the scroll threshold reaches
|
||||
|
@ -162,38 +162,62 @@ function settingsTabScrollListener(e){
|
|||
function setupSettingsTabs(){
|
||||
Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => {
|
||||
if(val.hasAttribute('rSc')){
|
||||
val.onclick = (e) => {
|
||||
if(val.hasAttribute('selected')){
|
||||
return
|
||||
}
|
||||
const navItems = document.getElementsByClassName('settingsNavItem')
|
||||
for(let i=0; i<navItems.length; i++){
|
||||
if(navItems[i].hasAttribute('selected')){
|
||||
navItems[i].removeAttribute('selected')
|
||||
}
|
||||
}
|
||||
val.setAttribute('selected', '')
|
||||
let prevTab = selectedTab
|
||||
selectedTab = val.getAttribute('rSc')
|
||||
|
||||
document.getElementById(prevTab).onscroll = null
|
||||
document.getElementById(selectedTab).onscroll = settingsTabScrollListener
|
||||
|
||||
$(`#${prevTab}`).fadeOut(250, () => {
|
||||
$(`#${selectedTab}`).fadeIn({
|
||||
duration: 250,
|
||||
start: () => {
|
||||
settingsTabScrollListener({
|
||||
target: document.getElementById(selectedTab)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
val.onclick = () => {
|
||||
settingsNavItemListener(val)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Settings nav item onclick lisener. Function is exposed so that
|
||||
* other UI elements can quickly toggle to a certain tab from other views.
|
||||
*
|
||||
* @param {Element} ele The nav item which has been clicked.
|
||||
* @param {boolean} fade Optional. True to fade transition.
|
||||
*/
|
||||
function settingsNavItemListener(ele, fade = true){
|
||||
if(ele.hasAttribute('selected')){
|
||||
return
|
||||
}
|
||||
const navItems = document.getElementsByClassName('settingsNavItem')
|
||||
for(let i=0; i<navItems.length; i++){
|
||||
if(navItems[i].hasAttribute('selected')){
|
||||
navItems[i].removeAttribute('selected')
|
||||
}
|
||||
}
|
||||
ele.setAttribute('selected', '')
|
||||
let prevTab = selectedSettingsTab
|
||||
selectedSettingsTab = ele.getAttribute('rSc')
|
||||
|
||||
document.getElementById(prevTab).onscroll = null
|
||||
document.getElementById(selectedSettingsTab).onscroll = settingsTabScrollListener
|
||||
|
||||
if(fade){
|
||||
$(`#${prevTab}`).fadeOut(250, () => {
|
||||
$(`#${selectedSettingsTab}`).fadeIn({
|
||||
duration: 250,
|
||||
start: () => {
|
||||
settingsTabScrollListener({
|
||||
target: document.getElementById(selectedSettingsTab)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
$(`#${prevTab}`).hide(0, () => {
|
||||
$(`#${selectedSettingsTab}`).show({
|
||||
duration: 0,
|
||||
start: () => {
|
||||
settingsTabScrollListener({
|
||||
target: document.getElementById(selectedSettingsTab)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const settingsNavDone = document.getElementById('settingsNavDone')
|
||||
|
||||
/**
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<div id="user_content">
|
||||
<span id="user_text">Username</span>
|
||||
<div id="avatarContainer">
|
||||
<div id="avatarOverlay">Edit</div>
|
||||
<button id="avatarOverlay">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mediaContent">
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
<div id="settingsNavItemsContainer">
|
||||
<div id="settingsNavItemsContent">
|
||||
<button class="settingsNavItem" rSc="settingsTabAccount" selected>Account</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabAccount" id="settingsNavAccount" selected>Account</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabMods">Mods</button>
|
||||
<button class="settingsNavItem" rSc="settingsTabJava">Java</button>
|
||||
|
|
Loading…
Reference in New Issue