Add user menu markup to Header example.

- Create kuiLink mixin.
elastic · Jul 25, 2017 · d6710ff · d6710ff
1 parent 0913e4e
commit d6710ff
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 179 deletions.
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -364,7 +364,7 @@ table {
 /**
  * 1. Override KeyPadMenu.
  */
-.kuiHeaderAppMenu {
+.kuiHeaderPopover {
   top: calc(100% - 16px) !important;
   /* 1 */ }
 
@@ -378,6 +378,11 @@ table {
   padding: 16px 32px;
   display: inline-block;
   vertical-align: middle; }
+  .kuiHeaderLogo:hover {
+    text-decoration: underline; }
+  .kuiHeaderLogo:focus {
+    text-decoration: underline;
+    background: #e6f2f6; }
   .kuiHeaderLogo__icon {
     height: 32px;
     width: 24px;
@@ -400,8 +405,11 @@ table {
     -webkit-transform: rotate(15deg);
             transform: rotate(15deg);
     background: #D9D9D9; }
-  .kuiHeaderBreadcrumb:hover:not(.kuiHeaderBreadcrumb--collapsed) {
+  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):hover {
     text-decoration: underline; }
+  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):focus {
+    text-decoration: underline;
+    background: #e6f2f6; }
   .kuiHeaderBreadcrumb.isActive {
     color: #999; }
   .kuiHeaderBreadcrumb--collapsed {
@@ -539,6 +547,11 @@ table {
 
 .kuiLink {
   color: #0079a5; }
+  .kuiLink:hover {
+    text-decoration: underline; }
+  .kuiLink:focus {
+    text-decoration: underline;
+    background: #e6f2f6; }
   .kuiLink:hover {
     color: #005472; }
   .kuiLink:focus {
@@ -572,7 +585,7 @@ table {
             transform-origin: center top;
     opacity: 0;
     visibility: hidden;
-    margin-top: 16px; }
+    margin-top: 24px; }
     .kuiPopover__body:before {
       position: absolute;
       content: "";

diff --git a/ui_framework/doc_site/src/views/header/header.html b/ui_framework/doc_site/src/views/header/header.html
diff --git a/ui_framework/doc_site/src/views/header/header.js b/ui_framework/doc_site/src/views/header/header.js
@@ -22,16 +22,29 @@ export default class extends Component {
     super(props);
 
     this.state = {
+      isUserMenuOpen: false,
       isAppMenuOpen: false,
     };
   }
 
+  onUserMenuButtonClick() {
+    this.setState({
+      isUserMenuOpen: !this.state.isUserMenuOpen,
+    });
+  }
+
   onAppMenuButtonClick() {
     this.setState({
       isAppMenuOpen: !this.state.isAppMenuOpen,
     });
   }
 
+  closeUserMenu() {
+    this.setState({
+      isUserMenuOpen: false,
+    });
+  }
+
   closeAppMenu() {
     this.setState({
       isAppMenuOpen: false,
@@ -76,13 +89,89 @@ export default class extends Component {
     );
   }
 
-  renderUser() {
-    return (
-      <KuiHeaderSectionItemButton>
+  renderUserMenu() {
+    const button = (
+      <KuiHeaderSectionItemButton onClick={this.onUserMenuButtonClick.bind(this)}>
         <KuiIcon type="user" size="medium" />
         <span className="kuiHeader__notification">3</span>
       </KuiHeaderSectionItemButton>
     );
+
+    return (
+      <KuiPopover
+        button={button}
+        isOpen={this.state.isUserMenuOpen}
+        anchorPosition="right"
+        closePopover={this.closeUserMenu.bind(this)}
+        bodyClassName="kuiHeaderPopover"
+      >
+        <div className="kuiHeaderProfile kui--flexRow kui--flexAlignItemsCenter">
+          <div className="kui--flexShrink1 kui--paddingRight">
+            <div className="kuiAvatar kuiAvatar--large" style={{ background: `url('http://lorempixel.com/64/64/cats/')` }}>
+            </div>
+          </div>
+          <div className="kui--flexGrow1">
+            <p className="kui--marginBottom">John Username</p>
+            <div className="kui--flexRow">
+              <div className="kui--flexGrow1">
+                <a href="" className="kuiLink">Edit profile</a>
+              </div>
+              <div className="kui--flexGrow1 kui--textAlignRight">
+                <a href="" className="kuiLink">Log out</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="kuiHeaderAlert">
+          <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
+            <use href="#cross" />
+          </svg>
+          <p className="kuiHeaderAlert__title">Here's a notification title</p>
+          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.</p>
+          <div className="kui--flexRow">
+            <div className="kui--flexGrow1">
+              <a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
+            </div>
+            <div className="kui--flexGrow1 kuiHeaderAlert__date">
+              Nov. 14, 02:14PM.
+            </div>
+          </div>
+        </div>
+        <div className="kuiHeaderAlert">
+          <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
+            <use href="#cross" />
+          </svg>
+          <p className="kuiHeaderAlert__title">Here's a really long notification title with nonsense beneath it.</p>
+          <p className="kuiHeaderAlert__text">Walk the cow through a warm room, and then bring it to my plate.</p>
+          <div className="kui--flexRow">
+            <div className="kui--flexGrow1">
+              <a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
+            </div>
+            <div className="kui--flexGrow1 kuiHeaderAlert__date">
+              Nov. 14, 02:14PM.
+            </div>
+          </div>
+        </div>
+        <div className="kuiHeaderAlert">
+          <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
+            <use href="#cross" />
+          </svg>
+          <p className="kuiHeaderAlert__title">Here's a notification title</p>
+          <p className="kuiHeaderAlert__text">
+            Only usable on grilled cheese sandwiches.
+            That is the only application of Kraft Singles as far as I'm concerned.
+          </p>
+          <div className="kui--flexRow">
+            <div className="kui--flexGrow1">
+              <a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
+            </div>
+            <div className="kui--flexGrow1 kuiHeaderAlert__date">
+              Nov. 14, 02:14PM.
+            </div>
+          </div>
+        </div>
+      </KuiPopover>
+    );
   }
 
   renderAppMenu() {
@@ -98,7 +187,7 @@ export default class extends Component {
         isOpen={this.state.isAppMenuOpen}
         anchorPosition="right"
         closePopover={this.closeAppMenu.bind(this)}
-        bodyClassName="kuiHeaderAppMenu"
+        bodyClassName="kuiHeaderPopover"
       >
         <KuiKeyPadMenu>
           <KuiKeyPadMenuItem
@@ -171,7 +260,7 @@ export default class extends Component {
           </KuiHeaderSectionItem>
 
           <KuiHeaderSectionItem>
-            {this.renderUser()}
+            {this.renderUserMenu()}
           </KuiHeaderSectionItem>
 
           <KuiHeaderSectionItem>

diff --git a/ui_framework/src/components/header/_header_logo.scss b/ui_framework/src/components/header/_header_logo.scss
@@ -1,4 +1,6 @@
 @include component('kuiHeaderLogo') {
+  @include kuiLink;
+
   position: relative;
   height: $kuiHeaderChildSize;
   padding: $kuiSize $kuiSizeXL;

diff --git a/...c/components/header/_header_app_menu.scss → ...rc/components/header/_header_popover.scss b/...c/components/header/_header_app_menu.scss → ...rc/components/header/_header_popover.scss
@@ -1,6 +1,6 @@
 /**
  * 1. Override KeyPadMenu.
  */
-.kuiHeaderAppMenu {
+.kuiHeaderPopover {
   top: calc(100% - #{$kuiSize}) !important; /* 1 */
 }
diff --git a/ui_framework/src/components/header/_index.scss b/ui_framework/src/components/header/_index.scss
@@ -9,7 +9,7 @@ $kuiHeaderChildSize: $kuiSizeXXL + $kuiSizeL;
 // Components
 @import 'header';
 @import 'header_alert';
-@import 'header_app_menu';
+@import 'header_popover';
 @import 'header_profile';
 @import 'header_logo';
 @import 'header_breadcrumbs/index';

diff --git a/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss b/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss
@@ -20,8 +20,8 @@
     background: $kuiColorLightShade;
   }
 
-  &:hover:not(.kuiHeaderBreadcrumb--collapsed) {
-    text-decoration: underline;
+  &:not(.kuiHeaderBreadcrumb--collapsed) {
+    @include kuiLink;
   }
 
   @include state('isActive') {