diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss index 5b973b3c338f4..764dd4d2280d6 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss @@ -23,20 +23,28 @@ position: relative; flex-grow: 1; display: flex; + overflow: hidden; } .dscApp__sidebar { flex-grow: 0; flex-basis: auto; min-width: 250px; - padding: 0 $euiSizeS; + display: flex; + flex-direction: column; } .dscApp__content { flex-grow: 1; - flex-basis: 0%; + flex-direction: column; + display: flex; + overflow: hidden; } +.dscDiscoverGrid { + width: 100%; + max-width: 100%; +} .dscHistogram { display: flex; height: $euiSize * 8; @@ -52,13 +60,6 @@ padding-top: $euiSizeS; } -.dscFieldList--selected, -.dscFieldList--unpopular, -.dscFieldList--popular { - padding-left: $euiSizeS; - padding-right: $euiSizeS; -} - .dscWrapper { padding-right: $euiSizeS; padding-left: 21px; @@ -69,15 +70,16 @@ .dscWrapper__content { padding-top: $euiSizeXS; background-color: $euiColorEmptyShade; - - .kbn-table { - margin-bottom: 0; - } + flex-grow: 1; + flex-direction: column; + display: flex; + overflow: hidden; } .dscTimechart { display: block; position: relative; + flex-grow: 0; // SASSTODO: the visualizing component should have an option or a modifier .series > rect { @@ -90,6 +92,7 @@ display: flex; justify-content: space-between; padding: 0 $euiSizeS; + flex-grow: 0; } .dscResultCount__title { @@ -124,6 +127,8 @@ .dscTable { overflow: auto; + flex-grow: 1; + display: flex; // TODO: Delete when old Discover table is removed .kbnDocTable__row { @@ -143,22 +148,24 @@ padding: 0 !important; } -/** - * 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 { + .dscSidebarItem__label { + text-decoration: underline; + } + } &:hover, &:focus { + background: $euiColorEmptyShade; + @include euiBottomShadowSmall; + .dscSidebarItem__action { - opacity: 1; + visibility: visible; } } } @@ -175,6 +182,10 @@ .dscSidebarItem__label { overflow: hidden; /* 1 */ text-overflow: ellipsis; /* 1 */ + font-size: $euiFontSizeS; + color: $euiColorDarkShade; + flex-grow: 1; + padding: 0 $euiSizeXS; } /** @@ -182,10 +193,37 @@ * 2. When tabbed to, this element needs to be visible for keyboard accessibility. */ .dscSidebarItem__action { - opacity: 0; /* 1 */ + font-size: $euiFontSizeXS; + height: $euiSizeXL; + padding: 0 $euiSizeXS; + visibility: hidden; + border-radius: 0 $euiBorderRadius / 2 $euiBorderRadius / 2 0; + + &--add { + color: $euiColorPrimary; + background: tint($euiColorPrimary, 90%); + + &:focus, + &:hover { + background: $euiColorPrimary; + color: $euiColorGhost; + } + } - &:focus { - opacity: 1; /* 2 */ + &--remove { + background: tint($euiColorDanger, 90%); + color: $euiColorDanger; + + &:focus, + &:hover { + background: $euiColorDanger; + color: $euiColorGhost; + } + } + + &:focus, + &:hover { + text-decoration: underline; } } @@ -245,6 +283,11 @@ } .dscResults { + flex-grow: 1; + flex-direction: column; + display: flex; + overflow: hidden; + h3 { margin: -20px 0 10px 0; text-align: center; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/field_name/field_name.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/field_name/field_name.tsx index 54e1c1706a856..79fe4a8ab3d9c 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/field_name/field_name.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/field_name/field_name.tsx @@ -54,7 +54,7 @@ export function FieldName({ field, fieldName, fieldType, useShortDots, fieldIcon }); return ( - + {{screenTitle}}
-
-
- - -
-
+ +
on-filter="filterQuery" on-remove-column="removeColumn" on-sort="setSortOrder" + class="dscDiscoverGrid" >
setPopoverIsOpen(!isPopoverOpen)} {...rest} > - {label} + {label} ); }; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.html index 06e7cc5075411..7ffc9de95fb40 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.html +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.html @@ -1,15 +1,12 @@
  • -
    @@ -17,10 +14,9 @@ -
    • diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_index_pattern.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_index_pattern.tsx index cca523ee2c1bd..ae80df295048f 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_index_pattern.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_index_pattern.tsx @@ -61,14 +61,13 @@ export function DiscoverIndexPattern({ } return ( -
    +
    - - -
    +
    +
    + + +
    -
    -

    -
    -
      - - -
    - -
    -

    +
    +
    +

    +
      + + +
    +

    +
    +
    -
    - + class="kuiButton kuiButton--small visible-xs visible-sm pull-right dscFieldChooser__toggle" + > + + +
    -
    -
      -
    • -
      -
      • - - -
    +
      +
    • +
      +
      • + + +
    -
      - - -
    +
      + + +
    +
    diff --git a/src/legacy/ui/public/styles/_legacy/components/_index.scss b/src/legacy/ui/public/styles/_legacy/components/_index.scss index 4a50a0430d559..cfae0700bb71e 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_index.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_index.scss @@ -7,7 +7,6 @@ @import './navbar'; @import './config'; @import './pagination'; -@import './sidebar'; @import './spinner'; @import './table'; @import './truncate'; diff --git a/src/legacy/ui/public/styles/_legacy/components/_sidebar.scss b/src/legacy/ui/public/styles/_legacy/components/_sidebar.scss deleted file mode 100644 index d44129b6ec849..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_sidebar.scss +++ /dev/null @@ -1,127 +0,0 @@ -// ONLY USED IN DISCOVER - -.sidebar-container { - padding-left: 0 !important; - padding-right: 0 !important; - background-color: $euiColorLightestShade; - border-right-color: transparent; - border-bottom-color: transparent; - - .sidebar-well { - background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade); - } - - .sidebar-list { - .sidebar-controls { - border-radius: $euiBorderRadius; - margin-right: -13px; - margin-top: $euiSizeXS / 2; - - .navbar-btn-link { - padding-left: $euiSizeS; - padding-right: $euiSizeS; - } - - .sidebar-controls-error { - cursor: default; - } - } - - ul { - list-style: none; - margin-bottom: 0; - } - - .sidebar-item { - border-top-color: transparent; - font-size: $euiFontSizeXS; - border-top: solid 1px transparent; - border-bottom: solid 1px transparent; - line-height: normal; - - label { - @include __legacyLabelStyles__bad; - margin-bottom: $euiSizeXS; - display: block; - } - - &.active { - background-color: shade($euiColorLightestShade, 10%); - color: $euiColorDarkestShade; - border-color: $euiColorLightShade; - } - } - - .sidebar-item-title, - .sidebar-item-text { - margin: 0; - padding: $euiSizeXS 0; - text-align: center; - width: 100%; - border: none; - border-radius: 0; - } - - .sidebar-item-title { - @include euiTextTruncate; - text-align: left; - - &.full-title { - white-space: normal; - } - } - - .sidebar-item-text { - background: $euiColorEmptyShade; - } - } - - .sidebar-list-header { - .sidebar-list-header-heading { - color: $euiColorDarkestShade; - border: 1px solid transparent; - } - - .sidebar-list-header-label { - padding-left: $euiSizeS; - font-size: $euiFontSizeXS; - line-height: $euiLineHeight; - font-weight: $euiFontWeightBold; - color: $euiColorDarkShade; - border-bottom: 1px solid $euiColorLightShade; - } - } - - .index-pattern { - font-weight: $euiFontWeightBold; - padding: $euiSizeXS $euiSizeS; - display: flex; - justify-content: space-between; - background-color: shadeOrTint($euiColorPrimary, 60%, 60%); - color: $euiColorEmptyShade; - line-height: $euiSizeL; - - .index-pattern-label { - font-size: $euiFontSizeS; - font-weight: $euiFontWeightBold; - margin: 0; - } - - > * { - flex: 0 1 auto; - align-self: center; - } - } -} - -.indexPattern__container { - display: flex; - align-items: center; - height: $euiSize * 3; - margin-top: -$euiSizeS; -} - -.indexPattern__triggerButton { - @include euiTitle('xs'); - line-height: $euiSizeXXL; -}