From 662a5abb9fdd580a2c91e974fee547f030062f12 Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Wed, 6 Feb 2019 10:12:17 -0800 Subject: [PATCH] K7 Discover app cleanup (#30037) Does some design cleanup in the discover application. --- .../public/__tests__/doc_views.js | 4 +- .../kbn_doc_views/public/views/table.html | 18 ++++--- .../kibana/public/discover/_discover.scss | 10 ++-- .../kibana/public/discover/_hacks.scss | 1 + .../field_chooser/field_chooser.html | 4 +- .../lib/detail_views/string.html | 2 +- .../kibana/public/discover/index.html | 15 +++--- .../public/doc_table/components/table_row.js | 2 +- .../doc_table/components/table_row/_cell.scss | 4 ++ .../components/table_row/_details.scss | 18 +++++++ .../components/table_row/details.html | 54 +++++++++++++------ .../doc_table/components/table_row/open.html | 10 ++-- .../public/doc_viewer/__tests__/doc_viewer.js | 4 +- src/ui/public/doc_viewer/_doc_viewer.scss | 19 +++++++ src/ui/public/doc_viewer/doc_viewer.js | 17 +++--- .../filter_bar/_global_filter_group.scss | 2 +- src/ui/public/filter_bar/filter_bar.tsx | 46 ++++++++-------- src/ui/public/filter_bar/filter_item.tsx | 2 +- .../styles/_legacy/components/_sidebar.scss | 9 ++-- src/ui/ui_render/views/ui_app.pug | 2 +- 20 files changed, 157 insertions(+), 86 deletions(-) diff --git a/src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js b/src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js index 9eb65408bddb..e14974c09838 100644 --- a/src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js +++ b/src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js @@ -117,7 +117,7 @@ describe('docViews', function () { describe('filtering', function () { it('should apply a filter when clicking filterable fields', function () { - const cell = $elem.find('td[title="bytes"]').next(); + const cell = $elem.find('td[title="bytes"]').prev(); cell.find('.fa-search-plus').first().click(); expect($scope.filter.calledOnce).to.be(true); @@ -128,7 +128,7 @@ describe('docViews', function () { }); it('should NOT apply a filter when clicking non-filterable fields', function () { - const cell = $elem.find('td[title="area"]').next(); + const cell = $elem.find('td[title="area"]').prev(); cell.find('.fa-search-plus').first().click(); expect($scope.filter.calledOnce).to.be(false); diff --git a/src/legacy/core_plugins/kbn_doc_views/public/views/table.html b/src/legacy/core_plugins/kbn_doc_views/public/views/table.html index 02fae6aab1b6..24c2d13b5474 100644 --- a/src/legacy/core_plugins/kbn_doc_views/public/views/table.html +++ b/src/legacy/core_plugins/kbn_doc_views/public/views/table.html @@ -1,11 +1,6 @@ - - + '); + $el.after(''); $el.empty(); // when we compile the details, we use this $scope diff --git a/src/ui/public/doc_table/components/table_row/_cell.scss b/src/ui/public/doc_table/components/table_row/_cell.scss index 3927e07a1cc8..b73a2598070b 100644 --- a/src/ui/public/doc_table/components/table_row/_cell.scss +++ b/src/ui/public/doc_table/components/table_row/_cell.scss @@ -2,6 +2,10 @@ white-space: pre-wrap; } +.kbnDocTableCell__toggleDetails { + padding: 4px 0 0 0!important; +} + .kbnDocTableCell__filter { position: absolute; white-space: nowrap; diff --git a/src/ui/public/doc_table/components/table_row/_details.scss b/src/ui/public/doc_table/components/table_row/_details.scss index 04ed61b83810..75d4789de929 100644 --- a/src/ui/public/doc_table/components/table_row/_details.scss +++ b/src/ui/public/doc_table/components/table_row/_details.scss @@ -5,3 +5,21 @@ float: right; padding-top: $euiSizeS; /* 1 */ } + +// Overwrite the border on the bootstrap table +.kbnDocTableDetails__row { + + > td { + // Offsets negative margins from an inner flex group + padding: $euiSizeL !important; + + tr:hover td { + background: tintOrShade($euiColorLightestShade, 50%, 20%); + } + } + + td { + border-top: none !important; + } +} + diff --git a/src/ui/public/doc_table/components/table_row/details.html b/src/ui/public/doc_table/components/table_row/details.html index d6c7db734576..fa1fbee5d8f5 100644 --- a/src/ui/public/doc_table/components/table_row/details.html +++ b/src/ui/public/doc_table/components/table_row/details.html @@ -1,20 +1,42 @@ diff --git a/src/ui/public/doc_viewer/__tests__/doc_viewer.js b/src/ui/public/doc_viewer/__tests__/doc_viewer.js index 141f41393cf2..e55718374be1 100644 --- a/src/ui/public/doc_viewer/__tests__/doc_viewer.js +++ b/src/ui/public/doc_viewer/__tests__/doc_viewer.js @@ -81,14 +81,14 @@ describe('docViewer', function () { registerExtension(); registerExtension({ title: 'exampleView2' }); init(); - expect($elem.find('.nav-tabs li').length).to.be(2); + expect($elem.find('.euiTabs button').length).to.be(2); }); it('should activate the first view in order', function () { registerExtension({ order: 2 }); registerExtension({ title: 'exampleView2' }); init(); - expect($elem.find('.nav-tabs .active').text().trim()).to.be('exampleView2'); + expect($elem.find('.euiTabs .euiTab-isSelected').text().trim()).to.be('exampleView2'); }); }); }); diff --git a/src/ui/public/doc_viewer/_doc_viewer.scss b/src/ui/public/doc_viewer/_doc_viewer.scss index 9dde3460f5b1..539efbe592a5 100644 --- a/src/ui/public/doc_viewer/_doc_viewer.scss +++ b/src/ui/public/doc_viewer/_doc_viewer.scss @@ -5,6 +5,11 @@ word-break: break-all; word-wrap: break-word; white-space: pre-wrap; + color: $euiColorFullShade; + } + + .dscFieldName { + color: $euiColorDarkShade; } td, @@ -15,6 +20,12 @@ tr:first-child td { border-top-color: transparent; } + + tr:hover { + .kbnDocViewer__actionButton { + opacity: 1; + } + } } .kbnDocViewer__content { @@ -26,3 +37,11 @@ .kbnDocViewer__field { white-space: nowrap; } + +.kbnDocViewer__actionButton { + opacity: 0; + + &:focus { + opacity: 1; + } +} diff --git a/src/ui/public/doc_viewer/doc_viewer.js b/src/ui/public/doc_viewer/doc_viewer.js index 8420f2808052..3012b9fd5e52 100644 --- a/src/ui/public/doc_viewer/doc_viewer.js +++ b/src/ui/public/doc_viewer/doc_viewer.js @@ -39,25 +39,26 @@ uiModules.get('kibana') template: function ($el) { const $viewer = $('
'); $el.append($viewer); - const $tabs = $('
- +
-
- - +
+
+
+
+ +
+
+

+
+
+
+
+
+
+ +
+
+ +
+
+
+