From b76e2be6c1dbde2536fc4d844788cac1428df05a Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 25 Jun 2018 19:16:39 -0700 Subject: [PATCH 01/19] Refactor overlay technology to not use redux store --- ui/src/App.tsx | 2 - ui/src/shared/actions/overlayTechnology.ts | 34 ------ .../shared/components/OverlayTechnology.tsx | 108 +++++++----------- ui/src/shared/reducers/overlayTechnology.ts | 29 ----- ui/src/store/configureStore.js | 2 - 5 files changed, 39 insertions(+), 136 deletions(-) delete mode 100644 ui/src/shared/actions/overlayTechnology.ts delete mode 100644 ui/src/shared/reducers/overlayTechnology.ts diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 6272dd485b..03157d8989 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -2,7 +2,6 @@ import React, {SFC, ReactChildren} from 'react' import SideNav from 'src/side_nav' import Notifications from 'src/shared/components/Notifications' -import Overlay from 'src/shared/components/OverlayTechnology' interface Props { children: ReactChildren @@ -10,7 +9,6 @@ interface Props { const App: SFC = ({children}) => (
- {children} diff --git a/ui/src/shared/actions/overlayTechnology.ts b/ui/src/shared/actions/overlayTechnology.ts deleted file mode 100644 index 400dd7f9b1..0000000000 --- a/ui/src/shared/actions/overlayTechnology.ts +++ /dev/null @@ -1,34 +0,0 @@ -import {ReactElement} from 'react' - -type OverlayNodeType = ReactElement - -interface Options { - dismissOnClickOutside?: boolean - dismissOnEscape?: boolean - transitionTime?: number -} - -export type ShowOverlayActionCreator = ( - OverlayNode: OverlayNodeType, - options: Options -) => ShowOverlayAction - -interface ShowOverlayAction { - type: 'SHOW_OVERLAY' - payload: { - OverlayNode - options - } -} - -export const showOverlay = ( - OverlayNode: OverlayNodeType, - options: Options -): ShowOverlayAction => ({ - type: 'SHOW_OVERLAY', - payload: {OverlayNode, options}, -}) - -export const dismissOverlay = () => ({ - type: 'DISMISS_OVERLAY', -}) diff --git a/ui/src/shared/components/OverlayTechnology.tsx b/ui/src/shared/components/OverlayTechnology.tsx index ad1d3ccb5f..c6eda81101 100644 --- a/ui/src/shared/components/OverlayTechnology.tsx +++ b/ui/src/shared/components/OverlayTechnology.tsx @@ -1,104 +1,74 @@ -import React, {PureComponent, Component} from 'react' -import {connect} from 'react-redux' +import React, {Component} from 'react' import {ErrorHandling} from 'src/shared/decorators/errors' -import {dismissOverlay} from 'src/shared/actions/overlayTechnology' - interface Props { - OverlayNode?: Component - dismissOnClickOutside?: boolean - dismissOnEscape?: boolean - transitionTime?: number - handleDismissOverlay: () => void -} - -interface State { + children: JSX.Element visible: boolean } -export const OverlayContext = React.createContext() +interface State { + showChildren: boolean +} @ErrorHandling -class Overlay extends PureComponent { - public static defaultProps: Partial = { - dismissOnClickOutside: false, - dismissOnEscape: false, - transitionTime: 300, - } - +class OverlayTechnology extends Component { private animationTimer: number - constructor(props) { + constructor(props: Props) { super(props) this.state = { - visible: false, + showChildren: false, } } public componentDidUpdate(prevProps) { - if (prevProps.OverlayNode === null && this.props.OverlayNode) { - return this.setState({visible: true}) + if (prevProps.visible === true && this.props.visible === false) { + this.animationTimer = window.setTimeout(this.hideChildren, 300) + return } + + if (prevProps.visible === false && this.props.visible === true) { + this.showChildren() + return + } + + return } public render() { - const {OverlayNode} = this.props - return ( - -
-
{OverlayNode}
-
-
- +
+ {this.childContainer} +
+
) } + private get childContainer(): JSX.Element { + const {children} = this.props + const {showChildren} = this.state + + if (showChildren) { + return
{children}
+ } + + return
+ } + private get overlayClass(): string { - const {visible} = this.state + const {visible} = this.props return `overlay-tech ${visible ? 'show' : ''}` } - public handleClickOutside = () => { - const {handleDismissOverlay, dismissOnClickOutside} = this.props - - if (dismissOnClickOutside) { - handleDismissOverlay() - } + private showChildren = (): void => { + this.setState({showChildren: true}) } - public handleAnimateDismiss = () => { - const {transitionTime} = this.props - this.setState({visible: false}) - this.animationTimer = window.setTimeout(this.handleDismiss, transitionTime) - } - - public handleDismiss = () => { - const {handleDismissOverlay} = this.props - handleDismissOverlay() + private hideChildren = (): void => { + this.setState({showChildren: false}) clearTimeout(this.animationTimer) } } -const mapStateToProps = ({ - overlayTechnology: { - OverlayNode, - options: {dismissOnClickOutside, dismissOnEscape, transitionTime}, - }, -}) => ({ - OverlayNode, - dismissOnClickOutside, - dismissOnEscape, - transitionTime, -}) - -const mapDispatchToProps = { - handleDismissOverlay: dismissOverlay, -} - -export default connect(mapStateToProps, mapDispatchToProps)(Overlay) +export default OverlayTechnology diff --git a/ui/src/shared/reducers/overlayTechnology.ts b/ui/src/shared/reducers/overlayTechnology.ts deleted file mode 100644 index e8c685df45..0000000000 --- a/ui/src/shared/reducers/overlayTechnology.ts +++ /dev/null @@ -1,29 +0,0 @@ -const initialState = { - options: { - dismissOnClickOutside: false, - dismissOnEscape: false, - transitionTime: 300, - }, - OverlayNode: null, -} - -export default function overlayTechnology(state = initialState, action) { - switch (action.type) { - case 'SHOW_OVERLAY': { - const {OverlayNode, options} = action.payload - - return {...state, OverlayNode, options} - } - - case 'DISMISS_OVERLAY': { - const {options} = initialState - return { - ...state, - OverlayNode: null, - options, - } - } - } - - return state -} diff --git a/ui/src/store/configureStore.js b/ui/src/store/configureStore.js index 764230fbac..351c125fd5 100644 --- a/ui/src/store/configureStore.js +++ b/ui/src/store/configureStore.js @@ -14,7 +14,6 @@ import adminReducers from 'src/admin/reducers' import kapacitorReducers from 'src/kapacitor/reducers' import dashboardUI from 'src/dashboards/reducers/ui' import cellEditorOverlay from 'src/dashboards/reducers/cellEditorOverlay' -import overlayTechnology from 'src/shared/reducers/overlayTechnology' import dashTimeV1 from 'src/dashboards/reducers/dashTimeV1' import persistStateEnhancer from './persistStateEnhancer' import servicesReducer from 'src/shared/reducers/services' @@ -28,7 +27,6 @@ const rootReducer = combineReducers({ ...adminReducers, dashboardUI, cellEditorOverlay, - overlayTechnology, dashTimeV1, logs: logsReducer, routing: routerReducer, From 874e0a2e1020a48f0e483d64e2ddc5fc440bbb2c Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 25 Jun 2018 19:17:05 -0700 Subject: [PATCH 02/19] Refactor instances of Overlay Technology to new pattern --- .../components/DashboardsPageContents.tsx | 99 +++++++++---------- ui/src/flux/components/FluxHeader.tsx | 72 ++++++++------ ui/src/flux/components/FluxOverlay.tsx | 2 +- 3 files changed, 88 insertions(+), 85 deletions(-) diff --git a/ui/src/dashboards/components/DashboardsPageContents.tsx b/ui/src/dashboards/components/DashboardsPageContents.tsx index a8c1fbbb00..60da972d80 100644 --- a/ui/src/dashboards/components/DashboardsPageContents.tsx +++ b/ui/src/dashboards/components/DashboardsPageContents.tsx @@ -1,5 +1,4 @@ import React, {Component, MouseEvent} from 'react' -import {connect} from 'react-redux' import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized' @@ -8,11 +7,7 @@ import ImportDashboardOverlay from 'src/dashboards/components/ImportDashboardOve import SearchBar from 'src/hosts/components/SearchBar' import FancyScrollbar from 'src/shared/components/FancyScrollbar' import {ErrorHandling} from 'src/shared/decorators/errors' -import { - showOverlay as showOverlayAction, - ShowOverlayActionCreator, -} from 'src/shared/actions/overlayTechnology' -import {OverlayContext} from 'src/shared/components/OverlayTechnology' +import OverlayTechnology from 'src/shared/components/OverlayTechnology' import {Dashboard} from 'src/types' import {Notification} from 'src/types/notifications' @@ -27,12 +22,12 @@ interface Props { onExportDashboard: (dashboard: Dashboard) => () => void onImportDashboard: (dashboard: Dashboard) => void notify: (message: Notification) => void - showOverlay: ShowOverlayActionCreator dashboardLink: string } interface State { searchTerm: string + showOverlay: boolean } @ErrorHandling @@ -42,6 +37,7 @@ class DashboardsPageContents extends Component { this.state = { searchTerm: '', + showOverlay: false, } } @@ -83,31 +79,34 @@ class DashboardsPageContents extends Component { const {onCreateDashboard} = this.props return ( -
-

{this.panelTitle}

-
- - - <> - - - - + <> +
+

{this.panelTitle}

+
+ + + <> + + + + +
-
+ {this.renderImportOverlay} + ) } @@ -136,30 +135,24 @@ class DashboardsPageContents extends Component { this.setState({searchTerm}) } - private showImportOverlay = (): void => { - const {showOverlay, onImportDashboard, notify} = this.props - const options = { - dismissOnClickOutside: false, - dismissOnEscape: false, - } + private handleToggleOverlay = (): void => { + this.setState({showOverlay: !this.state.showOverlay}) + } - showOverlay( - - {({onDismissOverlay}) => ( - - )} - , - options + private get renderImportOverlay(): JSX.Element { + const {onImportDashboard, notify} = this.props + const {showOverlay} = this.state + + return ( + + + ) } } -const mapDispatchToProps = { - showOverlay: showOverlayAction, -} - -export default connect(null, mapDispatchToProps)(DashboardsPageContents) +export default DashboardsPageContents diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx index d833ce48cf..5616dcf128 100644 --- a/ui/src/flux/components/FluxHeader.tsx +++ b/ui/src/flux/components/FluxHeader.tsx @@ -1,60 +1,70 @@ import React, {PureComponent} from 'react' -import {connect} from 'react-redux' import FluxOverlay from 'src/flux/components/FluxOverlay' -import {OverlayContext} from 'src/shared/components/OverlayTechnology' +import OverlayTechnology from 'src/shared/components/OverlayTechnology' import PageHeader from 'src/shared/components/PageHeader' -import { - showOverlay, - ShowOverlayActionCreator, -} from 'src/shared/actions/overlayTechnology' import {Service} from 'src/types' interface Props { - showOverlay: ShowOverlayActionCreator service: Service } -class FluxHeader extends PureComponent { +interface State { + showOverlay: boolean +} + +class FluxHeader extends PureComponent { + constructor(props: Props) { + super(props) + + this.state = { + showOverlay: false, + } + } + public render() { return ( - + <> + + {this.renderOverlay} + ) } + private handleToggleOverlay = (): void => { + this.setState({showOverlay: !this.state.showOverlay}) + } + private get optionsComponents(): JSX.Element { return ( - ) } - private overlay = () => { + private get renderOverlay(): JSX.Element { const {service} = this.props + const {showOverlay} = this.state - this.props.showOverlay( - - {({onDismissOverlay}) => ( - - )} - , - {} + return ( + + + ) } } -const mdtp = { - showOverlay, -} - -export default connect(null, mdtp)(FluxHeader) +export default FluxHeader diff --git a/ui/src/flux/components/FluxOverlay.tsx b/ui/src/flux/components/FluxOverlay.tsx index 51b0ef0b50..1cb7f3d707 100644 --- a/ui/src/flux/components/FluxOverlay.tsx +++ b/ui/src/flux/components/FluxOverlay.tsx @@ -18,7 +18,7 @@ interface Props { mode: string source?: Source service?: Service - onDismiss: () => void + onDismiss?: () => void notify: (message: Notification) => void createService: CreateServiceAsync updateService: UpdateServiceAsync From 4d83374806f04f0a70ea46ae9fb1380f2a691808 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 25 Jun 2018 19:27:16 -0700 Subject: [PATCH 03/19] WIP implement new overlay pattern WIP because I need to test this, and there is probably a better way to handle state --- ui/src/flux/containers/CheckServices.tsx | 39 ++++++------------------ 1 file changed, 10 insertions(+), 29 deletions(-) diff --git a/ui/src/flux/containers/CheckServices.tsx b/ui/src/flux/containers/CheckServices.tsx index fe546efed1..3fffb546b4 100644 --- a/ui/src/flux/containers/CheckServices.tsx +++ b/ui/src/flux/containers/CheckServices.tsx @@ -4,7 +4,7 @@ import {WithRouterProps} from 'react-router' import {FluxPage} from 'src/flux' import FluxOverlay from 'src/flux/components/FluxOverlay' -import {OverlayContext} from 'src/shared/components/OverlayTechnology' +import OverlayTechnology from 'src/shared/components/OverlayTechnology' import {Source, Service, Notification} from 'src/types' import {Links} from 'src/types/flux' import {notify as notifyAction} from 'src/shared/actions/notifications' @@ -12,19 +12,15 @@ import { updateScript as updateScriptAction, UpdateScript, } from 'src/flux/actions' -import * as a from 'src/shared/actions/overlayTechnology' -import * as b from 'src/shared/actions/services' +import * as actions from 'src/shared/actions/services' export const NotificationContext = React.createContext() -const actions = {...a, ...b} - interface Props { sources: Source[] services: Service[] children: ReactChildren - showOverlay: a.ShowOverlayActionCreator - fetchServicesAsync: b.FetchServicesAsync + fetchServicesAsync: actions.FetchServicesAsync notify: (message: Notification) => void updateScript: UpdateScript script: string @@ -42,10 +38,6 @@ export class CheckServices extends PureComponent { } await this.props.fetchServicesAsync(source) - - if (!this.props.services.length) { - this.overlay() - } } public render() { @@ -65,6 +57,7 @@ export class CheckServices extends PureComponent { notify={notify} updateScript={updateScript} /> + {this.renderOverlay} ) } @@ -75,31 +68,19 @@ export class CheckServices extends PureComponent { return sources.find(s => s.id === params.sourceID) } - private overlay() { - const {showOverlay, services} = this.props + private get renderOverlay(): JSX.Element { + const {services} = this.props - if (services.length) { - return - } - - showOverlay( - - {({onDismissOverlay}) => ( - - )} - , - {} + return ( + + + ) } } const mdtp = { fetchServicesAsync: actions.fetchServicesAsync, - showOverlay: actions.showOverlay, updateScript: updateScriptAction, notify: notifyAction, } From 0de0bdaac38f8ab448a312f89ce3db9355938175 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 26 Jun 2018 01:31:48 -0700 Subject: [PATCH 04/19] Implement new overlay pattern in DE --- .../data_explorer/containers/DataExplorer.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx index 69156f4e98..78c739d990 100644 --- a/ui/src/data_explorer/containers/DataExplorer.tsx +++ b/ui/src/data_explorer/containers/DataExplorer.tsx @@ -13,7 +13,7 @@ import QueryMaker from 'src/data_explorer/components/QueryMaker' import Visualization from 'src/data_explorer/components/Visualization' import WriteDataForm from 'src/data_explorer/components/WriteDataForm' import ResizeContainer from 'src/shared/components/ResizeContainer' -import OverlayTechnologies from 'src/shared/components/OverlayTechnologies' +import OverlayTechnology from 'src/shared/components/OverlayTechnology' import ManualRefresh from 'src/shared/components/ManualRefresh' import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown' import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown' @@ -105,17 +105,15 @@ export class DataExplorer extends PureComponent { return ( <> - {showWriteForm ? ( - - - - ) : null} + + + Date: Tue, 26 Jun 2018 01:32:11 -0700 Subject: [PATCH 05/19] Allow plain HTML elements as children --- ui/src/shared/components/overlay/OverlayHeading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/shared/components/overlay/OverlayHeading.tsx b/ui/src/shared/components/overlay/OverlayHeading.tsx index c37034d16a..9f302d24c0 100644 --- a/ui/src/shared/components/overlay/OverlayHeading.tsx +++ b/ui/src/shared/components/overlay/OverlayHeading.tsx @@ -1,7 +1,7 @@ import React, {PureComponent, ReactChildren} from 'react' interface Props { - children?: ReactChildren + children?: ReactChildren | JSX.Element title: string onDismiss?: () => void } From 68eb506687ec8297dff25ca389aec253b3a3432b Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 26 Jun 2018 01:32:32 -0700 Subject: [PATCH 06/19] Organize grid styles --- ui/src/style/pages/kapacitor.scss | 6 --- ui/src/style/theme/_grid.scss | 67 ++++++++++++++++++++++++++++++- ui/src/style/unsorted.scss | 59 --------------------------- 3 files changed, 66 insertions(+), 66 deletions(-) diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss index 443b05ce3d..63447b40ac 100644 --- a/ui/src/style/pages/kapacitor.scss +++ b/ui/src/style/pages/kapacitor.scss @@ -551,12 +551,6 @@ $rule-builder--radius-lg: 5px; padding-bottom: $rule-builder--padding-lg; } } -.endpoint-tab--parameters .faux-form { - margin-left: -6px; - margin-right: -6px; - width: calc(100% + 12px); - display: inline-block; -} .endpoint-tab--parameters--empty { align-items: center; justify-content: center; diff --git a/ui/src/style/theme/_grid.scss b/ui/src/style/theme/_grid.scss index a6703e8016..23c7169bf9 100644 --- a/ui/src/style/theme/_grid.scss +++ b/ui/src/style/theme/_grid.scss @@ -43,7 +43,7 @@ $grid--col-12: 100%; } .form-group-submit { - margin-top: 30px; + margin-top: 22px; } .col { @@ -220,3 +220,68 @@ $grid--col-12: 100%; &-11 { margin-left: $grid--col-11; } } } + +// Wrapp form sets to ensure proper spacing +// ---------------------------------------------------------------------------- +div.faux-form { + width: calc(100% + 12px); + margin-left: -6px; + margin-right: -6px; + display: inline-block; + + .form-group.col-xs-1, + .form-group.col-xs-2, + .form-group.col-xs-3, + .form-group.col-xs-4, + .form-group.col-xs-5, + .form-group.col-xs-6, + .form-group.col-xs-7, + .form-group.col-xs-8, + .form-group.col-xs-9, + .form-group.col-xs-10, + .form-group.col-xs-11, + .form-group.col-xs-12, + .form-group.col-sm-1, + .form-group.col-sm-2, + .form-group.col-sm-3, + .form-group.col-sm-4, + .form-group.col-sm-5, + .form-group.col-sm-6, + .form-group.col-sm-7, + .form-group.col-sm-8, + .form-group.col-sm-9, + .form-group.col-sm-10, + .form-group.col-sm-11, + .form-group.col-sm-12, + .form-group.col-md-1, + .form-group.col-md-2, + .form-group.col-md-3, + .form-group.col-md-4, + .form-group.col-md-5, + .form-group.col-md-6, + .form-group.col-md-7, + .form-group.col-md-8, + .form-group.col-md-9, + .form-group.col-md-10, + .form-group.col-md-11, + .form-group.col-md-12, + .form-group.col-lg-1, + .form-group.col-lg-2, + .form-group.col-lg-3, + .form-group.col-lg-4, + .form-group.col-lg-5, + .form-group.col-lg-6, + .form-group.col-lg-7, + .form-group.col-lg-8, + .form-group.col-lg-9, + .form-group.col-lg-10, + .form-group.col-lg-11, + .form-group.col-lg-12 { + padding-left: 6px; + padding-right: 6px; + } + + > *:last-child { + margin-bottom: 0; + } +} diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index 779282e25d..1daf427fea 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -484,65 +484,6 @@ $dash-editable-header-padding: 7px; } } -/* - Fake form padding without
- -*/ - -div.faux-form { - .form-group.col-xs-1, - .form-group.col-xs-2, - .form-group.col-xs-3, - .form-group.col-xs-4, - .form-group.col-xs-5, - .form-group.col-xs-6, - .form-group.col-xs-7, - .form-group.col-xs-8, - .form-group.col-xs-9, - .form-group.col-xs-10, - .form-group.col-xs-11, - .form-group.col-xs-12, - .form-group.col-sm-1, - .form-group.col-sm-2, - .form-group.col-sm-3, - .form-group.col-sm-4, - .form-group.col-sm-5, - .form-group.col-sm-6, - .form-group.col-sm-7, - .form-group.col-sm-8, - .form-group.col-sm-9, - .form-group.col-sm-10, - .form-group.col-sm-11, - .form-group.col-sm-12, - .form-group.col-md-1, - .form-group.col-md-2, - .form-group.col-md-3, - .form-group.col-md-4, - .form-group.col-md-5, - .form-group.col-md-6, - .form-group.col-md-7, - .form-group.col-md-8, - .form-group.col-md-9, - .form-group.col-md-10, - .form-group.col-md-11, - .form-group.col-md-12, - .form-group.col-lg-1, - .form-group.col-lg-2, - .form-group.col-lg-3, - .form-group.col-lg-4, - .form-group.col-lg-5, - .form-group.col-lg-6, - .form-group.col-lg-7, - .form-group.col-lg-8, - .form-group.col-lg-9, - .form-group.col-lg-10, - .form-group.col-lg-11, - .form-group.col-lg-12 { - padding-left: 6px; - padding-right: 6px; - } -} - /* Stretch to fit Dropdowns ----------------------------------------------------------------------------- From 209283394275345f576325237b0a93d9b44d8e77 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 26 Jun 2018 01:32:43 -0700 Subject: [PATCH 07/19] Add reusable button grouping styles --- ui/src/style/theme/_buttons.scss | 39 ++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/ui/src/style/theme/_buttons.scss b/ui/src/style/theme/_buttons.scss index 343890f0ab..b3da352d83 100644 --- a/ui/src/style/theme/_buttons.scss +++ b/ui/src/style/theme/_buttons.scss @@ -423,3 +423,42 @@ button.btn-link-alert { $c-thunder ); } + +/* + Buttons Groups + ----------------------------------------------------------------------------- +*/ + +.btn-group--left, +.btn-group--center, +.btn-group--right { + display: flex; + align-items: center; +} + +.btn-group--left > .btn { + margin-right: 4px; + &:last-child { + margin-right: 0; + } +} + +.btn-group--center > .btn { + margin-left: 2px; + margin-right: 2px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } +} + +.btn-group--right > .btn { + margin-left: 4px; + &:first-child { + margin-left: 0; + } +} \ No newline at end of file From 5365d37c0fd851307f51e8d5a82f58e07b2f338b Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 26 Jun 2018 01:34:27 -0700 Subject: [PATCH 08/19] Polish template variable overlay Using reusable components and styles as much as possible --- .../components/edit-template-variable.scss | 153 +++++++----------- .../components/CSVTemplateBuilder.tsx | 12 +- .../components/DatabasesTemplateBuilder.tsx | 6 +- .../components/KeysTemplateBuilder.tsx | 12 +- .../MeasurementsTemplateBuilder.tsx | 9 +- .../components/MetaQueryTemplateBuilder.tsx | 14 +- .../components/TagValuesTemplateBuilder.tsx | 15 +- .../components/TemplateControlBar.tsx | 18 +-- .../components/TemplateControlDropdown.tsx | 24 ++- .../components/TemplateMetaQueryPreview.tsx | 22 +-- .../components/TemplatePreviewList.tsx | 9 +- .../components/TemplateVariableEditor.tsx | 76 +++++---- 12 files changed, 178 insertions(+), 192 deletions(-) diff --git a/ui/src/style/components/edit-template-variable.scss b/ui/src/style/components/edit-template-variable.scss index 18a75a2976..2a3ea8bc45 100644 --- a/ui/src/style/components/edit-template-variable.scss +++ b/ui/src/style/components/edit-template-variable.scss @@ -1,85 +1,29 @@ -$padding: 20px 30px; - -.edit-temp-var { - margin: 0 auto; - width: 650px; -} - -.edit-temp-var--header { - background-color: $g0-obsidian; - padding: $padding; - display: flex; - align-items: center; - justify-content: space-between; -} - -.edit-temp-var--header > h1 { - color: #eeeff2; - letter-spacing: 0; - font-size: 19px; - font-weight: 400; -} - -.edit-temp-var--header-controls > button { - display: inline-block; - margin: 0 5px; -} - -.edit-temp-var--body { - @include gradient-v($g3-castle, $g1-raven); - padding: $padding; - - .delete { - margin: 20px auto 10px auto; - width: 90px; - } -} - -.edit-temp-var--body-row { - display: flex; - - .name { - flex: 1 1 50%; - padding-right: 10px; - - input { - color: $c-potassium; - font-weight: bold; - } - - } - - .template-type { - flex: 1 1 50%; - padding-left: 10px; - } - - .dropdown { - display: block; - width: 100%; - } - - .dropdown-toggle, .dropdown-placeholder { - width: 100%; - } -} - -.temp-builder { - width: 100%; -} +/* + Create / Edit Template Variable Overlay + ------------------------------------------------------------------------------ +*/ .temp-builder--mq-controls { background: $g3-castle; - border-radius: $radius-small; display: flex; - padding: 10px 10px 0 10px; + padding: 2px 10px; - &:last-child { - padding-bottom: 10px; + &:first-of-type { + padding-top: 10px; + border-top-left-radius: $radius; + border-top-right-radius: $radius; } - > .temp-builder--mq-text, > .dropdown, .dropdown-placeholder { - margin-right: 5px; + &:last-of-type { + padding-bottom: 10px; + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; + } + + > .temp-builder--mq-text, + > .dropdown, + .dropdown-placeholder { + margin-right: 4px; flex-grow: 1; &:last-child { @@ -92,18 +36,16 @@ $padding: 20px 30px; @include no-user-select(); background-color: $g5-pepper; border-radius: $radius-small; - padding: 8px; + padding: 0 8px; + height: 30px; + line-height: 30px; white-space: nowrap; color: $c-pool; - font-size: 14px; + font-size: 13px; font-weight: 600; font-family: $code-font; } -.temp-builder .temp-builder-results { - margin-top: 30px; -} - @keyframes pulse { 0% { color: $g19-ghost; @@ -118,18 +60,21 @@ $padding: 20px 30px; } } -.temp-builder-results > p { +.temp-builder--validation { + @include no-user-select(); text-align: center; - font-weight: bold; - color: $g19-ghost; - margin: 15px 0; + font-weight: 500; + color: $g13-mist; + margin: 0 0 8px 0; &.error { color: $c-fire; + font-weight: 600; } &.warning { color: $c-pineapple; + font-weight: 600; } &.loading { @@ -137,24 +82,34 @@ $padding: 20px 30px; } > strong { - color: $c-potassium; + color: $c-comet; + } + + &:only-child { + margin-bottom: 0; } } -.temp-builder-results--list { +.temp-builder--results { + margin-top: 22px; +} + +.temp-builder--results-list { max-height: 250px; padding: 0; margin: 0; - - li { - background-color: $g3-castle; - padding: 0 10px; - display: flex; - align-items: center; - border-radius: $radius-small; - margin: 0; - color: $g19-ghost; - font-weight: bold; - list-style: none; - } +} + +.temp-builder--results-item { + @include no-user-select(); + background-color: $g3-castle; + padding: 0 10px; + display: flex; + align-items: center; + border-radius: $radius; + font-size: 12px; + margin: 0; + color: $g13-mist; + font-weight: 600; + list-style: none; } diff --git a/ui/src/tempVars/components/CSVTemplateBuilder.tsx b/ui/src/tempVars/components/CSVTemplateBuilder.tsx index 63ed0b8b74..abb557567e 100644 --- a/ui/src/tempVars/components/CSVTemplateBuilder.tsx +++ b/ui/src/tempVars/components/CSVTemplateBuilder.tsx @@ -28,20 +28,20 @@ class CSVTemplateBuilder extends PureComponent { const pluralizer = templateValues.length === 1 ? '' : 's' return ( -
-
+ <> +