From ef5cbee2b3314304f81c7c88f82ede36c2c055f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 25 Apr 2020 07:43:54 +0200 Subject: [PATCH] Search: Improvements to design (#23874) * Search: updated design * Fixed z-index * Fixes * Minor pixel push --- packages/grafana-data/src/types/theme.ts | 14 +-- .../grafana-ui/src/components/Tags/Tag.tsx | 2 +- packages/grafana-ui/src/themes/default.ts | 14 +-- .../features/search/components/ActionRow.tsx | 14 ++- .../search/components/DashboardSearch.tsx | 102 +++++++++------- .../search/components/ManageDashboards.tsx | 19 ++- .../search/components/SearchField.tsx | 20 ++- public/sass/components/_navbar.scss | 1 + public/sass/components/_search.scss | 114 ------------------ 9 files changed, 101 insertions(+), 199 deletions(-) diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts index 7751dbfd280..a80cbadce48 100644 --- a/packages/grafana-data/src/types/theme.ts +++ b/packages/grafana-data/src/types/theme.ts @@ -98,13 +98,13 @@ export interface GrafanaThemeCommons { panelPadding: number; panelHeaderHeight: number; zIndex: { - dropdown: string; - navbarFixed: string; - sidemenu: string; - tooltip: string; - modalBackdrop: string; - modal: string; - typeahead: string; + dropdown: number; + navbarFixed: number; + sidemenu: number; + tooltip: number; + modalBackdrop: number; + modal: number; + typeahead: number; }; } diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx index 8dbb88ce9c3..c4a7c8e73c6 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.tsx +++ b/packages/grafana-ui/src/components/Tags/Tag.tsx @@ -45,7 +45,7 @@ const getTagStyles = (theme: GrafanaTheme, name: string, colorIndex?: number) => line-height: ${theme.typography.lineHeight.xs}; vertical-align: baseline; background-color: ${colors.color}; - color: ${theme.colors.textStrong}; + color: ${theme.palette.gray98}; white-space: nowrap; text-shadow: none; padding: 3px 6px; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 593ad453c35..e07d5944e33 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -122,13 +122,13 @@ const theme: GrafanaThemeCommons = { panelPadding: 8, panelHeaderHeight: 28, zIndex: { - navbarFixed: '1000', - sidemenu: '1020', - dropdown: '1030', - typeahead: '1030', - tooltip: '1040', - modalBackdrop: '1050', - modal: '1060', + navbarFixed: 1000, + sidemenu: 1020, + dropdown: 1030, + typeahead: 1030, + tooltip: 1040, + modalBackdrop: 1050, + modal: 1060, }, }; diff --git a/public/app/features/search/components/ActionRow.tsx b/public/app/features/search/components/ActionRow.tsx index 45a415bd7e8..568cc237883 100644 --- a/public/app/features/search/components/ActionRow.tsx +++ b/public/app/features/search/components/ActionRow.tsx @@ -77,11 +77,15 @@ ActionRow.displayName = 'ActionRow'; const getStyles = stylesFactory((theme: GrafanaTheme) => { return { actionRow: css` - display: flex; - justify-content: space-between; - align-items: center; - padding: ${theme.spacing.md} 0; - width: 100%; + display: none; + + @media only screen and (min-width: ${theme.breakpoints.md}) { + display: flex; + justify-content: space-between; + align-items: center; + padding: ${theme.spacing.md} 0; + width: 100%; + } `, }; }); diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx index 1f4e20abbf7..d197311cba3 100644 --- a/public/app/features/search/components/DashboardSearch.tsx +++ b/public/app/features/search/components/DashboardSearch.tsx @@ -1,6 +1,6 @@ import React, { FC, memo } from 'react'; import { css } from 'emotion'; -import { useTheme, CustomScrollbar, stylesFactory, Button } from '@grafana/ui'; +import { useTheme, CustomScrollbar, stylesFactory, IconButton } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; import { useSearchQuery } from '../hooks/useSearchQuery'; import { useDashboardSearch } from '../hooks/useDashboardSearch'; @@ -24,11 +24,8 @@ export const DashboardSearch: FC = memo(({ onCloseSearch, folder }) => { // The main search input has own keydown handler, also TagFilter uses input, so // clicking Esc when tagFilter is active shouldn't close the whole search overlay - const onClose = (e: React.KeyboardEvent) => { - const target = e.target as HTMLElement; - if ((target.tagName as any) !== 'INPUT' && ['Escape', 'ArrowLeft'].includes(e.key)) { - onCloseSearch(); - } + const onClose = () => { + onCloseSearch(); }; const onLayoutChange = (layout: string) => { @@ -39,59 +36,80 @@ export const DashboardSearch: FC = memo(({ onCloseSearch, folder }) => { }; return ( -
- -
- - - +
+
+ +
+ +
+
+
+ - + + + +
-
); }); const getStyles = stylesFactory((theme: GrafanaTheme) => { return { + overlay: css` + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: ${theme.zIndex.sidemenu}; + position: fixed; + background: ${theme.colors.dashboardBg}; + + @media only screen and (min-width: ${theme.breakpoints.md}) { + left: 60px; + z-index: ${theme.zIndex.navbarFixed + 1}; + } + `, + container: css` + max-width: 1400px; + margin: 0 auto; + padding: ${theme.spacing.md}; + + height: 100%; + + @media only screen and (min-width: ${theme.breakpoints.md}) { + padding: 32px; + } + `, closeBtn: css` - top: 10px; - right: 8px; + right: -5px; + top: 2px; + z-index: 1; position: absolute; `, searchField: css` - padding-left: ${theme.spacing.md}; + position: relative; `, search: css` display: flex; flex-direction: column; - padding: ${theme.spacing.xl}; height: 100%; - max-width: 1400px; `, }; }); diff --git a/public/app/features/search/components/ManageDashboards.tsx b/public/app/features/search/components/ManageDashboards.tsx index 509e038dfbb..a0bb05099e8 100644 --- a/public/app/features/search/components/ManageDashboards.tsx +++ b/public/app/features/search/components/ManageDashboards.tsx @@ -11,9 +11,9 @@ import { useManageDashboards } from '../hooks/useManageDashboards'; import { SearchResultsFilter } from './SearchResultsFilter'; import { SearchResults } from './SearchResults'; import { DashboardActions } from './DashboardActions'; -import { SearchField } from './SearchField'; import { useSearchLayout } from '../hooks/useSearchLayout'; import { SearchLayout } from '../types'; +import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; export interface Props { folderId?: number; @@ -93,7 +93,13 @@ export const ManageDashboards: FC = memo(({ folderId, folderUid }) => {
- + @@ -193,15 +199,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { container: css` height: 100%; `, - searchField: css` - height: auto; - border-bottom: none; - padding: 0; - margin: 0; - input { - width: 400px; - } - `, results: css` display: flex; flex-direction: column; diff --git a/public/app/features/search/components/SearchField.tsx b/public/app/features/search/components/SearchField.tsx index 9c8af4e31d2..71d82bdb976 100644 --- a/public/app/features/search/components/SearchField.tsx +++ b/public/app/features/search/components/SearchField.tsx @@ -1,6 +1,6 @@ import React, { FC, useContext } from 'react'; import { css, cx } from 'emotion'; -import { ThemeContext, Icon, Input } from '@grafana/ui'; +import { ThemeContext } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; import { DashboardQuery } from '../types'; @@ -17,21 +17,19 @@ interface SearchFieldProps extends Omit ({ wrapper: css` width: 100%; - height: 55px; /* this variable is not part of GrafanaTheme yet*/ display: flex; - background-color: ${theme.colors.panelBg}; - border-bottom: 1px solid ${theme.colors.panelBorder}; position: relative; align-items: center; `, input: css` - max-width: 683px; - margin-right: 90px; box-sizing: border-box; outline: none; - background-color: ${theme.colors.panelBg}; - background: ${theme.colors.panelBg}; - flex-grow: 10; + background-color: transparent; + background: transparent; + border-bottom: 2px solid ${theme.colors.border1}; + font-size: 20px; + line-height: 38px; + width: 100%; `, spacer: css` flex-grow: 1; @@ -60,7 +58,7 @@ export const SearchField: FC = ({ query, onChange, size, clear return (
- = ({ query, onChange, size, clear tabIndex={1} spellCheck={false} className={styles.input} - prefix={} - suffix={clearable && onChange('')} />} {...inputProps} /> diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index f34b9974b33..1129fa127e4 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -18,6 +18,7 @@ &--edit { background: $panel-bg; border-bottom: $panel-border; + box-shadow: 0 0 10px $dashboard-bg; } } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index aa0aac8c35f..64649b05b6b 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -1,79 +1,3 @@ -.search-container { - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: ($zindex-modal-backdrop + 10); - position: fixed; - background: $dashboard-bg; -} - -// Search -.search-dropdown { - display: flex; - flex-direction: column; - height: calc(100% - #{$navbarHeight}); -} - -.search-dropdown__col_1 { - padding: $dashboard-padding; - max-width: 700px; - display: flex; - flex-direction: column; - flex-grow: 1; - height: 100%; // Chrome 74 needs this to make the element scrollable - - .search-item--indent { - margin-left: 14px; - } -} - -.search-dropdown__col_2 { - flex-grow: 1; - height: 100%; - padding-top: 16px; - display: none; - flex-direction: column; -} - -.search-filter-box { - background: $panel-bg; - border: $panel-border; - border-radius: 3px; - padding: $spacer * 1.5; - min-width: 340px; - margin-bottom: $spacer * 1.5; -} - -.search-filter-box__header { - border-bottom: 1px solid $hr-border-color; - margin-bottom: $spacer * 1.5; -} - -.search-filter-box-link { - display: block; - margin-bottom: 16px; - - &:last-child { - margin-bottom: 0; - } - - i, - img { - font-size: 20px; - margin-right: 5px; - } -} - -.search-results-scroller { - display: flex; - position: relative; - min-height: 100%; - background: $panel-bg; - border: $panel-border; - border-radius: 3px; -} - .search-results-container { display: block; padding: $spacer; @@ -232,10 +156,6 @@ } @include media-breakpoint-up(md) { - .search-container { - left: $side-menu-width; - } - .search-item__tags { display: flex; flex: 1 1 auto; @@ -243,38 +163,4 @@ justify-content: flex-end; margin-top: -2px; } - - .search-dropdown__col_2 { - display: flex; - margin-bottom: $space-md; - } -} - -@include media-breakpoint-up(md) { - .search-dropdown__col_2 { - flex-direction: row; - justify-content: space-between; - max-width: 700px; - height: 260px; - align-items: flex-start; - } - - .search-filter-box { - margin: 0; - } -} - -@include media-breakpoint-up(lg) { - .search-dropdown { - flex-direction: row; - } - - .search-dropdown__col_2 { - flex-direction: column; - } - - .search-filter-box { - margin-left: $spacer * 1.5; - margin-bottom: $spacer * 1.5; - } }