Merge branch 'master' of github.com:torkelo/grafana

Conflicts:
	src/app/panels/graphite/module.html

src/app/directives/kibanaPanel.js

@@ -13,13 +13,14 @@ function (angular) {
 
         '<div class="row-fluid panel-extra"><div class="panel-extra-container">' +
 
-          '<span class="extra row-button" ng-show="panel.editable != false">' +
-            '<span ng-click="remove_panel_from_row(row,panel)" class="pointer">'+
-            '<i class="icon-remove pointer" bs-tooltip="\'Remove\'"></i></span>'+
+          '<span class="row-button extra" ng-show="panelMeta.loading == true">' +
+            '<span>'+
+              '<i class="icon-spinner icon-spin icon-large"></i>' +
+            '</span>'+
           '</span>' +
 
-          '<span class="extra row-button" ng-hide="panel.draggable == false">' +
-            '<span class="pointer" bs-tooltip="\'Drag here to move\'"' +
+          '<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' +
+            '<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1" ' +
             'data-drag=true data-jqyoui-options="{revert: \'invalid\',helper:\'clone\'}"'+
             ' jqyoui-draggable="'+
             '{'+
@@ -28,27 +29,8 @@ function (angular) {
               'index:{{$index}},'+
               'onStart:\'panelMoveStart\','+
               'onStop:\'panelMoveStop\''+
-              '}"  ng-model="row.panels"><i class="icon-move"></i></span>'+
-          '</span>' +
-
-          '<span class="row-button extra" ng-show="panel.editable != false">' +
-            '<span config-modal class="pointer">'+
-            '<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
-          '</span>' +
-
-          '<span ng-repeat="task in panelMeta.modals" class="row-button extra" ng-show="task.show">' +
-            '<span bs-modal="task.partial" class="pointer"><i ' +
-              'bs-tooltip="task.description" ng-class="task.icon" class="pointer"></i></span>'+
-          '</span>' +
-
-          '<span class="row-button extra" ng-show="panelMeta.loading == true">' +
-            '<span>'+
-              '<i class="icon-spinner icon-spin icon-large"></i>' +
-            '</span>'+
-          '</span>' +
-
-          '<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' +
-            '<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1">' +
+              '}"  ng-model="row.panels" ' +
+              '>' +
               '{{panel.title}}' +
             '</span>' +
           '</span>'+

src/app/panels/graphite/legend.html

@@ -2,7 +2,7 @@
       ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
       ng-repeat='series in legend'
       class="histogram-legend">
-    <i  class='icon-circle pointer'
+    <i  class='icon-minus pointer'
         ng-style="{color: series.color}"
         bs-popover="'colorPopup.html'"
         data-unique="1"

src/app/panels/graphite/module.html

@@ -2,41 +2,6 @@
       ng-init="init()"
       style="min-height:{{panel.height || row.height}}"
       ng-class="{'panel-fullscreen': fullscreen}">
-
-  <style>
-    .histogram-legend {
-      display:inline-block;
-      padding-right:5px
-    }
-    .histogram-legend-dot {
-      display:inline-block;
-      height:10px;
-      width:10px;
-      border-radius:5px;
-    }
-    .histogram-legend-item {
-      display:inline-block;
-    }
-    .histogram-chart {
-      position:relative;
-    }
-    .histogram-options {
-      padding: 5px;
-      margin-right: 15px;
-      margin-bottom: 0px;
-    }
-    .histogram-options label {
-      margin: 0px 0px 0px 10px !important;
-    }
-    .histogram-options span {
-      white-space: nowrap;
-    }
-
-    /* this is actually should be in bootstrap */
-    .form-inline .checkbox {
-        display: inline-block;
-    }
-  </style>
   <div>
     <span ng-show='panel.options'>
       <a class="link underline small" ng-show='panel.options' ng-click="options=!options">

src/vendor/bootstrap/less/bak/bootswatch.dark.less

@@ -2,16 +2,6 @@
 // Bootswatch
 // -----------------------------------------------------
 
-// KIBANA
-.panelCont {
-    outline: 1px solid darken(@bodyBackground, 10%);
-    border-top: 1px solid lighten(@bodyBackground, 10%);
-    padding: 0px 10px 10px 10px;
-    background: darken(@bodyBackground, 3%);
-    margin: 0px;
-}
-
-
 // TYPOGRAPHY
 // -----------------------------------------------------
 

src/vendor/bootstrap/less/bootstrap.light.less

@@ -2,3 +2,4 @@
 @import "bootswatch.light.less";
 @import "overrides.less";
 @import "variables.light.less";
+@import "grafana.less";

src/vendor/bootstrap/less/grafana-responsive.less

@@ -0,0 +1,23 @@
+@import "responsive.less";
+
+@gridColumnWidth:         70px;
+@gridGutterWidth:         10px;
+
+@gridColumnWidth768:      52px;
+@gridGutterWidth768:      10px;
+
+@gridColumnWidth1200:     90px;
+@gridGutterWidth1200:     10px;
+
+// Fluid grid
+// -------------------------
+@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
+@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
+
+// 1200px min
+@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
+@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
+
+// 768px-979px
+@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

src/vendor/bootstrap/less/grafana.less

@@ -1,9 +1,3 @@
-// Global color overrides
-// ---------------------------------------------------------
-//@grayDark:              #3A3F44;
-//@grayDarker:            #272B30;
-@grayDark:              #303030;
-@grayLighter:           #BBBFC2;
 
 .navbar-static-top {
   border-bottom: 1px solid black;
@@ -11,7 +5,7 @@
 
 .grafana-dashboard-hide-controls {
   padding: 0;
-  .extra, .grafana-row {
+  .grafana-row {
     display: none;
   }
 }
@@ -35,11 +29,7 @@
 }
 
 .filter-pulldown {
-  background: rgba(31, 31, 31, 0.42);
-  border-top: 1px solid #444;
-  border-left: 1px solid @grayDarker;
-  border-right: 1px solid @grayDarker;
-  border-bottom: 1px solid @grayDarker;
+  background: #292929;
 }
 
 .top-row-close {
@@ -51,19 +41,6 @@
   background: none;
 }
 
-.panelCont {
-  padding: 0px 10px;
-}
-
-.panel div.panel-extra div.panel-extra-container {
-  margin-right: -10px;
-  margin-top: 0px;
-}
-
-.panel-title {
-  font-size: 0.9em;
-}
-
 .row-button {
   width: 24px;
 }
@@ -141,6 +118,8 @@
   right: -10000px;
 }
 
+// Graphite Graph Legends
+
 .grafana-legend-container {
   margin: 4px 15px;
   text-align: left;
@@ -150,6 +129,30 @@
   padding: 0;
 }
 
+.histogram-legend {
+  display:inline-block;
+  padding: 0 4px;
+  i {
+    position: relative;
+    top: 3px;
+  }
+}
+
+.histogram-legend-dot {
+  display:inline-block;
+  height:10px;
+  width:10px;
+  border-radius:5px;
+}
+
+.histogram-legend-item {
+  display:inline-block;
+}
+
+.histogram-chart {
+  position:relative;
+}
+
 .histogram-legend-popover {
   width: 150px;
 

src/vendor/bootstrap/less/overrides.less

@@ -51,13 +51,12 @@ code, pre {
   background-color: @grayLighter;
 }
 
-// KIBANA
 .panelCont {
   padding: 0px 10px 10px 10px;
   background: @kibanaPanelBackground;
-  //box-shadow: 0px 0px 8px rgba(30, 30, 30, 0.75);
   margin: 0px;
-  border: 1px solid rgba(100, 100, 100, 0.25);
+  //border: 1px solid rgba(100, 100, 100, 0.25);
+  //outline: 1px solid darken(@bodyBackground, 10%);
 }
 
 div.editor-row {
@@ -234,13 +233,17 @@ form input.ng-invalid {
 
 .panel-title {
   border: 0px;
-  text-transform: uppercase;
+  //text-transform: uppercase;
   font-weight: bold;
 }
 
 .panel div.panel-extra div.panel-extra-container {
-  margin-right: 0px;
-  margin-top: 7px;
+  margin-right: -10px;
+  margin-top: 3px;
+  text-align: center;
+  ul {
+    text-align: left;
+  }
 }
 
 .panel div.panel-extra {

src/vendor/bootstrap/less/variables.dark.less

@@ -6,11 +6,11 @@
 // -------------------------
 @black:                 #000;
 @gray:                  #bbb;
-@grayDark:              #333;
+@grayDark:              #303030;
 @grayDarker:            #1f1f1f;
 
 @grayLight:             #ADAFAE;
-@grayLighter:           #eee;
+@grayLighter:           #BBBFC2;
 @white:                 #fff;
 
 
@@ -32,7 +32,7 @@
 
 // Scaffolding
 // -------------------------
-@bodyBackground:        @grayDark;
+@bodyBackground:        rgb(22,22,22);
 @textColor:             @grayLighter;
 
 

tasks/options/less.js

@@ -17,7 +17,8 @@ module.exports = function(config) {
       },
       files: {
         "<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.dark.less",
-        "<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.light.less"
+        "<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.light.less",
+        "<%= srcDir %>/css/bootstrap-responsive.min.css": "<%= srcDir %>/vendor/bootstrap/less/grafana-responsive.less"
       }
     }
   };