From 46e756985d1dca88fd151d187772336fb90a3c37 Mon Sep 17 00:00:00 2001 From: Uladzimir Dzmitrachkou Date: Mon, 13 Aug 2018 20:54:28 +0300 Subject: [PATCH] Convert all Less files to Sass in discover, use EUI variable scope (#21290) Discover now uses sass for its styling --- src/core_plugins/kibana/_hacks.scss | 0 src/core_plugins/kibana/public/_hacks.scss | 0 .../__tests__/directives/field_chooser.js | 8 +- .../kibana/public/discover/_discover.scss | 216 ++++++++++++ .../kibana/public/discover/_hacks.scss | 20 ++ .../kibana/public/discover/_index.scss | 16 + .../{fetch_error.less => _fetch_error.scss} | 0 .../components/fetch_error/_index.scss | 1 + .../components/fetch_error/fetch_error.js | 2 - .../field_chooser/discover_field.html | 6 +- .../field_chooser/discover_field.js | 2 + .../field_chooser/field_chooser.html | 10 +- .../lib/detail_views/string.html | 26 +- .../__snapshots__/no_results.test.js.snap | 8 +- .../public/discover/directives/_index.scss | 1 + .../discover/directives/_no_results.scss | 3 + .../public/discover/directives/index.js | 1 - .../public/discover/directives/no_results.js | 2 +- .../discover/directives/no_results.less | 12 - .../directives/unsupported_index_pattern.js | 2 +- .../kibana/public/discover/index.html | 27 +- .../kibana/public/discover/index.js | 1 - .../kibana/public/discover/styles/main.less | 314 ------------------ src/core_plugins/kibana/public/index.scss | 6 +- src/ui/public/directives/field_name.js | 4 +- .../boolean_field_name_icon.html | 2 +- .../conflict_field_name_icon.html | 2 +- .../date_field_name_icon.html | 2 +- .../geo_point_field_name_icon.html | 2 +- .../field_name_icons/ip_field_name_icon.html | 2 +- .../murmur3_field_name_icon.html | 2 +- .../number_field_name_icon.html | 2 +- .../source_field_name_icon.html | 2 +- .../string_field_name_icon.html | 2 +- .../unknown_field_name_icon.html | 2 +- .../doc_table/components/table_row/cell.html | 6 +- .../doc_table/components/table_row/open.html | 2 +- src/ui/public/doc_table/doc_table.less | 10 - src/ui/public/styles/_local_search.scss | 8 + test/functional/page_objects/discover_page.js | 2 +- .../components/paginated_table/open.html | 2 +- .../server/lib/layouts/preserve_layout.css | 2 +- .../server/lib/layouts/print.css | 2 +- 43 files changed, 340 insertions(+), 402 deletions(-) create mode 100644 src/core_plugins/kibana/_hacks.scss create mode 100644 src/core_plugins/kibana/public/_hacks.scss create mode 100644 src/core_plugins/kibana/public/discover/_discover.scss create mode 100644 src/core_plugins/kibana/public/discover/_hacks.scss create mode 100644 src/core_plugins/kibana/public/discover/_index.scss rename src/core_plugins/kibana/public/discover/components/fetch_error/{fetch_error.less => _fetch_error.scss} (100%) create mode 100644 src/core_plugins/kibana/public/discover/components/fetch_error/_index.scss create mode 100644 src/core_plugins/kibana/public/discover/directives/_index.scss create mode 100644 src/core_plugins/kibana/public/discover/directives/_no_results.scss delete mode 100644 src/core_plugins/kibana/public/discover/directives/no_results.less delete mode 100644 src/core_plugins/kibana/public/discover/styles/main.less create mode 100644 src/ui/public/styles/_local_search.scss diff --git a/src/core_plugins/kibana/_hacks.scss b/src/core_plugins/kibana/_hacks.scss new file mode 100644 index 000000000000000..e69de29bb2d1d64 diff --git a/src/core_plugins/kibana/public/_hacks.scss b/src/core_plugins/kibana/public/_hacks.scss new file mode 100644 index 000000000000000..e69de29bb2d1d64 diff --git a/src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js b/src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js index 930a172e1ed705b..0d90a992afbbdb3 100644 --- a/src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js +++ b/src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js @@ -121,9 +121,9 @@ describe('discover field chooser directives', function () { const getSections = function (ctx) { return { - selected: $('.discover-selected-fields', ctx), - popular: $('.discover-popular-fields', ctx), - unpopular: $('.discover-unpopular-fields', ctx), + selected: $('.dscFieldList--selected', ctx), + popular: $('.dscFieldList--popular', ctx), + unpopular: $('.dscFieldList--unpopular', ctx), }; }; @@ -157,7 +157,7 @@ describe('discover field chooser directives', function () { function find(popularity) { return section[popularity] - .find('.discover-field-name') + .find('.dscFieldName') .map((i, el) => $(el).text()) .toArray(); } diff --git a/src/core_plugins/kibana/public/discover/_discover.scss b/src/core_plugins/kibana/public/discover/_discover.scss new file mode 100644 index 000000000000000..52890b980534972 --- /dev/null +++ b/src/core_plugins/kibana/public/discover/_discover.scss @@ -0,0 +1,216 @@ +// SASSTODO: replace the margin-top value with a variable +.dscSidebar__listHeader { + margin-top: 5px; +} + +// SASSTODO: replace the padding-top value with a variable +.dscFieldList--popular { + padding-top: 10px; +} + +// SASSTODO: replace the z-index value with a variable +.dscWrapper { + padding-right: 0; + padding-left: 21px; + z-index: 1 +} + +.dscWrapper__content { + padding-right: $euiSize; + clear: both; +} + +.dscTimechart { + display: block; + position: relative; + + // SASSTODO: the visualizing component should have an option or a modifier + .series > rect { + fill-opacity: 0.5; + stroke-width: 1; + } +} + +.dscTimechart__header { + display: flex; + justify-content: center; + min-height: $euiSizeXXL; + padding: $euiSizeXS 0; +} + +.dscOverlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 20; + padding-top: $euiSizeM; + + opacity: 0.75; + text-align: center; + background-color: transparent; +} + +.dscTable { + overflow: auto; + + // SASSTODO: add a monospace modifier to the doc-table component + .discover-table-row { + font-family: $euiCodeFontFamily; + } +} + +// SASSTODO: replace the padding value with a variable +.dscTable__footer { + background-color: $euiColorLightShade; + padding: 5px 10px; + text-align: center; +} + +/** + * 1. When switching between open and closed, the toggle changes size + * slightly which is a problem because it forces the entire table to + * re-render which is SLOW. + */ +.dscTable__openButton { + appearance: none; + background-color: transparent; + padding: 0; + border: none; + width: 14px; /* 1 */ + height: 14px; +} + +/** + * 1. Override sidebar-item-title styles. + */ +.dscSidebarItem { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 0 !important; /* 1 */ + padding-bottom: 0 !important; /* 1 */ + height: $euiSizeXL; + + &:hover, + &:focus { + .dscSidebarItem__action { + opacity: 1; + } + } +} + +.dscSidebarItem--active { + background: shade($euiColorLightestShade, 5%); + color: $euiColorFullShade; + font-weight: bold; +} + +/** + * 1. Truncate long text so it doesn't push the actions outside of the container. + */ +.dscSidebarItem__label { + overflow: hidden; /* 1 */ + text-overflow: ellipsis; /* 1 */ +} + +/** + * 1. Only visually hide the action, so that it's still accessible to screen readers. + * 2. When tabbed to, this element needs to be visible for keyboard accessibility. + */ +.dscSidebarItem__action { + opacity: 0; /* 1 */ + + &:focus { + opacity: 1; /* 2 */ + } +} + +// SASSTODO: replace the padding value with a variable +.dscFieldDetails { + padding: 10px; + background-color: shade($euiColorLightestShade, 5%); + color: shade($euiColorEmptyShade, 65%); +} + +// SASSTODO: replace the padding and margin values with variables +.dscFieldDetails__progress { + background-color: rgba(0, 0, 0, 0.8); + padding: 3px; + border-radius: $euiBorderRadius; + margin-left: 3px; + margin-right: 3px; +} + +// SASSTODO: replace the margin-top value with a variable +.dscFieldDetailsItem { + margin-top: 5px; +} + +.dscFieldDetails__filter { + cursor: pointer; +} + +.dscFieldDetailsItem__title { + line-height: 1.5; + display: flex; + align-items: center; + justify-content: space-between; +} + +/** + * 1. If the field name is very long, don't let it squash the buttons. + */ +.dscFieldDetailsItem__buttonGroup { + flex: 0 0 auto; /* 1 */ +} + +.dscFieldDetailsItem__button { + appearance: none; + border: none; + padding: 0; + background-color: transparent; +} + +.dscField--noResults { + color: $euiColorDarkShade; +} + +// SASSTODO: replace the margin-right value with a variables +.dscField__icon { + margin-right: 5px; + text-align: center; + display: inline-block; + width: $euiSizeM; + color: $euiColorDarkShade; +} + +.dscResults { + h3 { + margin: -20px 0 10px 0; + text-align: center; + } +} + +.dscResults__interval { + display: inline-block; + width: auto; +} + +.dscSkipButton { + position: absolute; + left: -10000px; + top: $euiSizeXS; + width: 1px; + height: 1px; + overflow: hidden; + + &:focus { + left: initial; + right: $euiSize; + width: auto; + height: auto; + } +} diff --git a/src/core_plugins/kibana/public/discover/_hacks.scss b/src/core_plugins/kibana/public/discover/_hacks.scss new file mode 100644 index 000000000000000..8681aa3d2303bf6 --- /dev/null +++ b/src/core_plugins/kibana/public/discover/_hacks.scss @@ -0,0 +1,20 @@ +// SASSTODO: the classname is dinamically generated with ng-class +.tab-discover { + overflow: hidden; +} + +// SASSTODO: these are Angular Bootstrap classes. Will be replaced by EUI +.dscFieldDetails { + .progress { + background-color: shade($euiColorLightestShade, 5%); + margin-bottom: 0; + border-radius: 0; + } + + .progress-bar { + padding-left: 10px; + text-align: right; + line-height: 20px; + max-width: 100%; + } +} diff --git a/src/core_plugins/kibana/public/discover/_index.scss b/src/core_plugins/kibana/public/discover/_index.scss new file mode 100644 index 000000000000000..b45ab8781566d66 --- /dev/null +++ b/src/core_plugins/kibana/public/discover/_index.scss @@ -0,0 +1,16 @@ +@import 'components/fetch_error/index'; +@import 'directives/index'; + +@import '../../../../ui/public/styles/local_search'; + +@import 'hacks'; + +// Discover plugin styles + +// Prefix all styles with "dsc" to avoid conflicts. +// Examples +// dscTable +// dscTable__footer +// monChart__legend--small +// monChart__legend-isLoading +@import 'discover'; diff --git a/src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.less b/src/core_plugins/kibana/public/discover/components/fetch_error/_fetch_error.scss similarity index 100% rename from src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.less rename to src/core_plugins/kibana/public/discover/components/fetch_error/_fetch_error.scss diff --git a/src/core_plugins/kibana/public/discover/components/fetch_error/_index.scss b/src/core_plugins/kibana/public/discover/components/fetch_error/_index.scss new file mode 100644 index 000000000000000..596f7b66866e3bc --- /dev/null +++ b/src/core_plugins/kibana/public/discover/components/fetch_error/_index.scss @@ -0,0 +1 @@ +@import 'fetch_error'; diff --git a/src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js b/src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js index 48bb62372aa15c1..745693178d9669a 100644 --- a/src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js +++ b/src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js @@ -30,8 +30,6 @@ import { EuiSpacer, } from '@elastic/eui'; -import './fetch_error.less'; - const DiscoverFetchError = ({ fetchError }) => { if (!fetchError) { return null; diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html index fae9b70af0bc274..76d7bec8e454cc3 100644 --- a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html +++ b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html @@ -6,10 +6,10 @@ data-test-subj="field-{{::field.name}}" ng-click="onClickToggleDetails($event, field)" kbn-accessible-click - class="sidebar-item-title discover-sidebar-item" + class="sidebar-item-title dscSidebarItem" > @@ -18,7 +18,7 @@ ng-click="toggleDisplay(field)" ng-class="::field.display ? 'kuiButton--danger' : 'kuiButton--primary'" ng-bind="::field.display ? 'remove' : 'add'" - class="discover-sidebar-item-action kuiButton kuiButton--small" + class="dscSidebarItem__action kuiButton kuiButton--small" data-test-subj="fieldToggle-{{::field.name}}" > diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.js b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.js index 6113f8fa8886cf1..4627dfbdcf9e88d 100644 --- a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.js +++ b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.js @@ -96,11 +96,13 @@ app.directive('discoverField', function ($compile) { detailsElem = $(detailsHtml); $compile(detailsElem)(detailScope); $elem.append(detailsElem).addClass('active'); + $elem.find('.dscSidebarItem').addClass('dscSidebarItem--active'); } else { delete field.details; detailScope.$destroy(); detailsElem.remove(); $elem.removeClass('active'); + $elem.find('.dscSidebarItem').removeClass('dscSidebarItem--active'); } }; diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html index f80bbdbc4f1df7a..2e64db6656bca2a 100644 --- a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html +++ b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html @@ -31,12 +31,12 @@ -
+
-
-