From 35bdc1ddb220af4fcf8a16f5c6abe213085c5c27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Fri, 20 Dec 2013 15:23:20 +0100
Subject: [PATCH] began work on function panel

---
 src/app/panels/graphite/editor.html | 97 +++++++++++++++++++++--------
 1 file changed, 71 insertions(+), 26 deletions(-)

diff --git a/src/app/panels/graphite/editor.html b/src/app/panels/graphite/editor.html
index 8f2b82b6c5a..ff4e0b2a060 100644
--- a/src/app/panels/graphite/editor.html
+++ b/src/app/panels/graphite/editor.html
@@ -1,20 +1,25 @@
 <div class="editor-row">
   <style>
 
-    .grafana-target {
+    .grafana-target-inner-wrapper {
       border-top: 1px solid #444444;
       border-bottom: 1px solid #444444;
     }
-    .grafana-target-top td {
+    .grafana-target-inner {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       background: #202020;
-      padding: 0;
-      margin: 0;
     }
+
+    .grafana-target-onoff {
+      float: left;
+      padding: 5px 7px;
+    }
+
     .grafana-segment-list {
       list-style: none;
       margin: 0;
+      float: left;
     }
     .grafana-segment-list > li {
       float: left;
@@ -26,6 +31,9 @@
       border-left: 1px solid #050505;
       color: #c8c8c8;
     }
+    .grafana-target-controls {
+      float: right;
+    }
     .grafana-target .dropdown {
       padding: 0; margin: 0;
     }
@@ -34,33 +42,70 @@
     }
     a.grafana-target-segment:focus {
       outline: 0;
+      text-decoration: none;
+    }
+
+    .grafana-target-fun-panel ul {
+      list-style: none;
+    }
+    .grafana-target-fun-panel ul > li {
+      float: left;
+      padding: 5px 7px;
+    }
+
+    .grafana-target-fun-panel-icon {
+      float: left;
+      padding: 5px 7px;
     }
   </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">
+        <span class="grafana-target-onoff">
+          <i class="icon-eye-open"></i>
+        </span>
+        <ul class="grafana-segment-list" role="menu">
+          <li class="dropdown" ng-repeat="segment in segments" role="menuitem">
+            <a tabindex="1" class="grafana-target-segment dropdown-toggle"
+                data-toggle="dropdown" ng-click="getAltSegments($index)" focus-me="segment.focus"
+                data-placement="bottom" ng-bind-html-unsafe="segment.html"></a>
+            <ul class="dropdown-menu" role="menu">
+              <li ng-repeat="altSegment in altSegments" role="menuitem">
+                <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <span class="grafana-target-controls">
+          <i class="icon-remove"></i>
+        </span>
+        <div class="clearfix"></div>
+      </div>
+      <div class="grafana-target-fun-panel">
+        <span class="grafana-target-fun-panel-icon">
+          <i class="icon-share-alt"></i>
+        </span>
+        <ul>
+          <li>
+            <a href="asd">sumSeries</a>
+          </li>
+          <li>
+            <a href="asd">avgSeries</a>
+          </li>
+          <li>
+            <a href="asd">scaleToSeconds</a>
+          </li>
+          <li>
+            <a href="asd">alias</a>
+          </li>
+          <li>
+            <a href="asd">other</a>
+          </li>
+        </ul>
+      </div>
+    </div>
 
-    <table style="margin: 0; padding: 0;width:100%;">
-      <tr class="grafana-target-top">
-        <td style="padding-left: 10px;width: 25px;"><i class="icon-eye-open"></i></td>
-        <td>
-          <ul class="grafana-segment-list" role="menu">
-            <li class="dropdown" ng-repeat="segment in segments" role="menuitem">
-              <a tabindex="1" class="grafana-target-segment dropdown-toggle"
-                  data-toggle="dropdown" ng-click="getAltSegments($index)" focus-me="segment.focus"
-                  data-placement="bottom" ng-bind-html-unsafe="segment.html"></a>
-              <ul class="dropdown-menu" role="menu">
-                <li ng-repeat="altSegment in altSegments" role="menuitem">
-                  <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
-                </li>
-              </ul>
-            </li>
-          <ul>
-        </td>
-        <td>
-            <i class="icon-remove"></i>
-        </td>
-      </tr>
-    </table>
     <!-- <div class="row-fluid">
   		<div class="span12">
         <span ng-if="!editMode">