Layout.Sider support responsive display #4931

ddcat1115 · 2017-02-17T18:02:09Z

only support one breakpoint now
with default style

normally

below the breakpoint

below the breakpoint and expanded

mention-bot · 2017-02-17T18:02:11Z

@ddcat1115, thanks for your PR! By analyzing the history of the files in this pull request, we identified @afc163, @simaQ and @valentinvichnal to be potential reviewers.

coveralls · 2017-02-17T18:09:34Z

Coverage increased (+0.01%) to 82.405% when pulling e001dcef917c9264f735c0917c117cf1edca4e31 on ddcat1115:fix-4668 into 63476d0 on ant-design:feature-2.8.

afc163 · 2017-02-17T18:12:01Z

It is 2:11, people should care their health...

ddcat1115 · 2017-02-18T02:49:12Z

Is that a message sent by a robot? 😹

benjycui · 2017-02-20T01:41:10Z

components/layout/Sider.tsx

@@ -3,6 +3,14 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import Icon from '../icon';

+const dimensionMap = {


感觉我们需要考虑下 LESS 和 JS 共享变量的问题？如 https://www.npmjs.com/package/less-vars-loader

虽然不是很严重的问题，不排除会出现这里的 breakpoints 和 LESS 里面的不一样。

或者在两边都加上注释。

benjycui · 2017-02-20T01:44:18Z

components/layout/index.zh-CN.md

@@ -56,5 +56,8 @@ title: Layout
 | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
 | width | 宽度 | number\|string | 200 |
 | collapsedWidth | 收缩宽度，仅当 `collapsible:true` 时生效 | number | 64 |
+| breakpoint | 触发响应式布局的断点 | string: `xs` \| `sm` \| `md` \| `lg` \| `xl` | - |


Enum { xs, sm, md, lg, xl }?

benjycui · 2017-02-20T01:51:00Z

components/layout/Sider.tsx

@@ -51,6 +64,24 @@ export default class Sider extends React.Component<SiderProps, any> {
    }
  }

