github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Improve timepicker UX, remove tabs

Browse source
This commit is contained in:
Rashid Khan 2015-05-14 12:50:13 -07:00
parent 0525728962
commit 4d0bb7c636
5 changed files with 39 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/kibana/components/timepicker/timepicker.html
View file

@ -19,15 +19,6 @@
}
</style>
<ul class="nav nav-tabs" role="tablist">
<li ng-class="{active: activeTab === 'filter'}">
<a href ng-click="activeTab = 'filter'">Time Filter</a>
</li>
<li ng-class="{active: activeTab === 'interval'}">
<a href ng-click="activeTab = 'interval'">Refresh Interval</a>
</li>
</ul>
<div class="tab-content">
<!-- Filters -->

1
src/kibana/plugins/kibana/_timepicker.js
View file

@ -18,6 +18,7 @@ define(function (require) {
// Close if already open
if ($scope.globalConfigTemplate === timepickerHtml && timefilter.timepickerActiveTab === tab) {
delete $scope.globalConfigTemplate;
delete timefilter.timepickerActiveTab;
} else {
timefilter.timepickerActiveTab = tab;
$scope.globalConfigTemplate = timepickerHtml;

10
src/kibana/plugins/kibana/kibana.html
View file

@ -30,15 +30,17 @@
</a>
</li>
<li>
<li ng-class="{active: timefilter.timepickerActiveTab === 'interval'}"
ng-show="timefilter.refreshInterval.value > 0 || timefilter.timepickerActiveTab"
class="to-body">
<a ng-click="toggleTimepicker('interval')"
ng-show="timefilter.refreshInterval.value > 0"
class="navbar-timepicker-auto-refresh-desc">
{{timefilter.refreshInterval.display}}
<span ng-show="timefilter.refreshInterval.value === 0"><i class="fa fa-repeat"></i> Auto-refresh</span>
<span ng-show="timefilter.refreshInterval.value > 0">{{timefilter.refreshInterval.display}}</span>
</a>
</li>
<li>
<li class="to-body" ng-class="{active: timefilter.timepickerActiveTab === 'filter'}">
<a ng-click="toggleTimepicker()" aria-haspopup="true" aria-expanded="false" class="navbar-timepicker-time-desc">
<i aria-hidden="true" class="fa fa-clock-o"></i>
<pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>

23
src/kibana/styles/_mixins.less
View file

@ -12,4 +12,27 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.nav-active-arrow (@color: @body-bg) {
@media (max-width: @screen-sm-min) {
&:before {
display: none !important;
}
}
&:before {
content:"";
display:inline-block;
position:absolute;
border:@navbar-arrow-size solid @color;
border-color:transparent transparent @color transparent;
top:(@navbar-height - @navbar-arrow-size*2);
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
}
}

46
src/kibana/styles/theme/_theme.less
View file

@ -4,6 +4,9 @@
//@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
@import (reference) "../_mixins.less";
// Navbar =====================================================================
.navbar {
@ -32,26 +35,7 @@
}
.navbar-nav > .active > a {
@media (max-width: @screen-sm-min) {
&:before {
display: none !important;
}
}
&:before {
content:"";
display:inline-block;
position:absolute;
border:@navbar-arrow-size solid @body-bg;
border-color:transparent transparent @body-bg transparent;
top:(@navbar-height - @navbar-arrow-size*2);
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
}
.nav-active-arrow(@body-bg);
}
}
@ -73,26 +57,14 @@
color: lighten(@navbar-inverse-bg, 10%);
}
.navbar-nav > .active > a {
@media (max-width: @screen-sm-min) {
&:before {
display: none !important;
}
.navbar-nav {
> .active > a {
.nav-active-arrow(@navbar-default-bg);
}
&:before {
content:"";
display:inline-block;
position:absolute;
border:@navbar-arrow-size solid @navbar-default-bg;
border-color:transparent transparent @navbar-default-bg transparent;
top:(@navbar-height - @navbar-arrow-size*2);
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
> .active.to-body > a {
.nav-active-arrow(@body-bg);
}
}