From bfbb44af038200992efa269748f08830db380468 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 7 Dec 2018 17:15:46 +0100
Subject: [PATCH] transparent toggle style and new button group style

---
 public/app/core/components/Switch/Switch.tsx  |  7 +-
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 36 ++--------
 public/app/features/explore/Logs.tsx          | 32 +++------
 .../app/plugins/datasource/loki/plugin.json   |  2 +-
 public/sass/_variables.dark.scss              |  5 ++
 public/sass/_variables.light.scss             |  5 ++
 public/sass/base/_reboot.scss                 | 10 +--
 public/sass/components/_buttons.scss          |  2 +-
 public/sass/components/_gf-form.scss          |  8 ++-
 public/sass/components/_panel_logs.scss       | 14 +++-
 public/sass/components/_switch.scss           | 20 ++++--
 .../sass/components/_toggle_button_group.scss | 25 +++----
 public/sass/mixins/_mixins.scss               | 67 ++++---------------
 13 files changed, 93 insertions(+), 140 deletions(-)

diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx
index 46040d2307b..5cb7617c89c 100644
--- a/public/app/core/components/Switch/Switch.tsx
+++ b/public/app/core/components/Switch/Switch.tsx
@@ -6,6 +6,7 @@ export interface Props {
   checked: boolean;
   labelClass?: string;
   switchClass?: string;
+  transparent?: boolean;
   onChange: (event) => any;
 }
 
