Commit c4b57a25 by Andrzej Ressel

Revert files

parent cfd1f5c0
import React, { Component } from 'react';
export interface IProps {
model: any;
model: any;
}
class EmptyListCTA extends Component<IProps, any> {
render() {
const {
title,
buttonIcon,
buttonLink,
buttonTitle,
proTip,
proTipLink,
proTipLinkTitle,
proTipTarget,
} = this.props.model;
return (
<div className="empty-list-cta">
<div className="empty-list-cta__title">{title}</div>
<a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
<i className={buttonIcon} />
{buttonTitle}
</a>
<div className="empty-list-cta__pro-tip">
<i className="fa fa-rocket" /> ProTip: {proTip}
<a className="text-link empty-list-cta__pro-tip-link" href={proTipLink} target={proTipTarget}>
{proTipLinkTitle}
</a>
</div>
</div>
);
}
render() {
const {
title,
buttonIcon,
buttonLink,
buttonTitle,
proTip,
proTipLink,
proTipLinkTitle,
proTipTarget
} = this.props.model;
return (
<div className="empty-list-cta">
<div className="empty-list-cta__title">{title}</div>
<a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
<div className="empty-list-cta__pro-tip">
<i className="fa fa-rocket" /> ProTip: {proTip}
<a className="text-link empty-list-cta__pro-tip-link"
href={proTipLink}
target={proTipTarget}>{proTipLinkTitle}</a>
</div>
</div>
);
}
}
export default EmptyListCTA;
......@@ -4,14 +4,10 @@ const xCount = 50;
const yCount = 50;
function Cell({ x, y, flipIndex }) {
const index = y * xCount + x;
const index = (y * xCount) + x;
const bgColor1 = getColor(x, y);
return (
<div
className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`}
key={index}
style={{ background: bgColor1 }}
/>
<div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
);
}
......@@ -35,7 +31,7 @@ export default class LoginBackground extends Component<any, any> {
}
flipElements() {
const elementIndexToFlip = getRandomInt(0, xCount * yCount - 1);
const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
this.setState(prevState => {
return {
...prevState,
......@@ -61,7 +57,9 @@ export default class LoginBackground extends Component<any, any> {
return (
<div className="login-bg__row">
{Array.from(Array(xCount)).map((el2, x) => {
return <Cell y={y} x={x} flipIndex={this.state.flipIndex} />;
return (
<Cell y={y} x={x} flipIndex={this.state.flipIndex} />
);
})}
</div>
);
......@@ -1238,5 +1236,5 @@ function getColor(x, y) {
// let randY = getRandomInt(0, y);
// let randIndex = randY * xCount + randX;
return colors[(y * xCount + x) % colors.length];
return colors[(y*xCount + x) % colors.length];
}
......@@ -5,27 +5,28 @@ export interface IProps {
}
export class PasswordStrength extends React.Component<IProps, any> {
constructor(props) {
super(props);
}
render() {
const { password } = this.props;
let strengthText = 'strength: strong like a bull.';
let strengthClass = 'password-strength-good';
let strengthText = "strength: strong like a bull.";
let strengthClass = "password-strength-good";
if (!password) {
return null;
}
if (password.length <= 8) {
strengthText = 'strength: you can do better.';
strengthClass = 'password-strength-ok';
strengthText = "strength: you can do better.";
strengthClass = "password-strength-ok";
}
if (password.length < 4) {
strengthText = 'strength: weak sauce.';
strengthClass = 'password-strength-bad';
strengthText = "strength: weak sauce.";
strengthClass = "password-strength-bad";
}
return (
......@@ -35,3 +36,5 @@ export class PasswordStrength extends React.Component<IProps, any> {
);
}
}
......@@ -29,8 +29,7 @@ export class ColorPalette extends React.Component<IProps, any> {
key={paletteColor}
className={'pointer fa ' + cssClass}
style={{ color: paletteColor }}
onClick={this.onColorSelect(paletteColor)}
>
onClick={this.onColorSelect(paletteColor)}>
&nbsp;
</i>
);
......@@ -42,3 +41,4 @@ export class ColorPalette extends React.Component<IProps, any> {
);
}
}
......@@ -19,7 +19,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
this.state = {
tab: 'palette',
color: this.props.color || DEFAULT_COLOR,
colorString: this.props.color || DEFAULT_COLOR,
colorString: this.props.color || DEFAULT_COLOR
};
}
......@@ -32,7 +32,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
if (newColor.isValid()) {
this.setState({
color: newColor.toString(),
colorString: newColor.toString(),
colorString: newColor.toString()
});
this.props.onColorSelect(color);
}
......@@ -50,7 +50,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
onColorStringChange(e) {
let colorString = e.target.value;
this.setState({
colorString: colorString,
colorString: colorString
});
let newColor = tinycolor(colorString);
......@@ -71,11 +71,11 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
componentDidMount() {
this.pickerNavElem.find('li:first').addClass('active');
this.pickerNavElem.on('show', e => {
this.pickerNavElem.on('show', (e) => {
// use href attr (#name => name)
let tab = e.target.hash.slice(1);
this.setState({
tab: tab,
tab: tab
});
});
}
......@@ -97,24 +97,19 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
<div className="gf-color-picker">
<ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
<li className="gf-tabs-item-colorpicker">
<a href="#palette" data-toggle="tab">
Colors
</a>
<a href="#palette" data-toggle="tab">Colors</a>
</li>
<li className="gf-tabs-item-colorpicker">
<a href="#spectrum" data-toggle="tab">
Custom
</a>
<a href="#spectrum" data-toggle="tab">Custom</a>
</li>
</ul>
<div className="gf-color-picker__body">{currentTab}</div>
<div className="gf-color-picker__body">
{currentTab}
</div>
<div>
<input
className="gf-form-input gf-form-input--small"
value={this.state.colorString}
onChange={this.onColorStringChange.bind(this)}
onBlur={this.onColorStringBlur.bind(this)}
/>
<input className="gf-form-input gf-form-input--small" value={this.state.colorString}
onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
</input>
</div>
</div>
);
......
......@@ -29,17 +29,14 @@ export class SpectrumPicker extends React.Component<IProps, any> {
}
componentDidMount() {
let spectrumOptions = _.assignIn(
{
flat: true,
showAlpha: true,
showButtons: false,
color: this.props.color,
appendTo: this.elem,
move: this.onSpectrumMove,
},
this.props.options
);
let spectrumOptions = _.assignIn({
flat: true,
showAlpha: true,
showButtons: false,
color: this.props.color,
appendTo: this.elem,
move: this.onSpectrumMove,
}, this.props.options);
this.elem.spectrum(spectrumOptions);
this.elem.spectrum('show');
......@@ -67,6 +64,9 @@ export class SpectrumPicker extends React.Component<IProps, any> {
}
render() {
return <div className="spectrum-container" ref={this.setComponentElem} />;
return (
<div className="spectrum-container" ref={this.setComponentElem}></div>
);
}
}
import React from 'react';
import { shallow } from 'enzyme';
import {shallow} from 'enzyme';
import { PasswordStrength } from '../components/PasswordStrength';
import {PasswordStrength} from '../components/PasswordStrength';
describe('PasswordStrength', () => {
it('should have class bad if length below 4', () => {
const wrapper = shallow(<PasswordStrength password="asd" />);
expect(wrapper.find('.password-strength-bad')).toHaveLength(1);
expect(wrapper.find(".password-strength-bad")).toHaveLength(1);
});
it('should have class ok if length below 8', () => {
const wrapper = shallow(<PasswordStrength password="asdasd" />);
expect(wrapper.find('.password-strength-ok')).toHaveLength(1);
expect(wrapper.find(".password-strength-ok")).toHaveLength(1);
});
it('should have class good if length above 8', () => {
const wrapper = shallow(<PasswordStrength password="asdaasdda" />);
expect(wrapper.find('.password-strength-good')).toHaveLength(1);
expect(wrapper.find(".password-strength-good")).toHaveLength(1);
});
});
import React from 'react';
import { PanelModel } from '../panel_model';
import { PanelContainer } from './PanelContainer';
import { AttachedPanel } from './PanelLoader';
import { DashboardRow } from './DashboardRow';
import { AddPanelPanel } from './AddPanelPanel';
import {PanelModel} from '../panel_model';
import {PanelContainer} from './PanelContainer';
import {AttachedPanel} from './PanelLoader';
import {DashboardRow} from './DashboardRow';
import {AddPanelPanel} from './AddPanelPanel';
export interface DashboardPanelProps {
panel: PanelModel;
......@@ -46,6 +46,9 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
return <AddPanelPanel panel={this.props.panel} getPanelContainer={this.props.getPanelContainer} />;
}
return <div ref={element => (this.element = element)} className="panel-height-helper" />;
return (
<div ref={element => this.element = element} className="panel-height-helper" />
);
}
}
......@@ -198,9 +198,7 @@ export class QueryVariable implements Variable {
}
});
} else if (sortType === 3) {
options = _.sortBy(options, opt => {
return _.toLower(opt.text);
});
options = _.sortBy(options, opt => { return _.toLower(opt.text); });
}
if (reverseSort) {
......
......@@ -53,9 +53,9 @@ $enable-flex: true;
// Typography
// -------------------------
$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, 'Times New Roman', Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif !default;
$font-size-root: 14px !default;
......@@ -90,7 +90,7 @@ $lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headings-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default;
......@@ -152,9 +152,16 @@ $input-padding-y-sm: 4px !default;
$input-padding-x-lg: 20px !default;
$input-padding-y-lg: 10px !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
$input-height-lg: ( ($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: ( ($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2))
!default;
$input-height-lg: (
($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)
)
!default;
$input-height-sm: (
($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)
)
!default;
$form-group-margin-bottom: $spacer-y !default;
$gf-form-margin: 0.2rem;
......@@ -214,9 +221,9 @@ $panel-padding: 0px 10px 5px 10px;
$tabs-padding: 10px 15px 9px;
$external-services: (
github: (bgColor: #464646, borderColor: #393939, icon: ''),
google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
grafanacom: (bgColor: inherit, borderColor: #393939, icon: ''),
oauth: (bgColor: inherit, borderColor: #393939, icon: '')
github: (bgColor: #464646, borderColor: #393939, icon: ""),
google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ""),
grafanacom: (bgColor: inherit, borderColor: #393939, icon: ""),
oauth: (bgColor: inherit, borderColor: #393939, icon: "")
)
!default;
......@@ -3,16 +3,16 @@
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@import './font-awesome/variables';
@import './font-awesome/mixins';
@import './font-awesome/path';
@import './font-awesome/core';
@import './font-awesome/larger';
@import './font-awesome/fixed-width';
@import './font-awesome/list';
@import './font-awesome/bordered-pulled';
@import './font-awesome/animated';
@import './font-awesome/rotated-flipped';
@import './font-awesome/stacked';
@import './font-awesome/icons';
@import './font-awesome/screen-reader';
@import "./font-awesome/variables";
@import "./font-awesome/mixins";
@import "./font-awesome/path";
@import "./font-awesome/core";
@import "./font-awesome/larger";
@import "./font-awesome/fixed-width";
@import "./font-awesome/list";
@import "./font-awesome/bordered-pulled";
@import "./font-awesome/animated";
@import "./font-awesome/rotated-flipped";
@import "./font-awesome/stacked";
@import "./font-awesome/icons";
@import "./font-awesome/screen-reader";
......@@ -58,19 +58,19 @@ textarea {
}
// Reset width of input images, buttons, radios, checkboxes
input[type='file'],
input[type='image'],
input[type='submit'],
input[type='reset'],
input[type='button'],
input[type='radio'],
input[type='checkbox'] {
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs
select,
input[type='file'] {
input[type="file"] {
height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */
line-height: $input-height;
}
......@@ -90,19 +90,19 @@ select[size] {
// Focus for select, file, radio, and checkbox
select:focus,
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
@include tab-focus();
}
// not a big fan of number fields
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
input[type="number"] {
-moz-appearance: textfield;
}
// Placeholder
......@@ -155,15 +155,15 @@ textarea[readonly] {
}
// Explicitly reset the colors here
input[type='radio'][disabled],
input[type='checkbox'][disabled],
input[type='radio'][readonly],
input[type='checkbox'][readonly] {
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
cursor: $cursor-disabled;
background-color: transparent;
}
input[type='text'].input-fluid {
input[type="text"].input-fluid {
width: 100%;
box-sizing: border-box;
padding: 10px;
......@@ -172,7 +172,7 @@ input[type='text'].input-fluid {
height: 100%;
}
input[type='checkbox'].cr1 {
input[type="checkbox"].cr1 {
display: none;
}
......@@ -194,7 +194,7 @@ label.cr1 {
cursor: pointer;
}
input[type='checkbox'].cr1:checked + label {
input[type="checkbox"].cr1:checked + label {
background: url($checkboxImageUrl) 0px -18px no-repeat;
}
......@@ -203,7 +203,7 @@ input[type='checkbox'].cr1:checked + label {
display: block;
overflow: hidden;
padding-right: 10px;
input[type='text'] {
input[type="text"] {
width: 100%;
padding: 5px 6px;
height: 100%;
......
@font-face {
font-family: 'grafana-icons';
src: url('../fonts/grafana-icons.eot?okx5td');
src: url('../fonts/grafana-icons.eot?okx5td#iefix') format('embedded-opentype'),
url('../fonts/grafana-icons.ttf?okx5td') format('truetype'),
url('../fonts/grafana-icons.woff?okx5td') format('woff'),
url('../fonts/grafana-icons.svg?okx5td#grafana-icons') format('svg');
font-family: "grafana-icons";
src: url("../fonts/grafana-icons.eot?okx5td");
src: url("../fonts/grafana-icons.eot?okx5td#iefix")
format("embedded-opentype"),
url("../fonts/grafana-icons.ttf?okx5td") format("truetype"),
url("../fonts/grafana-icons.woff?okx5td") format("woff"),
url("../fonts/grafana-icons.svg?okx5td#grafana-icons") format("svg");
font-weight: normal;
font-style: normal;
}
.icon-gf {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'grafana-icons' !important;
font-family: "grafana-icons" !important;
speak: none;
font-style: normal;
font-weight: normal;
......@@ -36,165 +37,165 @@
}
.icon-gf-raintank_wordmark:before {
content: '\e600';
content: "\e600";
}
.micon-gf-raintank_icn:before {
content: '\e601';
content: "\e601";
}
.icon-gf-raintank_r-icn:before {
content: '\e905';
content: "\e905";
}
.icon-gf-check-alt:before {
content: '\e603';
content: "\e603";
}
.icon-gf-check:before {
content: '\e604';
content: "\e604";
}
.icon-gf-collector:before {
content: '\e605';
content: "\e605";
}
.icon-gf-dashboard:before {
content: '\e606';
content: "\e606";
}
.icon-gf-panel:before {
content: '\e904';
content: "\e904";
}
.icon-gf-datasources:before {
content: '\e607';
content: "\e607";
}
.icon-gf-endpoint-tiny:before {
content: '\e608';
content: "\e608";
}
.icon-gf-endpoint:before {
content: '\e609';
content: "\e609";
}
.icon-gf-page:before {
content: '\e908';
content: "\e908";
}
.icon-gf-filter:before {
content: '\e60a';
content: "\e60a";
}
.icon-gf-status:before {
content: '\e60b';
content: "\e60b";
}
.icon-gf-monitoring:before {
content: '\e60c';
content: "\e60c";
}
.icon-gf-monitoring-tiny:before {
content: '\e620';
content: "\e620";
}
.icon-gf-jump-to-dashboard:before {
content: '\e60d';
content: "\e60d";
}
.icon-gf-warn,
.icon-gf-warning:before {
content: '\e60e';
content: "\e60e";
}
.icon-gf-nodata:before {
content: '\e60f';
content: "\e60f";
}
.icon-gf-critical:before {
content: '\e610';
content: "\e610";
}
.icon-gf-crit:before {
content: '\e610';
content: "\e610";
}
.icon-gf-online:before {
content: '\e611';
content: "\e611";
}
.icon-gf-event-error:before {
content: '\e623';
content: "\e623";
}
.icon-gf-event:before {
content: '\e624';
content: "\e624";
}
.icon-gf-sadface:before {
content: '\e907';
content: "\e907";
}
.icon-gf-private-collector:before {
content: '\e612';
content: "\e612";
}
.icon-gf-alert:before {
content: '\e61f';
content: "\e61f";
}
.icon-gf-alert-disabled:before {
content: '\e621';
content: "\e621";
}
.icon-gf-refresh:before {
content: '\e613';
content: "\e613";
}
.icon-gf-save:before {
content: '\e614';
content: "\e614";
}
.icon-gf-share:before {
content: '\e616';
content: "\e616";
}
.icon-gf-star:before {
content: '\e617';
content: "\e617";
}
.icon-gf-search:before {
content: '\e618';
content: "\e618";
}
.icon-gf-settings:before {
content: '\e615';
content: "\e615";
}
.icon-gf-add:before {
content: '\e619';
content: "\e619";
}
.icon-gf-remove:before {
content: '\e61a';
content: "\e61a";
}
.icon-gf-video:before {
content: '\e61b';
content: "\e61b";
}
.icon-gf-bulk_action:before {
content: '\e61c';
content: "\e61c";
}
.icon-gf-grabber:before {
content: '\e90b';
content: "\e90b";
}
.icon-gf-users:before {
content: '\e622';
content: "\e622";
}
.icon-gf-globe:before {
content: '\e61d';
content: "\e61d";
}
.icon-gf-snapshot:before {
content: '\e61e';
content: "\e61e";
}
.icon-gf-play-grafana-icon:before {
content: '\e629';
content: "\e629";
}
.icon-gf-grafana-icon:before {
content: '\e625';
content: "\e625";
}
.icon-gf-email:before {
content: '\e628';
content: "\e628";
}
.icon-gf-stopwatch:before {
content: '\e626';
content: "\e626";
}
.icon-gf-skull:before {
content: '\e900';
content: "\e900";
}
.icon-gf-probe:before {
content: '\e901';
content: "\e901";
}
.icon-gf-apps:before {
content: '\e902';
content: "\e902";
}
.icon-gf-scale:before {
content: '\e906';
content: "\e906";
}
.icon-gf-pending:before {
content: '\e909';
content: "\e909";
}
.icon-gf-verified:before {
content: '\e90a';
content: "\e90a";
}
.icon-gf-worldping:before {
content: '\e627';
content: "\e627";
}
.icon-gf-grafana_wordmark:before {
content: '\e903';
content: "\e903";
}
......@@ -291,9 +291,9 @@ select {
//
button,
html input[type='button'],
// 1 input[type='reset'],
input[type='submit'] {
html input[type="button"],
// 1 input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
......@@ -334,8 +334,8 @@ input {
// 2. Remove excess padding in IE 8/9/10.
//
input[type='checkbox'],
input[type='radio'] {
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
......@@ -346,8 +346,8 @@ input[type='radio'] {
// decrement button to change from `default` to `text`.
//
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
......@@ -355,7 +355,7 @@ input[type='number']::-webkit-outer-spin-button {
// Address `appearance` set to `searchfield` in Safari and Chrome.
//
input[type='search'] {
input[type="search"] {
-webkit-appearance: textfield;
}
......@@ -365,8 +365,8 @@ input[type='search'] {
// padding (and `textfield` appearance).
//
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
......
......@@ -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;
}
......@@ -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
......
......@@ -3,7 +3,8 @@
.#{$fa-css-prefix} {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base}
FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
......
......@@ -3,7 +3,8 @@
@mixin fa-icon() {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base}
FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
......@@ -11,14 +12,14 @@
}
@mixin fa-icon-rotate($degrees, $rotation) {
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})';
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert, $rotation) {
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)';
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-webkit-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
......
......@@ -2,13 +2,18 @@
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
font-family: "FontAwesome";
src: url("#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}");
src: url("#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}")
format("embedded-opentype"),
url("#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}")
format("woff2"),
url("#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}")
format("woff"),
url("#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}")
format("truetype"),
url("#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular")
format("svg");
// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
......
......@@ -5,13 +5,13 @@ $useDropShadow: false;
$attachmentOffset: 0%;
$easing: cubic-bezier(0, 0, 0.265, 1);
@include drop-theme('error', $popover-error-bg, $popover-color);
@include drop-theme('popover', $popover-bg, $popover-color, $popover-border-color);
@include drop-theme('help', $popover-help-bg, $popover-help-color);
@include drop-theme("error", $popover-error-bg, $popover-color);
@include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color);
@include drop-theme("help", $popover-help-bg, $popover-help-color);
@include drop-animation-scale('drop', 'help', $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale('drop', 'error', $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale('drop', 'popover', $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
.drop-element {
z-index: 10000;
......
......@@ -67,17 +67,17 @@
text-transform: uppercase;
&.online {
background-image: url('/img/online.svg');
background-image: url("/img/online.svg");
color: $online;
}
&.warn {
background-image: url('/img/warn-tiny.svg');
background-image: url("/img/warn-tiny.svg");
color: $warn;
}
&.critical {
background-image: url('/img/critical.svg');
background-image: url("/img/critical.svg");
color: $critical;
}
}
......
......@@ -25,7 +25,7 @@
display: inline-block;
padding-right: 2px;
&::after {
content: ' | ';
content: " | ";
padding-left: 2px;
}
}
......@@ -33,7 +33,7 @@
li:last-child {
&::after {
padding-left: 0;
content: '';
content: "";
}
}
}
......
......@@ -21,10 +21,10 @@
display: none;
}
&.json-formatter-object::after {
content: 'No properties';
content: "No properties";
}
&.json-formatter-array::after {
content: '[]';
content: "[]";
}
}
}
......@@ -87,7 +87,7 @@
&::after {
display: inline-block;
transition: transform $json-explorer-rotate-time ease-in;
content: '►';
content: "►";
}
}
......
......@@ -35,12 +35,12 @@ json-tree {
color: $variable;
padding: 5px 10px 5px 15px;
&::after {
content: ':';
content: ":";
}
}
json-node.expandable {
&::before {
content: '\25b6';
content: "\25b6";
position: absolute;
left: 0px;
font-size: 8px;
......
......@@ -52,7 +52,7 @@ $path-position: $marker-size-half - ($path-height / 2);
&::after {
right: -50%;
content: '';
content: "";
display: block;
position: absolute;
z-index: 1;
......@@ -105,7 +105,7 @@ $path-position: $marker-size-half - ($path-height / 2);
// change icon to check
.icon-gf::before {
content: '\e604';
content: "\e604";
}
}
.progress-text {
......
......@@ -69,7 +69,7 @@
cursor: move;
width: 1rem;
height: 100%;
background: url('../img/grab_dark.svg') no-repeat 50% 50%;
background: url("../img/grab_dark.svg") no-repeat 50% 50%;
background-size: 8px;
visibility: hidden;
position: absolute;
......
......@@ -33,7 +33,7 @@
text-align: center;
margin-right: 0.3rem;
padding: 3px 5px;
font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
line-height: 10px;
color: #555;
vertical-align: middle;
......
......@@ -64,8 +64,8 @@
}
input + label::before {
font-family: 'FontAwesome';
content: '\f096'; // square-o
font-family: "FontAwesome";
content: "\f096"; // square-o
color: $text-color-weak;
transition: transform 0.4s;
backface-visibility: hidden;
......@@ -73,11 +73,11 @@
}
input + label::after {
content: '\f046'; // check-square-o
content: "\f046"; // check-square-o
color: $orange;
text-shadow: $text-shadow-strong;
font-family: 'FontAwesome';
font-family: "FontAwesome";
transition: transform 0.4s;
transform: rotateY(180deg);
backface-visibility: hidden;
......
......@@ -44,13 +44,18 @@
&::before {
display: block;
content: ' ';
content: " ";
position: absolute;
left: 0;
right: 0;
height: 2px;
top: 0;
background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%);
background-image: linear-gradient(
to right,
#ffd500 0%,
#ff4400 99%,
#ff4400 100%
);
}
}
}
......@@ -103,10 +103,10 @@
}
.fa-chevron-left::before {
content: '\f053';
content: "\f053";
}
.fa-chevron-right::before {
content: '\f054';
content: "\f054";
}
.glyphicon-chevron-right {
......
......@@ -15,7 +15,7 @@
border: 1px solid $border-color;
&:before {
content: '';
content: "";
display: block;
position: absolute;
width: 0;
......@@ -88,7 +88,8 @@
left: $popover-arrow-size * 2;
}
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle
.drop-content {
margin-top: $popover-arrow-size;
&:before {
......@@ -98,7 +99,8 @@
}
}
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle
.drop-content {
margin-top: $popover-arrow-size;
&:before {
......@@ -108,7 +110,8 @@
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle
.drop-content {
margin-bottom: $popover-arrow-size;
&:before {
......@@ -118,7 +121,8 @@
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle
.drop-content {
margin-bottom: $popover-arrow-size;
&:before {
......@@ -129,7 +133,8 @@
}
// Top and bottom corners
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom
.drop-content {
margin-top: $popover-arrow-size;
&:before {
......@@ -139,7 +144,8 @@
}
}
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom
.drop-content {
margin-top: $popover-arrow-size;
&:before {
......@@ -149,7 +155,8 @@
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top
.drop-content {
margin-bottom: $popover-arrow-size;
&:before {
......@@ -159,7 +166,8 @@
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top
.drop-content {
margin-bottom: $popover-arrow-size;
&:before {
......@@ -170,7 +178,8 @@
}
// Side corners
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left
.drop-content {
margin-right: $popover-arrow-size;
&:before {
......@@ -180,7 +189,8 @@
}
}
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right
.drop-content {
margin-left: $popover-arrow-size;
&:before {
......@@ -190,7 +200,8 @@
}
}
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left
.drop-content {
margin-right: $popover-arrow-size;
&:before {
......@@ -200,7 +211,8 @@
}
}
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right
.drop-content {
margin-left: $popover-arrow-size;
&:before {
......@@ -212,7 +224,7 @@
}
}
@mixin drop-animation-scale($themePrefix: 'drop', $themeName: 'default', $attachmentOffset: 0, $easing: 'linear') {
@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") {
.#{$themePrefix}-element.#{$themePrefix}-#{$themeName} {
transform: translateZ(0);
transition: opacity 100ms;
......@@ -235,16 +247,20 @@
}
}
// Centers and middles
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center
.#{$themePrefix}-content {
transform-origin: 50% calc(100% + #{$attachmentOffset});
}
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center
.#{$themePrefix}-content {
transform-origin: 50% (-$attachmentOffset);
}
&.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
&.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle
.#{$themePrefix}-content {
transform-origin: calc(100% + #{$attachmentOffset}) 50%;
}
&.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
&.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle
.#{$themePrefix}-content {
transform-origin: -($attachmentOffset 50%);
}
// Top and bottom corners
......
......@@ -41,7 +41,8 @@
&:focus {
border-color: $input-border-focus;
outline: none;
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px $input-box-shadow-focus;
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 5px $input-box-shadow-focus;
@include box-shadow($shadow);
}
}
......
@mixin clearfix() {
&::after {
content: '';
content: "";
display: table;
clear: both;
}
......@@ -265,10 +265,20 @@
// 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);
}
}
......@@ -284,37 +294,66 @@
// 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);
......@@ -341,7 +380,11 @@
@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;
......
......@@ -84,11 +84,11 @@
background-color: $list-item-bg;
margin-bottom: 4px;
.search-result-icon:before {
content: '\f009';
content: "\f009";
}
&.search-item-dash-home .search-result-icon:before {
content: '\f015';
content: "\f015";
}
}
......
input[type='text'].ng-dirty.ng-invalid {
input[type="text"].ng-dirty.ng-invalid {
}
input.validation-error,
......
import { describe, beforeEach, it, expect } from 'test/lib/common';
import {describe, beforeEach, it, expect} from 'test/lib/common';
import { SemVersion, isVersionGtOrEq } from 'app/core/utils/version';
import {SemVersion, isVersionGtOrEq} from 'app/core/utils/version';
describe('SemVersion', () => {
describe("SemVersion", () => {
let version = '1.0.0-alpha.1';
describe('parsing', () => {
......@@ -23,13 +23,13 @@ describe('SemVersion', () => {
it('should detect greater version properly', () => {
let semver = new SemVersion(version);
let cases = [
{ value: '3.4.5', expected: true },
{ value: '3.4.4', expected: true },
{ value: '3.4.6', expected: false },
{ value: '4', expected: false },
{ value: '3.5', expected: false },
{value: '3.4.5', expected: true},
{value: '3.4.4', expected: true},
{value: '3.4.6', expected: false},
{value: '4', expected: false},
{value: '3.5', expected: false},
];
cases.forEach(testCase => {
cases.forEach((testCase) => {
expect(semver.isGtOrEq(testCase.value)).to.be(testCase.expected);
});
});
......@@ -38,16 +38,16 @@ describe('SemVersion', () => {
describe('isVersionGtOrEq', () => {
it('should compare versions properly (a >= b)', () => {
let cases = [
{ values: ['3.4.5', '3.4.5'], expected: true },
{ values: ['3.4.5', '3.4.4'], expected: true },
{ values: ['3.4.5', '3.4.6'], expected: false },
{ values: ['3.4', '3.4.0'], expected: true },
{ values: ['3', '3.0.0'], expected: true },
{ values: ['3.1.1-beta1', '3.1'], expected: true },
{ values: ['3.4.5', '4'], expected: false },
{ values: ['3.4.5', '3.5'], expected: false },
{values: ['3.4.5', '3.4.5'], expected: true},
{values: ['3.4.5', '3.4.4'] , expected: true},
{values: ['3.4.5', '3.4.6'], expected: false},
{values: ['3.4', '3.4.0'], expected: true},
{values: ['3', '3.0.0'], expected: true},
{values: ['3.1.1-beta1', '3.1'], expected: true},
{values: ['3.4.5', '4'], expected: false},
{values: ['3.4.5', '3.5'], expected: false},
];
cases.forEach(testCase => {
cases.forEach((testCase) => {
expect(isVersionGtOrEq(testCase.values[0], testCase.values[1])).to.be(testCase.expected);
});
});
......
......@@ -25,3 +25,7 @@ const context = (<any>require).context('../', true, /specs\.(tsx?|js)/);
for (let key of context.keys()) {
context(key);
}
declare var global: NodeJS.Global;
(<any>global).requestAnimationFrame = callback => {
(<any>global).requestAnimationFrame = (callback) => {
setTimeout(callback, 0);
};
var _global = <any>window;
var _global = <any>(window);
var beforeEach = _global.beforeEach;
var afterEach = _global.afterEach;
var before = _global.before;
......@@ -12,4 +12,13 @@ var angularMocks = {
inject: _global.inject,
};
export { beforeEach, afterEach, before, describe, it, sinon, expect, angularMocks };
export {
beforeEach,
afterEach,
before,
describe,
it,
sinon,
expect,
angularMocks,
};
export class BackendSrvMock {
search: any;
constructor() {}
constructor() {
}
}
import { describe, it, expect } from 'test/lib/common';
import {describe, it, expect} from 'test/lib/common';
import { GrafanaApp } from 'app/app';
import {GrafanaApp} from 'app/app';
describe('GrafanaApp', () => {
var app = new GrafanaApp();
it('can call inits', () => {
expect(app).to.not.be(null);
});
});
import _ from 'lodash';
import config from 'app/core/config';
import * as dateMath from 'app/core/utils/datemath';
import { angularMocks, sinon } from '../lib/common';
import { PanelModel } from 'app/features/dashboard/panel_model';
import {angularMocks, sinon} from '../lib/common';
import {PanelModel} from 'app/features/dashboard/panel_model';
export function ControllerTestContext() {
var self = this;
......@@ -42,8 +42,8 @@ export function ControllerTestContext() {
self.$location = $location;
self.$browser = $browser;
self.$q = $q;
self.panel = new PanelModel({ type: 'test' });
self.dashboard = { meta: {} };
self.panel = new PanelModel({type: 'test'});
self.dashboard = {meta: {}};
$rootScope.appEvent = sinon.spy();
$rootScope.onAppEvent = sinon.spy();
......@@ -53,14 +53,14 @@ export function ControllerTestContext() {
$rootScope.colors.push('#' + i);
}
config.panels['test'] = { info: {} };
config.panels['test'] = {info: {}};
self.ctrl = $controller(
Ctrl,
{ $scope: self.scope },
{$scope: self.scope},
{
panel: self.panel,
dashboard: self.dashboard,
}
},
);
});
};
......@@ -72,7 +72,7 @@ export function ControllerTestContext() {
self.$browser = $browser;
self.scope.contextSrv = {};
self.scope.panel = {};
self.scope.dashboard = { meta: {} };
self.scope.dashboard = {meta: {}};
self.scope.dashboardMeta = {};
self.scope.dashboardViewState = new DashboardViewStateStub();
self.scope.appEvent = sinon.spy();
......@@ -131,7 +131,7 @@ export function DashboardViewStateStub() {
export function TimeSrvStub() {
this.init = sinon.spy();
this.time = { from: 'now-1h', to: 'now' };
this.time = {from: 'now-1h', to: 'now'};
this.timeRange = function(parse) {
if (parse === false) {
return this.time;
......@@ -159,7 +159,7 @@ export function ContextSrvStub() {
export function TemplateSrvStub() {
this.variables = [];
this.templateSettings = { interpolate: /\[\[([\s\S]+?)\]\]/g };
this.templateSettings = {interpolate: /\[\[([\s\S]+?)\]\]/g};
this.data = {};
this.replace = function(text) {
return _.template(text, this.templateSettings)(this.data);
......@@ -188,7 +188,7 @@ var allDeps = {
TimeSrvStub: TimeSrvStub,
ControllerTestContext: ControllerTestContext,
ServiceTestContext: ServiceTestContext,
DashboardViewStateStub: DashboardViewStateStub,
DashboardViewStateStub: DashboardViewStateStub
};
// for legacy
......
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