A lot of css style polish for submenu (template var selection, and new dashlinks)

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>

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();

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>

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

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 {
+}

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 {