Updating design of popover (#9)

and added manage button that needs to be hooked up
cchaos · Jul 31, 2018 · 21c6929 · 21c6929
1 parent 9c4f71e
commit 21c6929
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.js b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.js
@@ -10,7 +10,7 @@ import {
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiFieldSearch,
-  EuiHorizontalRule,
+  EuiButton,
 } from '@elastic/eui';
 import { SpaceAvatar } from '../../components/space_avatar';
 import { SPACE_SEARCH_COUNT_THRESHOLD } from '../../../../common/constants';
@@ -32,6 +32,8 @@ export class SpacesMenu extends Component {
       items = [this.renderSearchField(), this.renderSpacesListPanel(items, searchTerm)];
     }
 
+    items.push(this.renderManageButton());
+
     return (
       <EuiContextMenuPanel
         className="spacesMenu"
@@ -76,15 +78,23 @@ export class SpacesMenu extends Component {
 
   renderSearchField = () => {
     return (
-      <EuiContextMenuPanel key="spacesMenuSearchField">
+      <EuiContextMenuItem key="spacesMenuSearchField">
         <EuiFieldSearch
           className="spacesMenu__searchField"
           placeholder="Find a space"
           incremental={true}
           onSearch={this.onSearch}
+          compressed
         />
-        <EuiHorizontalRule />
-      </EuiContextMenuPanel>
+      </EuiContextMenuItem>
+    );
+  }
+
+  renderManageButton = () => {
+    return (
+      <EuiContextMenuItem>
+        <EuiButton size="s" style={{ width: `100%` }}>Manage spaces</EuiButton>
+      </EuiContextMenuItem>
     );
   }
 

diff --git a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.less b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.less
@@ -1,4 +1,4 @@
 .spacesMenu__spacesList {
-  max-height: 300px;
+  max-height: 320px;
   overflow-y: auto;
 }
diff --git a/x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.js b/x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.js
@@ -66,9 +66,10 @@ export class NavControlPopover extends Component {
       <EuiPopover
         button={button}
         isOpen={this.state.isOpen}
-        panelPaddingSize={'none'}
         closePopover={this.closePortal}
         anchorPosition={'rightCenter'}
+        panelPaddingSize="none"
+        ownFocus
       >
         <SpacesMenu spaces={this.state.spaces} onSelectSpace={this.onSelectSpace} />
       </EuiPopover>