finally figured out target editor design

src/app/panels/graphite/editor.html

@@ -1,45 +1,42 @@
 <div class="editor-row">
-<style>
-  .table-top {
-    table-layout: fixed;
-    width: 100%;
-  }
-  .my-wrapper {
-    width: 100%;
-    overflow: hidden;
-  }
 
-  .grafana-segment-list {
-    display: block;
-    float: none;
-    position: relative;
-    white-space: nowrap;
-  }
-
-  .grafana-segment-list li {
-    display: inline-block;
-    float: none;
-  }
-</style>
 	<div class="grafana-target" ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl" ng-init="init()">
     <div class="grafana-target-inner-wrapper">
       <div class="grafana-target-inner">
-        <table class="table-top">
-        <tr>
-        <td>
-        <span class="grafana-target-onoff">
-          <i class="icon-eye-open"></i>
-        </span>
-        </td>
-        <input  type="text"
+        <ul class="grafana-target-controls">
+          <li>
+            <a class="pointer" tabindex="1" ng-click="showTextEditor = true">
+              <i class="icon-pencil"></i>
+            </a>
+          </li>
+          <li>
+            <a class="pointer" tabindex="1" ng-click="enableTextEditor()">
+              <i class="icon-cog"></i>
+            </a>
+          </li>
+          <li>
+            <a class="pointer" tabindex="1" ng-click="removeTarget(target)">
+              <i class="icon-remove"></i>
+            </a>
+          </li>
+        </ul>
+
+        <ul class="grafana-target-controls-left">
+          <li>
+            <a class="grafana-target-segment" ng-click="hideit()" role="menuitem">
+              <i class="icon-eye-open"></i>
+            </a>
+          </li>
+        </ul>
+
+<!--         <input  type="text"
                 class="grafana-target-text-input"
                 ng-model="target.target"
                 focus-me="showTextEditor"
                 ng-blur="showTextEditor = false"
                 ng-model-onblur ng-change="targetChanged()"
                 ng-show="showTextEditor" />
-        <td style="width: 100%">
-          <div class="my-wrapper">
+ -->
         <ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">
           <li class="dropdown" ng-repeat="segment in segments" role="menuitem">
             <a  tabindex="1"
@@ -55,16 +52,17 @@
               </li>
             </ul>
           </li>
-          <li ng-repeat="func in functions" class="dropdown">
-            <a class="grafana-target-segment dropdown-toggle" bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="top">{{func.text}}</a>
-            <i class="icon-long-arrow-right"></i>
+          <li ng-repeat="func in functions">
+            <a class="grafana-target-segment grafana-target-function dropdown-toggle" bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="bottom">
+              {{func.text}}
+            </a>
           </li>
           <li class="dropdown">
-            <a  class="grafana-target-segment dropdown-toggle"
+            <a  class="grafana-target-segment grafana-target-function dropdown-toggle"
                 data-toggle="dropdown"
                 tabindex="1"
                 ng-click="addFunction">
-                add function
+                <i class="icon-plus"></i>
             </a>
             <ul class="dropdown-menu" role="menu">
               <li ng-repeat="funcDef in funcDefs" role="menuitem">
@@ -77,79 +75,11 @@
             </ul>
           </li>
         </ul>
-        </div>
-        </td>
-        <td style="width: 90px;">
-        <ul class="grafana-target-controls" style="width: 90px;">
-          <li>
-            <a class="pointer" tabindex="1" ng-click="showTextEditor = true">
-              <i class="icon-pencil"></i>
-            </a>
-          </li>
-          <li>
-            <a class="pointer" tabindex="1" ng-click="enableTextEditor()">
-              <i class="icon-cog"></i>
-            </a>
-          </li>
-          <li>
-            <a class="pointer" tabindex="1" ng-click="removeTarget(target)">
-              <i class="icon-remove"></i>
-            </a>
-          </li>
-        </ul>
-        </td>
-        </tr>
-        </table>
-        <div class="clearfix"></div>
-      </div>
-    </div>
 
-    <div class="grafana-target-func-panel-wrapper" ng-if="false">
-      <div class="grafana-target-func-panel">
-        <span class="grafana-target-func-panel-icon">
 
