From 5ee633ccc3748a957ef11beb64962de3d5f44fc3 Mon Sep 17 00:00:00 2001 From: Rayron Victor Date: Fri, 30 Nov 2018 13:27:26 -0300 Subject: [PATCH] Layout header height correctly change when `@layout-header-height` change. --- src/components/GlobalHeader/index.js | 8 +- src/components/GlobalHeader/index.less | 17 ++-- src/components/SelectLang/index.js | 8 +- src/components/SelectLang/index.less | 13 ++- src/components/SiderMenu/BaseMenu.js | 8 +- src/components/SiderMenu/index.less | 2 +- src/components/TopNavHeader/index.js | 6 +- src/components/TopNavHeader/index.less | 136 +++++++++++++------------ src/layouts/BasicLayout.js | 14 +-- src/layouts/BasicLayout.less | 6 ++ 10 files changed, 115 insertions(+), 103 deletions(-) create mode 100644 src/layouts/BasicLayout.less diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js index 156f1b7d..fe96cdea 100644 --- a/src/components/GlobalHeader/index.js +++ b/src/components/GlobalHeader/index.js @@ -31,11 +31,9 @@ export default class GlobalHeader extends PureComponent { logo )} - + + + ); diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less index 10758fe9..db11b783 100644 --- 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 { diff --git a/src/components/SelectLang/index.js b/src/components/SelectLang/index.js index ee91cd64..ab006bf9 100644 --- a/src/components/SelectLang/index.js +++ b/src/components/SelectLang/index.js @@ -42,11 +42,9 @@ export default class SelectLang extends PureComponent { ); return ( - + + + ); } diff --git a/src/components/SelectLang/index.less b/src/components/SelectLang/index.less index 819c0f8c..e7f12ab3 100644 --- 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; + } } } diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js index e819cda3..83e8837e 100644 --- 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 ( {this.getNavMenuItems(menuData)} diff --git a/src/components/SiderMenu/index.less b/src/components/SiderMenu/index.less index 7ffba1b1..b098bd2c 100644 --- 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; diff --git a/src/components/TopNavHeader/index.js b/src/components/TopNavHeader/index.js index ee302f66..eca4dbe4 100644 --- a/src/components/TopNavHeader/index.js +++ b/src/components/TopNavHeader/index.js @@ -40,11 +40,7 @@ export default class TopNavHeader extends PureComponent { maxWidth, }} > - + diff --git a/src/components/TopNavHeader/index.less b/src/components/TopNavHeader/index.less index 9883019e..b299fa96 100644 --- 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; +} diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 39987355..00e3429d 100644 --- 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 = ( {isTop && !isMobile ? null : ( @@ -201,7 +197,7 @@ class BasicLayout extends React.PureComponent { isMobile={isMobile} {...this.props} /> - + } diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less new file mode 100644 index 00000000..60beb609 --- /dev/null +++ b/src/layouts/BasicLayout.less @@ -0,0 +1,6 @@ +@import '~antd/lib/style/themes/default.less'; + +.content { + margin: 24px; + padding-top: @layout-header-height; +} -- GitLab