diff options
author | George Moschovitis <george.moschovitis@gmail.com> | 2019-03-19 21:16:54 +0200 |
---|---|---|
committer | Chris Akritidis <43294513+cakrit@users.noreply.github.com> | 2019-03-19 20:16:54 +0100 |
commit | 028b457a7c1acd4b08a655be9e52ba2ba5e44cd8 (patch) | |
tree | e69244a29a60fad0b419e54fffe325a685841e19 /web | |
parent | 69050e602882523815fd3466ce766b440d0e85b2 (diff) |
Make sign-in functionality more visible (#5569)
* Introduce sign-in banner
* Show/hide sign-in banner
* Improvements
* Fixed banner for white theme.
Diffstat (limited to 'web')
-rw-r--r-- | web/gui/index.html | 13 | ||||
-rw-r--r-- | web/gui/main.css | 46 | ||||
-rw-r--r-- | web/gui/main.js | 31 |
3 files changed, 88 insertions, 2 deletions
diff --git a/web/gui/index.html b/web/gui/index.html index 0a6ff25015..83fbd6c58b 100644 --- a/web/gui/index.html +++ b/web/gui/index.html @@ -13,7 +13,7 @@ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="author" content="costa@tsaousis.gr"> - <link rel="stylesheet" type="text/css" href="main.css?v=4"> + <link rel="stylesheet" type="text/css" href="main.css?v=5"> <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACyklEQVRYhcWXz0sUYRjHP8+wLItImEhnEfEgEVJk+56CbCECQWezOkTQTTp6kejgKUSoEAoK/wAhaaeDBkLoIahZIWIJo0U8hHQJJBYJERGfDrOju7PjuO5u6/c0PM/7zvfzvvP+eEaoVu6wBZIA3cW82wtvY7cD1xEWSTpb1bxWjm2RtbtQxoF7iLSA7gO/UL4A74G3mBIzNz0Peg1hFmUK46zXBuDaCYQJlDFE4ke/QreAZyhPMc42rt2PyEoxt4cyDUxgnO3qAVy7C8gg0hdFHwBZA0ZIOt9w7e+I9B6mdBVhmGTlbFQCuPYFhA8g56o3P3D6CwyiDCIyFshtgqRIZnKlUStg3lW7OYC0AvPATkiuA9U3uOlEOEDWTgCZ2s3LIMbCU9ID3A8HUCZO9s2jGCRxdFIflDUF/EX3I3q1N0iq+8BZf+v6MzDeFHMAEQvoJpuOAwiu3Qr89g6ZJkm5CnoHeBwDbjTV3CPoRRhF+WQBA801B+AJiAUMWMDFptuLtBef+iygs+kAh+q0gDOnCNBmETyOmywLKJyifyEG/ATqPP+LUt0FZoAlIA6MgNyKqDo2YkAO6G+QeQrjfCyJzuHaoyCvjuiVs4q0jdBMwNyTcV6j+jm0h7BkAYuohpZLJ1TUQJYrIqo7KAtW8VaabQBA1GVWmROZwzgFfwtOoRpealevdGg0a8eAoUB0D9VJ8M8A46yDTNdlL9wmaz8MMX9RrIQOpfoS4+S9br7cdAvoCiLn6wLxFtwyQhxlKMQ8j3CJpFeml+9QN90N6iLSURfEkXD8AQwms+aHyo9hk1kHSaG6+Z/MU6XmlQAeRA7EoLraQPM83si/BlPhF5E3E1dQfY5S++5Q/9dMLwdH7uv4n1PX7gEeAXejy+0y4x2QOWASk8lHNT0e4AAk3QZ6E6+E68MrZNqK2QKwgXevLCEskHSqumX/AUXU5QBtOC5FAAAAAElFTkSuQmCC"> @@ -163,6 +163,17 @@ <div id="navbar-highlight-content" class="navbar-highlight-content"></div> </div> + <div id="sign-in-banner" style="display: none"> + <div class="container"> + Like what you see? + <strong><a href="#" class="__link" onclick="signInDidClick(event); return false">Sign in</a> + to experience the full-range of netdata capabilities!</strong> + <div class="__close" onclick="closeSignInBannerDidClick(event)"> + Close <i class="fas fa-times"></i> + </div> + </div> + </div> + <div id="masthead" style="display: none;"> <div class="container"> <div class="row"> diff --git a/web/gui/main.css b/web/gui/main.css index b1fb94fdd5..994dbdb742 100644 --- a/web/gui/main.css +++ b/web/gui/main.css @@ -667,3 +667,49 @@ body.modal-open { font-size: 18px; } +.sign-in-btn { + background-color: #1E2126; +} + +.sign-in-btn.theme-white { + background-color: #e6e6e6; +} + +.sign-in-btn.theme-white span { + color: #000; +} + +#sign-in-banner { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 9999; + /* margin: 5px 0; */ + background-color: #1E2126; + height: 44px; + line-height: 44px; + text-align: center; +} + +#sign-in-banner.theme-white { + background-color: #e6e6e6; +} + +#sign-in-banner .__link { + color: #17CE8A; +} + +#sign-in-banner .__link:hover { + text-decoration: underline; +} + +#sign-in-banner .__close { + cursor: pointer; + float: right; +} + +#sign-in-banner .__close .fa-times { + margin-left: 5px; + color: #17CE8A; +} diff --git a/web/gui/main.js b/web/gui/main.js index c6a2bac135..c69f828b47 100644 --- a/web/gui/main.js +++ b/web/gui/main.js @@ -4044,6 +4044,14 @@ function runOnceOnDashboardWithjQuery() { // ------------------------------------------------------------------------ // sidebar / affix + if (shouldShowSignInBanner()) { + const el = document.getElementById("sign-in-banner"); + if (el) { + el.style.display = "initial"; + el.classList.add(`theme-${netdataTheme}`); + } + } + $('#sidebar') .affix({ offset: { @@ -4685,6 +4693,26 @@ function signInDidClick(e) { signIn(); } +function shouldShowSignInBanner() { + if (isSignedIn()) { + return false; + } + + return localStorage.getItem("signInBannerClosed") != "true"; +} + +function closeSignInBanner() { + localStorage.setItem("signInBannerClosed", "true"); + const el = document.getElementById("sign-in-banner"); + if (el) { + el.style.display = "none"; + } +} + +function closeSignInBannerDidClick(e) { + closeSignInBanner(); +} + function signOutDidClick(e) { e.preventDefault(); e.stopPropagation(); @@ -4779,7 +4807,7 @@ function renderAccountUI() { container.setAttribute("data-original-title", "sign in"); container.setAttribute("data-placement", "bottom"); container.innerHTML = ( - `<a href="#" class="btn" onclick="signInDidClick(event); return false"> + `<a href="#" class="btn sign-in-btn theme-${netdataTheme}" onclick="signInDidClick(event); return false"> <i class="fas fa-sign-in-alt"></i> <span class="hidden-sm hidden-md">Sign In</span> </a>` ) @@ -4802,6 +4830,7 @@ function handleMessage(e) { } function handleSignInMessage(e) { + closeSignInBanner(); localStorage.setItem("cloud.baseURL", NETDATA.registry.cloudBaseURL); cloudAccountID = e.data.accountID; |