worked on fill style options, connected line, null and null as zero

src/app/panels/graphite/legend.html

@@ -15,20 +15,35 @@
     </span>
 </span>
 
-<script type="text/ng-template" id="colorPopup.html">
-  <div class="histogram-legend-popover">
-    <div class="histogram-legend-popover-header">
-      <a class="close" ng-click="dismiss();" href="">×</a>
-    </div>
+ <!-- <a class="small" ng-click="toggleYAxis(series)">
+  2:nd Y-axis (y&sup2;) <input type="checkbox"></input>
+</a> -->
 
-    <div class="editor-row">
-      <a class="small" ng-click="toggleYAxis(series)">
-        2:nd Y-axis (y&sup2;) <input type="checkbox"></input>
-      </a>
+<!--     <div class="editor-row">
+      Fill style <select class="input-mini" ng-model="panel.aliasFillStyle[series.alias]" ng-options="f for f in ['no', 'all', 'null']" ng-change="get_data()"></select>
     </div>
+ -->
 
-    <div class="editor-row">
-      Fill style <select class="input-mini" ng-model="panel.aliasFillStyle[series.alias]" ng-options="f for f in ['no', 'all', 'null']" ng-change="get_data()"></select>
+<script type="text/ng-template" id="colorPopup.html">
+  <div class="histogram-legend-popover">
+    <a class="close" ng-click="dismiss();" href="">×</a>
+
+    <div class="editor-row small" style="margin-left: 5px; padding-bottom: 0;">
+      <label>Axis:</label>
+      <button ng-click="toggleYAxis(series)"
+              class="btn btn-mini"
+              ng-class="{'btn-success': series.yaxis === 1 }">
+              Left
+      </button>
+      <button ng-click="toggleYAxis(series)"
+              class="btn btn-mini"
+              ng-class="{'btn-success': series.yaxis === 2 }">
+              Right
+      </button>
+      <label>Null points:</label>
+      <button ng-click="panel.aliasFillStyle[series.alias] = 'no'; get_data();" class="btn btn btn-mini">Connect</button>
+      <button ng-click="panel.aliasFillStyle[series.alias] = 'null';get_data();" class="btn btn-success btn-mini">Null</button>
+      <button ng-click="panel.aliasFillStyle[series.alias] = 'all';get_data();" class="btn btn btn-mini">Zero</button>
     </div>
 
     <div class="editor-row">

src/vendor/bootstrap/less/grafana.less

@@ -154,14 +154,20 @@
 }
 
 .histogram-legend-popover {
-  width: 150px;
-
-  .histogram-legend-popover-header {
-    background: #41474c;
-    text-align: center;
-    border-bottom: 1px solid #353a3e;
-    padding: 3px 5px;
-    white-space: nowrap;
+  width: 200px;
+  label {
+    display: inline-block;
+    width: 70px;
+  }
+  .btn {
+    padding: 1px 3px;
+    margin-right: 0px;
+    line-height: initial;
+  }
+  .close {
+    color: white;
+    opacity: 0.7;
+    text-shadow: none;
   }
   .editor-row {
     padding: 5px;