a little bit widder scrollbars; my-netdata menu now pauses the dashboard for smoother scroll on slow machines
Costa Tsaousis (ktsaou) committed
Dec 29, 2016 at 12:10 UTC
954e52c9876345cbbe536871a6feb6c26c0feb08
4 files changed
+40
-40
web/dashboard.css
+9
-9
@@ -537,7 +537,7 @@ body {
537
538
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
539
background-color: #aaa; /* scrollbar color when dragged away */
540
- height: 4px;
540
+ height: 5px;
541
}
542
543
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
@@ -547,7 +547,7 @@ body {
547
548
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
549
background-color: #aaa; /* scrollbar color when dragged away */
550
- width: 4px;
550
+ width: 5px;
551
}
552
553
.ps-container > .ps-scrollbar-x-rail {
@@ -561,7 +561,7 @@ body {
561
transition: background-color .2s linear, opacity .2s linear;
562
bottom: 0px;
563
/* there must be 'bottom' for ps-scrollbar-x-rail */
564
- height: 8px;
564
+ height: 15px;
565
}
566
567
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
@@ -579,7 +579,7 @@ body {
579
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
580
bottom: 2px;
581
/* there must be 'bottom' for ps-scrollbar-x */
582
- height: 4px; /* the width of the scrollbar */
582
+ height: 5px; /* the width of the scrollbar */
583
}
584
585
.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
@@ -597,7 +597,7 @@ body {
597
transition: background-color .2s linear, opacity .2s linear;
598
right: 0;
599
/* there must be 'right' for ps-scrollbar-y-rail */
600
- width: 8px;
600
+ width: 15px;
601
}
602
603
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
@@ -615,11 +615,11 @@ body {
615
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
616
right: 2px;
617
/* there must be 'right' for ps-scrollbar-y */
618
- width: 4px; /* the width of the scrollbar */
618
+ width: 5px; /* the width of the scrollbar */
619
}
620
621
.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
622
- width: 4px;
622
+ width: 5px;
623
}
624
625
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
@@ -629,7 +629,7 @@ body {
629
630
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
631
background-color: #bbb; /* scrollbar color when dragged */
632
- height: 4px;
632
+ height: 5px;
633
}
634
635
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
@@ -639,7 +639,7 @@ body {
639
640
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
641
background-color: #bbb; /* scrollbar color when dragged */
642
- width: 4px;
642
+ width: 5px;
643
}
644
645
.ps-container:hover > .ps-scrollbar-x-rail,
web/dashboard.js
+2
-2
@@ -125,7 +125,7 @@ var NETDATA = window.NETDATA || {};
125
NETDATA.themes = {
126
white: {
127
bootstrap_css: NETDATA.serverDefault + 'css/bootstrap-3.3.7.css',
128
- dashboard_css: NETDATA.serverDefault + 'dashboard.css?v20161229-1',
128
+ dashboard_css: NETDATA.serverDefault + 'dashboard.css?v20161229-2',
129
background: '#FFFFFF',
130
foreground: '#000000',
131
grid: '#F0F0F0',
@@ -142,7 +142,7 @@ var NETDATA = window.NETDATA || {};
142
},
143
slate: {
144
bootstrap_css: NETDATA.serverDefault + 'css/bootstrap-slate-flat-3.3.7.css?v20161229-1',
145
- dashboard_css: NETDATA.serverDefault + 'dashboard.slate.css?v20161229-1',
145
+ dashboard_css: NETDATA.serverDefault + 'dashboard.slate.css?v20161229-2',
146
background: '#272b30',
147
foreground: '#C8C8C8',
148
grid: '#283236',
web/dashboard.slate.css
+10
-10
@@ -555,7 +555,7 @@ code {
555
556
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
557
background-color: #aaa; /* scrollbar color when dragged away */
558
- height: 4px;
558
+ height: 5px;
559
}
560
561
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
@@ -565,7 +565,7 @@ code {
565
566
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
567
background-color: #aaa; /* scrollbar color when dragged away */
568
- width: 4px;
568
+ width: 5px;
569
}
570
571
.ps-container > .ps-scrollbar-x-rail {
@@ -579,7 +579,7 @@ code {
579
transition: background-color .2s linear, opacity .2s linear;
580
bottom: 0px;
581
/* there must be 'bottom' for ps-scrollbar-x-rail */
582
- height: 8px;
582
+ height: 15px;
583
}
584
585
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
@@ -597,11 +597,11 @@ code {
597
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
598
bottom: 2px;
599
/* there must be 'bottom' for ps-scrollbar-x */
600
- height: 4px; /* the width of the scrollbar */
600
+ height: 5px; /* the width of the scrollbar */
601
}
602
603
.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
604
- height: 4px;
604
+ height: 5px;
605
}
606
607
.ps-container > .ps-scrollbar-y-rail {
@@ -615,7 +615,7 @@ code {
615
transition: background-color .2s linear, opacity .2s linear;
616
right: 0;
617
/* there must be 'right' for ps-scrollbar-y-rail */
618
- width: 8px;
618
+ width: 15px;
619
}
620
621
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
@@ -633,11 +633,11 @@ code {
633
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
634
right: 2px;
635
/* there must be 'right' for ps-scrollbar-y */
636
- width: 4px; /* the width of the scrollbar */
636
+ width: 5px; /* the width of the scrollbar */
637
}
638
639
.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
640
- width: 4px;
640
+ width: 5px;
641
}
642
643
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
@@ -647,7 +647,7 @@ code {
647
648
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
649
background-color: #bbb; /* scrollbar color when dragged */
650
- height: 4px;
650
+ height: 5px;
651
}
652
653
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
@@ -657,7 +657,7 @@ code {
657
658
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
659
background-color: #bbb; /* scrollbar color when dragged */
660
- width: 4px;
660
+ width: 5px;
661
}
662
663
.ps-container:hover > .ps-scrollbar-x-rail,
web/index.html
+19
-19
@@ -2552,9 +2552,9 @@
2552
});
2553
Ps.update(sidebar);
2554
2555
- var registry = document.getElementById('registry-dropdown');
2555
+ var registry = document.getElementById('myNetdataDropdownUL');
2556
Ps.initialize(registry, {
2557
- wheelSpeed: 0.5,
2557
+ wheelSpeed: 1,
2558
wheelPropagation: false,
2559
swipePropagation: false,
2560
minScrollbarLength: null,
@@ -2572,6 +2572,17 @@
2572
Ps.update(sidebar);
2573
Ps.update(registry);
2574
};
2575
+
2576
+ $('#myNetdataDropdownParent')
2577
+ .on('show.bs.dropdown', function () {
2578
+ NETDATA.pause(function() {});
2579
+ })
2580
+ .on('shown.bs.dropdown', function () {
2581
+ Ps.update(registry);
2582
+ })
2583
+ .on('hidden.bs.dropdown', function () {
2584
+ NETDATA.unpause();
2585
+ });
2586
}
2587
2588
function resetDashboardOptions() {
@@ -2630,9 +2641,9 @@
2641
<div class="container">
2642
<nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;">
2643
<ul class="nav navbar-nav">
2633
- <li class="dropdown">
2634
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
2635
- <ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu" id="registry-dropdown">
2644
+ <li class="dropdown" id="myNetdataDropdownParent">
2645
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
2646
+ <ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu" id="myNetdataDropdownUL">
2647
<div class="row">
2648
<div class="col-sm-6" style="width: 85%; padding-right: 0;">
2649
<ul id="mynetdata_servers" class="multi-column-dropdown">
@@ -2663,21 +2674,10 @@
2674
<li><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal" title="alarms"><i class="fa fa-bell"></i> <span class="hidden-sm">Alarms </span><span id="alarms_count_badge" class="badge"></span></a></li>
2675
<li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal" title="dashboard settings"><i class="fa fa-sliders"></i> <span class="hidden-sm">Settings</span></a></li>
2676
<li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank" title="netdata community"><i class="fa fa-github"></i> <span class="hidden-sm hidden-md">Community</span></a></li>
2666
- <li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal" title="check for update"><i class="fa fa-cloud-download"></i><span id="update_badge" class="badge"></span> <span class="hidden-sm hidden-md">Update</span></a></li>
2677
+ <li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal" title="check for update"><i class="fa fa-cloud-download"></i> <span class="hidden-sm hidden-md">Update </span><span id="update_badge" class="badge"></span></a></li>
2678
<li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal" title="dashboard help"><i class="fa fa-question-circle"></i> <span class="hidden-sm hidden-md">Help</span></a></li>
2668
- <!--
2669
- <li class="dropdown hidden-md hidden-lg hidden-xs">
2670
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">Menu <strong class="caret"></strong></a>
2671
- <ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
2672
- <li><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal"><i class="fa fa-bell"></i> alarms</a></li>
2673
- <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-sliders"></i> settings</a></li>
2674
- <li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
2675
- <li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
2676
- </ul>
2677
- </li>
2678
- -->
2679
<li class="dropdown hidden-sm hidden-md hidden-lg">
2680
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
2680
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
2681
<ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
2682
<li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
2683
</ul>
@@ -3223,4 +3223,4 @@
3223
</div>
3224
</body>
3225
</html>
3226
-<script type="text/javascript" src="dashboard.js?v20161229-3"></script>
3226
+<script type="text/javascript" src="dashboard.js?v20161229-4"></script>