feat(layout): sider-position #657

bljessica · 2021-07-26T07:05:05Z

No description provided.

vercel · 2021-07-26T07:05:10Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tusimple/naive-ui/Da9jx2CpQe4QmetaSwFVePXMAo8C
✅ Preview: https://naive-ui-git-fork-bljessica-dev1-tusimple.vercel.app

codecov · 2021-07-26T07:09:40Z

Codecov Report

Merging #657 (c2b5858) into main (3d5daa5) will decrease coverage by 0.02%.
The diff coverage is 18.18%.

@@            Coverage Diff             @@
##             main     #657      +/-   ##
==========================================
- Coverage   40.38%   40.36%   -0.03%     
==========================================
  Files         507      507              
  Lines       12398    12407       +9     
  Branches     3486     3490       +4     
==========================================
+ Hits         5007     5008       +1     
- Misses       6478     6485       +7     
- Partials      913      914       +1

Impacted Files	Coverage Δ
src/layout/src/LayoutSider.tsx	`1.44% <0.00%> (-0.17%)`	⬇️
src/layout/src/Layout.tsx	`53.12% <66.66%> (-0.21%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3d5daa5...c2b5858. Read the comment docs.

07akioni

写个 Demo 吧，带宽度折叠的那种

07akioni · 2021-07-26T15:40:03Z

src/layout/demos/enUS/index.demo-entry.md

@@ -34,6 +34,7 @@ scroll-to
 | has-sider | `boolean` | `false` | Whether the component has sider inside. If so it must be `true`. |
 | native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content. |
 | position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
+| sider-positioned | `boolean` | `false` | Whether the component content is reversed, if you need to set the sidebar on the right, you must set it to `true`. |


use sider-placement instead

07akioni · 2021-07-26T15:40:39Z

src/layout/demos/zhCN/index.demo-entry.md

@@ -66,6 +67,7 @@ scroll-to
 | position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
 | show-collapsed-content | `boolean` | `true` | 是否在 `sider` 折叠后展示内部内容 |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
+| sider-position | `'left' \| 'right'` | `left` | 侧边栏显示在左侧还是右侧 |


footer 需要这个吗？

07akioni · 2021-07-26T15:42:29Z

src/layout/src/LayoutSider.tsx

+    const mergedTriggerStyle = computed(() => [
+      props.triggerStyle,
+      {
+        left: props.siderPosition === 'left' ? 'unset' : 0,


props.siderPosition === 'left' 这个提一层，siderOnLeft = ...

07akioni · 2021-07-26T15:44:06Z

src/layout/src/LayoutSider.tsx

+      return {
+        borderRight:
+          props.bordered && props.siderPosition === 'left'
+            ? '1px solid var(--border-color)'


Suggested change

? '1px solid var(--border-color)'

? '1px solid var(--border-color)'

这块在 css 用类处理

07akioni

现在的改动会让 trigger button 出问题，看看

bljessica · 2021-07-29T12:28:16Z

现在的改动会让 trigger button 出问题，看看
@07akioni 啥问题呀？

07akioni · 2021-07-29T14:22:16Z

现在的改动会让 trigger button 出问题，看看
@07akioni 啥问题呀？

就是位置不对，和线上的版本不一致，你可以看 vercel 的 preview

07akioni · 2021-07-29T14:22:38Z

07akioni · 2021-07-29T14:23:18Z

位置错了

翻转的动画没了

07akioni · 2021-07-29T15:56:12Z

布局的样式出问题了。

压缩了内容

正确的：

07akioni · 2021-07-30T16:23:51Z

位置错了

翻转的动画没了

这个评论里提到的问题还在

07akioni · 2021-07-30T16:24:17Z

可以和线上的文档网站对比一下

07akioni · 2021-08-02T16:55:29Z

src/layout/src/LayoutSider.tsx

+    const siderPlacement = ref<'left' | 'right'>('left')
+    const siderOnLeft = computed(() => {
+      return siderPlacement.value === 'left'
+    })
+    const mergedToggleButtonStyle = computed(() => {
+      const translateXAndY = siderOnLeft.value
+        ? 'translateX(50%) translateY(-50%)'
+        : 'translateX(-50%) translateY(-50%)'
+      const translateZ = siderOnLeft.value
+        ? mergedCollapsedRef.value
+          ? 'rotate(180deg)'
+          : 'rotate(0)'
+        : mergedCollapsedRef.value
+          ? 'rotate(0)'
+          : 'rotate(180deg)'
+      return [
+        props.triggerStyle,
+        !siderOnLeft.value && { left: 0 },
+        {
+          transform: `${translateXAndY} ${translateZ}`
+        }
+      ]


我的直觉这个功能不至于写这么多样式在组件里，能简化一下吗😂

我单 review 已经看不出是不是有问题了。

能不能试着尽量把样式集中在 css 里，用类名解决？

那样代码应该会少很多。

07akioni · 2021-08-03T16:54:51Z

src/layout/src/LayoutSider.tsx

+    const siderPlacement = ref<'left' | 'right'>('left')
+    const siderOnLeft = computed(() => {
+      return siderPlacement.value === 'left'
+    })


这块用 inject，不要在 render 里面用 $parent 修改这个值

07akioni · 2021-08-03T16:57:02Z

src/layout/src/LayoutSider.tsx

+    const siderScrollContainerTransformStyle =
+      !this.siderOnLeft && this.collapseMode === 'transform'
+        ? `translateX(${
+            parseInt(formatLength(this.width)) - parseInt(this.styleMaxWidth)
+          }px)`
+        : 'unset'


这个能放到 css 里吗？用类名区分就可以

这个translateX的值要计算，怎么放到css里呀？

07akioni · 2021-08-03T17:00:25Z

src/layout/src/LayoutSider.tsx

+                !this.siderOnLeft &&
+                  `${mergedClsPrefix}-layout-toggle-button--right`,


这块可以不用这个类，它是 layout-sider DOM 的 children，用 css 就行了

07akioni · 2021-08-03T17:00:36Z

src/layout/src/LayoutSider.tsx

+              class={[
+                !this.siderOnLeft &&
+                  `${mergedClsPrefix}-layout-toggle-bar--right`
+              ]}


这里也同理

07akioni · 2021-08-05T17:54:00Z

src/layout/src/LayoutSider.tsx

+    const siderOnLeft = computed(() => {
+      return siderPlacement === 'left'
+    })


Suggested change

const siderOnLeft = computed(() => {

return siderPlacement === 'left'

})

const siderOnLeftRef = computed(() => {

return siderPlacement === 'left'

})

07akioni · 2021-08-05T17:54:59Z

src/layout/src/LayoutSider.tsx

+        return {}
+      }
+    )
+    const siderPlacement = layoutProps?.siderPlacement || 'left'


不能这么写，会丢失响应式，直接在其他 computed 里面用就行

07akioni · 2021-08-05T17:58:01Z

src/layout/src/LayoutSider.tsx

+        if (!siderOnLeft.value && props.collapseMode === 'transform') {
+          return {
+            transform: `translateX(${
+              parseInt(formatLength(props.width)) -
+              parseInt(styleMaxWidthRef.value)
+            }px)`
+          }
+        }


这个状态估计是不能支持百分比的宽度，在左侧时候是能支持的

07akioni · 2021-08-05T17:58:53Z

src/layout/src/LayoutSider.tsx

+          `${mergedClsPrefix}-layout-sider--${this.siderPlacement}-positioned`,
+          this.bordered &&
+            `${mergedClsPrefix}-layout-sider--border-${
+              this.siderOnLeft ? 'right' : 'left'


siderPlacement 就行吧？

07akioni · 2021-08-05T18:00:57Z

src/layout/src/LayoutSider.tsx

+              {
+                transition: 'transform .3s var(--bezier)'
+              }


这个地方可以用

cB('layout-sider', [ c('>', [ cB('scrollbar', 'transition: transform .3s var(--bezier);') ]) ])

来解决

src/layout/src/styles/layout-sider.cssr.ts

src/layout/src/LayoutSider.tsx

07akioni · 2021-08-07T08:11:42Z

src/layout/src/LayoutSider.tsx

+            transform: `translateX(calc(${formatLength(props.width)} - ${
+              styleMaxWidthRef.value
+            }px)`


calc 在 transform 里用其实没啥用，不会用外层的值

07akioni · 2021-08-07T09:36:31Z

做了点修改，去掉了一些没用的代码

3f8e640

feat(layout): sider-position

d953cbe

vercel bot deployed to Preview July 26, 2021 07:05 View deployment

docs(layout): sider-position in en-US

caa9a0b

vercel bot deployed to Preview July 26, 2021 07:17 View deployment

Volankey linked an issue Jul 26, 2021 that may be closed by this pull request

折叠侧边栏能否可以设置在右边 #566

Closed

07akioni reviewed Jul 26, 2021

View reviewed changes

fix(layout): sider placement

fa114ce

vercel bot deployed to Preview July 27, 2021 03:56 View deployment

07akioni reviewed Jul 28, 2021

View reviewed changes

fix(layout): transform sider when sider is placed right

793ce07

vercel bot deployed to Preview July 29, 2021 15:32 View deployment

fix(layout): set flex-direction of container

eab0121

vercel bot deployed to Preview July 30, 2021 02:08 View deployment

fix(layout): remove useless computed property

4e1fccf

vercel bot deployed to Preview July 30, 2021 02:13 View deployment

fix(layout): toggleBar, toggleButton style

579eea8

vercel bot deployed to Preview August 2, 2021 03:09 View deployment

07akioni reviewed Aug 2, 2021

View reviewed changes

refactor(layout-sider): toggle style

05e9644

vercel bot deployed to Preview August 3, 2021 06:13 View deployment

07akioni reviewed Aug 3, 2021

View reviewed changes

refactor(layout-sider): remove useless className

26082b1

vercel bot deployed to Preview August 5, 2021 03:16 View deployment

07akioni reviewed Aug 5, 2021

View reviewed changes

fix(layout): transform width

72ab4ab

vercel bot deployed to Preview August 6, 2021 06:35 View deployment

07akioni reviewed Aug 7, 2021

View reviewed changes

src/layout/src/styles/layout-sider.cssr.ts Outdated Show resolved Hide resolved

Update src/layout/src/styles/layout-sider.cssr.ts

7fa190c

vercel bot deployed to Preview August 7, 2021 08:00 View deployment

07akioni reviewed Aug 7, 2021

View reviewed changes

src/layout/src/LayoutSider.tsx Outdated Show resolved Hide resolved

src/layout/src/LayoutSider.tsx Outdated Show resolved Hide resolved

src/layout/src/LayoutSider.tsx Outdated Show resolved Hide resolved

Apply suggestions from code review

5ebfc90

vercel bot deployed to Preview August 7, 2021 08:04 View deployment

07akioni reviewed Aug 7, 2021

View reviewed changes

Merge branch 'main' into dev1

c2b5858

vercel bot deployed to Preview August 7, 2021 08:13 View deployment

07akioni merged commit ccb0ded into tusen-ai:main Aug 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(layout): sider-position #657

feat(layout): sider-position #657

bljessica commented Jul 26, 2021

vercel bot commented Jul 26, 2021 •

edited

Loading

codecov bot commented Jul 26, 2021 •

edited

Loading

07akioni left a comment

07akioni Jul 26, 2021

07akioni Jul 26, 2021

07akioni Jul 26, 2021

07akioni Jul 26, 2021

07akioni left a comment

bljessica commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 30, 2021

07akioni commented Jul 30, 2021

07akioni Aug 2, 2021

07akioni Aug 2, 2021

07akioni Aug 3, 2021

07akioni Aug 3, 2021

bljessica Aug 5, 2021

07akioni Aug 3, 2021

07akioni Aug 3, 2021

07akioni Aug 5, 2021

07akioni Aug 5, 2021

07akioni Aug 5, 2021

07akioni Aug 5, 2021

07akioni Aug 5, 2021

07akioni Aug 7, 2021

07akioni commented Aug 7, 2021

	? '1px solid var(--border-color)'
	? '1px solid var(--border-color)'

		!this.siderOnLeft &&
		`${mergedClsPrefix}-layout-toggle-button--right`,

feat(layout): sider-position #657

feat(layout): sider-position #657

Conversation

bljessica commented Jul 26, 2021

vercel bot commented Jul 26, 2021 • edited Loading

codecov bot commented Jul 26, 2021 • edited Loading

Codecov Report

07akioni left a 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

07akioni left a comment

Choose a reason for hiding this comment

bljessica commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 29, 2021

07akioni commented Jul 30, 2021

07akioni commented Jul 30, 2021

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

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

07akioni commented Aug 7, 2021

vercel bot commented Jul 26, 2021 •

edited

Loading

codecov bot commented Jul 26, 2021 •

edited

Loading