Merge pull request #14283 from grafana/explore-styling-fixes

Misc styling fixes to explore
This commit is contained in:
Torkel Ödegaard 2018-12-04 15:17:10 +01:00 committed by GitHub
commit 6cb639baaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 47 additions and 130 deletions

View File

@ -14,7 +14,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
background: #555651\ background: #555651\
}\ }\
.gf-code-dark {\ .gf-code-dark {\
background-color: #111;\ background-color: #09090b;\
color: #e0e0e0\ color: #e0e0e0\
}\ }\
.gf-code-dark .ace_cursor {\ .gf-code-dark .ace_cursor {\

View File

@ -15,7 +15,7 @@ const CHEAT_SHEET_ITEMS = [
export default (props: any) => ( export default (props: any) => (
<div> <div>
<h1>Logging Cheat Sheet</h1> <h2>Logging Cheat Sheet</h2>
{CHEAT_SHEET_ITEMS.map(item => ( {CHEAT_SHEET_ITEMS.map(item => (
<div className="cheat-sheet-item" key={item.expression}> <div className="cheat-sheet-item" key={item.expression}>
<div className="cheat-sheet-item__title">{item.title}</div> <div className="cheat-sheet-item__title">{item.title}</div>

View File

@ -1,59 +1,15 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames';
import LoggingCheatSheet from './LoggingCheatSheet'; import LoggingCheatSheet from './LoggingCheatSheet';
const TAB_MENU_ITEMS = [ interface Props {
{ onClickExample: () => void;
text: 'Start', }
id: 'start',
icon: 'fa fa-rocket',
},
];
export default class LoggingStartPage extends PureComponent<any, { active: string }> {
state = {
active: 'start',
};
onClickTab = active => {
this.setState({ active });
};
export default class LoggingStartPage extends PureComponent<Props> {
render() { render() {
const { active } = this.state;
const customCss = '';
return ( return (
<div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}> <div className="grafana-info-box grafana-info-box--max-lg">
<div className="page-header-canvas"> <LoggingCheatSheet onClickExample={this.props.onClickExample} />
<div className="page-container">
<div className="page-header">
<nav>
<ul className={`gf-tabs ${customCss}`}>
{TAB_MENU_ITEMS.map((tab, idx) => {
const tabClasses = classNames({
'gf-tabs-link': true,
active: tab.id === active,
});
return (
<li className="gf-tabs-item" key={tab.id}>
<a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
<i className={tab.icon} />
{tab.text}
</a>
</li>
);
})}
</ul>
</nav>
</div>
</div>
</div>
<div className="page-container page-body">
{active === 'start' && <LoggingCheatSheet onClickExample={this.props.onClickExample} />}
</div>
</div> </div>
); );
} }

View File

@ -18,6 +18,7 @@ const tokenizer = {
greedy: true, greedy: true,
alias: 'attr-value', alias: 'attr-value',
}, },
punctuation: /[{]/,
}, },
}, },
// number: /\b-?\d+((\.\d*)?([eE][+-]?\d+)?)?\b/, // number: /\b-?\d+((\.\d*)?([eE][+-]?\d+)?)?\b/,

View File

@ -21,7 +21,7 @@ const CHEAT_SHEET_ITEMS = [
export default (props: any) => ( export default (props: any) => (
<div> <div>
<h1>PromQL Cheat Sheet</h1> <h2>PromQL Cheat Sheet</h2>
{CHEAT_SHEET_ITEMS.map(item => ( {CHEAT_SHEET_ITEMS.map(item => (
<div className="cheat-sheet-item" key={item.expression}> <div className="cheat-sheet-item" key={item.expression}>
<div className="cheat-sheet-item__title">{item.title}</div> <div className="cheat-sheet-item__title">{item.title}</div>

View File

@ -1,59 +1,15 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames';
import PromCheatSheet from './PromCheatSheet'; import PromCheatSheet from './PromCheatSheet';
const TAB_MENU_ITEMS = [ interface Props {
{ onClickExample: () => void;
text: 'Start', }
id: 'start',
icon: 'fa fa-rocket',
},
];
export default class PromStart extends PureComponent<any, { active: string }> {
state = {
active: 'start',
};
onClickTab = active => {
this.setState({ active });
};
export default class PromStart extends PureComponent<Props> {
render() { render() {
const { active } = this.state;
const customCss = '';
return ( return (
<div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}> <div className="grafana-info-box grafana-info-box--max-lg">
<div className="page-header-canvas"> <PromCheatSheet onClickExample={this.props.onClickExample} />
<div className="page-container">
<div className="page-header">
<nav>
<ul className={`gf-tabs ${customCss}`}>
{TAB_MENU_ITEMS.map((tab, idx) => {
const tabClasses = classNames({
'gf-tabs-link': true,
active: tab.id === active,
});
return (
<li className="gf-tabs-item" key={tab.id}>
<a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
<i className={tab.icon} />
{tab.text}
</a>
</li>
);
})}
</ul>
</nav>
</div>
</div>
</div>
<div className="page-container page-body">
{active === 'start' && <PromCheatSheet onClickExample={this.props.onClickExample} />}
</div>
</div> </div>
); );
} }

View File

@ -386,9 +386,10 @@ const tokenizer = {
lookbehind: true, lookbehind: true,
inside: { inside: {
'label-key': { 'label-key': {
pattern: /[^,\s][^,]*[^,\s]*/, pattern: /[^(),\s][^,)]*[^),\s]*/,
alias: 'attr-name', alias: 'attr-name',
}, },
punctuation: /[()]/,
}, },
}, },
'context-labels': { 'context-labels': {
@ -403,6 +404,7 @@ const tokenizer = {
greedy: true, greedy: true,
alias: 'attr-value', alias: 'attr-value',
}, },
punctuation: /[{]/,
}, },
}, },
function: new RegExp(`\\b(?:${FUNCTIONS.map(f => f.label).join('|')})(?=\\s*\\()`, 'i'), function: new RegExp(`\\b(?:${FUNCTIONS.map(f => f.label).join('|')})(?=\\s*\\()`, 'i'),

View File

@ -44,9 +44,10 @@ $brand-success: $green;
$brand-warning: $brand-primary; $brand-warning: $brand-primary;
$brand-danger: $red; $brand-danger: $red;
$query-red: $red; $query-red: #e24d42;
$query-green: $green; $query-green: #74e680;
$query-purple: $purple; $query-purple: #fe85fc;
$query-keyword: #66d9ef;
$query-orange: $orange; $query-orange: $orange;
// Status colors // Status colors
@ -203,7 +204,7 @@ $search-filter-box-bg: $gray-blue;
// Typeahead // Typeahead
$typeahead-shadow: 0 5px 10px 0 $black; $typeahead-shadow: 0 5px 10px 0 $black;
$typeahead-selected-bg: $dark-4; $typeahead-selected-bg: $dark-4;
$typeahead-selected-color: $blue; $typeahead-selected-color: $yellow;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------

View File

@ -49,6 +49,7 @@ $query-red: $red;
$query-green: $green; $query-green: $green;
$query-purple: $purple; $query-purple: $purple;
$query-orange: $orange; $query-orange: $orange;
$query-keyword: $blue;
// Status colors // Status colors
// ------------------------- // -------------------------
@ -219,8 +220,8 @@ $search-filter-box-bg: $gray-7;
// Typeahead // Typeahead
$typeahead-shadow: 0 5px 10px 0 $gray-5; $typeahead-shadow: 0 5px 10px 0 $gray-5;
$typeahead-selected-bg: lighten($blue, 57%); $typeahead-selected-bg: $gray-6;
$typeahead-selected-color: $blue; $typeahead-selected-color: $yellow;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------

View File

@ -32,6 +32,10 @@
a { a {
@extend .external-link; @extend .external-link;
} }
&--max-lg {
max-width: map-get($grid-breakpoints, 'lg');
}
} }
.grafana-info-box__close { .grafana-info-box__close {

View File

@ -12,8 +12,8 @@
width: 100%; width: 100%;
cursor: text; cursor: text;
line-height: $line-height-base; line-height: $line-height-base;
color: $text-color-weak; color: $text-color;
background-color: $panel-bg; background-color: $input-bg;
background-image: none; background-image: none;
border: $panel-border; border: $panel-border;
border-radius: $border-radius; border-radius: $border-radius;
@ -95,45 +95,45 @@
color: $text-color-weak; color: $text-color-weak;
} }
.token.punctuation { .token.variable,
color: $text-color-weak; .token.entity {
color: $text-color;
} }
.token.property, .token.property,
.token.tag, .token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: $query-red; color: $query-red;
} }
.token.attr-value,
.token.selector, .token.selector,
.token.attr-name,
.token.string, .token.string,
.token.char, .token.char,
.token.function,
.token.builtin, .token.builtin,
.token.inserted { .token.inserted {
color: $query-green; color: $query-green;
} }
.token.boolean,
.token.number,
.token.operator, .token.operator,
.token.entity, .token.url {
.token.url,
.token.variable {
color: $query-purple; color: $query-purple;
} }
.token.function,
.token.attr-name,
.token.function-name,
.token.atrule, .token.atrule,
.token.attr-value,
.token.keyword, .token.keyword,
.token.class-name { .token.class-name {
color: $blue; color: $query-keyword;
} }
.token.punctuation,
.token.regex, .token.regex,
.token.important { .token.important {
color: $query-orange; color: $query-orange;

View File

@ -2,7 +2,7 @@
width: 100%; width: 100%;
&-container { &-container {
padding: 2rem; padding: $dashboard-padding;
} }
&-wrapper { &-wrapper {
@ -36,10 +36,6 @@
transition: all 0.1s linear; transition: all 0.1s linear;
} }
.explore-panel__header:hover {
transform: translateY(-1px);
}
.explore-panel__header-label { .explore-panel__header-label {
font-weight: 500; font-weight: 500;
margin-right: $panel-margin; margin-right: $panel-margin;
@ -308,7 +304,7 @@
color: $typeahead-selected-color; color: $typeahead-selected-color;
border-bottom: 1px solid $typeahead-selected-color; border-bottom: 1px solid $typeahead-selected-color;
background-color: lighten($typeahead-selected-color, 60%); background-color: rgba($typeahead-selected-color, 0.1);
} }
.logs-row-level { .logs-row-level {