Small design change for the submenu (templating, annotations), #1503

src/app/directives/templateParamSelector.js

@@ -14,7 +14,7 @@ function (angular, app, _, $) {
                             ' class="tight-form-clear-input input-medium"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a  class="tight-form-item tabindex="1">{{variable.current.text}}</a>';
+      var buttonTemplate = '<a  class="tight-form-item tabindex="1">{{variable.current.text}} <i class="fa fa-caret-down"></i></a>';
 
       return {
         link: function($scope, elem) {

src/app/partials/submenu.html

@@ -1,7 +1,10 @@
 <div class="submenu-controls" ng-controller="SubmenuCtrl">
-	<div class="tight-form" style="border-top: none">
+	<div class="tight-form borderless">
 
 		<ul class="tight-form-list" ng-if="dashboard.templating.enable">
+			<li class="tight-form-item">
+				<strong>Variables:</strong>
+			</li>
 			<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
 				<span class="template-variable ">
 					${{variable.name}}:
@@ -13,6 +16,7 @@
 		</ul>
 
 		<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
+			<strong>ANNOTATIONS</strong>
 			<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
 				<a ng-click="disableAnnotation(annotation)">
 					<i class="annotation-color-icon fa fa-bolt"></i>

src/css/less/submenu.less

@@ -4,6 +4,10 @@
   }
 }
 
+.submenu-controls {
+  margin: 5px 5px 0 10px;
+}
+
 .annotation-disabled, .annotation-disabled a {
   color: @linkColorDisabled;
 }

src/css/less/tightform.less

@@ -12,6 +12,18 @@
   &:last-child, &.last {
     border-bottom: 1px solid @grafanaTargetBorder;
   }
+
+  &.borderless {
+    background: transparent;
+    border: none;
+  }
+}
+
+.borderless {
+  .tight-form-item,
+  .tight-form-input {
+    border: none;
+  }
 }
 
 .tight-form-container {
@@ -27,7 +39,6 @@
   padding: 8px 12px;
 }
 
-// old graphite-segment-list
 .tight-form-list {
   list-style: none;
   margin: 0;
@@ -40,7 +51,6 @@
   margin-top: 35px;
 }
 
-// old grafana-target-segment {
 .tight-form-item {
   padding: 8px 7px;
   display: inline-block;
@@ -53,7 +63,6 @@
     padding-top: 25px;
   }
 
-  // old .grafana-target-hidden & {
   .tight-form-disabled & {
     color: @grafanaTargetColorHide;
   }
@@ -77,9 +86,14 @@
   &.last {
     border-right: none;
   }
+
+  .fa-caret-down {
+    font-size: 75%;
+    position: relative;
+    top: 1px;
+  }
 }
 
-//.grafana-target-segment-icon {
 .tight-form-item-icon {
   i {
     width: 15px;
@@ -88,7 +102,6 @@
   }
 }
 
-//.grafana-target-function {
 .tight-form-func {
   background: @grafanaTargetFuncBackground;
   > a {
@@ -105,7 +118,6 @@
   }
 }
 
-//input[type=text].grafana-function-param-input {
 input[type=text].tight-form-func-param {
   background: transparent;
   border: none;
@@ -113,7 +125,6 @@ input[type=text].tight-form-func-param {
   padding: 0;
 }
 
-//input[type=text].grafana-target-text-input {
 input[type=text].tight-form-clear-input {
   padding: 8px 7px;
   border: none;
@@ -142,7 +153,6 @@ input[type=text].tight-form-clear-input {
   }
 }
 
-//input[type=checkbox].grafana-target-option-checkbox {
 input[type=checkbox].tight-form-checkbox {
   margin: 0;
 }
@@ -159,7 +169,6 @@ select.tight-form-input {
   }
 }
 
-//.graphite-func-controls {
 .tight-form-func-controls {
   display: none;
   text-align: center;