From 460561a25cc45bbd92de7f77b4c9d2e512c11ddd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 14 Apr 2020 21:17:44 +0200 Subject: [PATCH] Transformations: UX updates (#23574) --- packages/grafana-data/src/types/theme.ts | 1 + .../src/components/IconButton/IconButton.tsx | 2 +- .../src/components/Layout/Layout.tsx | 16 ++- .../TimeRangePicker.test.tsx.snap | 2 + .../OrganizeFieldsTransformerEditor.tsx | 97 ++++++++----------- .../src/themes/_variables.dark.scss.tmpl.ts | 2 +- packages/grafana-ui/src/themes/default.ts | 1 + packages/grafana-ui/src/themes/light.ts | 2 +- .../QueryOperationAction.tsx | 18 ++-- .../QueryOperationRow/QueryOperationRow.tsx | 6 +- .../TransformationEditor.tsx | 60 ++++-------- .../TransformationOperationRow.tsx | 3 +- .../TransformationsEditor.tsx | 2 +- public/sass/_variables.dark.generated.scss | 2 +- public/sass/components/_gf-form.scss | 4 + 15 files changed, 104 insertions(+), 114 deletions(-) diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts index d0d9ff772f8..fc73c71f2ba 100644 --- a/packages/grafana-data/src/types/theme.ts +++ b/packages/grafana-data/src/types/theme.ts @@ -78,6 +78,7 @@ export interface GrafanaThemeCommons { formLabelMargin: string; formValidationMessagePadding: string; formValidationMessageMargin: string; + inlineFormMargin: string; }; border: { radius: { diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx index a902927bdfa..1b9340a0f05 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx @@ -48,7 +48,7 @@ IconButton.displayName = 'IconButton'; function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string { switch (surface) { case 'body': - return theme.isLight ? theme.palette.gray95 : theme.palette.gray10; + return theme.isLight ? theme.palette.gray95 : theme.palette.gray15; case 'panel': return theme.isLight ? theme.palette.gray6 : theme.palette.gray15; case 'header': diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx index e6b8d89eea1..a151ee4fdd9 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.tsx +++ b/packages/grafana-ui/src/components/Layout/Layout.tsx @@ -36,13 +36,22 @@ export const Layout: React.FC = ({ return (
{React.Children.map(children, (child, index) => { - return
{child}
; + return ( +
+ {child} +
+ ); })}
); }; -export const HorizontalGroup: React.FC> = ({ children, spacing, justify, align }) => ( +export const HorizontalGroup: React.FC> = ({ + children, + spacing, + justify, + align = 'center', +}) => ( {children} @@ -72,6 +81,9 @@ const getStyles = stylesFactory( buttonWrapper: css` margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]}; margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0}; + display: flex; + align-items: ${align}; + height: 100%; &:last-child { margin-bottom: 0; diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap index a8bdb634d89..da03e4e904d 100644 --- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap @@ -208,6 +208,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "formValidationMessageMargin": "4px 0 0 0", "formValidationMessagePadding": "4px 8px", "gutter": "30px", + "inlineFormMargin": "4px", "insetSquishMd": "4px 8px", "lg": "24px", "md": "16px", @@ -522,6 +523,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "formValidationMessageMargin": "4px 0 0 0", "formValidationMessagePadding": "4px 8px", "gutter": "30px", + "inlineFormMargin": "4px", "insetSquishMd": "4px 8px", "lg": "24px", "md": "16px", diff --git a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx index 6546226eccc..0eb596143f8 100644 --- a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx +++ b/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx @@ -12,9 +12,8 @@ import { TransformerUIProps, } from '@grafana/data'; import { stylesFactory, useTheme } from '../../themes'; -import { Button } from '../Button/Button'; -import { VerticalGroup } from '../Layout/Layout'; import { Input } from '../Input/Input'; +import { IconButton } from '../IconButton/IconButton'; interface OrganizeFieldsTransformerEditorProps extends TransformerUIProps {} @@ -73,29 +72,27 @@ const OrganizeFieldsTransformerEditor: React.FC - - - {provided => ( -
- {orderedFieldNames.map((fieldName, index) => { - return ( - - ); - })} - {provided.placeholder} -
- )} - - - + + + {provided => ( +
+ {orderedFieldNames.map((fieldName, index) => { + return ( + + ); + })} + {provided.placeholder} +
+ )} + + ); }; @@ -121,24 +118,25 @@ const DraggableFieldName: React.FC = ({ {provided => (
-
- -
-
+
+
+ + onToggleVisibility(fieldName, visible)} + /> + {fieldName} +
onRenameField(fieldName, event.currentTarget.value)} /> @@ -150,28 +148,17 @@ const DraggableFieldName: React.FC = ({ }; const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({ - container: css` - display: flex; - align-items: center; - margin-top: 8px; - `, - left: css` - width: 35%; - padding: 0 8px; - border-radius: 3px; - background-color: ${theme.colors.bg2}; - `, - right: css` - width: 65%; - margin-left: 8px; - `, toggle: css` - padding: 5px; - margin: 0 5px; + margin: 0 8px; + color: ${theme.colors.textWeak}; `, draggable: css` + padding: 0 ${theme.spacing.xs}; font-size: ${theme.typography.size.md}; opacity: 0.4; + &:hover { + color: ${theme.colors.textStrong}; + } `, name: css` font-size: ${theme.typography.size.sm}; diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 4245557fd2e..52c0ee0bb0f 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -352,7 +352,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover; $switch-bg: $input-bg; $switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: ${theme.palette.blue77}; +$switch-slider-on-bg: ${theme.palette.blue95}; $switch-slider-shadow: 0 0 3px black; //Checkbox diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 1e60b00adde..199471ff302 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -102,6 +102,7 @@ const theme: GrafanaThemeCommons = { formLabelMargin: `0 0 ${SPACING_BASE / 2 + 'px'} 0`, formValidationMessagePadding: '4px 8px', formValidationMessageMargin: '4px 0 0 0', + inlineFormMargin: '4px', }, border: { radius: { diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index b56f9be86fb..c8c72808291 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -36,7 +36,7 @@ const basicColors = { const backgrounds = { bg1: basicColors.white, bg2: basicColors.gray97, - bg3: basicColors.gray95, + bg3: basicColors.gray90, dashboardBg: basicColors.gray98, bgBlue1: basicColors.blue80, bgBlue2: basicColors.blue77, diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx index 5ea578105f7..20b016146f0 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx @@ -20,15 +20,15 @@ export const QueryOperationAction: React.FC = ({ icon } }; return ( -
- -
+ ); }; diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx index d1af17841ee..684c3b7b034 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx @@ -77,10 +77,11 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => { margin-bottom: ${theme.spacing.formSpacingBase * 2}px; `, header: css` - padding: ${theme.spacing.sm}; + padding: 0 ${theme.spacing.sm}; border-radius: ${theme.border.radius.sm}; background: ${theme.colors.bg2}; height: ${theme.spacing.formInputHeight}; + line-height: ${theme.spacing.formInputHeight}; display: flex; align-items: center; justify-content: space-between; @@ -93,14 +94,13 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => { align-items: center; cursor: pointer; `, - title: css` font-weight: ${theme.typography.weight.semibold}; color: ${theme.colors.textBlue}; margin-left: ${theme.spacing.sm}; `, content: css` - margin-top: ${theme.spacing.xs}; + margin-top: ${theme.spacing.inlineFormMargin}; margin-left: ${theme.spacing.xl}; `, }; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx index f21d53ca53a..4f7e6b00ba8 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { css } from 'emotion'; -import { CustomScrollbar, Icon, JSONFormatter, ThemeContext } from '@grafana/ui'; +import { Icon, JSONFormatter, ThemeContext } from '@grafana/ui'; import { GrafanaTheme, DataFrame } from '@grafana/data'; interface TransformationEditorProps { @@ -17,42 +17,27 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans const styles = getStyles(theme); return ( -
-
- {editor} - {debugMode && ( -
-
-
Input
-
- - - -
-
-
- -
-
-
Output
- -
- - - -
+
+ {editor} + {debugMode && ( +
+
+
Input
+
+
- )} -
+
+ +
+
+
Output
+
+ +
+
+
+ )}
); }; @@ -63,7 +48,6 @@ const getStyles = (theme: GrafanaTheme) => ({ padding: 4px 8px 4px 8px; position: relative; height: 35px; - background: ${theme.colors.textFaint}; border-radius: 4px 4px 0 0; flex-wrap: nowrap; justify-content: space-between; @@ -87,9 +71,7 @@ const getStyles = (theme: GrafanaTheme) => ({ color: ${theme.colors.text}; } `, - editor: css` - padding-top: ${theme.spacing.sm}; - `, + editor: css``, debugWrapper: css` display: flex; flex-direction: row; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx index cec515f1f15..816187e775a 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx @@ -23,7 +23,7 @@ export const TransformationOperationRow: React.FC { return ( - + + ); diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx index e5defe148f2..86a28a37016 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx @@ -112,7 +112,7 @@ export class TransformationsEditor extends React.PureComponent { return ( -

+

Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being visualized.

diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 647dda5d980..0c3ee4e6c51 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -355,7 +355,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover; $switch-bg: $input-bg; $switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: #1f60c4; +$switch-slider-on-bg: #5794f2; $switch-slider-shadow: 0 0 3px black; //Checkbox diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 61dec6c23a1..d18ebd531c1 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -135,6 +135,10 @@ $input-border: 1px solid $input-border-color; border: $panel-border; } + &--justify-left { + justify-content: left; + } + &--btn { border: none; border-radius: $border-radius;