Layout header height correctly change when `@layout-header-height` change.

7 years ago · 5ee633ccc3
10 changed files with 115 additions and 103 deletions
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@ -31,11 +31,9 @@ export default class GlobalHeader extends PureComponent {
            <img src={logo} alt="logo" width="32" />
          </Link>
        )}
-        <Icon
-          className={styles.trigger}
-          type={collapsed ? 'menu-unfold' : 'menu-fold'}
-          onClick={this.toggle}
-        />
+        <span className={styles.trigger} onClick={this.toggle}>
+          <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
+        </span>
        <RightContent {...this.props} />
      </div>
    );
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@ -3,7 +3,7 @@
@pro-header-hover-bg: rgba(0, 0, 0, 0.025);

 .header {
-  height: 64px;
+  height: @layout-header-height;
  padding: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@ -11,8 +11,8 @@
 }

 .logo {
-  height: 64px;
-  line-height: 58px;
+  height: @layout-header-height;
+  line-height: @layout-header-height;
  vertical-align: top;
  display: inline-block;
  padding: 0 0 0 24px;
@ -33,12 +33,12 @@
  }
 }

-i.trigger {
+.trigger {
  font-size: 20px;
-  height: 64px;
+  height: @layout-header-height;
  cursor: pointer;
  transition: all 0.3s, padding 0s;
-  padding: 22px 24px;
+  padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px;
  &:hover {
    background: @pro-header-hover-bg;
  }
@ -73,7 +73,8 @@ i.trigger {
  }
  .account {
    .avatar {
-      margin: 20px 8px 20px 0;
+      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
+      margin-right: 8px;
      color: @primary-color;
      background: rgba(255, 255, 255, 0.85);
      vertical-align: top;
@ -82,7 +83,7 @@ i.trigger {
 }

 .dark {
-  height: 64px;
+  height: @layout-header-height;
  .action {
    color: rgba(255, 255, 255, 0.85);
    > i {
--- a/src/components/SelectLang/index.js
+++ b/src/components/SelectLang/index.js
@ -42,11 +42,9 @@ export default class SelectLang extends PureComponent {
    );
    return (
      <Dropdown overlay={langMenu} placement="bottomRight">
-        <Icon
-          type="global"
-          className={classNames(styles.dropDown, className)}
-          title={formatMessage({ id: 'navBar.lang' })}
-        />
+        <span className={classNames(styles.dropDown, className)}>
+          <Icon type="global" title={formatMessage({ id: 'navBar.lang' })} />
+        </span>
      </Dropdown>
    );
  }
--- a/src/components/SelectLang/index.less
+++ b/src/components/SelectLang/index.less
@ -11,11 +11,14 @@

 .dropDown {
  cursor: pointer;
-  font-size: 14px;
  vertical-align: top;
-  line-height: 64px;
-  > svg {
-    position: relative;
-    top: 2px;
+  line-height: @layout-header-height;
+  > i {
+    font-size: 14px !important;
+    transform: none !important;
+    svg {
+      position: relative;
+      top: -1px;
+    }
  }
 }
--- a/src/components/SiderMenu/BaseMenu.js
+++ b/src/components/SiderMenu/BaseMenu.js
@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import classNames from 'classnames';
 import { Menu, Icon } from 'antd';
 import Link from 'umi/link';
 import isEqual from 'lodash/isEqual';
@ -130,6 +131,7 @@ export default class BaseMenu extends PureComponent {
      theme,
      mode,
      location: { pathname },
+      className,
    } = this.props;
    // if pathname can't match, use the nearest parent's key
    let selectedKeys = this.getSelectedMenuKeys(pathname);
@ -143,6 +145,10 @@ export default class BaseMenu extends PureComponent {
      };
    }
    const { handleOpenChange, style, menuData } = this.props;
+    const cls = classNames(className, {
+      'top-nav-menu': mode === 'horizontal',
+    });
+
    return (
      <Menu
        key="Menu"
@ -151,7 +157,7 @@ export default class BaseMenu extends PureComponent {
        onOpenChange={handleOpenChange}
        selectedKeys={selectedKeys}
        style={style}
-        className={mode === 'horizontal' ? 'top-nav-menu' : ''}
+        className={cls}
        {...props}
      >
        {this.getNavMenuItems(menuData)}
--- a/src/components/SiderMenu/index.less
+++ b/src/components/SiderMenu/index.less
@ -1,6 +1,6 @@
@import '~antd/lib/style/themes/default.less';

-@nav-header-height: 64px;
+@nav-header-height: @layout-header-height;

 .logo {
  height: @nav-header-height;
--- a/src/components/TopNavHeader/index.js
+++ b/src/components/TopNavHeader/index.js
@ -40,11 +40,7 @@ export default class TopNavHeader extends PureComponent {
                maxWidth,
              }}
            >
-              <BaseMenu
-                {...this.props}
-                flatMenuKeys={flatMenuKeys}
-                style={{ border: 'none', height: 64 }}
-              />
+              <BaseMenu {...this.props} flatMenuKeys={flatMenuKeys} className={styles.menu} />
            </div>
          </div>
          <RightContent {...this.props} />
--- a/src/components/TopNavHeader/index.less
+++ b/src/components/TopNavHeader/index.less
@ -1,64 +1,72 @@
-.head {
-  width: 100%;
-  transition: background 0.3s, width 0.2s;
-  height: 64px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  position: relative;
-  :global {
-    .ant-menu-submenu.ant-menu-submenu-horizontal {
-      line-height: 64px;
-      height: 100%;
-      .ant-menu-submenu-title {
-        height: 100%;
-      }
-    }
-  }
-  &.light {
-    background-color: #fff;
-  }
-  .main {
-    display: flex;
-    height: 64px;
-    padding-left: 24px;
-    &.wide {
-      max-width: 1200px;
-      margin: auto;
-      padding-left: 0;
-    }
-    .left {
-      flex: 1;
-      display: flex;
-    }
-    .right {
-      width: 324px;
-    }
-  }
-}
-
-.logo {
-  width: 165px;
-  height: 64px;
-  position: relative;
-  line-height: 64px;
-  transition: all 0.3s;
-  overflow: hidden;
-  img {
-    display: inline-block;
-    vertical-align: middle;
-    height: 32px;
-  }
-  h1 {
-    color: #fff;
-    display: inline-block;
-    vertical-align: top;
-    font-size: 16px;
-    margin: 0 0 0 12px;
-    font-weight: 400;
-  }
-}
-
-.light {
-  h1 {
-    color: #002140;
-  }
-}
+@import '~antd/lib/style/themes/default.less';
+
+.head {
+  width: 100%;
+  transition: background 0.3s, width 0.2s;
+  height: @layout-header-height;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  position: relative;
+  :global {
+    .ant-menu-submenu.ant-menu-submenu-horizontal {
+      line-height: @layout-header-height;
+      height: 100%;
+      .ant-menu-submenu-title {
+        height: 100%;
+      }
+    }
+  }
+  &.light {
+    background-color: #fff;
+  }
+  .main {
+    display: flex;
+    height: @layout-header-height;
+    padding-left: 24px;
+    &.wide {
+      max-width: 1200px;
+      margin: auto;
+      padding-left: 0;
+    }
+    .left {
+      flex: 1;
+      display: flex;
+    }
+    .right {
+      width: 324px;
+    }
+  }
+}
+
+.logo {
+  width: 165px;
+  height: @layout-header-height;
+  position: relative;
+  line-height: @layout-header-height;
+  transition: all 0.3s;
+  overflow: hidden;
+  img {
+    display: inline-block;
+    vertical-align: middle;
+    height: 32px;
+  }
+  h1 {
+    color: #fff;
+    display: inline-block;
+    vertical-align: top;
+    font-size: 16px;
+    margin: 0 0 0 12px;
+    font-weight: 400;
+  }
+}
+
+.light {
+  h1 {
+    color: #002140;
+  }
+}
+
+.menu {
+  border: none;
+  height: @layout-header-height;
+  line-height: @layout-header-height;
+}
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@ -18,6 +18,8 @@ import Exception403 from '../pages/Exception/403';
 import PageLoading from '@/components/PageLoading';
 import SiderMenu from '@/components/SiderMenu';

+import styles from './BasicLayout.less';
+
 // lazy load SettingDrawer
 const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer'));

@ -138,14 +140,6 @@ class BasicLayout extends React.PureComponent {
    return null;
  };

-  getContentStyle = () => {
-    const { fixedHeader } = this.props;
-    return {
-      margin: '24px 24px 0',
-      paddingTop: fixedHeader ? 64 : 0,
-    };
-  };
-
  handleMenuCollapse = collapsed => {
    const { dispatch } = this.props;
    dispatch({
@ -172,10 +166,12 @@ class BasicLayout extends React.PureComponent {
      isMobile,
      menuData,
      breadcrumbNameMap,
+      fixedHeader,
    } = this.props;

    const isTop = PropsLayout === 'topmenu';
    const routerConfig = this.matchParamsPath(pathname, breadcrumbNameMap);
+    const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
    const layout = (
      <Layout>
        {isTop && !isMobile ? null : (
@ -201,7 +197,7 @@ class BasicLayout extends React.PureComponent {
            isMobile={isMobile}
            {...this.props}
          />
-          <Content style={this.getContentStyle()}>
+          <Content className={styles.content} style={contentStyle}>
            <Authorized
              authority={routerConfig && routerConfig.authority}
              noMatch={<Exception403 />}
--- a/src/layouts/BasicLayout.less
+++ b/src/layouts/BasicLayout.less
@ -0,0 +1,6 @@
+@import '~antd/lib/style/themes/default.less';
+
+.content {
+  margin: 24px;
+  padding-top: @layout-header-height;
+}