feat: Add new style navigation menu (#509)

openpitrix · Nov 6, 2018 · f9fa1f8 · f9fa1f8
1 parent abbf27f
commit f9fa1f8
Show file tree

Hide file tree

Showing 23 changed files with 922 additions and 440 deletions.
diff --git a/public/logo_icon.svg b/public/logo_icon.svg
diff --git a/src/components/Base/Icon/index.scss b/src/components/Base/Icon/index.scss
@@ -2,15 +2,15 @@
 
 :global {
   .#{$icon-prefix}-light {
-    --primary-color: #{$P100};
-    --secondary-color: #{$P30};
+    --primary-color: #{$P300};
+    --secondary-color: #{$P45};
     //--primary-opacity: 0.9;
     //--secondary-opacity: 0.4;
   }
 
   .#{$icon-prefix}-dark {
-    --primary-color: #{$N500};
-    --secondary-color: #{$N65};
+    --primary-color: #{$N300};
+    --secondary-color: #{$N45};
     //--primary-opacity: 0.9;
     //--secondary-opacity: 0.4;
   }

diff --git a/src/components/Base/Popover/index.scss b/src/components/Base/Popover/index.scss
@@ -4,7 +4,7 @@
   :global {
     .pi-popover-popper {
       min-width: 100px;
-      padding: 7px 0;
+      padding: 4px 0;
       font-size: $body-size;
       border-radius: 2px;
       background-color: $N0;

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { NavLink, withRouter } from 'react-router-dom';
+import { NavLink, withRouter, Link } from 'react-router-dom';
 import { observer, inject } from 'mobx-react';
 import { translate } from 'react-i18next';
 
@@ -52,7 +52,7 @@ class Header extends Component {
           activeClassName={styles.active}
           isActive={this.isLinkActive.bind(null, 'store')}
         >
-          {t('Store')}
+          {t('App Store')}
         </NavLink>
         <NavLink
           to="/purchased"
@@ -90,7 +90,7 @@ class Header extends Component {
       <div className={styles.user}>
         <Popover content={<MenuLayer />}>
           {username}
-          <Icon name="caret-down" className={styles.iconDark} type="dark" />
+          <Icon name="caret-down" className={styles.icon} type="dark" />
         </Popover>
       </div>
     );
@@ -103,34 +103,46 @@ class Header extends Component {
       match,
       rootStore: { fixNav }
     } = this.props;
-
-    const { isNormal } = this.props.user;
-    const logoUrl = !isHome || fixNav ? '/logo_light.svg' : '/logo_dark.svg';
-    const needShowSearch = isHome && fixNav;
+    const logoUrl = fixNav ? '/logo_light.svg' : '/logo_dark.svg';
     const appSearch = match.params.search;
 
-    return (
-      <div
-        className={classnames('header', styles.header, {
-          [styles.deep]: !isHome,
-          [styles.deepHome]: isHome && fixNav
-        })}
-      >
-        <div className={styles.wrapper}>
-          <Logo className={styles.logo} url={logoUrl} />
-          <div className={styles.menuOuter}>
-            {isNormal && !isHome && this.renderMenus()}
+    if (isHome) {
+      return (
+        <div
+          className={classnames('header', styles.header, {
+            [styles.deepHome]: fixNav
+          })}
+        >
+          <div className={styles.wrapper}>
+            <Logo className={styles.logo} url={logoUrl} />
             {this.renderMenuBtns()}
+            {fixNav && (
+              <Input.Search
+                className={styles.search}
+                placeholder={t('search.placeholder')}
+                value={appSearch}
+                onSearch={this.onSearch}
+                onClear={this.onClearSearch}
+              />
+            )}
           </div>
-          {needShowSearch && (
-            <Input.Search
-              className={styles.search}
-              placeholder={t('search.placeholder')}
-              value={appSearch}
-              onSearch={this.onSearch}
-              onClear={this.onClearSearch}
-            />
-          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className={classnames(styles.header, styles.deepInner)}>
+        <div className={styles.wrapper}>
+          <Link className={styles.logoIcon} to="/">
+            <Icon className={styles.icon} name="op-logo" type="white" size={16} />
+          </Link>
+          {this.renderMenus()}
+          {this.renderMenuBtns()}
+          <Icon name="mail" size={20} type="white" className={styles.mail} />
+          <Link to="#" className={styles.upgrade}>
+            <Icon name="shield" size={16} type="white" className={styles.shield} />
+            {t('UPGRADE_PROVIDER')}
+          </Link>
         </div>
       </div>
     );

diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss
@@ -21,38 +21,6 @@ $profile-hover-color: #efe6f8;
   z-index: 99;
   background: none;
 
-  &.deep {
-    background: linear-gradient(to left, $P75, #854fb9 32%, #484999);
-  }
-
-  &.deep, &.deepHome {
-    position: fixed;
-
-    .login{
-      color: $N0;
-    }
-
-    .user [class*='target']{
-      color: $N0;
-
-      :global{
-        .icon-caret-down svg{
-          --primary-color: #{$N0};
-          --secondary-color: #{$N0};
-        }
-      }
-    }
-  }
-
-
-  &.deepHome {
-    animation-duration: 0.5s;
-    animation-name: deepHeader;
-    animation-iteration-count: 1;
-    animation-timing-function: ease-in-out;
-    animation-fill-mode: forwards;
-  }
-
   .wrapper {
     width: $content-width;
     height: $header-height;
@@ -142,60 +110,156 @@ $profile-hover-color: #efe6f8;
     }
   }
 
-  .user [class*='target']{
+  .user {
     float: right;
-    margin: 12px 24px;
-    height: 20px;
-    width: auto;
-    line-height: 20px;
-    opacity: 0.9;
-    color: $N500;
-    font-weight: 500;
-    border: 0 none;
 
-    &:hover{
+    [class*='target'] {
+      margin: 16px 0 16px 8px;
+      height: 16px;
+      width: auto;
+      line-height: 16px;
+      font-size: 14px;
+      opacity: 0.9;
+      color: $N500;
+      font-weight: 500;
       border: 0 none;
-      box-shadow: none;
-      opacity: 1;
-    }
 
-    :global{
-      .icon-caret-down{
-        position: relative;
-        top: 3px;
-        left: 2px;
+      .icon {
+        float: right;
+        margin-left: 2px;
         svg {
           --primary-color: #{$N500};
           --secondary-color: #{$N500};
         }
       }
+
+      &:hover{
+        border: 0 none;
+        box-shadow: none;
+        opacity: 1;
+      }
     }
   }
 
-
   :global{
     .pi-popover-popper{
-      margin-left: -40px !important;
+      margin-left: -95px !important;
       margin-top: 6px !important;
     }
   }
 }
 
-.menuOuter {
-  .menus{
+.deepInner,
+.deepHome {
+  position: fixed;
+}
+
+.deepHome {
+  background: linear-gradient(to left, $P75, #854fb9 32%, #484999);
+  animation-duration: 0.5s;
+  animation-name: deepHeader;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+
+  .login {
+    color: $N0;
+  }
+
+  .user [class*='target']{
+    color: $N0;
+
+    .icon svg{
+      --primary-color: #{$N0};
+      --secondary-color: #{$N0};
+    }
+  }
+}
+
+.deepInner {
+  background-color: $N400;
+
+  .logoIcon {
     float: left;
-    margin-left: 50px;
-    a{
+    display: inline-block;
+    margin-top: 12px;
+    width: 24px;
+    height: 24px;
+    border-radius: 2px;
+    background-color: $N500;
+
+    .icon {
+      margin: 7px;
+    }
+  }
+
+  .menus {
+    display: inline-block;
+    margin-left: 8px;
+    a {
       display: inline-block;
-      margin: 0 12px;
-      padding: 13px 0;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 20px;
-      color: $N0;
-      &.active{
-        border-bottom: 2px solid $Y200;
+      margin: 0 8px;
+      padding: 16px 0;
+      font-size: 12px;
+      line-height: 16px;
+      color: $N65;
+
+      &:hover {
+        color: $N30;
+      }
+
+      &.active {
+        font-weight: 500;
+        color: $N10;
+      }
+    }
+  }
+
+  .user [class*='target'] {
+    font-size: 12px;
+    color: $N65;
+    opacity: 1;
+
+    .icon svg{
+      --primary-color: #{$N65};
+      --secondary-color: #{$N65};
+    }
+
+    &:hover {
+      color: $N30;
+
+      .icon svg {
+        --primary-color: #{$N30};
+        --secondary-color: #{$N30};
       }
     }
   }
+
+  .mail {
+    float: right;
+    margin: 14px 8px;
+  }
+
+  .upgrade {
+    float: right;
+    margin: 16px 8px;
+    line-height: 16px;
+    font-size: 12px;
+    font-weight: 500;
+    color: $Y100;
+
+    .shield {
+      float: left;
+      margin-right: 4px;
+      svg {
+        --primary-color: #{$Y100};
+        --secondary-color: #{$Y100};
+      }
+    }
+
+    &:hover {
+      color: $Y65;
+    }
+  }
 }
+