From 26c9a193920f9eae51d568b5b6ddfdeea805b018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 6 May 2015 09:41:30 +0200
Subject: [PATCH] A lot of css style polish for submenu (template var
 selection, and new dashlinks)

---
 public/app/features/dashlinks/module.html |  2 +-
 public/app/features/dashlinks/module.js   |  4 ++++
 public/app/partials/submenu.html          |  6 +++---
 public/css/less/navbar.less               |  7 ++++---
 public/css/less/submenu.less              | 23 +++++++++++++++++++++--
 public/css/less/tightform.less            | 14 --------------
 6 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/public/app/features/dashlinks/module.html b/public/app/features/dashlinks/module.html
index 951d530ae8c..369013c86d5 100644
--- a/public/app/features/dashlinks/module.html
+++ b/public/app/features/dashlinks/module.html
@@ -1,4 +1,4 @@
-<a class="pointer">
+<a class="pointer dash-nav-link" bs-tooltip="'asd'">
 	<i class="fa fa-th-large"></i>
 	<span></span>
 </a>
diff --git a/public/app/features/dashlinks/module.js b/public/app/features/dashlinks/module.js
index 78d7265c387..4423498a2bf 100644
--- a/public/app/features/dashlinks/module.js
+++ b/public/app/features/dashlinks/module.js
@@ -32,6 +32,10 @@ function (angular, _) {
             var linkInfo = linkSrv.getPanelLinkAnchorInfo(scope.link);
             elem.find("span").text(linkInfo.title);
             elem.find("a").attr("href", linkInfo.href);
+
+            if (scope.link.type === 'dashboard') {
+              scope.tooltip = 'Go to dashboard';
+            }
           }
 
           update();
diff --git a/public/app/partials/submenu.html b/public/app/partials/submenu.html
index 58d8fffe9d5..22e9b043d5f 100644
--- a/public/app/partials/submenu.html
+++ b/public/app/partials/submenu.html
@@ -2,13 +2,13 @@
 	<div class="tight-form borderless">
 
 		<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
-			<li ng-repeat="variable in variables" class="tight-form-item template-param-name dropdown">
+			<li ng-repeat="variable in variables" class="submenu-item">
 				<variable-value-select variable="variable" on-updated="variableUpdated(variable)"></variable-value-select>
 			</li>
 		</ul>
 
 		<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
-			<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+			<li ng-repeat="annotation in dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
 				<a ng-click="disableAnnotation(annotation)">
 					<i class="fa fa-bolt"></i>
 					{{annotation.name}}
@@ -19,7 +19,7 @@
 		</ul>
 
 		<ul class="tight-form-list pull-right" ng-if="dashboard.links.length > 0">
-			<dash-link ng-repeat="link in dashboard.links" link="link" class="tight-form-item"></dash-link>
+			<dash-link ng-repeat="link in dashboard.links" link="link" class="submenu-item"></dash-link>
 		</ul>
 
 		<div class="clearfix"></div>
diff --git a/public/css/less/navbar.less b/public/css/less/navbar.less
index 0fbc90d731b..e8dc8ccb555 100644
--- a/public/css/less/navbar.less
+++ b/public/css/less/navbar.less
@@ -64,16 +64,17 @@
   border-radius: 3px;
   font-size: 1.4em;
   color: #a2a2a2;
-  border: @grafanaTriggerBorder;
+  border: 1px solid @grafanaTargetFuncHightlight;
   a {
+    .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
     display: inline-block;
-    background: @grafanaTargetFuncBackground;
+    //background: @btnInverseBackground;
     padding: 5px 15px 5px 10px;
     border-radius: 3px;
     color: #a2a2a2;
 
     &:hover {
-      background: @grafanaTargetFuncHightlight;
+      background: @grafanaTargetFuncBackground;
       .fa {
         color: @linkColor;
       }
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less
index 592f6244ab6..3de634e59aa 100644
--- a/public/css/less/submenu.less
+++ b/public/css/less/submenu.less
@@ -5,7 +5,7 @@
 }
 
 .submenu-controls {
-  margin: 10px 29px 1px 0px;
+  margin: 10px 10px 8px 14px;
   font-size: 16px;
 }
 
@@ -19,9 +19,26 @@
   }
 }
 
+.submenu-item {
+  padding: 8px 7px;
+  margin-right: 20px;
+  display: inline-block;
+  border-radius: 3px;
+  background-color: @grafanaPanelBackground;
+  border: @grafanaPanelBorder;
+  margin-right: 10px;
+  display: inline-block;
+
+  .fa-caret-down {
+    font-size: 75%;
+    position: relative;
+    top: 1px;
+  }
+}
+
 .variable-value-link {
   font-size: 16px;
-  margin-right: 20px;
+  padding-right: 10px;
 }
 
 .variable-value-dropdown {
@@ -76,3 +93,5 @@
   }
 }
 
+.dash-nav-link {
+}
diff --git a/public/css/less/tightform.less b/public/css/less/tightform.less
index fd2ea99d195..72bcfb547fa 100644
--- a/public/css/less/tightform.less
+++ b/public/css/less/tightform.less
@@ -82,24 +82,10 @@
     background: @grafanaTargetFuncBackground;
   }
 
-  &.template-param-name {
-    border-right: none;
-    padding-right: 0;
-    padding-left: 18px;
-  }
-  &.annotation-segment {
-    padding: 8px 13px;
-  }
-
   &.last {
     border-right: none;
   }
 
-  .fa-caret-down {
-    font-size: 75%;
-    position: relative;
-    top: 1px;
-  }
 }
 
 .tight-form-item-icon {