[dolphinscheduler-website] branch master updated: Optimize the style of the head of the index page. (#328)

[kirs]

This is an automated email from the ASF dual-hosted git repository.

kirs pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git


The following commit(s) were added to refs/heads/master by this push:
     new ce776c1  Optimize the style of the head of the index page. (#328)
ce776c1 is described below

commit ce776c15ddf2704bae91bdaca2511b443896c8e7
Author: GaoTianDuo <gaotian...@cmss.chinamobile.com>
AuthorDate: Thu Apr 22 17:28:06 2021 +0800

    Optimize the style of the head of the index page. (#328)
---
 src/components/header/index.jsx  |  6 +++---
 src/components/header/index.scss | 40 +++++++++++++++++++++++++++++++++++++++-
 src/pages/home/index.jsx         | 11 ++++++++---
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index 8a0278b..fb4d86b 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -33,7 +33,7 @@ const noop = () => {};
 const propTypes = {
   currentKey: PropTypes.string,
   logo: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(['primary', 'normal']),
+  type: PropTypes.oneOf(['primary', 'normal','dark']),
   language: PropTypes.oneOf(['en-us', 'zh-cn']),
   onLanguageChange: PropTypes.func,
 };
@@ -202,10 +202,10 @@ class Header extends React.Component {
             <img
               className="header-menu-toggle"
               onClick={this.toggleMenu}
-              src={type === 'primary' ? getLink('/img/system/menu_white.png') 
: getLink('/img/system/menu_gray.png')}
+              src={type === 'normal' ? getLink('/img/system/menu_gray.png') : 
getLink('/img/system/menu_white.png')}
             />
             <div>
-              <Menu className={type === 'primary' ? 'whiteClass' : 
'blackClass'} onClick={this.handleClick} selectedKeys={[this.state.current]} 
mode="horizontal" forceSubMenuRender>
+              <Menu className={type === 'normal' ? 'blackClass' : 
'whiteClass'} onClick={this.handleClick} selectedKeys={[this.state.current]} 
mode="horizontal" forceSubMenuRender>
               {siteConfig[language].pageMenu.map(item => (
                 item.children ?
                 <SubMenu
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
index bf84c2d..9364365 100644
--- a/src/components/header/index.scss
+++ b/src/components/header/index.scss
@@ -19,6 +19,9 @@
   &-primary {
     background-color: transparent;
   }
+  &-dark {
+    background-color: #333;
+  }
   &-normal {
     background-color: #fff;
     box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
@@ -119,6 +122,25 @@
         }
       }
     }
+    .menu-item-dark {
+      a {
+        color: #fff;
+        opacity: 0.6;
+        font-family: Avenir-Medium;
+      }
+      &:hover {
+        a {
+          // font-family: Avenir-Heavy;
+          opacity: 1;
+        }
+      }
+      &-active {
+        a {
+          // font-family: Avenir-Heavy;
+          opacity: 1;
+        }
+      }
+    }
     .menu-item-normal {
       a {
         color: #333;
@@ -160,6 +182,10 @@
       border: 1px solid #FFF;
       color: #FFF;
     }
+    .language-switch-dark {
+      border: 1px solid #FFF;
+      color: #FFF;
+    }
     .language-switch-normal {
       border: 1px solid #333;
       color: #333;
@@ -202,6 +228,18 @@
           }
         }
       }
+      &-dark {
+        .icon-search {
+          border-color: #fff;
+          opacity: 0.6;
+          &::before {
+            background-color: #fff;
+          }
+          &:hover {
+            opacity: 1;
+          }
+        }
+      }
       &-normal {
         .icon-search {
           border-color: #333;
@@ -288,7 +326,7 @@
             }
           }
         }
-        .menu-item-primary-active, .menu-item-normal-active {
+        .menu-item-primary-active, .menu-item-normal-active, 
.menu-item-dark-active {
           background: $endColor;
           a {
             color: #fff;
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 9d9136b..893e7f6 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -22,11 +22,16 @@ class Home extends Language {
   componentDidMount() {
     window.addEventListener('scroll', () => {
       const scrollTop = getScrollTop();
-      if (scrollTop > 66) {
+      if (scrollTop > 66 && scrollTop<=663) {
         this.setState({
           headerType: 'normal',
         });
-      } else {
+      } else if(scrollTop>663){
+        this.setState({
+          headerType: 'dark',
+        });
+      }
+      else {
         this.setState({
           headerType: 'primary',
         });
@@ -48,7 +53,7 @@ class Home extends Language {
     const language = this.getLanguage();
     const dataSource = homeConfig[language];
     const { headerType } = this.state;
-    const headerLogo = headerType === 'primary' ? '/img/hlogo_white.svg' : 
'/img/hlogo_colorful.svg';
+    const headerLogo = headerType === 'normal' ? '/img/hlogo_colorful.svg' : 
'/img/hlogo_white.svg';
     return (
       <div className="home-page">
         <section className="top-section">