From c0714ecbc6ab7cb0467fa17a30e8ebebf0ddc41e Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Thu, 21 Jun 2018 12:38:21 -0400
Subject: [PATCH] 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.
---
app/assets/css/launcher.css | 9 +++-
app/assets/js/scripts/landing.js | 8 ++++
app/assets/js/scripts/settings.js | 80 ++++++++++++++++++++-----------
app/landing.ejs | 2 +-
app/settings.ejs | 2 +-
5 files changed, 69 insertions(+), 32 deletions(-)
diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 000e6f55..3e7d263f 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -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 {
diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js
index c08c0137..6369ec93 100644
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@@ -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'
diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js
index 6e209623..f2a293ee 100644
--- a/app/assets/js/scripts/settings.js
+++ b/app/assets/js/scripts/settings.js
@@ -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')
/**
diff --git a/app/landing.ejs b/app/landing.ejs
index 1697ad54..ed64fcb0 100644
--- a/app/landing.ejs
+++ b/app/landing.ejs
@@ -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">
diff --git a/app/settings.ejs b/app/settings.ejs
index 9a59202a..eca33a53 100644
--- a/app/settings.ejs
+++ b/app/settings.ejs
@@ -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>