Merge branch 'master' into panel-title-menu-ux

public/sass/components/_collapse_box.scss

@@ -0,0 +1,46 @@
+.collapse-box {
+  margin-bottom: $spacer;
+
+  &--error {
+    .collapse-box__header {
+      border-color: $collapse-box-body-error-border;
+    }
+    .collapse-box__body {
+      border-color: $collapse-box-body-error-border;
+    }
+  }
+
+}
+
+.collapse-box__header {
+  display: flex;
+  flex-direction: row;
+  padding: $input-padding-y $input-padding-x;
+  margin-right: $gf-form-margin;
+  background-color: $input-label-bg;
+  font-size: $font-size-sm;
+  margin-right: $gf-form-margin;
+  border: $input-btn-border-width solid $collapse-box-body-border;
+  @include border-radius($label-border-radius-sm);
+}
+
+.collapse-box__header-title {
+  flex-grow: 1;
+}
+
+.collapse-box__body {
+  padding: $input-padding-y*2 $input-padding-x;
+  display: block;
+  margin-right: $gf-form-margin;
+  border: $input-btn-border-width solid $collapse-box-body-border;
+  border-top: none;
+  @include border-radius($label-border-radius-sm);
+}
+
+.collapse-box__header-actions {
+  display: flex;
+  flex-direction: row;
+  a {
+    margin-left: $spacer;
+  }
+}

public/sass/components/_gf-form.scss

@@ -103,6 +103,7 @@ $gf-form-margin: 0.25rem;
   padding: $input-padding-y $input-padding-x;
   margin-right: $gf-form-margin;
   font-size: $font-size-base;
+  margin-right: $gf-form-margin;
   line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;
@@ -112,6 +113,14 @@ $gf-form-margin: 0.25rem;
   @include border-radius($input-border-radius-sm);
   @include box-shadow($input-box-shadow);
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  // text areas should be scrollable
+  @at-root textarea#{&} {
+    overflow: auto;
+  }
 
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {

public/sass/components/_infobox.scss

@@ -5,15 +5,16 @@
   top: -13px;
   left: -8px;
   font-size: 20px;
-  color: $blue;
+  color: $text-color;
 }
 
 .grafana-info-box {
   position: relative;
-  background: $card-background;
+  background: $info-box-background;
   box-shadow: $card-shadow;
   padding: 1rem;
   border-radius: 4px;
+  margin-bottom: $spacer;
 
   h5 {
     margin-bottom: $spacer;
@@ -21,5 +22,9 @@
   ul {
     padding-left: $spacer;
   }
+
+  a {
+    @extend .external-link;
+  }
 }
 

public/sass/components/_json_explorer.scss

@@ -0,0 +1,98 @@
+
+.json-formatter-row {
+  font-family: monospace;
+
+  &, a, a:hover {
+    color: $json-explorer-default-color;
+    text-decoration: none;
+  }
+
+  .json-formatter-row {
+    margin-left: 1rem;
+  }
+
+  .json-formatter-children {
+    &.json-formatter-empty {
+      opacity: 0.5;
+      margin-left: 1rem;
+
+      &::after { display: none; }
+      &.json-formatter-object::after { content: "No properties"; }
+      &.json-formatter-array::after { content: "[]"; }
+    }
+  }
+
+  .json-formatter-string {
+    color: $json-explorer-string-color;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+  .json-formatter-number { color: $json-explorer-number-color; }
+  .json-formatter-boolean { color: $json-explorer-boolean-color; }
+  .json-formatter-null { color: $json-explorer-null-color; }
+  .json-formatter-undefined { color: $json-explorer-undefined-color; }
+  .json-formatter-function { color: $json-explorer-function-color; }
+  .json-formatter-date { background-color: fade($json-explorer-default-color, 5%); }
+  .json-formatter-url {
+    text-decoration: underline;
+    color: $json-explorer-url-color;
+    cursor: pointer;
+  }
+
+  .json-formatter-bracket { color: $json-explorer-bracket-color; }
+  .json-formatter-key {
+    color: $json-explorer-key-color;
+    cursor: pointer;
+    padding-right: 0.2rem;
+    margin-right: 4px;
+  }
+
+  .json-formatter-constructor-name {
+    cursor: pointer;
+  }
+
+  .json-formatter-array-comma { margin-right: 4px; }
+
+  .json-formatter-toggler {
+    line-height: 1.2rem;
+    font-size: 0.7rem;
+    vertical-align: middle;
+    opacity: $json-explorer-toggler-opacity;
+    cursor: pointer;
+    padding-right: 0.2rem;
+
+    &::after {
+      display: inline-block;
+      transition: transform $json-explorer-rotate-time ease-in;
+      content: "►";
+    }
+  }
+
+  // Inline preview on hover (optional)
+  > a > .json-formatter-preview-text {
+    opacity: 0;
+    transition: opacity .15s ease-in;
+    font-style: italic;
+  }
+
+  &:hover > a > .json-formatter-preview-text {
+    opacity: 0.6;
+  }
+
+  // Open state
+  &.json-formatter-open {
+    > .json-formatter-toggler-link .json-formatter-toggler::after{
+      transform: rotate(90deg);
+    }
+    > .json-formatter-children::after {
+      display: inline-block;
+    }
+    > a > .json-formatter-preview-text {
+      display: none;
+    }
+    &.json-formatter-empty::after {
+      display: block;
+    }
+  }
+}
+

public/sass/components/_panel_graph.scss

@@ -336,6 +336,7 @@
 }
 
 .axisLabel {
+  display: inline-block;
   color: $text-color;
   font-size: $font-size-sm;
   position: relative;

public/sass/components/_panel_heatmap.scss

@@ -18,6 +18,15 @@
       stroke: $text-color-weak;
     }
   }
