move CountInfoPopUp (#559)

elasticpath · Jan 13, 2020 · f8eb161 · f8eb161
1 parent b1b573a
commit f8eb161
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/src/components/package-lock.json b/src/components/package-lock.json
diff --git a/src/components/package.json b/src/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elasticpath/store-components",
-  "version": "1.1.49",
+  "version": "1.1.50",
   "main": "build/cjs/index",
   "main:src": "src/index",
   "types": "build/types/components/src/index",

diff --git a/src/components/src/AppHeaderLogin/appheaderlogin.main.less b/src/components/src/AppHeaderLogin/appheaderlogin.main.less
@@ -22,6 +22,8 @@
 @import './../../../theme/common.less';
 
 .app-login-component {
+  position: relative;
+
   .auth-profile-menu-list {
     margin-bottom: 0;
   }
@@ -51,7 +53,7 @@
       &:focus {
         background-color: transparent;
       }
-      
+
       .account-icon {
         fill: @mainNavigationColor;
         display: inline-block;
@@ -240,4 +242,26 @@
       }
     }
   }
+
+  .requisition-list-container {
+
+    &.show:before {
+      content: '';
+      position: absolute;
+      top: 26px;
+      right: 14px;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 10px solid @mainBackgroundColor;
+      z-index: 10;
+    }
+
+    .dropdown-menu {
+      right: 0;
+      left: auto;
+      margin-top: 9px;
+    }
+  }
 }
diff --git a/src/components/src/AppHeaderLogin/appheaderlogin.main.tsx b/src/components/src/AppHeaderLogin/appheaderlogin.main.tsx
@@ -304,13 +304,6 @@ class AppHeaderLoginMain extends Component<AppHeaderLoginMainProps, AppHeaderLog
 
         return (
           <div className={`requisition-list-container ${count ? 'show' : ''}`}>
-            <Link to="/b2b/requisition-lists" className="dashboard-link link-item">
-              <div>
-                <span className="dashboard-nav">
-                  {intl.get('requisition-lists')}
-                </span>
-              </div>
-            </Link>
             <div className={`dropdown-menu ${count ? 'show' : ''}`}>
               <CountInfoPopUp countData={countData} />
             </div>
@@ -320,6 +313,7 @@ class AppHeaderLoginMain extends Component<AppHeaderLoginMainProps, AppHeaderLog
       if (isLoggedIn) {
         return (
           <div className={`app-login-component ${isMobileView ? 'mobile-view' : ''}`}>
+            {(Config.b2b.req_list) ? (<RequisitionListsLink />) : ('')}
             <div className="auth-container dropdown">
               <button className="dropdown-toggle btn-auth-menu" type="button" id={`${isMobileView ? 'mobile_' : ''}header_navbar_loggedIn_button`} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 {(isMobileView)
@@ -357,7 +351,13 @@ class AppHeaderLoginMain extends Component<AppHeaderLoginMainProps, AppHeaderLog
                     </li>) : ('')}
                   {(Config.b2b.req_list) ? (
                     <li className="dropdown-item">
-                      <RequisitionListsLink />
+                      <Link to="/b2b/requisition-lists" className="dashboard-link link-item">
+                        <div>
+                          <span className="dashboard-nav">
+                            {intl.get('requisition-lists')}
+                          </span>
+                        </div>
+                      </Link>
                     </li>) : ('')}
                   {permission && (
                   <li className="dropdown-item">