ux: sidenav fixes and dashboard search changes

public/app/core/components/search/search.html

@@ -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)"

public/app/core/components/sidemenu/sidemenu.html

@@ -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>
 

public/app/features/admin/admin.ts

@@ -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';
 

public/app/features/dashboard/dashnav/dashnav.html

@@ -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>

public/sass/components/_dropdown.scss

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

public/sass/components/_search.scss

@@ -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;

public/sass/components/_sidemenu.scss

@@ -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 {