+
+  // This hack prevents mouseenter/mouseleave events get fired too often
+  svg {
+    pointer-events: none;
+
+    rect {
+      pointer-events: visiblePainted;
+    }
+  }
 }
 
 .heatmap-tooltip {

public/sass/components/_panel_table.scss

@@ -72,6 +72,25 @@
     &:last-child {
       border-right: none;
     }
+
+    &.table-panel-cell-pre {
+      white-space: pre;
+    }
+
+    &.table-panel-cell-link {
+      // Expand internal div to cell size (make all cell clickable)
+      padding: 0;
+
+      a {
+        padding: 0.45em 0 0.45em 1.1em;
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    &.cell-highlighted:hover {
+      background-color: $tight-form-func-bg;
+    }
   }
 }
 

public/sass/components/_search.scss

@@ -122,14 +122,11 @@
       content: "\f015";
     }
 
-    &:hover {
+    &:hover,
+    &.selected {
       background-color: $tight-form-func-bg;
       @include left-brand-border-gradient();
     }
-
-    &.selected {
-      background-color: $grafanaListBackground;
-    }
   }
 
   .search-result-tags {

public/sass/components/_tabbed_view.scss

@@ -9,7 +9,6 @@
     padding: 0;
 
     .tabbed-view-header {
-/*       padding: 0; */
       background-color: $body-bg;
       padding: 1.5em 1rem 0 1rem;
     }
@@ -48,7 +47,7 @@
 }
 
 .tabbed-view-body {
-  padding: $spacer*2;
+  padding: $spacer*2 $spacer;
   min-height: 250px;
 }
 

public/sass/components/_view_states.scss

@@ -52,7 +52,7 @@
   .navbar-page-btn {
     border-color: transparent;
     background: transparent;
-    transform: translate3d(-95px, 0, 0);
+    transform: translate3d(-50px, 0, 0);
     transition: all 1.5s ease-in-out 1s;
     .icon-gf {
       opacity: 0;