apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Theme: Updates gf-form & form-field to better match new form styles (#23345)

Browse Source 
* Theme: Updates old gf-form-styles

* Removed margin buttom

* updated

* updated

* This will take some time

* More style tweaks to both light and dark theme

* Minor change

* Tweaked table styles
pull/23353/head
Torkel Ödegaard 6 years ago committed by GitHub
parent 09bcdc1020
commit 2106f0afc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 74 additions and 64 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      packages/grafana-ui/src/components/FormField/_FormField.scss
  2. 4
      packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
  3. 20
      packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
  4. 6
      packages/grafana-ui/src/components/Table/styles.ts
  5. 4
      packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
  6. 8
      packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
  7. 14
      packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
  8. 4
      packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
  9. 2
      packages/grafana-ui/src/themes/dark.ts
  10. 2
      public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
  11. 5
      public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
  12. 2
      public/app/features/variables/pickers/PickerRenderer.tsx
  13. 10
      public/sass/_variables.dark.generated.scss
  14. 4
      public/sass/_variables.generated.scss
  15. 14
      public/sass/_variables.light.generated.scss
  16. 10
      public/sass/components/_gf-form.scss
  17. 11
      public/sass/components/_query_editor.scss
  18. 2
      public/sass/components/_slate_editor.scss
  19. 9
      public/sass/components/_submenu.scss
  20. 2
      public/sass/mixins/_forms.scss
  21. 4
      public/sass/pages/_dashboard.scss

1
packages/grafana-ui/src/components/FormField/_FormField.scss
Unescape View File

@ -1,5 +1,4 @@
.form-field {
margin-bottom: $space-xxs;
display: flex;
flex-direction: row;
align-items: flex-start;

4
packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
Unescape View File

@ -1,4 +1,4 @@
$select-input-height: 35px;
$select-input-height: 32px;
$select-input-bg-disabled: $input-bg-disabled;
@mixin select-control() {
@ -122,7 +122,7 @@ $select-input-bg-disabled: $input-bg-disabled;
.gf-form-select-box__value-container {
display: inline-block;
padding: 8px 16px 8px 10px;
padding: 6px 16px 6px 10px;
vertical-align: middle;
> div {

20
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
Unescape View File

@ -1,5 +1,5 @@
import React from 'react';
import { useTheme, stylesFactory, selectThemeVariant as stv } from '../../../themes';
import { useTheme, stylesFactory } from '../../../themes';
import { GrafanaTheme } from '@grafana/data';
import { css, cx } from 'emotion';
import { getFocusCss, getPropertiesForButtonSize } from '../commonStyles';
@ -21,15 +21,15 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
const c = theme.colors;
const textColor = stv({ light: c.gray33, dark: c.gray70 }, theme.type);
const textColorHover = stv({ light: c.blueShade, dark: c.blueLight }, theme.type);
const textColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type);
const borderColor = stv({ light: c.gray4, dark: c.gray25 }, theme.type);
const borderColorHover = stv({ light: c.gray70, dark: c.gray33 }, theme.type);
const borderColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type);
const bg = stv({ light: c.gray98, dark: c.gray10 }, theme.type);
const bgDisabled = stv({ light: c.gray95, dark: c.gray15 }, theme.type);
const bgActive = stv({ light: c.white, dark: c.gray05 }, theme.type);
const textColor = theme.isLight ? c.gray33 : c.gray70;
const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
const textColorActive = theme.isLight ? c.blueShade : c.blueLight;
const borderColor = theme.isLight ? c.gray4 : c.gray25;
const borderColorHover = theme.isLight ? c.gray70 : c.gray33;
const borderColorActive = theme.isLight ? c.blueShade : c.blueLight;
const bg = c.pageBg;
const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
const bgActive = theme.isLight ? c.white : c.gray05;
const border = `1px solid ${borderColor}`;
const borderActive = `1px solid ${borderColorActive}`;

6
packages/grafana-ui/src/components/Table/styles.ts
Unescape View File

@ -1,6 +1,6 @@
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory, selectThemeVariant as stv } from '../../themes';
import { stylesFactory } from '../../themes';
export interface TableStyles {
cellHeight: number;
@ -18,7 +18,7 @@ export interface TableStyles {
export const getTableStyles = stylesFactory(
(theme: GrafanaTheme): TableStyles => {
const colors = theme.colors;
const headerBg = stv({ light: colors.gray6, dark: colors.dark7 }, theme.type);
const headerBg = theme.isLight ? colors.gray98 : colors.gray15;
const padding = 6;
const lineHeight = theme.typography.lineHeight.md;
const bodyFontSize = 14;
@ -50,7 +50,7 @@ export const getTableStyles = stylesFactory(
`,
row: css`
label: row;
border-bottom: 2px solid ${colors.bodyBg};
border-bottom: 1px solid ${headerBg};
`,
tableCell: css`
padding: ${padding}px 10px;

4
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
Unescape View File

@ -168,7 +168,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"red88": "#e02f44",
"redBase": "#e02f44",
"redShade": "#c4162a",
"text": "#d8d9da",
"text": "#c7d0d9",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
@ -478,7 +478,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"red88": "#e02f44",
"redBase": "#e02f44",
"redShade": "#c4162a",
"text": "#d8d9da",
"text": "#c7d0d9",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",

8
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
Unescape View File

@ -204,13 +204,13 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: ${theme.colors.formInputText};
$input-border-color: $dark-6;
$input-border-color: ${theme.colors.gray15};
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-focus: $dark-6 !default;
$input-border-focus: ${theme.colors.blue95};
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
$input-label-bg: $gray-blue;
$input-label-border-color: $dark-6;
$input-label-bg: ${theme.colors.gray15};
$input-label-border-color: ${theme.colors.gray15};
$input-color-select-arrow: $white;
// Search

14
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
Unescape View File

@ -195,15 +195,15 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
$input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: $dark-2;
$input-border-color: $gray-5;
$input-color: ${theme.colors.formInputText};
$input-border-color: ${theme.colors.gray95};
$input-box-shadow: none;
$input-border-focus: $gray-5 !default;
$input-box-shadow-focus: $blue-light !default;
$input-border-focus: ${theme.colors.blue95};
$input-box-shadow-focus: ${theme.colors.blue95};
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
$input-label-bg: $gray-5;
$input-label-border-color: $gray-5;
$input-color-select-arrow: $gray-1;
$input-label-bg: ${theme.colors.gray95};
$input-label-border-color: ${theme.colors.gray95};
$input-color-select-arrow: ${theme.colors.gray60};
// search
$search-shadow: 0 1px 5px 0 $gray-5;

4
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
Unescape View File

@ -149,8 +149,8 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
$label-border-radius: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
$input-padding: ${theme.spacing.sm};
$input-height: 35px !default;
$input-padding: 0 ${theme.spacing.sm};
$input-height: 32px !default;
$cursor-disabled: not-allowed !default;

2
packages/grafana-ui/src/themes/dark.ts
Unescape View File

@ -64,7 +64,7 @@ const darkTheme: GrafanaTheme = {
bodyBg: basicColors.gray05,
pageBg: basicColors.gray10,
body: basicColors.gray4,
text: basicColors.gray4,
text: basicColors.gray85,
textStrong: basicColors.white,
textWeak: basicColors.gray2,
textEmphasis: basicColors.gray5,

2
public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
Unescape View File

@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = `
className="css-payll4"
>
<li
className="css-1aiaexb"
className="css-1lu9djy"
onClick={[Function]}
>
<i

5
public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
Unescape View File

@ -11,7 +11,7 @@ interface Props {
export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) => {
const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true);
const theme = useTheme();
const styles = getStyles(theme);
const styles = getStyles(theme, isExpanded);
return (
<div className={styles.box}>
@ -26,7 +26,7 @@ export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) =>
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = stylesFactory((theme: GrafanaTheme, isExpanded: boolean) => {
return {
box: css`
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
@ -41,6 +41,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
justify-content: space-between;
align-items: center;
padding: ${theme.spacing.sm} ${theme.spacing.md};
color: ${isExpanded ? theme.colors.text : theme.colors.formLabel};
font-weight: ${theme.typography.weight.semibold};
&:hover {

2
public/app/features/variables/pickers/PickerRenderer.tsx
Unescape View File

@ -19,7 +19,7 @@ export const PickerRenderer: FunctionComponent<Props> = props => {
<div className="gf-form">
{props.variable.hide === VariableHide.dontHide && (
<label
className="gf-form-label template-variable"
className="gf-form-label gf-form-label--variable"
aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemLabels(labelOrName)}
>
{labelOrName}

10
public/sass/_variables.dark.generated.scss
Unescape View File

@ -93,7 +93,7 @@ $body-bg: #0b0c0e;
$page-bg: #141619;
$body-color: #d8d9da;
$text-color: #d8d9da;
$text-color: #c7d0d9;
$text-color-strong: #ffffff;
$text-color-weak: #8e8e8e;
$text-color-faint: #222426;
@ -207,13 +207,13 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: #c7d0d9;
$input-border-color: $dark-6;
$input-border-color: #202226;
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-focus: $dark-6 !default;
$input-border-focus: #5794f2;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: #555555;
$input-label-bg: $gray-blue;
$input-label-border-color: $dark-6;
$input-label-bg: #202226;
$input-label-border-color: #202226;
$input-color-select-arrow: $white;
// Search

4
public/sass/_variables.generated.scss
Unescape View File

@ -152,8 +152,8 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
$label-border-radius: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
$input-padding: 8px;
$input-height: 35px !default;
$input-padding: 0 8px;
$input-height: 32px !default;
$cursor-disabled: not-allowed !default;

14
public/sass/_variables.light.generated.scss
Unescape View File

@ -198,15 +198,15 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
$input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: $dark-2;
$input-border-color: $gray-5;
$input-color: #343b40;
$input-border-color: #e9edf2;
$input-box-shadow: none;
$input-border-focus: $gray-5 !default;
$input-box-shadow-focus: $blue-light !default;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: #9fa7b3;
$input-label-bg: $gray-5;
$input-label-border-color: $gray-5;
$input-color-select-arrow: $gray-1;
$input-label-bg: #e9edf2;
$input-label-border-color: #e9edf2;
$input-color-select-arrow: #7b8087;
// search
$search-shadow: 0 1px 5px 0 $gray-5;

10
public/sass/components/_gf-form.scss
Unescape View File

@ -102,13 +102,14 @@ $input-border: 1px solid $input-border-color;
}
.gf-form-label {
display: flex;
align-items: center;
padding: $input-padding;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
font-size: $font-size-sm;
background-color: $input-label-bg;
display: block;
height: $input-height;
border: $border-width solid $input-label-border-color;
@ -130,6 +131,13 @@ $input-border: 1px solid $input-border-color;
padding-left: 0px;
}
&--variable {
color: $variable;
background: $panel-bg;
border: $panel-border;
border-right: none;
}
&--btn {
border-right: $border-width solid $input-label-border-color;
border-radius: $border-radius;

11
public/sass/components/_query_editor.scss
Unescape View File

@ -30,6 +30,15 @@
margin-right: 2px;
}
.gf-form-label {
border-right: 1px solid $input-border-color;
border-radius: $border-radius;
}
.gf-form-input {
border-radius: $border-radius;
}
.gf-form + .gf-form {
margin-left: 0;
}
@ -137,7 +146,7 @@ input[type='text'].tight-form-func-param {
padding: 4px 0px 4px 8px;
position: relative;
height: 35px;
background: $page-bg;
background: $input-label-bg;
flex-wrap: nowrap;
align-items: center;
}

2
public/sass/components/_slate_editor.scss
Unescape View File

@ -8,7 +8,7 @@
.slate-query-field__wrapper {
position: relative;
display: inline-block;
padding: $input-padding;
padding: 6px 8px;
min-height: $input-height;
width: 100%;
cursor: text;

9
public/sass/components/_submenu.scss
Unescape View File

@ -28,19 +28,18 @@
.fa-caret-down {
font-size: 75%;
position: relative;
top: -1px;
left: 1px;
padding-left: 8px;
}
}
.variable-value-link {
padding-right: 10px;
padding: $space-sm;
padding: 0 $space-sm;
background-color: $input-bg;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
display: inline-block;
display: flex;
align-items: center;
color: $text-color;
height: $input-height;

2
public/sass/mixins/_forms.scss
Unescape View File

@ -34,8 +34,6 @@
&: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;
@include box-shadow($shadow);
}
}

4
public/sass/pages/_dashboard.scss
Unescape View File

@ -5,10 +5,6 @@
box-sizing: border-box;
}
.template-variable {
color: $variable;
}
div.flot-text {
color: $text-color !important;
}

Write Preview
Loading…
Cancel
Save