Add common layout

9 years ago · 2b59fbeded
5 changed files with 181 additions and 58 deletions
--- a/site/static/style.css
+++ b/site/static/style.css
@ -2010,7 +2010,7 @@ a.entry-link:hover .anticon-smile {
  padding: 0;
  border-radius: 5px;
  border: 1px solid #ccc;
-  background-color: white;
+  background-color: #fff;
  line-height: 1;
 }

@ -2091,10 +2091,11 @@ a.entry-link:hover .anticon-smile {
 .window-frame .window-content {
  padding: 0;
  line-height: 1.5;
-  overflow: hidden;
-  height: 400px;
+  overflow: auto;
+  height: 440px;
  position: relative;
  border-radius: 0 0 5px 5px;
+  background: #f4f4f4;
 }
 .window-frame .status-bar {
  height: 2rem;
--- a/spec/layout/demo/aside.md
+++ b/spec/layout/demo/aside.md
@ -7,25 +7,48 @@
 ---

 ````jsx
-import { Menu, Breadcrumb } from 'antd';
+import { Menu, Breadcrumb, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;

 ReactDOM.render(
  <BrowserDemo>
    <div className="ant-layout-aside">
      <aside className="ant-layout-sider">
+        <div className="ant-layout-logo"></div>
+        <Menu mode="inline" theme="dark"
+          defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
+          <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
+            <Menu.Item key="1">选项1</Menu.Item>
+            <Menu.Item key="2">选项2</Menu.Item>
+            <Menu.Item key="3">选项3</Menu.Item>
+            <Menu.Item key="4">选项4</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
+            <Menu.Item key="5">选项5</Menu.Item>
+            <Menu.Item key="6">选项6</Menu.Item>
+            <Menu.Item key="7">选项7</Menu.Item>
+            <Menu.Item key="8">选项8</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
+            <Menu.Item key="9">选项9</Menu.Item>
+            <Menu.Item key="10">选项10</Menu.Item>
+            <Menu.Item key="11">选项11</Menu.Item>
+            <Menu.Item key="12">选项12</Menu.Item>
+          </SubMenu>
+        </Menu>
      </aside>
      <div className="ant-layout-main">
        <div className="ant-layout-header"></div>
+        <div className="ant-layout-breadcrumb">
+          <Breadcrumb>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+            <Breadcrumb.Item>某应用</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
        <div className="ant-layout-container">
-          <div className="ant-layout-breadcrumb">
-            <Breadcrumb>
-              <Breadcrumb.Item>首页</Breadcrumb.Item>
-              <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-              <Breadcrumb.Item>某应用</Breadcrumb.Item>
-            </Breadcrumb>
-          </div>
          <div className="ant-layout-content">
-            <div style={{ height: 290 }}></div>
+            <div style={{ height: 590 }}></div>
          </div>
        </div>
      </div>
@ -36,15 +59,29 @@ ReactDOM.render(

 ````css
 .ant-layout-aside {
-  background: #f4f4f4;
-  height: 100%;
+  position: relative;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+.ant-layout-aside .ant-layout-logo {
+  width: 150px;
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 24px 16px 28px;
 }

 .ant-layout-aside .ant-layout-sider {
  width: 224px;
-  height: 100%;
+  background: #404040;
  position: absolute;
-  background: #373737;
+  padding-bottom: 24px;
+  min-height: 100%;
+}
+
+.ant-layout-aside .ant-layout-sider > .ant-menu {
+  margin-bottom: 20px;
 }

 .ant-layout-aside .ant-layout-header {
@ -54,16 +91,20 @@ ReactDOM.render(
 }

 .ant-layout-aside .ant-layout-breadcrumb {
-  margin-top: 7px;
-  margin-bottom: -17px;
+  margin: 7px 0 -17px 24px;
+}
+
+.ant-layout-aside .ant-layout-main {
+  margin-left: 224px;
+  margin-bottom: 24px;
 }

 .ant-layout-aside .ant-layout-container {
-  margin: 0 16px 16px 240px;
+  margin: 24px 16px;
 }

 .ant-layout-aside .ant-layout-content {
  background: #fff;
-  margin-top: 24px;
+  padding: 24px;
 }
 ````
--- a/spec/layout/demo/top-aside.md
+++ b/spec/layout/demo/top-aside.md
@ -7,14 +7,34 @@
 ---

 ````jsx
-import { Menu, Breadcrumb } from 'antd';
+import { Menu, Breadcrumb, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;

 ReactDOM.render(
  <BrowserDemo>
    <div className="ant-layout-topaside">
-      <div className="ant-layout-header"></div>
-      <div className="ant-layout-subheader"></div>
-      <div className="ant-layout-main">
+      <div className="ant-layout-header">
+        <div className="ant-layout-wrapper">
+          <div className="ant-layout-logo"></div>
+          <Menu theme="dark" mode="horizontal"
+            defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
+            <Menu.Item key="1">导航一</Menu.Item>
+            <Menu.Item key="2">导航二</Menu.Item>
+            <Menu.Item key="3">导航三</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-subheader">
+        <div className="ant-layout-wrapper">
+          <Menu mode="horizontal"
+            defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
+            <Menu.Item key="1">二级导航</Menu.Item>
+            <Menu.Item key="2">二级导航</Menu.Item>
+            <Menu.Item key="3">二级导航</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-wrapper">
        <div className="ant-layout-breadcrumb">
          <Breadcrumb>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
@ -24,6 +44,26 @@ ReactDOM.render(
        </div>
        <div className="ant-layout-container">
          <aside className="ant-layout-sider">
+            <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
+              <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
+                <Menu.Item key="1">选项1</Menu.Item>
+                <Menu.Item key="2">选项2</Menu.Item>
+                <Menu.Item key="3">选项3</Menu.Item>
+                <Menu.Item key="4">选项4</Menu.Item>
+              </SubMenu>
+              <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
+                <Menu.Item key="5">选项5</Menu.Item>
+                <Menu.Item key="6">选项6</Menu.Item>
+                <Menu.Item key="7">选项7</Menu.Item>
+                <Menu.Item key="8">选项8</Menu.Item>
+              </SubMenu>
+              <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
+                <Menu.Item key="9">选项9</Menu.Item>
+                <Menu.Item key="10">选项10</Menu.Item>
+                <Menu.Item key="11">选项11</Menu.Item>
+                <Menu.Item key="12">选项12</Menu.Item>
+              </SubMenu>
+            </Menu>
          </aside>
          <div className="ant-layout-content">
            <div style={{ height: 240 }}></div>
@ -37,44 +77,52 @@ ReactDOM.render(

 ````css
 .ant-layout-topaside {
-  background: #f4f4f4;
  height: 100%;
 }

+.ant-layout-topaside .ant-layout-wrapper {
+  padding: 0 50px;
+}
+
 .ant-layout-topaside .ant-layout-header {
-  background: #373737;
+  background: #404040;
  height: 64px;
 }

+.ant-layout-topaside .ant-layout-logo {
+  width: 120px;
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+
 .ant-layout-topaside .ant-layout-subheader {
  height: 48px;
-  border-bottom: 1px solid #e9e9e9;
+  border-bottom: 1px solid #d9d9d9;
  background: #fff;
 }

 .ant-layout-topaside .ant-layout-breadcrumb {
-  margin-top: 7px;
-  margin-bottom: -17px;
-}
-
-.ant-layout-topaside .ant-layout-main {
-  padding: 0 50px;
+  margin: 7px 0 -17px 24px;
 }

 .ant-layout-topaside .ant-layout-container {
  background: #fff;
-  margin-top: 24px;
+  margin: 24px 0;
  position: relative;
+  padding: 24px 0;
+  overflow: hidden;
 }

 .ant-layout-topaside .ant-layout-sider {
  width: 224px;
-  height: 100%;
-  position: absolute;
+  float: left;
 }

 .ant-layout-topaside .ant-layout-content {
-  border-left: 1px solid #e9e9e9;
-  margin-left: 224px;
+  border-left: 1px solid #d9d9d9;
+  margin-left: 223px;
 }
 ````
--- a/spec/layout/demo/top.md
+++ b/spec/layout/demo/top.md
@ -14,9 +14,28 @@ import { Menu, Breadcrumb } from 'antd';
 ReactDOM.render(
  <BrowserDemo>
    <div className="ant-layout-top">
-      <div className="ant-layout-header"></div>
-      <div className="ant-layout-subheader"></div>
-      <div className="ant-layout-main">
+      <div className="ant-layout-header">
+        <div className="ant-layout-wrapper">
+          <div className="ant-layout-logo"></div>
+          <Menu theme="dark" mode="horizontal"
+            defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
+            <Menu.Item key="1">导航一</Menu.Item>
+            <Menu.Item key="2">导航二</Menu.Item>
+            <Menu.Item key="3">导航三</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-subheader">
+        <div className="ant-layout-wrapper">
+          <Menu mode="horizontal"
+            defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
+            <Menu.Item key="1">二级导航</Menu.Item>
+            <Menu.Item key="2">二级导航</Menu.Item>
+            <Menu.Item key="3">二级导航</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-wrapper">
        <div className="ant-layout-breadcrumb">
          <Breadcrumb>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
@ -35,32 +54,42 @@ ReactDOM.render(

 ````css
 .ant-layout-top {
-  background: #f4f4f4;
  height: 100%;
 }

+.ant-layout-top .ant-layout-wrapper {
+  padding: 0 50px;
+}
+
 .ant-layout-top .ant-layout-header {
-  background: #373737;
+  background: #404040;
  height: 64px;
 }

+.ant-layout-top .ant-layout-logo {
+  width: 120px;
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+
 .ant-layout-top .ant-layout-subheader {
  height: 48px;
-  border-bottom: 1px solid #e9e9e9;
+  border-bottom: 1px solid #d9d9d9;
  background: #fff;
 }

 .ant-layout-top .ant-layout-breadcrumb {
-  margin-top: 7px;
-  margin-bottom: -17px;
-}
-
-.ant-layout-top .ant-layout-main {
-  padding: 0 50px;
+  margin: 7px 0 -17px 24px;
 }

 .ant-layout-top .ant-layout-container {
  background: #fff;
-  margin-top: 24px;
+  margin: 24px 0;
+  position: relative;
+  padding-top: 24px;
+  overflow: hidden;
 }
 ````
--- a/style/components/menu.less
+++ b/style/components/menu.less
@ -10,7 +10,7 @@
  box-shadow: @overlay-shadow;
  color: @text-color;
  background: #fff;
-  line-height: 50px;
+  line-height: 46px;

  &-hidden {
    display: none;
@ -25,7 +25,7 @@
    color: #999;
    line-height: 1.5;
    padding: 8px 10px;
-    border-bottom: 1px solid #dedede;
+    border-bottom: 1px solid #d9d9d9;
  }

  &-item,
@ -41,6 +41,11 @@
    background-color: tint(@primary-color, 90%);
  }

+  &-horizontal &-item,
+  &-horizontal &-submenu {
+    margin-top: -1px;
+  }
+
  &-horizontal > &-item-active,
  &-horizontal > &-submenu &-submenu-title:hover {
    background-color: transparent;
@ -52,7 +57,7 @@

  &-inline,
  &-vertical {
-    border-right: 1px solid #e9e9e9;
+    border-right: 1px solid #d9d9d9;
    .@{menu-prefix-cls}-item {
      border-right: 2px solid transparent;
      margin-left: -1px;
@ -156,7 +161,7 @@
  &-submenu-title {
    .anticon {
      width: 14px;
-      margin-right: 8px;
+      margin-right: 9px;
      top: 1px;
    }
  }
@ -165,7 +170,6 @@
    border: none;
    border-bottom: 1px solid #d9d9d9;
    box-shadow: none;
-    padding-left: 20px;
    z-index: 0;

    > .@{menu-prefix-cls}-item,
@ -211,7 +215,7 @@

  &-vertical, &-inline {
    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
-      padding: 0 20px;
+      padding: 0px 16px 0 28px;
      font-size: 12px;
      line-height: 42px;
      height: 42px;
@ -264,7 +268,7 @@

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
-    border-bottom: 2px solid transparent;
+    border-bottom: 0;
    top: 0;
  }