This is an automated email from the ASF dual-hosted git repository.
zhongjiajie 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 6847ea4 Fix missing sidebar issue (#616)
6847ea4 is described below
commit 6847ea42018e693a48dbfa9306c53111a660a3e9
Author: wangyizhi <[email protected]>
AuthorDate: Thu Dec 30 18:18:25 2021 +0800
Fix missing sidebar issue (#616)
* Fix missing sidebar issue
* Fix code smell
Co-authored-by: wangyizhi1 <[email protected]>
---
src/components/header/index.jsx | 70 ++---------------------
src/components/md2html/index.scss | 3 +-
src/components/mobileMenu/index.jsx | 109 ++++++++++++++++++++++++++++++++++++
src/components/sidemenu/index.scss | 49 ++++++++++++----
src/pages/home/index.jsx | 1 -
5 files changed, 154 insertions(+), 78 deletions(-)
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index ad88228..2cf01ff 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -4,6 +4,7 @@ import classnames from 'classnames';
import { autobind } from 'core-decorators';
import siteConfig from '../../../site_config/site';
import { getLink } from '../../../utils';
+import MobileMenu from '../mobileMenu/index';
import Menu from 'antd/lib/menu';
import 'antd/lib/menu/style/index.css';
import './index.scss';
@@ -53,7 +54,6 @@ class Header extends React.Component {
language: props.language,
search: siteConfig.defaultSearch,
searchValue: '',
- submenuVisibleMap: {},
};
}
@@ -70,17 +70,6 @@ class Header extends React.Component {
} else if (localStorage.getItem('currents')) {
this.setCurrent(localStorage.getItem('currents'));
}
- if (siteConfig[this.state.language].pageMenu) {
- const map = {};
- siteConfig[this.state.language].pageMenu.forEach((menu) => {
- if (menu.children && menu.children.length > 0) {
- map[menu.key] = false;
- }
- });
- this.setState({
- submenuVisibleMap: map,
- });
- }
}
componentWillReceiveProps(nextProps) {
@@ -154,32 +143,15 @@ class Header extends React.Component {
e.stopPropagation();
}
- toggleMenu() {
+ toggleMenu(bool) {
this.setState({
- mobileMemuVisible: !this.state.mobileMemuVisible,
- }, () => {
- if (this.state.mobileMemuVisible) {
- document.body.addEventListener('touchmove', this.preventScroll, {
passive: false });
- } else {
- document.body.removeEventListener('touchmove', this.preventScroll);
- }
- });
- }
-
- toggoleSubMenu(key) {
- const { submenuVisibleMap } = this.state;
- if (!submenuVisibleMap.hasOwnProperty(key)) return;
- this.setState({
- submenuVisibleMap: {
- ...submenuVisibleMap,
- [key]: !submenuVisibleMap[key],
- },
+ mobileMemuVisible: bool,
});
}
render() {
const { type, logo, onLanguageChange } = this.props;
- const { mobileMemuVisible, language, search, searchVisible,
submenuVisibleMap } = this.state;
+ const { mobileMemuVisible, language, search, searchVisible } = this.state;
return (
<header
className={
@@ -195,7 +167,7 @@ class Header extends React.Component {
'mobile-menu-btn': true,
[`mobile-menu-btn-${type}`]: true,
})}
- onClick={this.toggleMenu}
+ onClick={() => this.toggleMenu(!mobileMemuVisible)}
/>
<a href={getLink(`/${language}/index.html`)}>
<img className="logo" alt={siteConfig.name}
title={siteConfig.name} src={getLink(logo)} />
@@ -269,37 +241,7 @@ class Header extends React.Component {
</Menu>
</div>
</div>
- <div className={mobileMemuVisible ? 'mobile-menu visible' :
'mobile-menu'} onScroll={this.preventScroll}>
- <div className="mobile-menu-content">
- <div className="mobile-menu-list">
- {
- siteConfig[language].pageMenu.map(item => (
- <div className="mobile-menu-item" onClick={() =>
this.toggoleSubMenu(item.key)} >
- <a className="mobile-menu-title"
href={getLink(item.link)} target={item.target || '_self'}>{item.text}</a>
- {
- item.children && item.children.length > 0 ?
- <em className={submenuVisibleMap[item.key] ?
'mobile-menu-icon open' : 'mobile-menu-icon'} /> :
- null
- }
- {
- item.children && item.children.length > 0 ?
- <div className={submenuVisibleMap[item.key] ?
'mobile-sub-menus open' : 'mobile-sub-menus'}>
- {
- item.children && item.children.map(sub => (
- <div className="mobile-sub-menu-item"><a
href={getLink(sub.link)} target={sub.target || '_self'}>{sub.text}</a></div>
- ))
- }
- </div>
- :
- null
- }
- </div>
- ))
- }
- </div>
- </div>
- <div className="mobile-menu-dummy" onClick={this.toggleMenu} />
- </div>
+ <MobileMenu menus={siteConfig[language].pageMenu}
visible={mobileMemuVisible} setVisible={this.toggleMenu} />
</div>
</header>
);
diff --git a/src/components/md2html/index.scss
b/src/components/md2html/index.scss
index 972fead..2eebdaa 100644
--- a/src/components/md2html/index.scss
+++ b/src/components/md2html/index.scss
@@ -30,7 +30,6 @@
position: absolute;
z-index: 100;
left: 0;
- top: 40px;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/mobileMenu/index.jsx
b/src/components/mobileMenu/index.jsx
new file mode 100644
index 0000000..8d58dfb
--- /dev/null
+++ b/src/components/mobileMenu/index.jsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getLink } from '../../../utils';
+import { autobind } from 'core-decorators';
+
+const propTypes = {
+ visible: PropTypes.bool,
+ setVisible: PropTypes.func,
+ // eslint-disable-next-line react/forbid-prop-types
+ menus: PropTypes.array,
+};
+const defaultProps = {
+ visible: false,
+ setVisible: () => {},
+};
+
+@autobind
+class MobileMenu extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ submenuVisibleMap: {},
+ };
+ }
+
+ preventScroll(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ componentDidMount() {
+ const { menus } = this.props;
+ if (menus && menus.length > 0) {
+ const map = {};
+ menus.forEach((menu) => {
+ if (menu.children && menu.children.length > 0) {
+ map[menu.key] = false;
+ }
+ });
+ this.setState({
+ submenuVisibleMap: map,
+ });
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.visible) {
+ document.body.addEventListener('touchmove', this.preventScroll, {
passive: false });
+ } else {
+ document.body.removeEventListener('touchmove', this.preventScroll);
+ }
+ }
+
+ toggoleSubMenu(key) {
+ const { submenuVisibleMap } = this.state;
+ if (!submenuVisibleMap.hasOwnProperty(key)) return;
+ this.setState({
+ submenuVisibleMap: {
+ ...submenuVisibleMap,
+ [key]: !submenuVisibleMap[key],
+ },
+ });
+ }
+
+ render() {
+ const { visible, setVisible, menus } = this.props;
+ const { submenuVisibleMap } = this.state;
+
+ return (
+ <div className={visible ? 'mobile-menu visible' : 'mobile-menu'}
onScroll={this.preventScroll}>
+ <div className="mobile-menu-content">
+ <div className="mobile-menu-list">
+ {
+ menus.map(item => (
+ <div className="mobile-menu-item" onClick={() =>
this.toggoleSubMenu(item.key)} >
+ <a className="mobile-menu-title" href={getLink(item.link)}
target={item.target || '_self'}>{item.text || item.title}</a>
+ {
+ item.children && item.children.length > 0 ?
+ <em className={submenuVisibleMap[item.key] ?
'mobile-menu-icon open' : 'mobile-menu-icon'} /> :
+ null
+ }
+ {
+ item.children && item.children.length > 0 ?
+ <div className={submenuVisibleMap[item.key] ?
'mobile-sub-menus open' : 'mobile-sub-menus'}>
+ {
+ item.children && item.children.map(sub => (
+ <div className="mobile-sub-menu-item"><a
href={getLink(sub.link)} target={sub.target || '_self'}>{sub.text ||
sub.title}</a></div>
+ ))
+ }
+ </div>
+ :
+ null
+ }
+ </div>
+ ))
+ }
+ </div>
+ </div>
+ <div className="mobile-menu-dummy" onClick={() => setVisible(false)} />
+ </div>
+ );
+ }
+}
+
+MobileMenu.propTypes = propTypes;
+MobileMenu.defaultProps = defaultProps;
+
+export default MobileMenu;
+
diff --git a/src/components/sidemenu/index.scss
b/src/components/sidemenu/index.scss
index 81b3c13..740d73c 100644
--- a/src/components/sidemenu/index.scss
+++ b/src/components/sidemenu/index.scss
@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import "../../variables.scss";
.sidemenu {
background: $sideMenuBgColor;
width: $sideMenuWidth;
@@ -31,7 +31,8 @@
li {
line-height: 0;
}
- span, a {
+ span,
+ a {
box-sizing: border-box;
display: inline-block;
position: relative;
@@ -45,13 +46,13 @@
background: white;
}
a::before {
- content: '';
+ content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
- background-image:linear-gradient(0deg, $startColor 0%,
$intermediateColor 51%, $endColor 100%);
+ background-image: linear-gradient(0deg, $startColor 0%,
$intermediateColor 51%, $endColor 100%);
}
}
.menu-item-level-1 {
@@ -65,29 +66,32 @@
}
}
- .menu-item-level-2, .menu-item-level-3 {
+ .menu-item-level-2,
+ .menu-item-level-3 {
cursor: pointer;
- & > span, & > a {
+ & > span,
+ & > a {
font-family: Avenir-Medium;
font-size: 14px;
color: #666;
&:hover {
background: white;
&::before {
- content: '';
+ content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
- background-image:linear-gradient(0deg, $startColor 0%,
$intermediateColor 51%, $endColor 100%);
+ background-image: linear-gradient(0deg, $startColor 0%,
$intermediateColor 51%, $endColor 100%);
}
}
}
}
.menu-item-level-2 {
- & > span, & > a {
+ & > span,
+ & > a {
padding-left: 40px;
height: 36px;
line-height: 36px;
@@ -111,11 +115,34 @@
@media screen and (max-width: $mobileWidth) {
.sidemenu {
width: 0;
+ top: 66px;
+ height: calc(100vh - 66px);
.sidemenu-toggle {
display: inline-block;
+ position: fixed;
+ z-index: 100;
+ left: 0;
+ top: 100px;
}
&.sidemenu-open {
- width: $sideMenuWidth;
+ width: 100%;
+ position: fixed;
+ left: 0;
+ overflow: auto;
+ background: rgba(0, 0, 0, 0.4);
+ padding: 0;
+ > ul {
+ width: 300px;
+ padding: 20px 0;
+ background: #f2f3f7;
+ min-height: 100%;
+ box-sizing: border-box;
+ }
+ .sidemenu-toggle {
+ left: 300px;
+ position: absolute;
+ top: 40px;
+ }
}
}
-}
\ No newline at end of file
+}
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index b57de68..ea55eb6 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -63,7 +63,6 @@ class Home extends Language {
});
});
this.initSwiper();
- window._debug = this;
}
componentDidUpdate(prevProps, prevState) {
