From 7427a4f62549abc8de135a8608bd924b7b479ef8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 23 Aug 2018 16:18:25 -0400 Subject: [PATCH] Better styling of filter items --- .../src/views/header/_global_filter_bar.scss | 18 --------- .../views/header/_global_filter_group.scss | 8 ++-- .../src/views/header/_global_filter_item.scss | 12 +++++- .../src/views/header/global_filter_bar.js | 31 ++------------- .../src/views/header/global_filter_item.js | 38 ++++++++++++++----- .../src/views/header/global_filter_options.js | 1 + src-docs/src/views/header/global_query.js | 12 +++--- 7 files changed, 55 insertions(+), 65 deletions(-) delete mode 100644 src-docs/src/views/header/_global_filter_bar.scss diff --git a/src-docs/src/views/header/_global_filter_bar.scss b/src-docs/src/views/header/_global_filter_bar.scss deleted file mode 100644 index 5e11e71b1e75..000000000000 --- a/src-docs/src/views/header/_global_filter_bar.scss +++ /dev/null @@ -1,18 +0,0 @@ -.globalFilterBar { - // Match just the regular drop shadow of inputs - @include euiFormControlDefaultShadow; - display: flex; - align-items: center; - padding: 4px; - min-height: $euiFormControlHeight; - margin: 0; -} - -.globalFilterBar__pinned { - padding: $euiSizeXS; - background-color: saturate(tintOrShade($euiColorSecondary, 40%, 50%), 50%); -} - -.globalFilterBar__pinnedIcon { - margin: -2px 0; -} diff --git a/src-docs/src/views/header/_global_filter_group.scss b/src-docs/src/views/header/_global_filter_group.scss index 099aeeddace3..890c123ccbe1 100644 --- a/src-docs/src/views/header/_global_filter_group.scss +++ b/src-docs/src/views/header/_global_filter_group.scss @@ -1,13 +1,15 @@ -@import 'global_filter_bar'; @import 'global_filter_item'; @import 'global_filter_form'; .globalFilterGroup__filterBar { - margin-top: 8px; + margin-top: $euiSizeM - 1px; } .globalFilterGroup__branch { - fill: $euiColorLightShade; + padding: $euiSize $euiSize $euiSizeS $euiSizeS; + background-repeat: no-repeat; + background-position: right top; + background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='14'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E"); } .globalFilterGroup__wrapper { diff --git a/src-docs/src/views/header/_global_filter_item.scss b/src-docs/src/views/header/_global_filter_item.scss index 6e1336586314..824c013b04b3 100644 --- a/src-docs/src/views/header/_global_filter_item.scss +++ b/src-docs/src/views/header/_global_filter_item.scss @@ -1,12 +1,20 @@ .globalFilterItem { + line-height: $euiSizeL + $euiSizeXS; + border: none; + color: $euiTextColor; + &:not(.globalFilterItem-isDisabled) { + @include euiFormControlDefaultShadow; + } } .globalFilterItem-isDisabled { + background-color: transparentize($euiColorLightShade, .4); + text-decoration: line-through; font-weight: $euiFontWeightRegular; font-style: italic; } -.globalFilterItem-isExcluded { - text-decoration: line-through; +.globalFilterItem-isPinned { + border-left: $euiSizeXS solid $euiColorSuccess; } diff --git a/src-docs/src/views/header/global_filter_bar.js b/src-docs/src/views/header/global_filter_bar.js index 52274a916801..87f5ce586c48 100644 --- a/src-docs/src/views/header/global_filter_bar.js +++ b/src-docs/src/views/header/global_filter_bar.js @@ -5,11 +5,8 @@ import classNames from 'classnames'; import { EuiFlexGroup, EuiFlexItem, - EuiToolTip, - EuiButtonIcon, } from '../../../../src/components'; import GlobalFilterAdd from './global_filter_add'; -import GlobalFilterOptions from './global_filter_options'; import { GlobalFilterItem } from './global_filter_item'; export const GlobalFilterBar = ({ @@ -45,35 +42,15 @@ export const GlobalFilterBar = ({ wrap={true} responsive={false} gutterSize="xs" + alignItems="center" {...rest} > - {pinnedFilters.length && ( // Show pinned filters first and in a specific group - - - - - - - - - {pinnedFilters} - - - - )} + {/* Show pinned filters first and in a specific group */} + {pinnedFilters} {unpinnedFilters} - - - - - - + ); }; diff --git a/src-docs/src/views/header/global_filter_item.js b/src-docs/src/views/header/global_filter_item.js index ff32400caa80..3c0a357b0ebe 100644 --- a/src-docs/src/views/header/global_filter_item.js +++ b/src-docs/src/views/header/global_filter_item.js @@ -52,6 +52,13 @@ export class GlobalFilterItem extends Component { }); }; + deleteFilter = (e) => { + window.alert('Filter would have been deleted.'); + // Make sure it doesn't also trigger the onclick for the whole badge + e.stopPropagation(); + } + + render() { const { className, @@ -75,26 +82,37 @@ export class GlobalFilterItem extends Component { className ); - let icon; - let badgeColor = 'hollow'; + let prefix = null; + if (isExcluded) { + prefix = NOT ; + } - if (isDisabled) { - icon = 'eyeClosed'; - badgeColor = 'default'; - } else if (isExcluded) { - icon = 'minusInCircle'; + let title = `Filter: ${field}: "${value}". Select for more filter actions.`; + if (isPinned) { + title = `Pinned ${title}`; + } else if (isDisabled) { + title = `Disabled ${title}`; } const badge = ( + {prefix} {field}: "{value}" diff --git a/src-docs/src/views/header/global_filter_options.js b/src-docs/src/views/header/global_filter_options.js index 25187c5cd9d4..12e69b78635f 100644 --- a/src-docs/src/views/header/global_filter_options.js +++ b/src-docs/src/views/header/global_filter_options.js @@ -112,6 +112,7 @@ export default class GlobalFilterOptions extends Component { color="text" iconType="gear" aria-label="Change all filters" + title="Change all filters" /> } anchorPosition="downCenter" diff --git a/src-docs/src/views/header/global_query.js b/src-docs/src/views/header/global_query.js index 8333053dc363..86bd53dfc868 100644 --- a/src-docs/src/views/header/global_query.js +++ b/src-docs/src/views/header/global_query.js @@ -10,6 +10,7 @@ import { } from '../../../../src/components'; import { GlobalFilterBar } from './global_filter_bar'; +import GlobalFilterOptions from './global_filter_options'; export default class extends Component { constructor(props) { @@ -90,7 +91,10 @@ export default class extends Component { this.filterBar = node; } + render() { + const filterButtonTitle = `${this.state.filters.length} filters applied. Select to ${this.state.isFiltersVisible ? 'hide' : 'show'}.`; + const filterTriggerButton = ( 0 ? this.state.filters.length : null} aria-controls="GlobalFilterGroup" aria-expanded={!!this.state.isFiltersVisible} + title={filterButtonTitle} > Filters @@ -138,11 +143,8 @@ export default class extends Component { alignItems="flexStart" responsive={false} > - - - - - + +