diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index e8880ad6f5e..5a437110ab5 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -17,6 +17,7 @@ import { getMarkdownStyles } from './markdownStyles'; import { getPageStyles } from './page'; import { getRcTimePickerStyles } from './rcTimePicker'; import { getSkeletonStyles } from './skeletonStyles'; +import { getSlateStyles } from './slate'; import { getUplotStyles } from './uPlot'; /** @internal */ @@ -38,6 +39,7 @@ export function GlobalStyles() { getAgularPanelStyles(theme), getMarkdownStyles(theme), getSkeletonStyles(theme), + getSlateStyles(theme), getRcTimePickerStyles(theme), getUplotStyles(theme), getLegacySelectStyles(theme), diff --git a/packages/grafana-ui/src/themes/GlobalStyles/slate.ts b/packages/grafana-ui/src/themes/GlobalStyles/slate.ts new file mode 100644 index 00000000000..e8fd858d456 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/slate.ts @@ -0,0 +1,145 @@ +import { css } from '@emotion/react'; + +import { GrafanaTheme2 } from '@grafana/data'; + +export function getSlateStyles(theme: GrafanaTheme2) { + return css({ + '.slate-query-field': { + fontSize: theme.typography.fontSize, + fontFamily: theme.typography.fontFamilyMonospace, + height: 'auto', + wordBreak: 'break-word', + // Affects only placeholder in query field. Adds scrollbar only if content is cropped. + overflow: 'auto', + }, + + '.slate-query-field__wrapper': { + position: 'relative', + display: 'inline-block', + padding: '6px 8px', + minHeight: '32px', + width: '100%', + color: theme.colors.text.primary, + backgroundColor: theme.components.input.background, + backgroundImage: 'none', + border: `1px solid ${theme.components.input.borderColor}`, + borderRadius: theme.shape.radius.default, + transition: 'all 0.3s', + lineHeight: '18px', + }, + + '.slate-query-field__wrapper--disabled': { + backgroundColor: 'inherit', + cursor: 'not-allowed', + }, + + '.slate-typeahead': { + '.typeahead': { + position: 'relative', + zIndex: theme.zIndex.typeahead, + borderRadius: theme.shape.radius.default, + border: `1px solid ${theme.components.panel.borderColor}`, + maxHeight: '66vh', + overflowY: 'scroll', + overflowX: 'hidden', + outline: 'none', + listStyle: 'none', + background: theme.components.panel.background, + color: theme.colors.text.primary, + boxShadow: theme.shadows.z2, + }, + + '.typeahead-group__title': { + color: theme.colors.text.secondary, + fontSize: theme.typography.size.sm, + lineHeight: theme.typography.body.lineHeight, + padding: theme.spacing(1), + }, + + '.typeahead-item': { + height: 'auto', + fontFamily: theme.typography.fontFamilyMonospace, + padding: theme.spacing(1, 1, 1, 2), + fontSize: theme.typography.size.sm, + textOverflow: 'ellipsis', + overflow: 'hidden', + zIndex: 1, + display: 'block', + whiteSpace: 'nowrap', + cursor: 'pointer', + transition: + 'color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)', + }, + + '.typeahead-item__selected': { + backgroundColor: theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray6, + + '.typeahead-item-hint': { + fontSize: theme.typography.size.xs, + color: theme.colors.text.primary, + whiteSpace: 'normal', + }, + }, + + '.typeahead-match': { + color: theme.v1.palette.yellow, + borderBottom: `1px solid ${theme.v1.palette.yellow}`, + // Undoing mark styling + padding: 'inherit', + background: 'inherit', + }, + }, + + /* SYNTAX */ + + '.slate-query-field, .prism-syntax-highlight': { + '.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata': { + color: theme.colors.text.secondary, + }, + + '.token.variable, .token.entity': { + color: theme.colors.text.primary, + }, + + '.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted': { + color: theme.colors.error.text, + }, + + '.token.attr-value, .token.selector, .token.string, .token.char, .token.builtin, .token.inserted': { + color: theme.colors.success.text, + }, + + '.token.boolean, .token.number, .token.operator, .token.url': { + color: '#fe85fc', + }, + + '.token.function, .token.attr-name, .token.function-name, .token.atrule, .token.keyword, .token.class-name': { + color: theme.colors.primary.text, + }, + + '.token.punctuation, .token.regex, .token.important': { + color: theme.v1.palette.orange, + }, + + '.token.important': { + fontWeight: 'normal', + }, + + '.token.bold': { + fontWeight: 'bold', + }, + + '.token.italic': { + fontStyle: 'italic', + }, + + '.token.entity': { + cursor: 'help', + }, + + '.namespace': { + opacity: 0.7, + }, + }, + }); +} diff --git a/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.test.tsx b/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.test.tsx index c92baacc746..5e2067ce961 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.test.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.test.tsx @@ -1,16 +1,18 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; +import { createTheme } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { PanelModel } from '../../state'; -import PanelHeaderCorner, { Props } from './PanelHeaderCorner'; +import { PanelHeaderCorner, Props } from './PanelHeaderCorner'; const setup = () => { const testPanel = new PanelModel({ title: 'test', description: 'test panel' }); const props: Props = { panel: testPanel, + theme: createTheme(), }; return render(); }; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx b/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx index c761570fdc4..1d5c7a5a8e1 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx @@ -5,7 +5,7 @@ import { renderMarkdown, LinkModelSupplier, ScopedVars, IconName } from '@grafan import { GrafanaTheme2 } from '@grafana/data/'; import { selectors } from '@grafana/e2e-selectors'; import { locationService, getTemplateSrv } from '@grafana/runtime'; -import { Tooltip, PopoverContent, Icon } from '@grafana/ui'; +import { Tooltip, PopoverContent, Icon, Themeable2, withTheme2 } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui/'; import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { PanelModel } from 'app/features/dashboard/state/PanelModel'; @@ -17,7 +17,7 @@ enum InfoMode { Links = 'Links', } -export interface Props { +export interface Props extends Themeable2 { panel: PanelModel; title?: string; description?: string; @@ -45,22 +45,23 @@ export class PanelHeaderCorner extends Component { }; getInfoContent = (): JSX.Element => { - const { panel } = this.props; + const { panel, theme } = this.props; const markdown = panel.description || ''; const interpolatedMarkdown = getTemplateSrv().replace(markdown, panel.scopedVars); const markedInterpolatedMarkdown = renderMarkdown(interpolatedMarkdown); const links = this.props.links && this.props.links.getLinks(panel.replaceVariables); + const styles = getContentStyles(theme); return ( -
+
{links && links.length > 0 && ( -
    +
      {links.map((link, idx) => { return (
    • - + {link.title}
      • @@ -102,7 +103,7 @@ export class PanelHeaderCorner extends Component { } } -export default PanelHeaderCorner; +export default withTheme2(PanelHeaderCorner); interface PanelInfoCornerProps { infoMode: InfoMode; @@ -135,6 +136,25 @@ const iconMap: Record = { [InfoMode.Links]: 'external-link-alt', }; +const getContentStyles = (theme: GrafanaTheme2) => ({ + content: css({ + overflow: 'auto', + + code: { + whiteSpace: 'normal', + wordWrap: 'break-word', + }, + + 'pre > code': { + display: 'block', + }, + }), + cornerLinks: css({ + listStyle: 'none', + paddingLeft: 0, + }), +}); + const getStyles = (theme: GrafanaTheme2) => { return { icon: css({ diff --git a/public/app/features/datasources/components/DataSourceCategories.tsx b/public/app/features/datasources/components/DataSourceCategories.tsx index 7ae50234dea..76c73cad02f 100644 --- a/public/app/features/datasources/components/DataSourceCategories.tsx +++ b/public/app/features/datasources/components/DataSourceCategories.tsx @@ -1,7 +1,8 @@ +import { css } from '@emotion/css'; import React from 'react'; -import { DataSourcePluginMeta } from '@grafana/data'; -import { LinkButton } from '@grafana/ui'; +import { DataSourcePluginMeta, GrafanaTheme2 } from '@grafana/data'; +import { LinkButton, useStyles2 } from '@grafana/ui'; import { DataSourcePluginCategory } from 'app/types'; import { ROUTES } from '../../connections/constants'; @@ -18,13 +19,14 @@ export type Props = { export function DataSourceCategories({ categories, onClickDataSourceType }: Props) { const moreDataSourcesLink = `${ROUTES.AddNewConnection}?cat=data-source`; + const styles = useStyles2(getStyles); return ( <> {/* Categories */} {categories.map(({ id, title, plugins }) => ( -
      -
      +
      +
      {title}
      @@ -32,7 +34,7 @@ export function DataSourceCategories({ categories, onClickDataSourceType }: Prop ))} {/* Find more */} -
      +
      Find more data source plugins @@ -40,3 +42,17 @@ export function DataSourceCategories({ categories, onClickDataSourceType }: Prop ); } + +const getStyles = (theme: GrafanaTheme2) => ({ + category: css({ + marginBottom: theme.spacing(2), + }), + header: css({ + fontSize: theme.typography.h5.fontSize, + marginBottom: theme.spacing(1), + }), + more: css({ + margin: theme.spacing(4), + textAlign: 'center', + }), +}); diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index 7745ac688b3..69fe9fdf8db 100644 --- a/public/sass/_angular.scss +++ b/public/sass/_angular.scss @@ -1864,3 +1864,74 @@ $easing: cubic-bezier(0, 0, 0.265, 1); background: transparent; display: block; } + +.add-data-source-item { + padding: $space-md; + display: flex; + align-items: center; + cursor: pointer; + background: $card-background; + border-radius: 3px; + margin-bottom: $space-xxs; + + &:hover { + background: $card-background-hover; + + .add-data-source-item-actions { + opacity: 1; + transition: 0.15s opacity ease-in-out; + } + } +} + +.add-data-source-item-text-wrapper { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.add-data-source-item-logo { + margin-right: $space-lg; + margin-left: $space-sm; + width: 55px; + max-height: 55px; +} + +.add-data-source-item-desc { + font-size: $font-size-sm; + color: $text-color-weak; +} + +.add-data-source-item-actions { + opacity: 0; + padding-left: $space-md; + display: flex; + align-items: center; + + > button { + margin-left: $space-md; + cursor: pointer; + } +} + +.add-data-source-item-badge { + margin-top: 6px; +} + +.add-data-source-item-text { + font-size: $font-size-h5; +} + +.panel-empty { + display: flex; + align-items: center; + height: 100%; + width: 100%; + + p { + text-align: center; + color: $text-muted; + font-size: $font-size-lg; + width: 100%; + } +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index fa9ec6aec8b..b24b2d4648e 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -24,15 +24,12 @@ @import 'components/tags'; @import 'components/gf-form'; @import 'components/filter-table'; -@import 'components/slate_editor'; @import 'components/modals'; @import 'components/dropdown'; @import 'components/infobox'; @import 'components/query_editor'; @import 'components/query_part'; @import 'components/dashboard_grid'; -@import 'components/add_data_source'; -@import 'components/panel_header'; // PAGES @import 'pages/dashboard'; diff --git a/public/sass/components/_add_data_source.scss b/public/sass/components/_add_data_source.scss deleted file mode 100644 index c641948c285..00000000000 --- a/public/sass/components/_add_data_source.scss +++ /dev/null @@ -1,86 +0,0 @@ -.add-data-source-header { - margin-bottom: $space-xl; - padding-top: $spacer; - text-align: center; -} - -.add-data-source-search { - display: flex; - justify-content: center; - margin-bottom: $space-lg; -} - -.add-data-source-category { - margin-bottom: $space-md; -} - -.add-data-source-category__header { - font-size: $font-size-h5; - margin-bottom: $space-sm; -} - -.add-data-source-item { - padding: $space-md; - display: flex; - align-items: center; - cursor: pointer; - background: $card-background; - border-radius: 3px; - margin-bottom: $space-xxs; - - &:hover { - background: $card-background-hover; - - .add-data-source-item-actions { - opacity: 1; - transition: 0.15s opacity ease-in-out; - } - } -} - -.add-data-source-item-text-wrapper { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.add-data-source-item-desc { - font-size: $font-size-sm; - color: $text-color-weak; -} - -.add-data-source-item-badge { - margin-top: 6px; -} - -.add-data-source-item-text { - font-size: $font-size-h5; -} - -.add-data-source-item-logo { - margin-right: $space-lg; - margin-left: $space-sm; - width: 55px; - max-height: 55px; -} - -.add-data-source-item-actions { - opacity: 0; - padding-left: $space-md; - display: flex; - align-items: center; - - > button { - margin-left: $space-md; - cursor: pointer; - } -} - -.add-datasource-item-actions__btn-icon { - margin-left: $space-sm; -} - -.add-data-source-more { - text-align: center; - margin: $space-xl; -} diff --git a/public/sass/components/_panel_header.scss b/public/sass/components/_panel_header.scss deleted file mode 100644 index 15db9a5d91f..00000000000 --- a/public/sass/components/_panel_header.scss +++ /dev/null @@ -1,122 +0,0 @@ -.panel-header { - &:hover { - transition: background-color 0.1s ease-in-out; - background-color: $panel-header-hover-bg; - } -} - -.panel-container--no-title { - .panel-header { - position: absolute; - left: min(50px, 10%); // allows space for interaction in the corders - right: min(50px, 10%); - z-index: $panel-header-z-index; - - &:hover { - left: 0; - right: 0; - } - } - .panel-content { - height: 100%; - } -} - -.panel-title-container { - cursor: move; - word-wrap: break-word; - display: block; -} - -.panel-title { - border: 0px; - font-weight: $font-weight-semi-bold; - position: relative; - width: 100%; - display: flex; - flex-wrap: nowrap; - justify-content: center; - height: $panel-header-height; - line-height: $panel-header-height; - align-items: center; -} - -.panel-menu-container { - width: 0px; - height: 19px; - display: inline-block; -} - -.panel-menu-toggle { - position: absolute; - top: calc(50% - 9px); - color: $text-color-weak; - cursor: pointer; - margin: 2px 0 0 2px; - visibility: hidden; - opacity: 0; - - &:hover { - color: $link-hover-color; - } -} - -.panel-loading { - position: absolute; - top: 0px; - right: 4px; - z-index: $panel-header-z-index + 1; - font-size: $font-size-lg; - color: $text-color-weak; - - &:hover { - cursor: pointer; - } -} - -.panel-empty { - display: flex; - align-items: center; - height: 100%; - width: 100%; - - p { - text-align: center; - color: $text-muted; - font-size: $font-size-lg; - width: 100%; - } -} - -.panel-menu { - top: 25px; - left: -100px; -} - -.panel-info-content { - overflow: auto; - - code { - white-space: normal; - word-wrap: break-word; - } - - pre > code { - display: block; - } - - .panel-info-corner-links { - list-style: none; - padding-left: 0; - } -} - -.panel-time-info { - font-weight: $font-weight-semi-bold; - float: right; - margin-right: 8px; - color: $blue; - font-size: 85%; - position: absolute; - right: 0; -} diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss deleted file mode 100644 index bd596c4542a..00000000000 --- a/public/sass/components/_slate_editor.scss +++ /dev/null @@ -1,165 +0,0 @@ -.slate-query-field { - font-size: $font-size-base; - font-family: $font-family-monospace; - height: auto; - word-break: break-word; - // Affects only placeholder in query field. Adds scrollbar only if content is cropped. - overflow: auto; -} - -.slate-query-field__wrapper { - position: relative; - display: inline-block; - padding: 6px 8px; - min-height: $input-height; - width: 100%; - color: $text-color; - background-color: $input-bg; - background-image: none; - border: $input-border; - border-radius: $border-radius; - transition: all 0.3s; - line-height: $input-line-height; -} - -.slate-query-field__wrapper--disabled { - background-color: inherit; - cursor: not-allowed; -} - -.slate-typeahead { - .typeahead { - position: relative; - z-index: $zindex-typeahead; - border-radius: $border-radius; - border: $panel-border; - max-height: calc(66vh); - overflow-y: scroll; - overflow-x: hidden; - outline: none; - list-style: none; - background: $panel-bg; - color: $text-color; - box-shadow: $typeahead-shadow; - } - - .typeahead-group__title { - color: $text-color-weak; - font-size: $font-size-sm; - line-height: $line-height-base; - padding: $space-sm; - } - - .typeahead-item { - height: auto; - font-family: $font-family-monospace; - padding: $space-sm $space-sm $space-sm $space-md; - font-size: $font-size-sm; - text-overflow: ellipsis; - overflow: hidden; - z-index: 1; - display: block; - white-space: nowrap; - cursor: pointer; - transition: - color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - } - - .typeahead-item__selected { - background-color: $typeahead-selected-bg; - - .typeahead-item-hint { - font-size: $font-size-xs; - color: $text-color; - white-space: normal; - } - } - - .typeahead-match { - color: $typeahead-selected-color; - border-bottom: 1px solid $typeahead-selected-color; - // Undoing mark styling - padding: inherit; - background: inherit; - } -} - -/* SYNTAX */ - -.slate-query-field, -.prism-syntax-highlight { - .token.comment, - .token.block-comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: $text-color-weak; - } - - .token.variable, - .token.entity { - color: $text-color; - } - - .token.property, - .token.tag, - .token.constant, - .token.symbol, - .token.deleted { - color: $query-red; - } - - .token.attr-value, - .token.selector, - .token.string, - .token.char, - .token.builtin, - .token.inserted { - color: $query-green; - } - - .token.boolean, - .token.number, - .token.operator, - .token.url { - color: $query-purple; - } - - .token.function, - .token.attr-name, - .token.function-name, - .token.atrule, - .token.keyword, - .token.class-name { - color: $text-blue; - } - - .token.punctuation, - .token.regex, - .token.important { - color: $query-orange; - } - - .token.important { - font-weight: normal; - } - - .token.bold { - font-weight: bold; - } - - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - } - - .namespace { - opacity: 0.7; - } -}