ux: nav fixes & polish

pkg/api/avatar/avatar.go

@@ -65,7 +65,7 @@ func New(hash string) *Avatar {
 	return &Avatar{
 		hash: hash,
 		reqParams: url.Values{
-			"d":    {"404"},
+			"d":    {"retro"},
 			"size": {"200"},
 			"r":    {"pg"}}.Encode(),
 	}

pkg/api/index.go

@@ -113,10 +113,11 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	if c.IsSignedIn {
 		data.NavTree = append(data.NavTree, &dtos.NavLink{
-			Text: "Your Profile",
+			Text:         c.SignedInUser.Login,
 			Id:           "profile",
-			Icon: "fa fa-fw fa-user",
+			Img:          data.User.GravatarUrl,
 			Url:          setting.AppSubUrl + "/profile",
+			HideFromMenu: true,
 			Children: []*dtos.NavLink{
 				{Text: "Signout", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"},
 				{Text: "Your profile", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"},
@@ -256,6 +257,18 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 			})
 		}
 
+		data.NavTree = append(data.NavTree, &dtos.NavLink{
+			Text:         "Help",
+			Id:           "help",
+			Url:          "/help",
+			Icon:         "fa fa-fw fa-question",
+			HideFromMenu: true,
+			Children: []*dtos.NavLink{
+				{Text: "Shortcuts", Url: "/shortcuts", Icon: "fa fa-fw fa-keyboard-o", Target: "_self"},
+				{Text: "Community site", Url: "http://community.grafana.com", Icon: "fa fa-fw fa-comment", Target: "_blank"},
+				{Text: "Documentation", Url: "http://docs.grafana.org", Icon: "fa fa-fw fa-file", Target: "_blank"},
+			},
+		})
 		data.NavTree = append(data.NavTree, cfgNode)
 	}
 

public/app/core/components/navbar/navbar.ts

@@ -46,8 +46,9 @@ export function pageH1() {
     restrict: 'E',
     template: `
     <h1>
-    <i class="{{model.node.icon}}"></i>
+    <i class="{{::model.node.icon}}" ng-if="::model.node.icon"></i>
-    {{model.node.text}}
+    <img ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
+    {{::model.node.text}}
     </h1>
     `,
     scope: {

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

@@ -28,52 +28,74 @@
 </div>
 
 <div class="sidemenu__bottom">
-	<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>
-		</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>
 
-	<div class="sidemenu-item dropup dropdown" ng-if="::ctrl.isSignedIn">
+  <div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup">
-		<a class="sidemenu-link" href="profile">
+    <a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
-			<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
+      <span class="icon-circle sidemenu-icon">
-				<img ng-src="{{::ctrl.user.gravatarUrl}}">
+        <i class="{{::item.icon}}" ng-show="::item.icon"></i>
-				<span class="sidemenu-org-avatar--missing">
+        <img ng-src="{{::item.img}}" ng-show="::item.img">
-					<i class="fa fa-fw fa-user"></i>
       </span>
     </a>
-		<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
+    <ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
-			<li ng-show="ctrl.orgs.length > ctrl.maxshownorgs" style="margin-left: 10px;width: 90%">
+      <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}" ng-hide="::child.hideFromMenu">
-				<span class="sidemenu-item-text">max shown : {{::ctrl.maxshownorgs}}</span>
+        <a href="{{::child.url}}" target="{{::child.target}}">
-				<input ng-model="::ctrl.orgfilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadorgsitems();" class="gf-input-small width-12" placeholder="filter">
+          <i class="{{::child.icon}}" ng-show="::child.icon"></i>
-			</li>
+          {{::child.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.profileNav.children" ng-class="::menuItem.cssClass" ng-hide="menuItem.hideFromMenu">
-				<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
-					<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
-					{{::menuItem.text}}
         </a>
       </li>
       <li class="side-menu-header">
-				<span class="sidemenu-item-text">{{::ctrl.user.name}}</span>
+        <span class="sidemenu-item-text">{{::item.text}}</span>
       </li>
     </ul>
   </div>
-
+  <!-- <div ng&#45;show="::!ctrl.isSignedIn" class="sidemenu&#45;item"> -->
-	<div class="sidemenu-item">
+  <!-- 	<a href="{{ctrl.loginUrl}}" class="sidemenu&#45;link" target="_self"> -->
-		<a href="http://docs.grafana.org" class="sidemenu-link" target="_blank">
+  <!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;sign&#45;in"></i></span> -->
-			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-question"></i></span>
+  <!-- 	</a> -->
-		</a>
+  <!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu" role="menu"> -->
-	</div>
+  <!-- 		<li class="side&#45;menu&#45;header"> -->
+  <!-- 			<span class="sidemenu&#45;item&#45;text">Sign in</span> -->
+  <!-- 		</li> -->
+  <!-- 	</ul> -->
+  <!-- </div> -->
+  <!--  -->
+  <!-- <div class="sidemenu&#45;item dropup dropdown" ng&#45;if="::ctrl.isSignedIn"> -->
+  <!-- 	<a class="sidemenu&#45;link" href="profile"> -->
+  <!-- 		<span class="icon&#45;circle sidemenu&#45;icon sidemenu&#45;org&#45;avatar"> -->
+  <!-- 			<img ng&#45;src="{{::ctrl.user.gravatarUrl}}"> -->
+  <!-- 			<span class="sidemenu&#45;org&#45;avatar&#45;&#45;missing"> -->
+  <!-- 				<i class="fa fa&#45;fw fa&#45;user"></i> -->
+  <!-- 			</span> -->
+  <!-- 		</span> -->
+  <!-- 	</a> -->
+  <!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu dropup" role="menu"> -->
+  <!-- 		<li ng&#45;repeat="menuItem in ctrl.profileNav.children" ng&#45;class="::menuItem.cssClass" ng&#45;hide="menuItem.hideFromMenu"> -->
+  <!-- 			<a href="{{::menuItem.url}}" ng&#45;show="::menuItem.url" target="{{::menuItem.target}}"> -->
+  <!-- 				<i class="{{::menuItem.icon}}" ng&#45;show="::menuItem.icon"></i> -->
+  <!-- 				{{::menuItem.text}} -->
+  <!-- 			</a> -->
+  <!-- 		</li> -->
+  <!-- 		<li class="side&#45;menu&#45;header"> -->
+  <!-- 			<span class="sidemenu&#45;item&#45;text">{{::ctrl.user.name}}</span> -->
+  <!-- 		</li> -->
+  <!-- 	</ul> -->
+  <!-- </div> -->
+  <!--  -->
+  <!-- <div class="sidemenu&#45;item dropdown dropup"> -->
+  <!-- 	<a href="http://docs.grafana.org" class="sidemenu&#45;link" target="_blank"> -->
+  <!-- 		<span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;question"></i></span> -->
+  <!-- 	</a> -->
+  <!-- 	<ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu" role="menu"> -->
+  <!-- 		<li ng&#45;repeat="menuItem in ctrl.helpNav.children" ng&#45;class="::menuItem.cssClass" ng&#45;hide="menuItem.hideFromMenu"> -->
+  <!-- 			<a href="{{::menuItem.url}}" ng&#45;show="::menuItem.url" target="{{::menuItem.target}}"> -->
+  <!-- 				<i class="{{::menuItem.icon}}" ng&#45;show="::menuItem.icon"></i> -->
+  <!-- 				{{::menuItem.text}} -->
+  <!-- 			</a> -->
+  <!-- 		</li> -->
+  <!-- 		<li class="side&#45;menu&#45;header"> -->
+  <!-- 			<span class="sidemenu&#45;item&#45;text">Help</span> -->
+  <!-- 		</li> -->
+  <!-- 	</ul> -->
+  <!-- </div> -->
 </div>
 

public/app/core/components/sidemenu/sidemenu.ts

@@ -9,7 +9,7 @@ export class SideMenuCtrl {
   isSignedIn: boolean;
   user: any;
   mainLinks: any;
-  profileNav: any;
+  bottomNav: any;
   appSubUrl: string;
   loginUrl: string;
   orgFilter: string;
@@ -23,8 +23,8 @@ export class SideMenuCtrl {
     this.user = contextSrv.user;
     this.appSubUrl = config.appSubUrl;
     this.maxShownOrgs = 10;
-    this.mainLinks = _.filter(config.bootData.navTree, item => item.id !== 'profile');
+    this.mainLinks = _.filter(config.bootData.navTree, item => !item.hideFromMenu);
-    this.profileNav = _.find(config.bootData.navTree, {id: 'profile'});
+    this.bottomNav = _.filter(config.bootData.navTree, item => item.hideFromMenu);
     this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
 
     this.$scope.$on('$routeChangeSuccess', () => {

public/sass/components/_query_editor.scss

@@ -1,5 +1,5 @@
 .query-keyword {
-  font-weight: bold;
+  font-weight: $font-weight-semi-bold;
   color: $blue;
 }
 

public/sass/components/_search.scss

@@ -65,7 +65,7 @@
   max-width: 1100px;
   visibility: none;
   opacity: 0;
-  height: 100%;
+  height: 65%;
 
   &--fade-in {
     visibility: visible;
@@ -75,7 +75,7 @@
 }
 
 .search-results-container {
-  height: 90%;
+  height: 100%;
   overflow: auto;
   display: block;
   line-height: 28px;

public/sass/layout/_page.scss

@@ -58,7 +58,16 @@
     font-size: $font-size-h2;
     flex-grow: 1;
     display: inline-block;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
+
+    img {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      margin-right: 0.5rem;
+      position: relative;
+      top: -3px;
+    }
   }
 
   a, button {