+  componentDidMount() {
+    const matchMedia = window.matchMedia;


不用 polyfill 的原因是 Layout 强依赖于 flex，而支持 flex 的浏览器都支持 matchMedia

需要注释么？

最好还是类似 Crasoul 加一下兼容，省得报错。

css 不支持 flex，页面也是不会报错的。

benjycui · 2017-02-20T01:52:40Z

components/layout/Sider.tsx

+    const props = this.props;
+    if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) {
+      const mql = matchMedia(`(max-width: ${dimensionMap[props.breakpoint]})`);
+      mql.addListener(this.responsiveHandler);


unmount 时需要取消监听？

afc163 · 2017-02-20T12:48:52Z

Conflict

afc163 · 2017-02-21T06:47:00Z

components/layout/Sider.tsx

+        belowTrigger = (
+          <span onClick={this.belowShowChange} className={`${prefixCls}-below-default-trigger`}>
+            <Icon type="bars" />
+          </span>);


这玩意用户可以去掉么？

设置了 widthBelow(不为零) 或 collapsible 时都不会展现这个东西，仅当侧边宽度为 0 时展现。目前没有支持 belowTrigger 的自定义。

belowTrigger 和 trigger 合并如何？这两个是同一个东西。

当 collapsible 为 true 时，且屏幕宽度小于 breakPoint 时，菜单会自动缩小并触发 onCollapsed。

当 collapsedWidth 为 0 时，trigger 默认为当前的 belowTrigger 。

onResponse 的参数改为 (collapsed)

这样可以尽可能复用原来的属性。

这样做的话有几个问题：

如果希望小于 breakPoint 时完全隐藏 sider，就只能把 collapsedWidth 设置为零，那大于 breakPoint 且状态为收起时 sider 宽度也为零了。

如果复用原来的 collapse 状态，可能会混淆人为的操作（设定）与屏幕宽度变化带来的改变，比如：大于 breakpoint 时人为设置为 collapsed=true，此时缩小屏幕至 breakpoint 以下，再拉大屏幕至 breakpoint 以上，这时要不要展开？所以我觉得这里 collapsed 不应该被响应式影响

之前参考 gitlab 的方式，它的响应式反馈也不会影响 collapsed 状态，但小于 breakpoint 时 collapsible=false，觉得这种处理放在我们这有点太暴力，所以保留了两套体系

问题不大，菜单只有两种状态，收起或展开，无论是手动收起还是小屏幕自动收起，展现都一样。收起的宽度也是固定的，要么一个小值，要么为 0（为 0 时有一个特殊的样式，就是悬浮的 bar）。参考 gitlab 的菜单。

同样。人为的操作和屏幕宽度变化带来的改变是一样的。如果 collapsed={true} 则始终展开，任何情况都不能收起。onCollapsedChange 响应两种变化。这样 onResponsive，也不需要了，直接作为一个参数 onCollapsedChange(collapsed, way: 'clickTrigger' | 'reponsive')。

ddcat1115 · 2017-02-23T13:01:20Z

除了 @benjycui 提到的 js less 变量共享的问题外，其他已 fix

coveralls · 2017-02-23T13:02:11Z

Coverage increased (+0.01%) to 82.312% when pulling 1e09011d6b620131fb2363f9f766748c41d9e4c5 on ddcat1115:fix-4668 into 6d903a6 on ant-design:feature-2.8.

coveralls · 2017-02-23T13:08:09Z

Coverage increased (+0.01%) to 82.312% when pulling 1e09011d6b620131fb2363f9f766748c41d9e4c5 on ddcat1115:fix-4668 into 6d903a6 on ant-design:feature-2.8.

benjycui · 2017-02-24T02:48:37Z

CI failed, 共享变量等这个 PR 合并后我再试吧。

coveralls · 2017-02-24T02:50:50Z

Coverage increased (+0.01%) to 82.312% when pulling c67663dc06881b8a0c57b080fa178e8785abc2e5 on ddcat1115:fix-4668 into 6d903a6 on ant-design:feature-2.8.

ddcat1115 · 2017-02-24T02:55:27Z

CI 修复了

afc163 · 2017-02-24T03:04:48Z

components/layout/index.zh-CN.md

@@ -56,5 +56,8 @@ title: Layout
 | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
 | width | 宽度 | number\|string | 200 |
 | collapsedWidth | 收缩宽度，仅当 `collapsible:true` 时生效 | number | 64 |
+| breakpoint | 触发响应式布局的断点 | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
+| widthBelow | 视窗宽度低于 breakpoint 时的 Sider 宽度 | number\|string | 默认为 0，即全部隐藏，当可收起时默认为 collapsedWidth |


这个参数的应用场景是？直接用 collapsedWidth 如何？

上面有提到原因，主要还是为了支持更多需求。不配置 widthBelow 且 collapsible=true 时默认就等于 collapsedWidth

afc163 · 2017-02-24T03:05:58Z

components/layout/index.en-US.md

@@ -55,5 +55,8 @@ onCollapse | the callback function, can be executed when you switch the sidebar,
 trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode| - |
 width | width of the sidebar | number\|string | 200
 collapsedWidth | width of the collapsed sidebar, available only `collapsible: true` | number | 64
+breakpoint | breakpoint of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |


breakpoint => breakPoint

然后是不是应该有默认值。

默认就要有响应式反馈吗？

我觉得可以，可以直接对小屏幕的布局进行默认优化。

还是没有做默认响应，因为宽度收缩需要配合侧边样式定制，如果默认加上可能导致折叠后样式不对

yesmeck · 2017-03-02T02:46:02Z

Need rebase

coveralls · 2017-03-05T10:10:21Z

Coverage increased (+0.01%) to 81.715% when pulling 06713d6cc0a0078a0260f4a93b4651b429ad6620 on ddcat1115:fix-4668 into 0edb821 on ant-design:feature-2.8.

coveralls · 2017-03-05T10:12:14Z

Coverage increased (+0.01%) to 81.715% when pulling 06713d6cc0a0078a0260f4a93b4651b429ad6620 on ddcat1115:fix-4668 into 0edb821 on ant-design:feature-2.8.

yesmeck · 2017-03-05T12:01:47Z

components/layout/index.zh-CN.md

 | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
 | width | 宽度 | number\|string | 200 |
-| collapsedWidth | 收缩宽度，仅当 `collapsible:true` 时生效 | number | 64 |
+| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 |
+| breakPoint | 触发响应式布局的断点 | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |


应该是 breakpoint？https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/responsive_design_building_blocks#Media_queries

Ok...it is my wrong suggestion. @ddcat1115

coveralls · 2017-03-05T13:05:43Z

Coverage increased (+0.01%) to 81.907% when pulling a2f440d on ddcat1115:fix-4668 into 5af5a48 on ant-design:feature-2.8.

coveralls · 2017-03-05T13:08:28Z

Coverage increased (+0.01%) to 81.907% when pulling a2f440d on ddcat1115:fix-4668 into 5af5a48 on ant-design:feature-2.8.

thearabbit · 2017-03-23T08:30:27Z

Problem with breadcrumb place, and I think that should be place the logo

benjycui · 2017-03-23T09:29:29Z

@thearabbit you can try to over the trigger's style:

benjycui · 2017-03-23T09:30:04Z

Add something like margin-top, so that it won't overlap your breadcrumb.

thearabbit · 2017-03-23T09:38:57Z

Thanks for your reply.
Could I use it with Custom trigger.
It mean that by default I use custom trigger and when meet small device it is change to responsive auto like AdminLTE Bootstrap.
Please example 👍

benjycui · 2017-03-24T02:57:11Z

@thearabbit try to set Layout.Sider[trigger=null]

thearabbit · 2017-04-08T03:00:59Z

Don't work.
Please help.

benjycui reviewed Feb 20, 2017

View reviewed changes

afc163 reviewed Feb 21, 2017

View reviewed changes

ddcat1115 force-pushed the fix-4668 branch from 77c97e1 to 1e09011 Compare February 23, 2017 12:59

ddcat1115 force-pushed the fix-4668 branch from 1e09011 to c67663d Compare February 24, 2017 02:42

afc163 reviewed Feb 24, 2017

View reviewed changes

ddcat1115 force-pushed the fix-4668 branch from 4fbc538 to 06713d6 Compare March 5, 2017 10:04

yesmeck reviewed Mar 5, 2017

View reviewed changes

ddcat1115 added 4 commits March 5, 2017 20:58

save

00ea24f

Layout.Sider support responsive display

2c92cd9

improve

8b15105

fix wrong spelling

a2f440d

ddcat1115 force-pushed the fix-4668 branch from 2abd050 to a2f440d Compare March 5, 2017 13:00

yesmeck merged commit 29fa65f into ant-design:feature-2.8 Mar 5, 2017

Layout.Sider support responsive display #4931

Layout.Sider support responsive display #4931

Conversation

ddcat1115 commented Feb 17, 2017

mention-bot commented Feb 17, 2017

coveralls commented Feb 17, 2017

afc163 commented Feb 17, 2017

ddcat1115 commented Feb 18, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 Feb 21, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Feb 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 Feb 24, 2017 • edited Loading

Choose a reason for hiding this comment

ddcat1115 commented Feb 23, 2017

coveralls commented Feb 23, 2017

coveralls commented Feb 23, 2017

benjycui commented Feb 24, 2017

coveralls commented Feb 24, 2017

ddcat1115 commented Feb 24, 2017

afc163 Feb 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yesmeck commented Mar 2, 2017

coveralls commented Mar 5, 2017

coveralls commented Mar 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Mar 5, 2017

coveralls commented Mar 5, 2017

thearabbit commented Mar 23, 2017

benjycui commented Mar 23, 2017

benjycui commented Mar 23, 2017

thearabbit commented Mar 23, 2017 • edited Loading

benjycui commented Mar 24, 2017

thearabbit commented Apr 8, 2017

afc163 Feb 21, 2017 •

edited

Loading

afc163 Feb 24, 2017 •

edited

Loading

afc163 Feb 24, 2017 •

edited

Loading

thearabbit commented Mar 23, 2017 •

edited

Loading