diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bcc1af782..0d9a700750 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ ### Features ### UI Improvements + 1. [#1451](https://github.com/influxdata/chronograf/pull/1451): Refactor scrollbars to support non-webkit browsers + 1. [#1453](https://github.com/influxdata/chronograf/pull/1453): Give QueryMaker a greater initial height than Visualization ## v1.3.0 [2017-05-09] diff --git a/ui/package.json b/ui/package.json index 77a4d8929d..319bf096a2 100644 --- a/ui/package.json +++ b/ui/package.json @@ -101,6 +101,7 @@ "react": "^15.0.2", "react-addons-shallow-compare": "^15.0.2", "react-addons-update": "^15.1.0", + "react-custom-scrollbars": "^4.1.1", "react-dimensions": "^1.2.0", "react-dom": "^15.0.2", "react-grid-layout": "^0.13.9", diff --git a/ui/src/admin/containers/AdminPage.js b/ui/src/admin/containers/AdminPage.js index 3ed0989969..b3f02544ad 100644 --- a/ui/src/admin/containers/AdminPage.js +++ b/ui/src/admin/containers/AdminPage.js @@ -25,7 +25,8 @@ import { } from 'src/admin/actions' import AdminTabs from 'src/admin/components/AdminTabs' -import SourceIndicator from '../../shared/components/SourceIndicator' +import SourceIndicator from 'src/shared/components/SourceIndicator' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {publishAutoDismissingNotification} from 'shared/dispatchers' @@ -174,11 +175,19 @@ class AdminPage extends Component { +<<<<<<< HEAD
{users ?
+
+
+ {users + ? >>>>>> master users={users} roles={roles} source={source} @@ -203,10 +212,17 @@ class AdminPage extends Component { onUpdateUserRoles={this.handleUpdateUserRoles} onUpdateUserPassword={this.handleUpdateUserPassword} /> +<<<<<<< HEAD
:
}
+======= + : Loading...} +
+
+ +>>>>>>> master
) } diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index febcfa2fca..5a1de16ed4 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -1,8 +1,10 @@ import React, {PropTypes, Component} from 'react' -import SourceIndicator from '../../shared/components/SourceIndicator' -import AlertsTable from '../components/AlertsTable' -import NoKapacitorError from '../../shared/components/NoKapacitorError' + +import SourceIndicator from 'src/shared/components/SourceIndicator' +import AlertsTable from 'src/alerts/components/AlertsTable' +import NoKapacitorError from 'src/shared/components/NoKapacitorError' import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {getAlerts} from '../apis' import AJAX from 'utils/ajax' @@ -148,9 +150,21 @@ class AlertsApp extends Component { +<<<<<<< HEAD
{this.renderSubComponents()}
+======= + +
+
+
+ {this.renderSubComponents()} +
+
+
+ +>>>>>>> master ) } diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js index ab237b2bca..79e6c2d036 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.js +++ b/ui/src/dashboards/components/CellEditorOverlay.js @@ -12,7 +12,7 @@ import * as queryModifiers from 'src/utils/queryTransitions' import defaultQueryConfig from 'src/utils/defaultQueryConfig' import buildInfluxQLQuery from 'utils/influxql' import {getQueryConfig} from 'shared/apis' -import {MINIMUM_HEIGHTS} from 'src/data_explorer/constants' +import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants' import {removeUnselectedTemplateValues} from 'src/dashboards/constants' class CellEditorOverlay extends Component { @@ -159,6 +159,8 @@ class CellEditorOverlay extends Component { containerClass="resizer--full-size" minTopHeight={MINIMUM_HEIGHTS.visualization} minBottomHeight={MINIMUM_HEIGHTS.queryMaker} + initialTopHeight={INITIAL_HEIGHTS.visualization} + initialBottomHeight={INITIAL_HEIGHTS.queryMaker} > - - {cells.length - ? - :
-

This Dashboard has no Graphs

