Improving structure and sidebar scrolling

src/plugins/data/public/ui/query_string_input/query_string_input.tsx

@@ -524,7 +524,6 @@ export class QueryStringInputUI extends Component<Props, State> {
           <div role="search">
             <div className="kuiLocalSearchAssistedInput">
               <EuiFieldText
-                compressed
                 placeholder={
                   this.props.placeholder ||
                   i18n.translate('data.query.queryBar.searchInputPlaceholder', {

x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss

@@ -1,4 +1,5 @@
-@import 'src/legacy/ui/public/chrome/variables';
+@import "src/legacy/ui/public/chrome/variables";
+@import "@elastic/eui/src/components/header/variables";
 
 @mixin gphSvgText() {
   font-family: $euiFontFamily;
@@ -13,13 +14,13 @@
  * 1. Calculated px values come from the open/closed state of the global nav sidebar
  */
 
-
- #graphBasic {
-   display: flex;
-   flex-direction: column;
-   flex: 1;
-   overflow: hidden;
- }
+#graphBasic {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - #{$euiHeaderChildSize});
+  width: 100%;
+  overflow: hidden;
+}
 
 .gphGraph__container {
   display: flex;

x-pack/legacy/plugins/graph/public/angular/templates/index.html

@@ -1,7 +1,6 @@
 <main id="graphBasic" ng-controller="graphuiPlugin" aria-labelledby="graphHeading">
   <!-- Local nav. -->
-  <kbn-top-nav name="workspacesTopNav" config="topNavMenu">
-  </kbn-top-nav>
+  <kbn-top-nav name="workspacesTopNav" config="topNavMenu"> </kbn-top-nav>
 
   <div class="gphGraph__menus" ng-show="menus.showInspect">
     <div>
@@ -11,10 +10,7 @@
         i18n-default-message="Inspect"
       ></div>
 
-      <div
-        class="list-group-item"
-        ng-if="(workspace !== null)"
-      >
+      <div class="list-group-item" ng-if="(workspace !== null)">
         <small class="help-block">http://host:port/{{ selectedIndex.name }}/_graph/explore</small>
         <ul class="nav nav-tabs">
           <li ng-class="{active: spymode === 'request'}">
@@ -49,39 +45,45 @@
     </div>
   </div>
 
-  <div
-    graph-app
-    current-index-pattern="selectedIndex"
-    on-query-submit="submit"
-    index-pattern-provider="indexPatternProvider"
-    redux-store="reduxStore"
-    confirm-wipe-workspace="confirmWipeWorkspace"
-    is-loading="loading"
-    is-initialized="workspaceInitialized || savedWorkspace.id || (workspace && workspace.nodes.length > 0)"
-    initial-query="initialQuery"
-    plugin-data-start="pluginDataStart"
-    core-start="coreStart"
-    storage="storage"
-    no-index-patterns="noIndexPatterns"
-    client-workspace="workspace"
-    selected-nodes="workspace.selectedNodes"
-    notify-angular="notifyAngular"
-  ></div>
-
-  <div class="gphGraph__container" id="GraphSvgContainer" ng-if="workspaceInitialized || savedWorkspace.id || (workspace && workspace.nodes.length > 0)">
+  <div class="gphGraph__workspace">
     <div
-      class="gphVisualization"
-      graph-visualization
-      nodes="workspace.nodes"
-      edges="workspace.edges"
-      edge-click="clickEdge"
-      node-click="nodeClick"
-      max-doc-count="workspace.maxDocCount"
-      client-workspace="workspace"
+      class="gphGraph__workspace__inner"
+      graph-app
+      current-index-pattern="selectedIndex"
+      on-query-submit="submit"
+      index-pattern-provider="indexPatternProvider"
       redux-store="reduxStore"
+      confirm-wipe-workspace="confirmWipeWorkspace"
+      is-loading="loading"
+      is-initialized="workspaceInitialized || savedWorkspace.id || (workspace && workspace.nodes.length > 0)"
+      initial-query="initialQuery"
+      plugin-data-start="pluginDataStart"
+      core-start="coreStart"
+      storage="storage"
+      no-index-patterns="noIndexPatterns"
+      client-workspace="workspace"
+      selected-nodes="workspace.selectedNodes"
       notify-angular="notifyAngular"
     ></div>
-  </div>
-  <!--end svg container-->
 
+    <div
+      class="gphGraph__visContainer"
+      id="GraphSvgContainer"
+      ng-if="workspaceInitialized || savedWorkspace.id || (workspace && workspace.nodes.length > 0)"
+    >
+      <div
+        class="gphVisualization"
+        graph-visualization
+        nodes="workspace.nodes"
+        edges="workspace.edges"
+        edge-click="clickEdge"
+        node-click="nodeClick"
+        max-doc-count="workspace.maxDocCount"
+        client-workspace="workspace"
+        redux-store="reduxStore"
+        notify-angular="notifyAngular"
+      ></div>
+    </div>
+    <!--end svg container-->
+  </div>
 </main>

x-pack/legacy/plugins/graph/public/components/_app.scss

@@ -1,129 +1,90 @@
-.gphGraph__bar {
-  margin: 0px $euiSizeS $euiSizeS $euiSizeS;
+@import "@elastic/eui/src/components/header/variables";
+
+// variables
+$sidebarWidth: $euiSizeXXL * 10;
+
+.gphGraph__workspace,
+.gphGraph__workspace__inner {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.gphAddData {
+.gphGraph__visContainer {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  top: 116px;
+  left: 0;
+  width: 100%;
   height: calc(100% - 116px);
-  background-color: $euiPageBackgroundColor;
-  width: $euiSizeXXL * 10;
-  border-top: 1px solid $euiBorderColor;
-  z-index: $euiZNavigation;
-
-  &__body {
-    padding: $euiSize;
-
-    .euiPanel {
-      margin-bottom: $euiSize;
-    }
-    .euiText {
-      margin-bottom: $euiSizeXS;
-    }
-  }
-
-  &__editNodeName + &__editNodeName {
-    margin-top: $euiSizeS;
-   }
+  width: calc(100% - #{$sidebarWidth});
 
-  &__prependIcon {
-    display: flex;
-    width: $euiSize * 2;
-    align-items: center;
-    justify-content: center;
-    background: $euiColorLightShade;
-    border-right: 1px solid $euiBorderColor;
+  .gphVisualization {
+    height: 100%;
   }
+}
 
-  &__circleIcon {
-    display: flex;
-    width: $euiSizeL;
-    height: $euiSizeL;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-
-    .gphLegacyIcon {
-      margin-right: 0;
-      text-align: center;
-      display: inline-flex;
-      width: auto;
-      font-size: 12px;
-    }
-  }
+.gphGraph__bar {
+  margin: 0px $euiSizeS $euiSizeS $euiSizeS;
 }
 
-.gphAddData__header {
+.gphGraph__mainWrapper {
+  flex-grow: 1;
   display: flex;
- border-bottom: 1px solid $euiBorderColor;
- padding: $euiSize 0;
-
- &__title {
-  flex: 1;
-  padding: 0 $euiSize;
- }
-
- &__title,
- &__toggleIcon {
-  padding: 0 $euiSize;
- }
+  flex-direction: column;
 }
 
+.gphGraph__openSidebar {
+  @include euiBottomShadowSmall;
+  position: absolute;
+  top: $euiSizeS;
+  right: $euiSizeXS;
+  background: $euiColorEmptyShade;
+  padding: $euiSizeXS;
+}
 
-.gphAddData__nodesArea {
+.gphGraph__graphWrapper {
+  background-color: $euiColorEmptyShade;
   position: relative;
-  padding: $euiSize $euiSizeS;
-  border: $euiBorderThin;
-  border-radius: $euiBorderRadius;
-  margin-top: $euiSizeS;
-  margin-bottom: $euiSize;
+}
 
-  > span {
-    margin-right: $euiSizeXS;
+.gphGraphSidebar {
+  background-color: $euiPageBackgroundColor;
+  width: $sidebarWidth;
+  overflow: hidden;
 
-    &:last-of-type {
-      margin-right: 0
-    }
+  > * {
+    width: $sidebarWidth;
   }
 
-  span + span {
-    margin-top: $euiSizeXS;
+  &__header {
+    display: flex;
+    border-bottom: 1px solid $euiBorderColor;
+    padding: $euiSize 0;
+  }
+  &__title {
+    flex: 1;
+    padding: 0 $euiSize;
   }
 
-  &:hover,
-  &:focus {
-    .gphAddData__nodesArea__delete {
-      visibility: visible;
-      opacity: 1;
-    }
+  &__title,
+  &__toggleIcon {
+    padding: 0 $euiSize;
   }
 
-  &__delete {
-    @include euiBottomShadowSmall;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    margin-right: -$euiSizeS;
-    margin-top: -$euiSizeM;
-    background: $euiColorEmptyShade;
-    padding: $euiSizeXS;
-    visibility: hidden;
-    opacity: 0;
+  &__body {
+    @include euiScrollBar;
+    padding-bottom: 0; /* 1 */
+    flex-grow: 1;
+    flex-basis: 1px; /* Fixes scrolling for Firefox */
+    overflow-y: auto;
   }
-}
 
-.gphAddData__nodesAddList {
-  box-sizing: border-box;
+  &__bodyOverflow {
+    padding: $euiSize;
 
-  .gphAddData__circleIcon {
-    margin-right: $euiSizeS;
+    > *:last-child {
+      margin-bottom: $euiSize; /* 1 */
+    }
   }
 }
-
-.gphGraph__openSidebar {
-  @include euiBottomShadowSmall;
-  background: $euiColorEmptyShade;
-  padding: $euiSizeXS;
-}
-

x-pack/legacy/plugins/graph/public/components/_index.scss

@@ -7,3 +7,4 @@
 @import './settings/index';
 @import './legacy_icon/index';
 @import './field_manager/index';
+@import './add_data/index';