From 2dcbb45bdb9ce19cde42dc6b11b5b312e26ed63d Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Wed, 30 May 2018 16:00:07 -0400 Subject: [PATCH] Further progress on settings UI. Added a tooltip to the settings button on the landing UI. Settings button now opens to the (incomplete) settings UI. Added navigation bar to the settings UI. Implemented tabbing between settings tabs. More to come. --- app/assets/css/launcher.css | 119 +++++++++++++++++++++++++++++- app/assets/js/scripts/landing.js | 5 ++ app/assets/js/scripts/settings.js | 25 +++++++ app/landing.ejs | 11 ++- app/settings.ejs | 37 +++++++++- 5 files changed, 188 insertions(+), 9 deletions(-) create mode 100644 app/assets/js/scripts/settings.js diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 7f64a87..5cf3c49 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -826,6 +826,8 @@ body, button { #settingsContainerLeft { height: 100%; width: 25%; + padding: 5% 0px; + box-sizing: border-box; } #settingsNavContainer { @@ -833,9 +835,74 @@ body, button { flex-direction: column; } +#settingsNavHeader { + display: flex; + justify-content: center; +} + +#settingsNavHeaderText { + font-size: 20px; +} + +#settingsNavItemsContainer { + height: 100%; + display: flex; + justify-content: center; + padding-top: 25%; + box-sizing: border-box; +} + +#settingsNavItemsContent { + display: flex; + flex-direction: column; +} + +.settingsNavItem { + background: none; + border: none; + border-radius: 7px; + text-align: left; + margin: 5px 0px; + padding: 0px 20px; + color: grey; + cursor: pointer; + outline: none; + transition: 0.25s ease; +} +.settingsNavItem:hover, +.settingsNavItem:focus { + color: #c1c1c1; + text-shadow: 0px 0px 20px #c1c1c1; +} +.settingsNavItem[selected] { + cursor: default; + color: white; + text-shadow: none; +} + #settingsContainerRight { height: 100%; width: 75%; + padding: 5% 0%; + box-sizing: border-box; +} + +.settingsTab { + width: 100%; + height: 100%; +} + +.settingsTabHeader { + display: flex; + flex-direction: column; +} + +.settingsTabHeaderText { + font-size: 20px; + font-family: 'Avenir Medium'; +} +.settingsTabHeaderDesc { + font-size: 12px; } /******************************************************************************* @@ -1401,15 +1468,65 @@ body, button { outline: none; } +/* Internal media button shared styles. */ +.mediaButton { + background: none; + border: none; + padding: 0px; + display: flex; + align-items: center; + outline: none; +} + +#settingsMediaContainer { + position: relative; +} + /* Settings icon colors. */ #settingsSVG { stroke: #ffffff; height: 15px; } -#settingsSVG:hover { +.mediaButton:hover #settingsSVG, +.mediaButton:focus #settingsSVG, +.mediaButton:active #settingsSVG { height: 23px; } +/* Settings tooltip styles. */ +#settingsTooltip { + visibility: hidden; + opacity: 0; + width: 75px; + height: 20px; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; + border-radius: 4px; + position: absolute; + z-index: 1; + right: 130%; + font-size: 12px; + line-height: 20px; + transition: visibility 0s linear 0.25s, opacity 0.25s ease; +} +#settingsTooltip::after { + content: " "; + position: absolute; + top: 50%; + left: 100%; + margin-top: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent transparent rgba(0, 0, 0, 0.75); +} +.mediaButton:hover #settingsTooltip, +.mediaButton:focus #settingsTooltip, +.mediaButton:active #settingsTooltip { + visibility: visible; + opacity: 1; + transition-delay:0s; +} + /* Twitter icon colors. */ #twitterSVG:hover, #twitterURL:focus #twitterSVG { diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index 3ad6edc..dce5040 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -114,6 +114,11 @@ document.getElementById('launch_button').addEventListener('click', function(e){ } }) +// Bind settings button +document.getElementById('settingsMediaButton').onclick = (e) => { + switchView(getCurrentView(), VIEWS.settings) +} + // 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 new file mode 100644 index 0000000..f9e7e46 --- /dev/null +++ b/app/assets/js/scripts/settings.js @@ -0,0 +1,25 @@ +let selectedTab = 'settingsTabAccount' + +function setupSettingsTabs(){ + Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => { + val.onclick = (e) => { + if(val.hasAttribute('selected')){ + return + } + const navItems = document.getElementsByClassName('settingsNavItem') + for(let i=0; i { + $(`#${selectedTab}`).fadeIn(250) + }) + } + }) +} + +setupSettingsTabs() \ No newline at end of file diff --git a/app/landing.ejs b/app/landing.ejs index 0ee21bf..3c96806 100644 --- a/app/landing.ejs +++ b/app/landing.ejs @@ -18,10 +18,13 @@
-
- - - +
+
diff --git a/app/settings.ejs b/app/settings.ejs index 9cdb049..f0f7c8d 100644 --- a/app/settings.ejs +++ b/app/settings.ejs @@ -4,12 +4,41 @@
Settings
-
-
- +
+
+ + + +
-
+
+
+
+ Account Settings + Add new accounts or manage existing ones. +
+
+ + + +
+
\ No newline at end of file