- -
} - + +
+ + {cells.length + ? + :
+

This Dashboard has no Graphs

+ +
} +
+ ) } diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index 1632b238f2..4535fcbbf1 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/ui/src/dashboards/containers/DashboardPage.js @@ -292,7 +292,7 @@ class DashboardPage extends Component { > {dashboards ? dashboards.map((d, i) => ( -
  • +
  • -

    +

    Dashboards

    @@ -72,7 +73,7 @@ const DashboardsPage = React.createClass({
    -
    +
    @@ -130,7 +131,7 @@ const DashboardsPage = React.createClass({
    -
    + ) }, diff --git a/ui/src/data_explorer/components/DatabaseList.js b/ui/src/data_explorer/components/DatabaseList.js index 044fd93d94..23ad6143a1 100644 --- a/ui/src/data_explorer/components/DatabaseList.js +++ b/ui/src/data_explorer/components/DatabaseList.js @@ -6,6 +6,8 @@ import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery' import showDatabasesParser from 'shared/parsing/showDatabases' import showRetentionPoliciesParser from 'shared/parsing/showRetentionPolicies' +import FancyScrollbar from 'shared/components/FancyScrollbar' + const {func, shape, string} = PropTypes const DatabaseList = React.createClass({ @@ -67,24 +69,26 @@ const DatabaseList = React.createClass({
    Databases
    - {this.state.namespaces.map(namespace => { - const {database, retentionPolicy} = namespace - const isActive = - database === query.database && - retentionPolicy === query.retentionPolicy + + {this.state.namespaces.map(namespace => { + const {database, retentionPolicy} = namespace + const isActive = + database === query.database && + retentionPolicy === query.retentionPolicy - return ( -
    - {database}.{retentionPolicy} -
    - ) - })} + return ( +
    + {database}.{retentionPolicy} +
    + ) + })} +
    ) diff --git a/ui/src/data_explorer/components/FieldList.js b/ui/src/data_explorer/components/FieldList.js index 47304ad7a7..45d8e4bb79 100644 --- a/ui/src/data_explorer/components/FieldList.js +++ b/ui/src/data_explorer/components/FieldList.js @@ -1,7 +1,8 @@ import React, {PropTypes} from 'react' -import FieldListItem from './FieldListItem' -import GroupByTimeDropdown from './GroupByTimeDropdown' +import FieldListItem from 'src/data_explorer/components/FieldListItem' +import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {showFieldKeys} from 'shared/apis/metaQuery' import showFieldKeysParser from 'shared/parsing/showFieldKeys' @@ -109,21 +110,23 @@ const FieldList = React.createClass({ return (
    - {this.state.fields.map(fieldFunc => { - const selectedField = this.props.query.fields.find( - f => f.field === fieldFunc.field - ) - return ( - - ) - })} + + {this.state.fields.map(fieldFunc => { + const selectedField = this.props.query.fields.find( + f => f.field === fieldFunc.field + ) + return ( + + ) + })} +
    ) }, diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/data_explorer/components/MeasurementList.js index 737cca9045..f4b7f68c83 100644 --- a/ui/src/data_explorer/components/MeasurementList.js +++ b/ui/src/data_explorer/components/MeasurementList.js @@ -3,7 +3,9 @@ import classnames from 'classnames' import {showMeasurements} from 'shared/apis/metaQuery' import showMeasurementsParser from 'shared/parsing/showMeasurements' -import TagList from './TagList' + +import TagList from 'src/data_explorer/components/TagList' +import FancyScrollbar from 'shared/components/FancyScrollbar' const {func, shape, string} = PropTypes @@ -119,52 +121,54 @@ const MeasurementList = React.createClass({ return (
    - {measurements.map(measurement => { - const isActive = measurement === this.props.query.measurement - const numTagsActive = Object.keys(this.props.query.tags).length + + {measurements.map(measurement => { + const isActive = measurement === this.props.query.measurement + const numTagsActive = Object.keys(this.props.query.tags).length - return ( -
    {} - : () => this.props.onChooseMeasurement(measurement) - } - > + return (
    {} + : () => this.props.onChooseMeasurement(measurement) + } > - -
    - {measurement} - - {isActive && numTagsActive >= 1 - ?
    -
    -
    !=
    -
    =
    +
    + +
    + {measurement} + + {isActive && numTagsActive >= 1 + ?
    +
    +
    !=
    +
    =
    +
    -
    + : null} +
    + {isActive + ? : null}
    - {isActive - ? - : null} -
    - ) - })} + ) + })} +
    ) }, diff --git a/ui/src/data_explorer/constants/index.js b/ui/src/data_explorer/constants/index.js index fc81f5f7b6..cb8a0800a0 100644 --- a/ui/src/data_explorer/constants/index.js +++ b/ui/src/data_explorer/constants/index.js @@ -15,6 +15,10 @@ export const MINIMUM_HEIGHTS = { queryMaker: 350, visualization: 200, } +export const INITIAL_HEIGHTS = { + queryMaker: '66.666%', + visualization: '33.334%', +} const SEPARATOR = 'SEPARATOR' diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js index 1b6c7ebf70..4dfd45b030 100644 --- a/ui/src/data_explorer/containers/DataExplorer.js +++ b/ui/src/data_explorer/containers/DataExplorer.js @@ -10,7 +10,7 @@ import Header from '../containers/Header' import ResizeContainer from 'src/shared/components/ResizeContainer' import {VIS_VIEWS} from 'src/shared/constants' -import {MINIMUM_HEIGHTS} from '../constants' +import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from '../constants' import {setAutoRefresh} from 'shared/actions/app' import * as viewActions from 'src/data_explorer/actions/view' @@ -93,6 +93,8 @@ const DataExplorer = React.createClass({ containerClass="page-contents" minTopHeight={MINIMUM_HEIGHTS.queryMaker} minBottomHeight={MINIMUM_HEIGHTS.visualization} + initialTopHeight={INITIAL_HEIGHTS.queryMaker} + initialBottomHeight={INITIAL_HEIGHTS.visualization} > +

    diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index 2bfd28f47b..459eccaf49 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -7,6 +7,8 @@ import classnames from 'classnames' import LayoutRenderer from 'shared/components/LayoutRenderer' import DashboardHeader from 'src/dashboards/components/DashboardHeader' +import FancyScrollbar from 'shared/components/FancyScrollbar' + import timeRanges from 'hson!../../shared/data/timeRanges.hson' import { getMappings, @@ -199,16 +201,14 @@ export const HostPage = React.createClass({ ) })} -
    +
    {layouts.length > 0 ? this.renderLayouts(layouts) : ''}
    -
    +

    ) }, diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index 66b8c4214b..94785de387 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -1,7 +1,10 @@ import React, {PropTypes} from 'react' import _ from 'lodash' -import HostsTable from '../components/HostsTable' -import SourceIndicator from '../../shared/components/SourceIndicator' + +import HostsTable from 'src/hosts/components/HostsTable' +import FancyScrollbar from 'shared/components/FancyScrollbar' +import SourceIndicator from 'src/shared/components/SourceIndicator' + import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis' export const HostsPage = React.createClass({ @@ -87,7 +90,7 @@ export const HostsPage = React.createClass({
    -
    +
    @@ -100,7 +103,7 @@ export const HostsPage = React.createClass({
    -
    +
    ) }, diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js index d2fcca0e9f..4a6a66dfeb 100644 --- a/ui/src/kapacitor/components/KapacitorForm.js +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -1,5 +1,7 @@ import React, {Component, PropTypes} from 'react' -import AlertTabs from './AlertTabs' + +import AlertTabs from 'src/kapacitor/components/AlertTabs' +import FancyScrollbar from 'shared/components/FancyScrollbar' class KapacitorForm extends Component { render() { @@ -17,7 +19,7 @@ class KapacitorForm extends Component {
    -
    +
    @@ -100,7 +102,7 @@ class KapacitorForm extends Component {
    -
    + ) } diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index e04a08c9d6..08a0b03789 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -1,9 +1,12 @@ import React, {PropTypes} from 'react' -import DataSection from '../components/DataSection' -import ValuesSection from '../components/ValuesSection' + +import DataSection from 'src/kapacitor/components/DataSection' +import ValuesSection from 'src/kapacitor/components/ValuesSection' import RuleHeader from 'src/kapacitor/components/RuleHeader' import RuleGraph from 'src/kapacitor/components/RuleGraph' import RuleMessage from 'src/kapacitor/components/RuleMessage' +import FancyScrollbar from 'shared/components/FancyScrollbar' + import {createRule, editRule} from 'src/kapacitor/apis' import buildInfluxQLQuery from 'utils/influxql' import timeRanges from 'hson!../../shared/data/timeRanges.hson' @@ -57,7 +60,7 @@ export const KapacitorRule = React.createClass({ timeRange={timeRange} source={source} /> -
    +
    @@ -89,7 +92,7 @@ export const KapacitorRule = React.createClass({
    -
    + ) }, diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index a6d4027ceb..05f710dd19 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -1,9 +1,10 @@ import React, {PropTypes} from 'react' import {Link} from 'react-router' -import NoKapacitorError from '../../shared/components/NoKapacitorError' -import SourceIndicator from '../../shared/components/SourceIndicator' +import NoKapacitorError from 'src/shared/components/NoKapacitorError' +import SourceIndicator from 'src/shared/components/SourceIndicator' import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable' +import FancyScrollbar from 'shared/components/FancyScrollbar' const KapacitorRules = ({ source, @@ -62,7 +63,7 @@ const PageContents = ({children, source}) => ( -
    +
    @@ -72,7 +73,7 @@ const PageContents = ({children, source}) => (
    -
    + ) diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js index 47913a524b..19655adce2 100644 --- a/ui/src/kapacitor/components/RuleHeader.js +++ b/ui/src/kapacitor/components/RuleHeader.js @@ -112,7 +112,7 @@ export const RuleHeader = React.createClass({ placeholder="Name your rule" /> :

    +
    self.toggleMenu()} @@ -55,14 +55,14 @@ const AutoRefreshDropdown = React.createClass({ +milliseconds > 0 ? 'refresh' : 'pause' )} /> - {inputValue} + {inputValue}
    -
    - {isOpen - ?
      - {items.map((item, i) => { - if (item.text === 'SEPARATOR') { - return
    • - } - return ( -
    • - this.handleSelection(item)}> - {item.text} - - {actions.length > 0 - ?
      - {actions.map(action => { - return ( - - ) - })} -
      - : null} -
      • - ) - })} - {addNew - ?
    • - - {addNew.text} - -
      • - : null} -
    + {(isOpen && items.length < DROPDOWN_MENU_ITEM_THRESHOLD) + ? this.renderShortMenu() + : null} + {(isOpen && items.length >= DROPDOWN_MENU_ITEM_THRESHOLD) + ? this.renderLongMenu() : null} ) @@ -152,6 +217,7 @@ Dropdown.propTypes = { buttonSize: string, buttonColor: string, menuWidth: string, + menuLabel: string, } export default OnClickOutside(Dropdown) diff --git a/ui/src/shared/components/FancyScrollbar.js b/ui/src/shared/components/FancyScrollbar.js new file mode 100644 index 0000000000..6b0db459c9 --- /dev/null +++ b/ui/src/shared/components/FancyScrollbar.js @@ -0,0 +1,42 @@ +import React, {Component, PropTypes} from 'react' +import classnames from 'classnames' +import {Scrollbars} from 'react-custom-scrollbars' + +class FancyScrollbar extends Component { + constructor(props) { + super(props) + } + + static defaultProps = { + autoHide: true, + } + + render() { + const {autoHide, children, className} = this.props + + return ( +
    } + renderTrackVertical={props =>
    } + renderThumbHorizontal={props =>
    } + renderThumbVertical={props =>
    } + > + {children} + + ) + } +} + +const {bool, node, string} = PropTypes + +FancyScrollbar.propTypes = { + children: node.isRequired, + className: string, + autoHide: bool, +} + +export default FancyScrollbar diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 996094a80c..cb3fb19baf 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -1,47 +1,47 @@ -import React, {PropTypes} from 'react' -import ResizeHandle from 'shared/components/ResizeHandle' +import React, {Component, PropTypes} from 'react' import classnames from 'classnames' -const {node, number, string} = PropTypes +import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 -const minimumTopHeight = 200 -const minimumBottomHeight = 200 +const defaultMinTopHeight = 200 +const defaultMinBottomHeight = 200 +const defaultInitialTopHeight = '50%' +const defaultInitialBottomHeight = '50%' -const ResizeContainer = React.createClass({ - propTypes: { - children: node.isRequired, - containerClass: string.isRequired, - minTopHeight: number, - minBottomHeight: number, - }, - - getDefaultProps() { - return { - minTopHeight: minimumTopHeight, - minBottomHeight: minimumBottomHeight, - } - }, - - getInitialState() { - return { - topHeight: '60%', - bottomHeight: '40%', +class ResizeContainer extends Component { + constructor(props) { + super(props) + this.state = { isDragging: false, + topHeight: props.initialTopHeight, + bottomHeight: props.initialBottomHeight, } - }, - handleStopDrag() { - this.setState({isDragging: false}) - }, + this.handleStartDrag = ::this.handleStartDrag + this.handleStopDrag = ::this.handleStopDrag + this.handleMouseLeave = ::this.handleMouseLeave + this.handleDrag = ::this.handleDrag + } + + static defaultProps = { + minTopHeight: defaultMinTopHeight, + minBottomHeight: defaultMinBottomHeight, + initialTopHeight: defaultInitialTopHeight, + initialBottomHeight: defaultInitialBottomHeight, + } handleStartDrag() { this.setState({isDragging: true}) - }, + } + + handleStopDrag() { + this.setState({isDragging: false}) + } handleMouseLeave() { this.setState({isDragging: false}) - }, + } handleDrag(e) { if (!this.state.isDragging) { @@ -71,7 +71,8 @@ const ResizeContainer = React.createClass({ } const topHeightPixels = newTopPanelPercent / oneHundred * containerHeight - const bottomHeightPixels = newBottomPanelPercent / oneHundred * containerHeight + const bottomHeightPixels = + newBottomPanelPercent / oneHundred * containerHeight // Don't trigger a resize if the new sizes are too small if ( @@ -85,31 +86,24 @@ const ResizeContainer = React.createClass({ topHeight: `${newTopPanelPercent}%`, bottomHeight: `${newBottomPanelPercent}%`, }) - }, - - renderHandle() { - const {isDragging, topHeight} = this.state - return ( - - ) - }, + } render() { const {topHeight, bottomHeight, isDragging} = this.state const {containerClass, children} = this.props if (React.Children.count(children) > maximumNumChildren) { - console.error(`There cannot be more than ${maximumNumChildren}' children in ResizeContainer`) + console.error( + `There cannot be more than ${maximumNumChildren}' children in ResizeContainer` + ) return } return (
    {React.cloneElement(children[0])}
    - {this.renderHandle()} -
    + +
    {React.cloneElement(children[1])}
    ) - }, -}) + } +} + +const {node, number, string} = PropTypes + +ResizeContainer.propTypes = { + children: node.isRequired, + containerClass: string.isRequired, + minTopHeight: number, + minBottomHeight: number, + initialTopHeight: string, + initialBottomHeight: string, +} export default ResizeContainer diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js index 0fab5289bb..c6cf9a2ded 100644 --- a/ui/src/shared/components/TimeRangeDropdown.js +++ b/ui/src/shared/components/TimeRangeDropdown.js @@ -1,9 +1,10 @@ import React from 'react' import classnames from 'classnames' -import OnClickOutside from 'shared/components/OnClickOutside' - import moment from 'moment' +import OnClickOutside from 'shared/components/OnClickOutside' +import FancyScrollbar from 'shared/components/FancyScrollbar' + import timeRanges from 'hson!../data/timeRanges.hson' const TimeRangeDropdown = React.createClass({ @@ -55,28 +56,30 @@ const TimeRangeDropdown = React.createClass({ const {isOpen} = self.state return ( -
    +
    self.toggleMenu()} > - + {self.findTimeRangeInputValue(selected)}
    -
    ) diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js index f7867058b0..48aeb02b81 100644 --- a/ui/src/shared/constants/index.js +++ b/ui/src/shared/constants/index.js @@ -379,6 +379,9 @@ export const STROKE_WIDTH = { light: 1.5, } +export const DROPDOWN_MENU_MAX_HEIGHT = '270px' +export const DROPDOWN_MENU_ITEM_THRESHOLD = 10 + export const HEARTBEAT_INTERVAL = 10000 // ms export const PRESENTATION_MODE_ANIMATION_DELAY = 0 // In milliseconds. diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js index 85ad68afbc..95e1157cbb 100644 --- a/ui/src/sources/components/InfluxTable.js +++ b/ui/src/sources/components/InfluxTable.js @@ -34,7 +34,7 @@ const kapacitorDropdown = ( return (
    -
    +
    -
    +
    ) } diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js index 12300cc5e5..aeb9b93563 100644 --- a/ui/src/sources/containers/SourcePage.js +++ b/ui/src/sources/containers/SourcePage.js @@ -9,7 +9,8 @@ import { import {connect} from 'react-redux' import SourceForm from 'src/sources/components/SourceForm' -import SourceIndicator from '../../shared/components/SourceIndicator' +import FancyScrollbar from 'shared/components/FancyScrollbar' +import SourceIndicator from 'src/shared/components/SourceIndicator' const {func, shape, string} = PropTypes @@ -128,7 +129,7 @@ export const SourcePage = React.createClass({
    -
    +
    @@ -144,7 +145,7 @@ export const SourcePage = React.createClass({
    -
    + ) }, diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 25ad4af5a5..43a68392d1 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -46,6 +46,7 @@ @import 'components/source-indicator'; @import 'components/tables'; @import 'components/function-selector'; +@import 'components/fancy-scrollbars'; // Pages diff --git a/ui/src/style/components/dropdown.scss b/ui/src/style/components/dropdown.scss index d366176c2d..4e96bc0b40 100644 --- a/ui/src/style/components/dropdown.scss +++ b/ui/src/style/components/dropdown.scss @@ -6,7 +6,7 @@ */ $dropdown-menu-default-width: 100%; -$dropdown-menu-max-height: 290px; +$dropdown-menu-max-height: 270px; /* Generic width modifiers @@ -39,6 +39,8 @@ $dropdown-menu-max-height: 290px; .dropdown-toggle { position: relative; text-align: left; + display: flex; + align-items: center; .caret { position: absolute; @@ -47,13 +49,23 @@ $dropdown-menu-max-height: 290px; transform: translateY(-50%); } > .icon { - font-size: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; - position: relative; - top: -1px; } + .dropdown-selected { + display: inline-block; + flex: 1 0 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 15px; + } +} +.dropdown .dropdown-toggle.btn-xs { + height: 22px !important; + line-height: 22px !important; + padding: 0 9px !important; } /* @@ -61,27 +73,26 @@ $dropdown-menu-max-height: 290px; ---------------------------------------------- */ .dropdown-menu { - float: none !important; width: $dropdown-menu-default-width; - min-width: $dropdown-menu-default-width; - max-width: $dropdown-menu-default-width; - margin: 0 !important; - padding: 0 !important; + min-width: initial; + margin: 0; + padding: 0; + overflow: hidden; max-height: $dropdown-menu-max-height; - overflow: auto; - @include custom-scrollbar-round($c-pool, $c-laser); @include gradient-h($c-ocean, $c-pool); box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); - > li { + li.dropdown-item { + position: relative; width: 100%; - font-size: 0px; &:hover { @include gradient-h($c-laser, $c-pool); } } - > li > a { + li.dropdown-item > a { + position: relative; + @include no-user-select(); width: 100%; border-radius: 0 !important; display: inline-block; @@ -107,12 +118,6 @@ $dropdown-menu-max-height: 290px; @include gradient-h($c-ocean, $c-pool); } } - > li:last-child a { - border-radius: 0 0 3px 3px; - } - > li:first-child a { - border-radius: 3px 3px 0 0; - } } .dropdown.dropdown-kapacitor .dropdown-toggle { color: $c-rainforest !important; @@ -123,10 +128,10 @@ $dropdown-menu-max-height: 290px; @include custom-scrollbar($c-rainforest, $c-honeydew); @include gradient-h($c-pool, $c-rainforest); - > li:hover { + li.dropdown-item:hover { @include gradient-h($c-laser, $c-rainforest); } - > li > a { + li.dropdown-item > a { color: $c-mint !important; &:hover { color: $g20-white !important; @@ -137,10 +142,10 @@ $dropdown-menu-max-height: 290px; @include custom-scrollbar($c-comet, $c-potassium); @include gradient-h($c-ocean, $c-comet); - > li:hover { + li.dropdown-item:hover { @include gradient-h($c-laser, $c-comet); } - > li > a { + li.dropdown-item > a { color: $c-twilight !important; &:hover { color: $g20-white !important; @@ -175,14 +180,6 @@ $dropdown-menu-max-height: 290px; Dropdown Actions ---------------------------------------------- */ -.dropdown-item { - position: relative; - - > a { - position: relative; - z-index: 1; - } -} .dropdown-item__actions { z-index: 2; position: absolute; diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss new file mode 100644 index 0000000000..b9239adda6 --- /dev/null +++ b/ui/src/style/components/fancy-scrollbars.scss @@ -0,0 +1,65 @@ +/* + Fancy Scrollbars + ------------------------------------------------------ +*/ + +$scrollbar-track-size: 12px; +$scrollbar-thumb-size: 6px; + +$scrollbar-color-a: $c-pool; +$scrollbar-color-b: $c-comet; + +.fancy-scroll--track-h, +.fancy-scroll--track-v { + &:hover {cursor: pointer;} +} +/* Horizontal Scrollbar Styles */ +.fancy-scroll--track-h { + padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2; + width: 100%; + height: $scrollbar-track-size !important; + bottom: 0; + left: 0; +} +.fancy-scroll--thumb-h { + height: $scrollbar-thumb-size !important; + border-radius: ($scrollbar-thumb-size / 2); + @include gradient-h($scrollbar-color-a,$scrollbar-color-b); +} +/* Vertical Scrollbar Styles */ +.fancy-scroll--track-v { + padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2; + width: $scrollbar-track-size !important; + height: 100%; + top: 0; + right: 0; +} +.fancy-scroll--thumb-v { + width: $scrollbar-thumb-size !important; + border-radius: ($scrollbar-thumb-size / 2); + @include gradient-v($scrollbar-color-a,$scrollbar-color-b); +} + +/* Kapacitor Theme Scrollbars */ +$scrollbar-color-kap-a: $c-rainforest; +$scrollbar-color-kap-b: $c-pool; + +.fancy-scroll--kapacitor { + .fancy-scroll--thumb-h { @include gradient-h($scrollbar-color-kap-a,$scrollbar-color-kap-b); } + .fancy-scroll--thumb-v { @include gradient-v($scrollbar-color-kap-a,$scrollbar-color-kap-b); } +} + +/* Dropdown Theme Scrollbars */ +ul.dropdown-menu { + .fancy-scroll--thumb-h { @include gradient-h($c-neutrino,$c-laser); } + .fancy-scroll--thumb-v { @include gradient-v($c-neutrino,$c-laser); } +} + +/* Hacky Fix to make this work in Safari */ +.query-builder--list { + position: relative; + + .fancy-scroll--container { + position: absolute !important; + } +} \ No newline at end of file diff --git a/ui/src/style/components/query-builder.scss b/ui/src/style/components/query-builder.scss index 66e920acba..29d65a1197 100644 --- a/ui/src/style/components/query-builder.scss +++ b/ui/src/style/components/query-builder.scss @@ -43,10 +43,6 @@ } .query-builder--list { padding: 0; - overflow: auto; - overflow-x: hidden; - overflow-y: scroll; - @include custom-scrollbar($query-builder--list-bg,$c-pool); background-color: $query-builder--list-bg; } .query-builder--list-empty { diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index 09c3e0b911..85dfeb3b4c 100644 --- a/ui/src/style/components/tables.scss +++ b/ui/src/style/components/tables.scss @@ -85,7 +85,7 @@ table .monotype { background-color: $c-pool; } &.dot-warning { - background-color: $c-comet; + background-color: $c-pineapple; } &.dot-danger { background-color: $c-dreamsicle; diff --git a/ui/src/style/components/template-control-bar.scss b/ui/src/style/components/template-control-bar.scss index 75925673fc..f6e3b70dc7 100644 --- a/ui/src/style/components/template-control-bar.scss +++ b/ui/src/style/components/template-control-bar.scss @@ -59,14 +59,15 @@ $template-control--min-height: 52px; @include gradient-h($c-star,$c-pool); @include custom-scrollbar-round($c-pool,$c-laser); - > li > a { - &, &:active {background-color: transparent !important;} + li.dropdown-item { + &:hover {@include gradient-h($c-comet,$c-pool);} + } + li.dropdown-item > a { + &, &:focus {background: none;} + &:active, &:active:focus {@include gradient-h($c-amethyst,$c-pool);} font-size: 12px; font-family: $code-font; } - > li { - &:hover {@include gradient-h($c-comet,$c-pool);} - } } } .template-control--label { diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss index 816e0f8a22..be82b99d38 100644 --- a/ui/src/style/layout/page-header.scss +++ b/ui/src/style/layout/page-header.scss @@ -5,11 +5,10 @@ $page-header-size: 19px; $page-header-weight: 400 !important; - .page-header { height: $chronograf-page-header-height; width: 100%; - padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding; + padding: 0 $page-wrapper-padding; display: flex; justify-content: center; align-items: center; @@ -20,6 +19,9 @@ $page-header-weight: 400 !important; border: none; margin: 0; } +.page-header.full-width .page-header__container { + max-width: 100%; +} .page-header__container { width: 100%; display: flex; @@ -50,16 +52,6 @@ $page-header-weight: 400 !important; margin: 0 0 0 4px; } } -.page-header.full-width .page-header__container { - max-width: 100%; -} -.page-header.full-width-no-scrollbar { - padding-right: $page-wrapper-padding; - - .page-header__container { - max-width: 100%; - } -} .page-header__title { text-transform: none; font-size: $page-header-size; diff --git a/ui/src/style/layout/page.scss b/ui/src/style/layout/page.scss index c5d3494c61..51680d3cec 100644 --- a/ui/src/style/layout/page.scss +++ b/ui/src/style/layout/page.scss @@ -16,26 +16,15 @@ flex-grow: 1; } .page-contents { - position: absolute; + position: absolute !important; top: $chronograf-page-header-height; left: 0; width: 100%; - height: calc(100% - #{$chronograf-page-header-height}); - overflow: auto; - overflow-x: hidden; - overflow-y: scroll; - @include custom-scrollbar($g2-kevlar,$c-pool); + height: calc(100% - #{$chronograf-page-header-height}) !important; @include gradient-v($g2-kevlar,$g0-obsidian); - - &--green-scrollbar { - @include custom-scrollbar($g2-kevlar,$c-rainforest); - } - &--purple-scrollbar { - @include custom-scrollbar($g2-kevlar,$c-comet); - } } .container-fluid { - padding: ($chronograf-page-header-height / 2) $page-wrapper-padding ($chronograf-page-header-height / 2) $page-wrapper-padding; + padding: ($chronograf-page-header-height / 2) $page-wrapper-padding; max-width: $page-wrapper-max-width; &.full-width { @@ -43,416 +32,11 @@ } } -/* - Page Header - ---------------------------------------------- -*/ -.page-header { - height: $chronograf-page-header-height; - width: 100%; - padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding; - display: flex; - justify-content: center; - align-items: center; - position: absolute; +/* Presentation Mode */ +.page-contents.presentation-mode { top: 0; - left: 0; - background-color: $g0-obsidian; - border: none; - margin: 0; - - &__container { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - max-width: ($page-wrapper-max-width - $page-wrapper-padding - $page-wrapper-padding); - } - h1 { - text-transform: uppercase; - font-size: 17px; - font-weight: 400; - margin: 0; - display: inline-block; - vertical-align: middle; - } - &__left, - &__right { - display: flex; - align-items: center; - - > *:only-child { - margin: 0; - } - } - &__left { - > * { - margin: 0 4px 0 0; - } - } - &__right { - > * { - margin: 0 0 0 4px; - } - } - &.full-width .page-header__container { - max-width: 100%; - } -} - -/* - Custom Search Widget - ---------------------------------------------- -*/ -.users__search-widget { - position: relative; - - input.form-control { - position: relative; - width: 100%; - z-index: 1; - padding-left: 34px; - border-radius: 4px !important; - - &:focus + .input-group-addon { - color: $c-pool; - } - } - .input-group-addon { - padding: 0; - text-align: center; - line-height: 38px; - position: absolute; - color: $g10-wolf; - top: 0; - left: 0; - height: 100%; - z-index: 4; - border: 0; - width: 40px; - background-color: transparent; - transition: - color 0.25s ease; - } -} - -/* - Unsorted - ---------------------------------------------- -*/ -.select-source-page { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: auto; - @include custom-scrollbar($g2-kevlar, $c-pool); - @include gradient-v($g2-kevlar, $g0-obsidian); -} -.text-right .btn { - margin: 0 0 0 4px; -} -.text-center .btn { - margin: 0 2px; -} -.default-source-label { - display: inline-block; - vertical-align: middle; - font-size: 13px; - font-weight: 500; - background-color: $g5-pepper; - color: $c-pool; - border-radius: 3px; - padding: 2px 6px; - margin-left: 4px; -} -.progress-label { - margin-bottom: 4px; - color: $g11-sidewalk; - width: 100%; - - strong { - font-weight: 500; - color: $g8-storm; - } -} -.btn-block.dropdown-toggle { - text-align: left; - position: relative; - - .caret { - position: absolute; - top: 50%; - right: 18px; - transform: translateY(-50%); - } - - & + .dropdown-menu { - width: 100%; - } -} -.modal { - form { - padding: 0; - margin: 0; - background-color: transparent; - } - .form-grid { - width: 100%; - display: inline-block; - - &.padding-top { - padding-top: 15px; - } - } -} - -/* - Custom Tabs - ---------------------------------------------- -*/ -.tab-group { - display: flex; - justify-content: flex-start; - margin-bottom: 20px; - display: inline-block; - - .btn.tab { - border: 2px solid $g17-whisper; - border-right-width: 0; - padding: 10px 20px; - margin: 0 !important; - font-weight: 400; - color: $g11-sidewalk; - background-color: $g17-whisper; - box-shadow: none; - transition: - color 0.25s ease, - background-color 0.25s ease; - - &:hover { - cursor: pointer; - background-color: $g18-cloud; - color: $g9-mountain; - } - - &:first-child { - border-radius: 5px 0 0 5px; - } - - &:last-child { - border-radius: 0 5px 5px 0; - border-right-width: 2px; - } - &.active { - background-color: white; - color: $g8-storm; - } - } -} - - -/* - Error Pages - ---------------------------------------------- -*/ -.panel-error { - margin-top: $page-wrapper-padding; - margin-bottom: $page-wrapper-padding; -} -table.table.error-table { - margin-bottom: 0; - .label { - padding: 4px 7px; - font-size: 14px; - font-weight: 700; - } - tbody { - td { - border: none; - } - } - tbody tr:nth-child(odd) { - background-color: $g19-ghost; - td:last-child { - background-color: $g5-pepper; - } - } - tbody tr:nth-child(even) { - background-color: $g18-cloud; - td:last-child { - background-color: $g4-onyx; - } - } - pre { - border: none; - background-color: transparent; - color: $c-moonstone; - font-weight: 600; - border-radius: 0; - padding: 4px; - } -} - -/* - Generic Empty State - ---------------------------------------------- -*/ -.generic-empty-state { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: $g12-forge; - padding: 20px 0; - - .icon { - margin-bottom: 11px; - } -} - -/* - Static Form Controls - ---------------------------------------------- -*/ -$form-static-checkbox-size: 16px; -.form-control-static { - border: 2px solid $g5-pepper; - height: auto; - border-radius: 4px; - padding: 7px 12px; - position: relative; - - input[type="checkbox"] { - position: relative; - left: -9999px; - visibility: hidden; - width: 0; - height: 0; - margin: 0; - - // Faux Checkbox - & + label { - font-size: 14px !important; - line-height: 16px; - color: $g11-sidewalk; - font-weight: 500; - transition: color 0.25s ease; - margin: 0; - padding: 0 0 0 (12px + $form-static-checkbox-size + 6px); - user-select: none; - -ms-user-select: none; - -moz-user-selct: none; - -webkit-user-select: none; - - &:before { - content: ''; - position: absolute; - top: 50%; - left: 12px; - transform: translateY(-50%); - width: $form-static-checkbox-size; - height: $form-static-checkbox-size; - background-color: $g2-kevlar; - border: 2px solid $g5-pepper; - border-radius: 3px; - z-index: 2; - transition: - border-color 0.25s ease; - } - &:after { - content: ''; - position: absolute; - top: 50%; - left: (12px + ($form-static-checkbox-size / 2)); - transform: translate(-50%,-50%) scale(2,2); - opacity: 0; - width: 6px; - height: 6px; - border-radius: 50%; - background-color: $c-pool; - z-index: 3; - transition: - opacity 0.25s ease, - transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - &:hover { - cursor: pointer; - color: $g20-white; - - &:before { - border-color: $g6-smoke; - } - } - } - // Faux Checkbox (Checked) - &:checked + label { - color: $g20-white; - - &:after { - opacity: 1; - transform: translate(-50%,-50%) scale(1,1); - } - } - } -} - -/* - Stuff for making Tables of Data more readable - ---------------------------------------------- -*/ -table .monotype { - font-family: 'RobotoMono', monospace !important; - letter-spacing: 0.69px; - font-size: 12px; - font-weight: 500; - color: $g9-mountain; -} -.table-dot { - display: inline-block; - width: 12px; - height: 12px; - border-radius: 50%; - background-color: $g17-whisper; - - &.dot-success { - background-color: $c-rainforest; - } - &.dot-primary { - background-color: $c-pool; - } - &.dot-warning { - background-color: $c-comet; - } - &.dot-danger { - background-color: $c-dreamsicle; - } - &.dot-critical { - background-color: $c-fire; - } -} - -/* - Empty State for Tables - ---------------------------------------------- -*/ -.table-empty-state { - > th { - text-align: center; - - > p { - font-weight: 400; - font-size: 18px; - color: $g9-mountain; - margin-bottom: 16px; - } - > *:first-child { - margin-top: 75px; - } - > *:last-child { - margin-bottom: 75px; - } - } -} + height: 100% !important; + + .container-fluid {padding: 8px !important;} + .template-control--manage {display: none;} +} \ No newline at end of file diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss index e93b9d85a5..342d8a28c9 100644 --- a/ui/src/style/layout/sidebar.scss +++ b/ui/src/style/layout/sidebar.scss @@ -58,11 +58,7 @@ $sidebar-logo-color: $g8-storm; display: flex; flex-direction: column; width: $sidebar-width; - background: $sidebar-light; - background: -moz-linear-gradient(top, $sidebar-light 0%, $sidebar-dark 100%); - background: -webkit-linear-gradient(top, $sidebar-light 0%,$sidebar-dark 100%); - background: linear-gradient(to bottom, $sidebar-light 0%,$sidebar-dark 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$sidebar-light', endColorstr='$sidebar-dark',GradientType=0 ); + @include gradient-v($sidebar-light,$sidebar-dark); &__logo { width: $sidebar-width; @@ -283,11 +279,7 @@ $sidebar-logo-color: $g8-storm; } } &.active { - background: $sidebar-active-bg; - background: -moz-linear-gradient(left, $sidebar-active-bg 0%, $sidebar-active-accent 100%); - background: -webkit-linear-gradient(left, $sidebar-active-bg 0%,$sidebar-active-accent 100%); - background: linear-gradient(to right, $sidebar-active-bg 0%,$sidebar-active-accent 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$sidebar-active-bg', endColorstr='$sidebar-active-accent',GradientType=1 ); + @include gradient-h($sidebar-active-bg,$sidebar-active-accent); color: $sidebar-icon-hover; &:link, diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss index 89f4d98084..088ef542a2 100644 --- a/ui/src/style/pages/dashboards.scss +++ b/ui/src/style/pages/dashboards.scss @@ -41,18 +41,6 @@ $dash-graph-options-arrow: 8px; } .dashboard { - &.container-fluid.full-width.page-contents { - padding-top: 8px; - } - &.presentation-mode { - top: 0; - height: 100%; - padding: 12px; - - .template-control--manage { - display: none; - } - } .react-grid-item { @extend .cell-shell; } diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index 7c56a6150f..d769641f6b 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -156,25 +156,45 @@ /* - Kapacitor selector dropdown + Custom Tabs ---------------------------------------------- */ -.dropdown .dropdown-toggle.btn-xs { - height: 22px !important; - line-height: 22px !important; - padding: 0 9px !important; -} -.dropdown-selected { +.tab-group { + display: flex; + justify-content: flex-start; display: inline-block; - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 15px; -} -.dropdown.sources--kapacitor-selector { - .dropdown-toggle { - width: 160px; + + .btn.tab { + border: 2px solid $g17-whisper; + border-right-width: 0; + padding: 10px 20px; + margin: 0 !important; + font-weight: 400; + color: $g11-sidewalk; + background-color: $g17-whisper; + box-shadow: none; + transition: + color 0.25s ease, + background-color 0.25s ease; + + &:hover { + cursor: pointer; + background-color: $g18-cloud; + color: $g9-mountain; + } + + &:first-child { + border-radius: 5px 0 0 5px; + } + + &:last-child { + border-radius: 0 5px 5px 0; + border-right-width: 2px; + } + &.active { + background-color: white; + color: $g8-storm; + } } } @@ -186,3 +206,15 @@ @include no-user-select(); } + + +.select-source-page { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + @include custom-scrollbar($g2-kevlar, $c-pool); + @include gradient-v($g2-kevlar, $g0-obsidian); +} \ No newline at end of file diff --git a/ui/yarn.lock b/ui/yarn.lock index 83f59bc6c3..4aa48477c6 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -144,6 +144,10 @@ acorn@^4.0.1: version "4.0.4" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a" +add-px-to-style@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a" + after@0.8.1: version "0.8.1" resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627" @@ -2380,6 +2384,14 @@ dom-converter@~0.1: dependencies: utila "~0.3" +dom-css@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202" + dependencies: + add-px-to-style "1.0.0" + prefix-style "2.0.1" + to-camel-case "1.0.0" + dom-serialize@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" @@ -5151,6 +5163,10 @@ pend@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50" +performance-now@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" + phantomjs-prebuilt@^2.1.7: version "2.1.14" resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.14.tgz#d53d311fcfb7d1d08ddb24014558f1188c516da0" @@ -5628,6 +5644,10 @@ precss@^1.4.0: postcss-selector-matches "^2.0.0" postcss-selector-not "^2.0.0" +prefix-style@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -5673,7 +5693,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.6: +prop-types@^15.5.6, prop-types@^15.5.8: version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" dependencies: @@ -5737,6 +5757,12 @@ querystringify@0.0.x: version "0.0.4" resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c" +raf@^3.1.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27" + dependencies: + performance-now "^2.1.0" + randomatic@^1.1.3: version "1.1.6" resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb" @@ -5781,6 +5807,14 @@ react-addons-update@^15.1.0: version "15.4.1" resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.4.1.tgz#00c07f45243aa9715e1706bbfd1f23d3d8d80bd1" +react-custom-scrollbars@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.1.1.tgz#cf08cd43b1297ab11e6fcc5c9a800e7b70b6f248" + dependencies: + dom-css "^2.0.0" + prop-types "^15.5.8" + raf "^3.1.0" + react-dimensions@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/react-dimensions/-/react-dimensions-1.3.0.tgz#f5dec8e7b84644a605a900cae0f4a6654acf4e9f" @@ -6960,6 +6994,12 @@ to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" +to-camel-case@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46" + dependencies: + to-space-case "^1.0.0" + to-fast-properties@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320" @@ -6968,6 +7008,16 @@ to-iso-string@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/to-iso-string/-/to-iso-string-0.0.2.tgz#4dc19e664dfccbe25bd8db508b00c6da158255d1" +to-no-case@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a" + +to-space-case@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17" + dependencies: + to-no-case "^1.0.0" + toposort@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"