@@ -24,11 +25,11 @@ export class Switch extends PureComponent<Props, State> {
   };
 
   render() {
-    const { labelClass = '', switchClass = '', label, checked } = this.props;
+    const { labelClass = '', switchClass = '', label, checked, transparent } = this.props;
 
     const labelId = `check-${this.state.id}`;
-    const labelClassName = `gf-form-label ${labelClass} pointer`;
-    const switchClassName = `gf-form-switch ${switchClass}`;
+    const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
+    const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
       <label htmlFor={labelId} className="gf-form-switch-container">
diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 1e9ae4732df..be970119dd5 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,43 +1,19 @@
-import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
+import React, { SFC, ReactNode, PureComponent } from 'react';
 
 interface ToggleButtonGroupProps {
-  onChange: (value) => void;
-  value?: any;
   label?: string;
-  render: (props) => void;
+  children: JSX.Element[];
+  transparent?: boolean;
 }
 
 export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
-  getValues() {
-    const { children } = this.props;
-    return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value);
-  }
-
-  smallChildren() {
-    const { children } = this.props;
-    return React.Children.toArray(children).every((c: ReactElement<any>) => c.props.className.includes('small'));
-  }
-
-  handleToggle(toggleValue) {
-    const { value, onChange } = this.props;
-    if (value && value === toggleValue) {
-      return;
-    }
-    onChange(toggleValue);
-  }
-
   render() {
-    const { value, label } = this.props;
-    const values = this.getValues();
-    const selectedValue = value || values[0];
-    const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
+    const { children, label, transparent } = this.props;
 
     return (
       <div className="gf-form">
-        <div className="toggle-button-group">
-          {label && <label className={labelClassName}>{label}</label>}
-          {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
-        </div>
+        {label && <label className={`gf-form-label ${transparent ? 'gf-form-label--transparent' : ''}`}>{label}</label>}
+        <div className={`toggle-button-group ${transparent ? 'toggle-button-group--transparent' : ''}`}>{children}</div>
       </div>
     );
   }
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 05b70fcc878..bfd5f9fae99 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -431,27 +431,17 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
         </div>
         <div className="logs-panel-options">
           <div className="logs-panel-controls">
-            <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} />
-            <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} />
-            <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} />
-            <ToggleButtonGroup
-              label="Dedup"
-              onChange={this.onChangeDedup}
-              value={dedup}
-              render={({ selectedValue, onChange }) =>
-                Object.keys(LogsDedupStrategy).map((dedupType, i) => (
-                  <ToggleButton
-                    className="btn-small"
-                    key={i}
-                    value={dedupType}
-                    onChange={onChange}
-                    selected={selectedValue === dedupType}
-                  >
-                    {dedupType}
-                  </ToggleButton>
-                ))
-              }
-            />
+            <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} transparent />
+            <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} transparent />
+            <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} transparent />
+            <ToggleButtonGroup label="Dedup" transparent={true}>
+              {Object.keys(LogsDedupStrategy).map((dedupType, i) => (
+                <ToggleButton key={i} value={dedupType} onChange={this.onChangeDedup} selected={dedup === dedupType}>
+                  {dedupType}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
+
             {hasData &&
               meta && (
                 <div className="logs-panel-meta">
diff --git a/public/app/plugins/datasource/loki/plugin.json b/public/app/plugins/datasource/loki/plugin.json
index 30997ca7632..64462a08415 100644
--- a/public/app/plugins/datasource/loki/plugin.json
+++ b/public/app/plugins/datasource/loki/plugin.json
@@ -7,7 +7,7 @@
   "annotations": false,
   "logs": true,
   "explore": true,
-  "tables": true,
+  "tables": false,
   "info": {
     "description": "Loki Logging Data Source for Grafana",
     "author": {
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index ae410ac6cc0..ca9e1a38249 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -391,3 +391,8 @@ $panel-grid-placeholder-shadow: 0 0 4px $blue;
 
 // logs
 $logs-color-unkown: $gray-2;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-seperator-border: 1px solid $page-bg;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 9c056294062..31f61a2c196 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -400,3 +400,8 @@ $panel-grid-placeholder-shadow: 0 0 4px $blue-light;
 
 // logs
 $logs-color-unkown: $gray-5;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, $yellow, $red);
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-seperator-border: 1px solid $gray-6;
diff --git a/public/sass/base/_reboot.scss b/public/sass/base/_reboot.scss
index e34bdfdb9ed..8aac8bc815e 100644
--- a/public/sass/base/_reboot.scss
+++ b/public/sass/base/_reboot.scss
@@ -87,7 +87,7 @@ body {
 // might still respond to pointer events.
 //
 // Credit: https://github.com/suitcss/base
-[tabindex="-1"]:focus {
+[tabindex='-1']:focus {
   outline: none !important;
 }
 
@@ -171,7 +171,7 @@ a {
   }
 
   &:focus {
-    @include tab-focus();
+    @include no-focus();
   }
 }
 
@@ -214,7 +214,7 @@ img {
 // for traditionally non-focusable elements with role="button"
 // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-[role="button"] {
+[role='button'] {
   cursor: pointer;
 }
 
@@ -231,7 +231,7 @@ img {
 a,
 area,
 button,
-[role="button"],
+[role='button'],
 input,
 label,
 select,
@@ -320,7 +320,7 @@ legend {
   //  border: 0;
 }
 
-input[type="search"] {
+input[type='search'] {
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 87947965fc3..27055551b4b 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -23,7 +23,7 @@
   &.active {
     &:focus,
     &.focus {
-      @include tab-focus();
+      @include no-focus();
     }
   }
 
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 74050e07abd..0c6ef7d1fa0 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -117,9 +117,11 @@ $input-border: 1px solid $input-border-color;
     color: $critical;
   }
 
-  &--small {
-    padding: ($input-padding-y / 2) ($input-padding-x / 2);
-    font-size: $font-size-xs;
+  &--transparent {
+    background-color: transparent;
+    border: 0;
+    text-align: right;
+    padding-left: 0px;
   }
 
   &:disabled {
diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 8220cfed878..bcf18025292 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -1,6 +1,6 @@
 $column-horizontal-spacing: 10px;
 
-.logs-panel-controls {
+.logs-panel-options {
   display: flex;
   background-color: $page-bg;
   padding: $panel-padding;
@@ -8,8 +8,14 @@ $column-horizontal-spacing: 10px;
   border-radius: $border-radius;
   margin: 2*$panel-margin 0;
   border: $panel-border;
+  flex-direction: column;
+}
+
+.logs-panel-controls {
+  display: flex;
   justify-items: flex-start;
-  align-items: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
 
   > * {
     margin-right: 1em;
@@ -27,10 +33,14 @@ $column-horizontal-spacing: 10px;
   color: $text-color-weak;
   // Align first line with controls labels
   margin-top: -2px;
+  min-width: 30%;
+  display: flex;
 }
 
 .logs-panel-meta__item {
   margin-right: 1em;
+  display: flex;
+  flex-direction: column;
 }
 
 .logs-panel-meta__label {
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index bd512676912..88a959f5117 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -27,33 +27,39 @@ gf-form-switch[disabled] {
   border: 1px solid $input-border-color;
   border-left: none;
   border-radius: $input-border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   input {
     opacity: 0;
     width: 0;
     height: 0;
   }
+
+  &--transparent {
+    background: transparent;
+    border: 0;
+    width: 40px;
+  }
 }
 
 /* The slider */
 .gf-form-switch__slider {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-  right: 14px;
-  bottom: 10px;
   background: $switch-slider-off-bg;
   border-radius: 8px;
   height: 16px;
   width: 29px;
+  display: block;
+  position: relative;
 
   &::before {
     position: absolute;
     content: '';
     height: 12px;
     width: 12px;
-    left: 2px;
-    bottom: 2px;
+    left: 1px;
+    top: 2px;
     background: $switch-slider-color;
     transition: 0.4s;
     border-radius: 50%;
diff --git a/public/sass/components/_toggle_button_group.scss b/public/sass/components/_toggle_button_group.scss
index ed701a489a9..73ebf61778e 100644
--- a/public/sass/components/_toggle_button_group.scss
+++ b/public/sass/components/_toggle_button_group.scss
@@ -1,24 +1,21 @@
 .toggle-button-group {
   display: flex;
 
-  .gf-form-label {
-    background-color: $input-label-bg;
-    &:first-child {
-      border-radius: $border-radius 0 0 $border-radius;
-      margin: 0;
-    }
-    &.small {
-      padding: ($input-padding-y / 2) ($input-padding-x / 2);
-      font-size: $font-size-xs;
-    }
-  }
-
   .btn {
-    background-color: $typeahead-selected-bg;
+    @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
+
+    padding: 7px 10px;
+    font-weight: $font-weight-semi-bold;
+    font-size: $font-size-sm;
     border-radius: 0;
     color: $text-color;
+    border-right: $button-toggle-group-btn-seperator-border;
+
     &.active {
-      background-color: $input-bg;
+      background: $button-toggle-group-btn-active-bg;
+      box-shadow: $button-toggle-group-btn-active-shadow;
+      border-right: 0;
+
       &:hover {
         cursor: default;
       }
diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss
index f3be6af56ba..b6b028b7c87 100644
--- a/public/sass/mixins/_mixins.scss
+++ b/public/sass/mixins/_mixins.scss
@@ -1,6 +1,6 @@
 @mixin clearfix() {
   &::after {
-    content: "";
+    content: '';
     display: table;
     clear: both;
   }
@@ -19,6 +19,10 @@
   outline-offset: -2px;
 }
 
+@mixin no-focus() {
+  outline: none;
+}
+
 // Center-align a block level element
 // ----------------------------------
 @mixin center-block() {
@@ -265,20 +269,10 @@
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
   @mixin background($color: $white, $alpha: 1) {
-    background-color: hsla(
-      hue($color),
-      saturation($color),
-      lightness($color),
-      $alpha
-    );
+    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
   }
   @mixin border($color: $white, $alpha: 1) {
-    border-color: hsla(
-      hue($color),
-      saturation($color),
-      lightness($color),
-      $alpha
-    );
+    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
     @include background-clip(padding-box);
   }
 }
@@ -294,66 +288,37 @@
 // Gradients
 @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
   background-color: $endColor;
-  background-image: linear-gradient(
-    to right,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
+  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
   background-repeat: repeat-x;
 }
 
 @mixin gradient-vertical($startColor: #555, $endColor: #333) {
   background-color: mix($startColor, $endColor, 60%);
-  background-image: linear-gradient(
-    to bottom,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
+  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
   background-repeat: repeat-x;
 }
 
 @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
   background-color: $endColor;
   background-repeat: repeat-x;
-  background-image: linear-gradient(
-    $deg,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
+  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
 }
 
 @mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
   background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient(
-    to right,
-    $startColor,
-    $midColor $colorStop,
-    $endColor
-  );
+  background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
   background-repeat: no-repeat;
 }
 
 @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
   background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient(
-    $startColor,
-    $midColor $colorStop,
-    $endColor
-  );
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
   background-repeat: no-repeat;
 }
 
 @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
   background-color: $outerColor;
-  background-image: -webkit-gradient(
-    radial,
-    center center,
-    0,
-    center center,
-    460,
-    from($innerColor),
-    to($outerColor)
-  );
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
   background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
@@ -380,11 +345,7 @@
 
 @mixin left-brand-border-gradient() {
   border: none;
-  border-image: linear-gradient(
-    rgba(255, 213, 0, 1) 0%,
-    rgba(255, 68, 0, 1) 99%,
-    rgba(255, 68, 0, 1) 100%
-  );
+  border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
   border-image-slice: 1;
   border-style: solid;
   border-top: 0;