basic layout and scrolling now works

elastic · Feb 27, 2020 · f6b2cee · f6b2cee
1 parent 8761909
commit f6b2cee
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 265 deletions.
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
@@ -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,17 +182,48 @@
 .dscSidebarItem__label {
   overflow: hidden; /* 1 */
   text-overflow: ellipsis; /* 1 */
+  font-size: $euiFontSizeS;
+  color: $euiColorDarkShade;
+  flex-grow: 1;
+  padding: 0 $euiSizeXS;
 }
 
 /**
  * 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 */
+  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/...core_plugins/kibana/public/discover/np_ready/angular/directives/field_name/field_name.tsx b/...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 (
-    <EuiFlexGroup className={className} alignItems="center" gutterSize="s" responsive={false}>
+    <EuiFlexGroup className={className} alignItems="center" responsive={false} gutterSize="s">
       <EuiFlexItem grow={false}>
         <FieldIcon
           type={type}

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
@@ -20,22 +20,20 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
   </kbn-top-nav>
 
   <main class="dscApp__frame">
-    <div class="dscApp__sidebar sidebar-container collapsible-sidebar" id="discover-sidebar">
-      <div class="dscFieldChooser">
-        <disc-field-chooser
-          columns="state.columns"
-          hits="rows"
-          field-counts="fieldCounts"
-          index-pattern="searchSource.getField('index')"
-          index-pattern-list="opts.indexPatternList"
-          state="state"
-          on-add-field="addColumn"
-          on-add-filter="filterQuery"
-          on-remove-field="removeColumn"
-        >
-        </disc-field-chooser>
-      </div>
-    </div>
+    <disc-field-chooser
+      columns="state.columns"
+      hits="rows"
+      field-counts="fieldCounts"
+      index-pattern="searchSource.getField('index')"
+      index-pattern-list="opts.indexPatternList"
+      state="state"
+      on-add-field="addColumn"
+      on-add-filter="filterQuery"
+      on-remove-field="removeColumn"
+      class="dscApp__sidebar"
+      id="discover-sidebar"
+    >
+    </disc-field-chooser>
 
     <div class="dscApp__content">
       <discover-unsupported-index-pattern
@@ -175,6 +173,7 @@ <h2 class="euiTitle euiTitle--xsmall " data-test-subj="discoverQueryHits">
               on-filter="filterQuery"
               on-remove-column="removeColumn"
               on-sort="setSortOrder"
+              class="dscDiscoverGrid"
             ></discover-grid>
             <div ng-if="useNewGrid">
               <doc-table

diff --git a/...core_plugins/kibana/public/discover/np_ready/components/field_chooser/_field_chooser.scss b/...core_plugins/kibana/public/discover/np_ready/components/field_chooser/_field_chooser.scss
@@ -1,6 +1,28 @@
 .dscFieldChooser {
   padding-left: $euiSize;
   padding-right: $euiSize;
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+.dscFieldChooser__section {
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+.dscFieldChooser__sectionStatic {
+  padding: 0 $euiSize;
+}
+
+.dscFieldChooser__sectionScroll {
+  flex-grow: 1;
+  overflow-x: hidden;
+  @include euiYScrollWithShadows;
+  padding: 0 $euiSize;
 }
 
 .dscFieldChooser__toggle {
@@ -9,9 +31,13 @@
 }
 
 .dscFieldName {
-  color: $euiColorDarkShade;
+  color: $euiColorDarkestShade;
 }
 
+.dscFieldName__displayName {
+  height: $euiSize;
+  display: block;
+}
 /*
   Fixes EUI known issue https://github.com/elastic/eui/issues/1749
 */

diff --git a/..._plugins/kibana/public/discover/np_ready/components/field_chooser/change_indexpattern.tsx b/..._plugins/kibana/public/discover/np_ready/components/field_chooser/change_indexpattern.tsx
@@ -64,7 +64,7 @@ export function ChangeIndexPattern({
         onClick={() => setPopoverIsOpen(!isPopoverOpen)}
         {...rest}
       >
-        {label}
+        <strong>{label}</strong>
       </EuiButtonEmpty>
     );
   };

diff --git a/...core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.html b/...core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.html
@@ -1,26 +1,22 @@
 <li
-  class="sidebar-item"
   attr-field="{{::field.name}}"
+  class="dscSidebarItem"
 >
-  <div
-    data-test-subj="field-{{::field.name}}"
-    ng-click="onClickToggleDetails($event, field)"
-    kbn-accessible-click
-    class="sidebar-item-title dscSidebarItem"
-  >
     <div class="dscField dscSidebarItem__label">
       <field-name
+        data-test-subj="field-{{::field.name}}"
+        ng-click="onClickToggleDetails($event, field)"
+        kbn-accessible-click
         field="field"
       ></field-name>
     </div>
 
     <button
       ng-if="field.name !== '_source'"
       ng-click="toggleDisplay(field)"
-      ng-class="::field.display ? 'kuiButton--danger' : 'kuiButton--primary'"
+      ng-class="::field.display ? 'dscSidebarItem__action--remove' : 'dscSidebarItem__action--add'"
       ng-bind="::addRemoveButtonLabel"
-      class="dscSidebarItem__action kuiButton kuiButton--small"
+      class="dscSidebarItem__action"
       data-test-subj="fieldToggle-{{::field.name}}"
     ></button>
-  </div>
 </li>
diff --git a/...ugins/kibana/public/discover/np_ready/components/field_chooser/discover_index_pattern.tsx b/...ugins/kibana/public/discover/np_ready/components/field_chooser/discover_index_pattern.tsx
@@ -61,14 +61,13 @@ export function DiscoverIndexPattern({
   }
 
   return (
-    <div className="indexPattern__container">
+    <div>
       <I18nProvider>
         <ChangeIndexPattern
           trigger={{
             label: selected.title,
             title: selected.title,
             'data-test-subj': 'indexPattern-switch-link',
-            className: 'indexPattern__triggerButton',
           }}
           indexPatternId={selected.id}
           indexPatternRefs={options}