PageHeaderWrapper: fixed width, logo and home (#4187)

* PageHeaderWrapper with fixed width when contentWidth === 'Fixed' and an
new prop fluid that indicate PageHeaderWrapper to be fluid independent of
contentWidth

* PageHeaderWrapper: logo side by side with title

* PageHeaderWrapper: home={null} working again

* fix title-view-extra position

src/components/PageHeaderWrapper/index.js

@@ -38,7 +38,9 @@ const renderFooter = ({ tabList, tabActiveKey, onTabChange, tabBarExtraContent }
 const PageHeaderWrapper = ({
   children,
   contentWidth,
+  fluid,
   wrapperClassName,
+  home,
   top,
   title,
   content,
@@ -53,17 +55,26 @@ const PageHeaderWrapper = ({
       <MenuContext.Consumer>
         {value => {
           return (
+            <div className={styles.wrapper}>
+              <div
+                className={classNames({
+                  [styles.wide]: !fluid && contentWidth === 'Fixed',
+                })}
+              >
                 <PageHeader
-              wide={contentWidth === 'Fixed'}
                   title={
+                    <>
+                      {logo && <span className={styles.logo}>{logo}</span>}
                       <Title
                         level={4}
                         style={{
                           marginBottom: 0,
+                          display: 'inline-block',
                         }}
                       >
                         {title}
                       </Title>
+                    </>
                   }
                   key="pageheader"
                   {...restProps}
@@ -72,7 +83,9 @@ const PageHeaderWrapper = ({
                     conversionBreadcrumbList({
                       ...value,
                       ...restProps,
+                      ...(home !== null && {
                         home: <FormattedMessage id="menu.home" defaultMessage="Home" />,
+                      }),
                     })
                   }
                   className={styles.pageHeader}
@@ -80,7 +93,6 @@ const PageHeaderWrapper = ({
                   footer={renderFooter(restProps)}
                 >
                   <div className={styles.detail}>
-                {logo && <div className={styles.logo}>{logo}</div>}
                     <div className={styles.main}>
                       <div className={styles.row}>
                         {content && <div className={styles.content}>{content}</div>}
@@ -89,6 +101,8 @@ const PageHeaderWrapper = ({
                     </div>
                   </div>
                 </PageHeader>
+              </div>
+            </div>
           );
         }}
       </MenuContext.Consumer>

src/components/PageHeaderWrapper/index.less

@@ -5,11 +5,20 @@
 }
 
 .main {
-  :global {
-    .ant-page-header {
-      padding: 16px 32px 0;
+  .wrapper {
+    padding: 16px 24px 0;
     background: #fff;
     border-bottom: 1px solid #e8e8e8;
+
+    :global {
+      .ant-page-header {
+        padding: 0;
+      }
+
+      .ant-page-header-title-view-extra {
+        top: 0;
+        right: 0;
+      }
     }
   }
 
@@ -27,9 +36,10 @@
   }
 
   .logo {
-    flex: 0 1 auto;
+    display: inline-block;
+    margin-top: -1px;
     margin-right: 16px;
-    padding-top: 1px;
+    vertical-align: middle;
     > img {
       display: block;
       width: 28px;
@@ -66,7 +76,6 @@
     margin-bottom: 16px;
   }
 
-  .logo,
   .content,
   .extraContent {
     margin-bottom: 16px;