IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: sidenav fixes and dashboard search changes

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-08-15 15:25:18 +02:00
parent 6a1075cd02
commit db54416deb
7 changed files with 97 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/search/search.html
View File

@@ -4,6 +4,7 @@
<div class="search-container" ng-if="ctrl.isOpen">
<div class="search-field-wrapper">
<div class="search-field-icon pointer" ng-click="ctrl.closeSearch()"><i class="fa fa-search"></i></div>
<input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
ng-keydown="ctrl.keyDown($event)"

32
public/app/core/components/sidemenu/sidemenu.html
View File

@@ -7,12 +7,6 @@
</span>
</a>
<div class="sidemenu-item">
<a class="sidemenu-link" ng-click="ctrl.search()">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
</a>
</div>
<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon">
@@ -38,8 +32,12 @@
<div ng-show="::!ctrl.isSignedIn" class="sidemenu-item">
<a href="{{ctrl.loginUrl}}" class="sidemenu-link" target="_self">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
<li class="side-menu-header">
<span class="sidemenu-item-text">Sign in</span>
</li>
</ul>
</div>
@@ -52,14 +50,14 @@
</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
<li ng-show="ctrl.orgs.length > ctrl.maxshownorgs" style="margin-left: 10px;width: 90%">
<span class="sidemenu-item-text">max shown : {{::ctrl.maxshownorgs}}</span>
<input ng-model="::ctrl.orgfilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadorgsitems();" class="gf-input-small width-12" placeholder="filter">
</li>
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
{{::orgItem.text}}
<li ng-repeat="orgitem in ctrl.orgitems" ng-class="::orgitem.cssclass">
<a href="{{::orgitem.url}}" ng-show="::orgitem.url" target="{{::orgitem.target}}">
<i class="{{::orgitem.icon}}" ng-show="::orgitem.icon"></i>
{{::orgitem.text}}
</a>
</li>
<li ng-repeat="menuItem in ctrl.userMenu" ng-class="::menuItem.cssClass">
@@ -78,12 +76,6 @@
<a href="http://docs.grafana.org" class="sidemenu-link" target="_blank">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-question"></i></span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
<li class="side-menu-header">
<span class="sidemenu-item-text">Documentation</span>
</li>
</ul>
</div>
</div>

1
public/app/features/admin/admin.ts
View File

@@ -2,7 +2,6 @@ import AdminListUsersCtrl from './admin_list_users_ctrl';
import './adminListOrgsCtrl';
import './adminEditOrgCtrl';
import './adminEditUserCtrl';
import './configuration_home_ctrl';
import coreModule from 'app/core/core_module';

155
public/app/features/dashboard/dashnav/dashnav.html
View File

@@ -1,84 +1,87 @@
<div class="navbar">
<div class="navbar-inner">
<div class="dropdown navbar-page-btn-wrapper">
<div class="navbar-inner">
<a href="{{::ctrl.navModel.section.url}}" class="navbar-page-btn" data-toggle="dropdown">
<i class="{{::ctrl.navModel.section.icon}}" ng-show="::ctrl.navModel.section.icon"></i>
<img ng-src="{{::ctrl.navModel.section.iconUrl}}" ng-show="::ctrl.navModel.section.iconUrl"></i>
{{::ctrl.navModel.section.title}}
<i class="fa fa-caret-down"></i>
</a>
<div class="navbar-section-wrapper">
<a class="navbar-page-btn" ng-click="ctrl.showSearch()">
<i class="icon-gf icon-gf-dashboard"></i>
{{ctrl.dashboard.title}}
<i class="fa fa-caret-down"></i>
</a>
</div>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="navItem in ::ctrl.navModel.menu">
<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}}
</a>
</li>
</ul>
</div>
<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
<li>
<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
<li>
<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
<ul class="nav pull-left dashnav-action-icons">
<li ng-show="::ctrl.dashboard.meta.canStar">
<a class="pointer" ng-click="ctrl.starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}" style="color: orange;"></i>
</a>
</li>
<li ng-show="::ctrl.dashboard.meta.canShare" class="dropdown">
<a class="pointer" ng-click="ctrl.hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
<ul class="dropdown-menu">
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(0)">
<i class="fa fa-link"></i> Link to Dashboard
<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(1)">
<i class="icon-gf icon-gf-snapshot"></i>Snapshot
<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(2)">
<i class="fa fa-cloud-upload"></i>Export
<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.com</div>
</a>
</li>
</ul>
</li>
<li ng-show="::ctrl.dashboard.meta.canSave">
<a ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li ng-if="::ctrl.dashboard.snapshot.originalUrl">
<a ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom"><i class="fa fa-link"></i></a>
</li>
<li class="dropdown">
<a class="pointer" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="navItem in ::ctrl.navModel.menu" ng-class="{active: navItem.active}">
<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}}
</a>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-left dashnav-action-icons">
<li ng-show="::ctrl.dashboard.meta.canStar">
<a class="pointer" ng-click="ctrl.starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}" style="color: orange;"></i>
</a>
</li>
<li ng-show="::ctrl.dashboard.meta.canShare" class="dropdown">
<a class="pointer" ng-click="ctrl.hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
<ul class="dropdown-menu">
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(0)">
<i class="fa fa-link"></i> Link to Dashboard
<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(1)">
<i class="icon-gf icon-gf-snapshot"></i>Snapshot
<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(2)">
<i class="fa fa-cloud-upload"></i>Export
<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.com</div>
</a>
</li>
</ul>
</li>
<li ng-show="::ctrl.dashboard.meta.canSave">
<a ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li ng-if="::ctrl.dashboard.snapshot.originalUrl">
<a ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom"><i class="fa fa-link"></i></a>
</li>
</ul>
<ul class="nav pull-right">
<li ng-show="ctrl.dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
<a ng-click="ctrl.exitFullscreen()">
Back to dashboard
</a>
</li>
<li>
<gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
</li>
</ul>
</div>
<ul class="nav pull-right">
<li ng-show="ctrl.dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
<a ng-click="ctrl.exitFullscreen()">
Back to dashboard
</a>
</li>
<li>
<gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
</li>
</ul>
</div>
</div>
<dashboard-search></dashboard-search>

4
public/sass/components/_dropdown.scss
View File

@@ -120,10 +120,6 @@
}
}
}
&--navbar {
background: $black;
font-size: $font-size-sm;
}
}
.dropdown-item-text {

4
public/sass/components/_search.scss
View File

@@ -1,8 +1,8 @@
.search-backdrop {
position: fixed;
right: 0;
bottom: 0;
left: 0;
bottom: 0;
top: $navbarHeight;
z-index: $zindex-modal-backdrop;
background-color: $black;
@@ -10,7 +10,7 @@
}
.search-container {
left: 0;
left: $side-menu-width;
top: 0;
right: 0;
bottom: 0;

10
public/sass/components/_sidemenu.scss
View File

@@ -1,6 +1,8 @@
.sidemenu-wrapper {
.sidemenu {
display: flex;
flex-flow: column;
flex-direction: column;
width: $side-menu-width;
background-color: $side-menu-bg;
@@ -11,11 +13,6 @@
}
}
.sidemenu {
display: flex;
flex-flow: column;
}
.sidemenu__top {
flex-grow: 1;
}
@@ -110,7 +107,6 @@
white-space: nowrap;
background-color: $side-menu-item-hover-bg;
font-size: 17px;
font-weight: normal;
}
.sidemenu .fa-caret-right {