From da8e417dcce3f03531ae074dc5304a53e2fc9779 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Tue, 17 Oct 2023 22:58:21 -0300 Subject: [PATCH 1/2] Get rid of border below tabs and replace resize handle with a border, as well as other touchups --- .../src/panels_resizable.tsx | 18 ++++++++-- .../src/components/data_table.scss | 4 +++ .../components/layout/discover_documents.tsx | 18 ++++------ .../components/layout/discover_layout.scss | 10 ------ .../layout/discover_main_content.tsx | 3 +- .../layout/discover_resizable_layout.tsx | 1 - .../discover_grid/render_custom_toolbar.scss | 9 ++--- .../components/doc_table/_doc_table.scss | 1 + .../view_mode_toggle/view_mode_toggle.tsx | 17 ++++----- .../saved_search_embeddable_base.tsx | 35 ++++++++++--------- 10 files changed, 57 insertions(+), 59 deletions(-) diff --git a/packages/kbn-resizable-layout/src/panels_resizable.tsx b/packages/kbn-resizable-layout/src/panels_resizable.tsx index 968e5203047fe7..300c9130b8100c 100644 --- a/packages/kbn-resizable-layout/src/panels_resizable.tsx +++ b/packages/kbn-resizable-layout/src/panels_resizable.tsx @@ -64,6 +64,17 @@ export const PanelsResizable = ({ () => setResizeWithPortalsHackIsResizing(false), [] ); + const baseButtonCss = css` + background-color: transparent !important; + gap: 0 !important; + + &:not(:hover):not(:focus) { + &:before, + &:after { + width: 0; + } + } + `; const defaultButtonCss = css` z-index: 3; `; @@ -207,9 +218,10 @@ export const PanelsResizable = ({ - -
- - - - - -
- +
+ + + + + +
); } diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss index 88da97d6f53330..55972b4f7f6291 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss @@ -32,16 +32,6 @@ discover-app { height: 100%; } -.dscSidebarResizeButton { - background-color: transparent !important; - - &:not(:hover):not(:focus) { - &:before, &:after { - width: 0; - } - } -} - .dscPageContent__wrapper { overflow: hidden; // Ensures horizontal scroll of table display: flex; diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx index f02de7e35c78f0..b828a51586498f 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui'; import { DragDrop, type DropType, DropOverlayWrapper } from '@kbn/dom-drag-drop'; import React, { useCallback, useMemo } from 'react'; import { DataView } from '@kbn/data-views-plugin/common'; @@ -96,6 +96,7 @@ export const DiscoverMainContent = ({ responsive={false} data-test-subj="dscMainContent" > + {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? ( } flexPanel={} - resizeButtonClassName="dscSidebarResizeButton" data-test-subj="discoverLayout" onFixedPanelSizeChange={setSidebarWidth} /> diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index 8926b223eda63c..fddb367e4a7883 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -1,6 +1,5 @@ .dscGridToolbar { - padding: $euiSizeS; - border-bottom: $euiBorderThin; + padding: $euiSizeS $euiSizeS 0 $euiSizeS; } .dscGridToolbarControlButton .euiDataGrid__controlBtn { @@ -33,7 +32,7 @@ } .dscGridToolbarControlGroup { - border: $euiBorderThin; + box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor; border-radius: $euiBorderRadiusSmall; display: inline-flex; align-items: stretch; @@ -57,10 +56,6 @@ } } -.dscGridToolbar .euiTabs { - transform: translateY(9px); -} - .dscGridToolbarBottom { position: relative; // for placing a loading indicator correctly } diff --git a/src/plugins/discover/public/components/doc_table/_doc_table.scss b/src/plugins/discover/public/components/doc_table/_doc_table.scss index 4553cdc05fdad1..8a9b629a9694bc 100644 --- a/src/plugins/discover/public/components/doc_table/_doc_table.scss +++ b/src/plugins/discover/public/components/doc_table/_doc_table.scss @@ -4,6 +4,7 @@ // stylelint-disable selector-no-qualifying-type .kbnDocTableWrapper { @include euiScrollBar; + @include euiOverflowShadow; overflow: auto; display: flex; flex: 1 1 100%; diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx index ea6fce02db5bcf..79c9213e763951 100644 --- a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx +++ b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx @@ -26,9 +26,13 @@ export const DocumentViewModeToggle = ({ const isLegacy = useMemo(() => uiSettings.get(DOC_TABLE_LEGACY), [uiSettings]); const includesNormalTabsStyle = viewMode === VIEW_MODE.AGGREGATED_LEVEL || isLegacy; + const tabsPadding = includesNormalTabsStyle ? euiTheme.size.s : 0; const tabsCss = css` - padding: 0 ${includesNormalTabsStyle ? euiTheme.size.s : 0}; - margin-top: ${includesNormalTabsStyle ? '17px' : 0}; + padding: ${tabsPadding} ${tabsPadding} 0 ${tabsPadding}; + + .euiTab__content { + line-height: ${euiTheme.size.xl}; + } `; const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false; @@ -38,16 +42,10 @@ export const DocumentViewModeToggle = ({ } return ( - + setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL)} - className="dscViewModeToggle__tab" data-test-subj="dscViewModeDocumentButton" > @@ -55,7 +53,6 @@ export const DocumentViewModeToggle = ({ setDiscoverViewMode(VIEW_MODE.AGGREGATED_LEVEL)} - className="dscViewModeToggle__tab" data-test-subj="dscViewModeFieldStatsButton" > data-test-subj={dataTestSubj} > {isLoading && } - - - {Boolean(prepend) && {prepend}} - {!!totalHitCount && ( - - - - )} - - + {(prepend || totalHitCount) && ( + + + {Boolean(prepend) && {prepend}} + + {!!totalHitCount && ( + + + + )} + + + )} {children} From f636952bcd25a268c858586bc49397038eefde13 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Wed, 18 Oct 2023 22:48:37 -0300 Subject: [PATCH 2/2] Hide divider when chart is hidden, and increase padding below toolbar --- .../main/components/layout/discover_main_content.tsx | 5 ++++- .../components/discover_grid/render_custom_toolbar.scss | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx index b828a51586498f..8b6ff5880d3dc3 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx @@ -20,6 +20,7 @@ import { DiscoverStateContainer } from '../../services/discover_state'; import { FieldStatisticsTab } from '../field_stats_table'; import { DiscoverDocuments } from './discover_documents'; import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants'; +import { useAppStateSelector } from '../../services/discover_app_state_container'; const DROP_PROPS = { value: { @@ -80,6 +81,8 @@ export const DiscoverMainContent = ({ ) : undefined; }, [viewMode, setDiscoverViewMode, isPlainRecord]); + const showChart = useAppStateSelector((state) => !state.hideChart); + return ( - + {showChart && } {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? (