Skip to content

N
nexpie-grafana-theme
Commit bfbb44af by Torkel Ödegaard
Options

transparent toggle style and new button group style

parent 79933299
Showing with 91 additions and 138 deletions
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">
......
public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
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>
);
}
......
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}
>
<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">
......
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": {
......
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;
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;
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
......
public/sass/components/_buttons.scss
......@@ -23,7 +23,7 @@
&.active {
&:focus,
&.focus {
@include tab-focus();
@include no-focus();
}
}
......
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 {
......
public/sass/components/_panel_logs.scss
$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 {
......
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%;
......
public/sass/components/_toggle_button_group.scss
.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;
}
......
public/sass/mixins/_mixins.scss
@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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment