[incubator-dolphinscheduler-website] branch master updated: Modify menu font style

[lidongdai]

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

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


The following commit(s) were added to refs/heads/master by this push:
     new c162a29  Modify menu font style
     new 4b1ae5e  Merge pull request #41 from break60/master
c162a29 is described below

commit c162a29f26d3be740d104b4d8547fc31ddfff98b
Author: break60 <790061...@qq.com>
AuthorDate: Wed Nov 27 21:51:06 2019 +0800

    Modify menu font style
---
 docs/en-us/user_doc/system-manual.md |  2 +-
 docs/zh-cn/user_doc/system-manual.md |  2 +-
 src/components/header/index.jsx      | 19 ++++++++++++++++---
 src/components/header/index.scss     | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/docs/en-us/user_doc/system-manual.md 
b/docs/en-us/user_doc/system-manual.md
index 0a02a69..e0ff0cd 100755
--- a/docs/en-us/user_doc/system-manual.md
+++ b/docs/en-us/user_doc/system-manual.md
@@ -28,7 +28,7 @@
     <p align="center">
     <img src="/img/process_definitions_en.png" width="60%" />
       </p>
-  - Increase the order of execution between nodes: click "line connection". As 
shown, task 1 and task 3 are executed in parallel. When task 1 is executed, 
task 2 and task 3 are executed simultaneously.
+  - Increase the order of execution between nodes: click "line connection". As 
shown, task 2 and task 3 are executed in parallel. When task 1 is executed, 
task 2 and task 3 are executed simultaneously.
 
 <p align="center">
    <img src="/img/task_en.png" width="60%" />
diff --git a/docs/zh-cn/user_doc/system-manual.md 
b/docs/zh-cn/user_doc/system-manual.md
index e5c4c0f..bc7dc6c 100755
--- a/docs/zh-cn/user_doc/system-manual.md
+++ b/docs/zh-cn/user_doc/system-manual.md
@@ -34,7 +34,7 @@
    <img src="/img/dag1.png" width="60%" />
  </p>
 
-  - 增加节点之间执行的先后顺序： 点击”线条连接“；如图示，任务1和任务3并行执行，当任务1执行完，任务2、3会同时执行。
+  - 增加节点之间执行的先后顺序： 点击”线条连接“；如图示，任务2和任务3并行执行，当任务1执行完，任务2、3会同时执行。
 
 <p align="center">
    <img src="/img/dag2.png" width="60%" />
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index 26e7075..14672b1 100755
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { autobind } from 'core-decorators';
 import siteConfig from '../../../site_config/site';
-import { getLink } from '../../../utils';
+import { getScrollTop,getLink } from '../../../utils';
 import 'antd/dist/antd.css';
 import './index.scss';
 import { Menu, Icon } from 'antd'
@@ -55,7 +55,20 @@ class Header extends React.Component {
       inputVisible: false,
     };
   }
-
+  componentDidMount() {
+    window.addEventListener('scroll', () => {
+      const scrollTop = getScrollTop();
+      if (scrollTop > 66) {
+        this.setState({
+          type: 'normal',
+        });
+      } else {
+        this.setState({
+          type: 'primary',
+        });
+      }
+    });
+  }
   state = {
     current: 'home',
   }
@@ -193,7 +206,7 @@ class Header extends React.Component {
               onClick={this.toggleMenu}
               src={type === 'primary' ? getLink('/img/system/menu_white.png') 
: getLink('/img/system/menu_gray.png')}
             />
-            <Menu onClick={this.handleClick} 
selectedKeys={[this.state.current]} mode="horizontal">
+            <Menu className={type === 'primary'? 'whiteClass': 'blackClass'} 
onClick={this.handleClick} selectedKeys={[this.state.current]} 
mode="horizontal">
             {siteConfig[language].pageMenu.map(item => (
               item.children ? <SubMenu
               title={
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
index 38f6954..29e5d91 100755
--- a/src/components/header/index.scss
+++ b/src/components/header/index.scss
@@ -54,6 +54,39 @@
       font-size: 14px;
       vertical-align: bottom;
     }
+    .whiteClass{
+      .ant-menu-item {
+        a {
+          color: #fff;
+          opacity: 0.6;
+          font-family: Avenir-Medium;
+        }
+      }
+    }
+    .blackClass {
+      .ant-menu-item {
+        a {
+          color: #333;
+          font-family: Avenir-Medium;
+        }
+      }
+    }
+    .whiteClass {
+      .ant-menu-submenu-title {
+        .submenu-title-wrapper {
+          color: #fff;
+          font-family: Avenir-Medium;
+        }
+      }
+    }
+    .blackClass {
+      .ant-menu-submenu-title {
+        .submenu-title-wrapper {
+          color: #333;
+          font-family: Avenir-Medium;
+        }
+      }
+    }
     .menu-item-primary {
       a {
         color: #fff;