Make sign-in functionality more visible (#5569)
* Introduce sign-in banner * Show/hide sign-in banner * Improvements * Fixed banner for white theme.
George Moschovitis committed
Mar 19, 2019 at 21:16 UTC
028b457a7c1acd4b08a655be9e52ba2ba5e44cd8
3 files changed
+88
-2
web/gui/index.html
+12
-1
@@ -13,7 +13,7 @@
13
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
14
<meta name="author" content="costa@tsaousis.gr">
15
16
- <link rel="stylesheet" type="text/css" href="main.css?v=4">
16
+ <link rel="stylesheet" type="text/css" href="main.css?v=5">
17
18
<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">
19
@@ -163,6 +163,17 @@
163
<div id="navbar-highlight-content" class="navbar-highlight-content"></div>
164
</div>
165
166
+ <div id="sign-in-banner" style="display: none">
167
+ <div class="container">
168
+ Like what you see?
169
+ <strong><a href="#" class="__link" onclick="signInDidClick(event); return false">Sign in</a>
170
+ to experience the full-range of netdata capabilities!</strong>
171
+ <div class="__close" onclick="closeSignInBannerDidClick(event)">
172
+ Close <i class="fas fa-times"></i>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
<div id="masthead" style="display: none;">
178
<div class="container">
179
<div class="row">
web/gui/main.css
+46
@@ -667,3 +667,49 @@ body.modal-open {
667
font-size: 18px;
668
}
669
670
+.sign-in-btn {
671
+ background-color: #1E2126;
672
+}
673
+
674
+.sign-in-btn.theme-white {
675
+ background-color: #e6e6e6;
676
+}
677
+
678
+.sign-in-btn.theme-white span {
679
+ color: #000;
680
+}
681
+
682
+#sign-in-banner {
683
+ position: fixed;
684
+ bottom: 0;
685
+ left: 0;
686
+ right: 0;
687
+ z-index: 9999;
688
+ /* margin: 5px 0; */
689
+ background-color: #1E2126;
690
+ height: 44px;
691
+ line-height: 44px;
692
+ text-align: center;
693
+}
694
+
695
+#sign-in-banner.theme-white {
696
+ background-color: #e6e6e6;
697
+}
698
+
699
+#sign-in-banner .__link {
700
+ color: #17CE8A;
701
+}
702
+
703
+#sign-in-banner .__link:hover {
704
+ text-decoration: underline;
705
+}
706
+
707
+#sign-in-banner .__close {
708
+ cursor: pointer;
709
+ float: right;
710
+}
711
+
712
+#sign-in-banner .__close .fa-times {
713
+ margin-left: 5px;
714
+ color: #17CE8A;
715
+}
web/gui/main.js
+30
-1
@@ -4044,6 +4044,14 @@ function runOnceOnDashboardWithjQuery() {
4044
// ------------------------------------------------------------------------
4045
// sidebar / affix
4046
4047
+ if (shouldShowSignInBanner()) {
4048
+ const el = document.getElementById("sign-in-banner");
4049
+ if (el) {
4050
+ el.style.display = "initial";
4051
+ el.classList.add(`theme-${netdataTheme}`);
4052
+ }
4053
+ }
4054
+
4055
$('#sidebar')
4056
.affix({
4057
offset: {
@@ -4685,6 +4693,26 @@ function signInDidClick(e) {
4693
signIn();
4694
}
4695
4696
+function shouldShowSignInBanner() {
4697
+ if (isSignedIn()) {
4698
+ return false;
4699
+ }
4700
+
4701
+ return localStorage.getItem("signInBannerClosed") != "true";
4702
+}
4703
+
4704
+function closeSignInBanner() {
4705
+ localStorage.setItem("signInBannerClosed", "true");
4706
+ const el = document.getElementById("sign-in-banner");
4707
+ if (el) {
4708
+ el.style.display = "none";
4709
+ }
4710
+}
4711
+
4712
+function closeSignInBannerDidClick(e) {
4713
+ closeSignInBanner();
4714
+}
4715
+
4716
function signOutDidClick(e) {
4717
e.preventDefault();
4718
e.stopPropagation();
@@ -4779,7 +4807,7 @@ function renderAccountUI() {
4807
container.setAttribute("data-original-title", "sign in");
4808
container.setAttribute("data-placement", "bottom");
4809
container.innerHTML = (
4782
- `<a href="#" class="btn" onclick="signInDidClick(event); return false">
4810
+ `<a href="#" class="btn sign-in-btn theme-${netdataTheme}" onclick="signInDidClick(event); return false">
4811
<i class="fas fa-sign-in-alt"></i> <span class="hidden-sm hidden-md">Sign In</span>
4812
</a>`
4813
)
@@ -4802,6 +4830,7 @@ function handleMessage(e) {
4830
}
4831
4832
function handleSignInMessage(e) {
4833
+ closeSignInBanner();
4834
localStorage.setItem("cloud.baseURL", NETDATA.registry.cloudBaseURL);
4835
4836
cloudAccountID = e.data.accountID;