-        </span>
-        <ul>
-          <li ng-repeat="func in functions">
-            <a bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="top">{{func.text}}</a>
-            <i class="icon-long-arrow-right"></i>
-          </li>
-          <li class="dropdown">
-            <a  class="dropdown-toggle"
-                data-toggle="dropdown"
-                tabindex="1"
-                ng-click="addFunction">
-                add function
-            </a>
-            <ul class="dropdown-menu" role="menu">
-              <li ng-repeat="funcDef in funcDefs" role="menuitem">
-                <a href="javascript:void(0)"
-                   tabindex="1"
-                   ng-click="addFunction(funcDef)">
-                   {{funcDef.name}}
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
         <div class="clearfix"></div>
       </div>
     </div>
-    <!-- <div class="row-fluid">
-  		<div class="span12">
-        <span ng-if="!editMode">
-          {{target.target}}
-        </span>
-
-    		<input ng-if="editMode" type="text" ng-model="target.target" class="input-large" style="width:100%" ng-model-onblur ng-change="targetChanged()" bs-typeahead="typeAheadSource" data-min-length=0 />
-
-        <span ng-if="!editMode">
-          <i ng-click="edit()" class="pointer icon-edit" style="padding: 0 7px;"></i>
-          <i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="padding: 0 7px;"></i>
-    	 </span>
-
-      </div>
-    </div> -->
   </div>
 
   <div class="row-fluid" style="margin-top: 20px">

src/vendor/bootstrap/less/grafana.less

@@ -103,22 +103,27 @@
 .grafana-target-inner-wrapper {
   border-top: 1px solid #444444;
   border-bottom: 1px solid #444444;
+  width: 100%;
 }
+
 .grafana-target-inner {
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   background: #202020;
+  width: 100%;
 }
 
 .grafana-target-onoff {
-  float: left;
+  display: inline-block;
   padding: 5px 7px;
+  display: inline-block;
 }
 
 .grafana-segment-list {
   list-style: none;
   margin: 0;
-  float: left;
+  margin-right: 90px;
+  margin-left: 30px;
   >li {
     float: left;
   }
@@ -128,30 +133,51 @@
   padding: 5px 7px;
   display: inline-block;
   font-weight: normal;
-  border-left: 1px solid #050505;
+  border: 1px solid #050505;
   color: #c8c8c8;
+  display: inline-block;
 
-  &:hover {
+  &:hover, &:focus {
     text-decoration: none;
   }
-  &:focus {
-    text-decoration: none;
+  &:hover {
+    background: #282828;
+  }
+}
+.grafana-target-function {
+  background: #303030;
+  &:hover {
+    background: #383838;
   }
 }
 
+.grafana-target-controls-left {
+  list-style: none;
+  float: left;
+  width: 30px;
+  margin: 0px;
+}
+
 .grafana-target-controls {
+  width: 90px;
   float: right;
   list-style: none;
   margin: 0;
 
   >li {
-    float: left;
+    display: inline-block;
+    white-space: nowrap;
   }
 
   a {
     padding: 5px 7px;
     position: relative;
     top: 5px;
+    color: #c8c8c8;
+
+    &:hover, &:focus {
+      text-decoration: none;
+    }
   }
 }
 
@@ -168,37 +194,6 @@ input[type=text].grafana-target-text-input {
   padding: 0; margin: 0;
 }
 
-.grafana-target-func-panel-wrapper {
-  border-bottom: 1px;
-  border-bottom: 1px solid #444444;
-}
-
-.grafana-target-func-panel {
-  background: #202020;
-  border-top: 1px solid black;
-  border-bottom: 1px solid black;
-
-  ul {
-    list-style: none;
-    margin: 0;
-
-    >li, li.dropdown {
-      float: left;
-      padding: 2px 5px;
-      >i {
-        padding-left: 5px;
-        postition: relative;
-      }
-    }
-
-  }
-}
-
-.grafana-target-func-panel-icon {
-  float: left;
-  padding: 12px 14px;
-}
-
 input[type=text].func-param {
   border: none;
   background: inherit;
@@ -220,6 +215,7 @@ input[type=text].func-param {
     text-align: center;
     border-bottom: 1px solid #353a3e;
     padding: 2px 5px;
+    white-space: nowrap;
   }
   .editor-row {
     padding: 5px;