From 3f8e640f8219a797d38096216105dfd1500a8e01 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sat, 7 Aug 2021 17:35:11 +0800 Subject: [PATCH] refactor(layout-sider): sider placement right --- src/layout/demos/enUS/basic.demo.md | 8 +- src/layout/demos/enUS/collapse-right.demo.md | 20 ++--- src/layout/demos/enUS/collapse.demo.md | 10 +-- src/layout/demos/enUS/embedded.demo.md | 2 +- .../demos/enUS/show-sider-content.demo.md | 8 +- src/layout/demos/zhCN/basic.demo.md | 8 +- src/layout/demos/zhCN/collapse-right.demo.md | 12 +-- src/layout/demos/zhCN/collapse.demo.md | 10 +-- src/layout/demos/zhCN/embedded.demo.md | 2 +- .../demos/zhCN/show-sider-content.demo.md | 4 +- src/layout/src/Layout.tsx | 13 +--- src/layout/src/LayoutSider.tsx | 28 +------ src/layout/src/ToggleBar.tsx | 14 +--- src/layout/src/styles/layout-sider.cssr.ts | 73 ++++++++++++------- 14 files changed, 97 insertions(+), 115 deletions(-) diff --git a/src/layout/demos/enUS/basic.demo.md b/src/layout/demos/enUS/basic.demo.md index 694cfeeba..e5da9b09b 100644 --- a/src/layout/demos/enUS/basic.demo.md +++ b/src/layout/demos/enUS/basic.demo.md @@ -6,7 +6,7 @@ I hope the demo can meet you demand, so that you can have more time to do other Yiheyuan Road - Pingshan Road Chengfu Road @@ -14,10 +14,10 @@ I hope the demo can meet you demand, so that you can have more time to do other Yiheyuan Road - Handian Bridge - Pingshan Road @@ -29,7 +29,7 @@ I hope the demo can meet you demand, so that you can have more time to do other > Yiheyuan Road - Pingshan Road Chengfu Road diff --git a/src/layout/demos/enUS/collapse-right.demo.md b/src/layout/demos/enUS/collapse-right.demo.md index cb7b13797..59f5c22f0 100644 --- a/src/layout/demos/enUS/collapse-right.demo.md +++ b/src/layout/demos/enUS/collapse-right.demo.md @@ -5,13 +5,16 @@ Sometimes you might want to put the collapsed sidebar on the right. ```html + Pingshan Road

@@ -19,27 +22,25 @@ Sometimes you might want to put the collapsed sidebar on the right. Bridge

- Pingshan Road + Pingshan Road Handian Bridge - Pingshan Road + - ``` diff --git a/src/layout/demos/enUS/collapse.demo.md b/src/layout/demos/enUS/collapse.demo.md index 83655412c..c53924418 100644 --- a/src/layout/demos/enUS/collapse.demo.md +++ b/src/layout/demos/enUS/collapse.demo.md @@ -15,8 +15,8 @@ Use `show-trigger` to use builtin button. collapse-mode="width" :collapsed-width="120" :width="240" - show-trigger="arrow-circle" - content-style="padding: 24px" + show-trigger="bar" + content-style="padding: 24px;" bordered >

@@ -24,7 +24,7 @@ Use `show-trigger` to use builtin button. Bridge

- Pingshan Road @@ -34,12 +34,12 @@ Use `show-trigger` to use builtin button. :collapsed-width="120" :width="240" show-trigger="arrow-circle" - content-style="padding: 24px" + content-style="padding: 24px;" bordered > Handian Bridge - Pingshan Road diff --git a/src/layout/demos/enUS/embedded.demo.md b/src/layout/demos/enUS/embedded.demo.md index e294b2b07..ddb5df355 100644 --- a/src/layout/demos/enUS/embedded.demo.md +++ b/src/layout/demos/enUS/embedded.demo.md @@ -3,7 +3,7 @@ Sometimes you may want the background to be darker to highlight the content (especially card like things). ```html - + All you need to do to look to those clouds,
and every day be in a good mood. diff --git a/src/layout/demos/enUS/show-sider-content.demo.md b/src/layout/demos/enUS/show-sider-content.demo.md index 6525dfcac..1120f4723 100644 --- a/src/layout/demos/enUS/show-sider-content.demo.md +++ b/src/layout/demos/enUS/show-sider-content.demo.md @@ -11,12 +11,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set ` :width="240" :show-collapsed-content="false" show-trigger="arrow-circle" - content-style="padding: 24px" + content-style="padding: 24px;" bordered > Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian Bridge - Pingshan Road @@ -26,12 +26,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set ` :collapsed-width="120" :width="240" show-trigger="arrow-circle" - content-style="padding: 24px" + content-style="padding: 24px;" bordered > Handian Bridge - Pingshan Road diff --git a/src/layout/demos/zhCN/basic.demo.md b/src/layout/demos/zhCN/basic.demo.md index 5af0d17b5..02652e328 100644 --- a/src/layout/demos/zhCN/basic.demo.md +++ b/src/layout/demos/zhCN/basic.demo.md @@ -6,14 +6,14 @@ 颐和园路 - 平山道 + 平山道 成府路 颐和园路 - 海淀桥 - 平山道 + 海淀桥 + 平山道 成府路 @@ -21,7 +21,7 @@ 海淀桥 颐和园路 - 平山道 + 平山道 成府路 diff --git a/src/layout/demos/zhCN/collapse-right.demo.md b/src/layout/demos/zhCN/collapse-right.demo.md index 63622430f..9cd1a3747 100644 --- a/src/layout/demos/zhCN/collapse-right.demo.md +++ b/src/layout/demos/zhCN/collapse-right.demo.md @@ -5,34 +5,35 @@ ```html + 平山道

海淀桥 海淀桥 海淀桥 海淀桥 海淀桥

 - 平山道 + 平山道 海淀桥 - 平山道 + - ``` diff --git a/src/layout/demos/zhCN/collapse.demo.md b/src/layout/demos/zhCN/collapse.demo.md index c56f2ebeb..5558adfda 100644 --- a/src/layout/demos/zhCN/collapse.demo.md +++ b/src/layout/demos/zhCN/collapse.demo.md @@ -14,25 +14,25 @@ :collapsed-width="120" :width="240" show-trigger="arrow-circle" - content-style="padding: 24px" + content-style="padding: 24px;" bordered >

海淀桥 海淀桥 海淀桥 海淀桥 海淀桥

- 平山道 + 平山道 海淀桥 - 平山道 + 平山道 ``` diff --git a/src/layout/demos/zhCN/embedded.demo.md b/src/layout/demos/zhCN/embedded.demo.md index 1fe2552dd..fcbe84f02 100644 --- a/src/layout/demos/zhCN/embedded.demo.md +++ b/src/layout/demos/zhCN/embedded.demo.md @@ -3,7 +3,7 @@ 有的时候你希望背景色暗一点，来突出上面显示的内容（尤其是卡片）。 ```html - + 只要是 看到天边云一朵
逐天拢有好心情 diff --git a/src/layout/demos/zhCN/show-sider-content.demo.md b/src/layout/demos/zhCN/show-sider-content.demo.md index fcc3c6c5e..9ec146e99 100644 --- a/src/layout/demos/zhCN/show-sider-content.demo.md +++ b/src/layout/demos/zhCN/show-sider-content.demo.md @@ -16,7 +16,7 @@ > 海淀桥 海淀桥 海淀桥 海淀桥 海淀桥 - 平山道 + 平山道 海淀桥 - 平山道 + 平山道 ``` diff --git a/src/layout/src/Layout.tsx b/src/layout/src/Layout.tsx index 33c30d424..edc160df9 100644 --- a/src/layout/src/Layout.tsx +++ b/src/layout/src/Layout.tsx @@ -40,8 +40,9 @@ const layoutProps = { export type LayoutProps = ExtractPublicPropTypes -export const layoutInjectionKey: InjectionKey> = - Symbol('layout') +export const layoutInjectionKey: InjectionKey< +ExtractPropTypes +> = Symbol('layout') // eslint-disable-next-line @typescript-eslint/explicit-function-return-type export function createLayoutComponent (isContent: boolean) { @@ -115,9 +116,6 @@ export function createLayoutComponent (isContent: boolean) { render () { const { mergedClsPrefix, hasSider } = this const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined - const siderPlacementStyle = { - 'flex-direction': this.siderPlacement === 'right' && 'row-reverse' - } const layoutClass = [ isContent && `${mergedClsPrefix}-layout-content`, `${mergedClsPrefix}-layout`, @@ -129,9 +127,7 @@ export function createLayoutComponent (isContent: boolean) {
{this.$slots}
@@ -141,7 +137,6 @@ export function createLayoutComponent (isContent: boolean) { ref="scrollbarInstRef" theme={this.mergedTheme.peers.Scrollbar} themeOverrides={this.mergedTheme.peerOverrides.Scrollbar} - style={siderPlacementStyle} contentStyle={[this.contentStyle, hasSiderStyle] as any} > {this.$slots} diff --git a/src/layout/src/LayoutSider.tsx b/src/layout/src/LayoutSider.tsx index 7dc0e242d..ccdaf4251 100644 --- a/src/layout/src/LayoutSider.tsx +++ b/src/layout/src/LayoutSider.tsx @@ -123,20 +123,8 @@ export default defineComponent({ minWidth: formatLength(props.width) } }) - const siderScrollContainerTransformStyleRef = computed( - () => { - if (siderPlacementRef.value !== 'left' && props.collapseMode === 'transform') { - return { - transform: `translateX(calc(${formatLength(props.width)} - ${ - styleMaxWidthRef.value - }px)` - } - } - return {} - } - ) const siderPlacementRef = computed(() => { - return layoutProps?.siderPlacement || 'left' + return layoutProps ? layoutProps.siderPlacement : 'left' }) const uncontrolledCollapsedRef = ref(props.defaultCollapsed) const mergedCollapsedRef = useMergedState( @@ -209,7 +197,6 @@ export default defineComponent({ styleMaxWidth: styleMaxWidthRef, mergedCollapsed: mergedCollapsedRef, scrollContainerStyle: scrollContainerStyleRef, - siderScrollContainerTransformStyle: siderScrollContainerTransformStyleRef, siderPlacement: siderPlacementRef, handleTriggerClick, cssVars: computed(() => { @@ -250,7 +237,7 @@ export default defineComponent({ class={[ `${mergedClsPrefix}-layout-sider`, `${mergedClsPrefix}-layout-sider--${this.position}-positioned`, - `${mergedClsPrefix}-layout-sider--${this.siderPlacement}`, + `${mergedClsPrefix}-layout-sider--${this.siderPlacement}-placement`, this.bordered && `${mergedClsPrefix}-layout-sider--bordered`, mergedCollapsed && `${mergedClsPrefix}-layout-sider--collapsed`, (!mergedCollapsed || this.showCollapsedContent) && @@ -268,10 +255,7 @@ export default defineComponent({ diff --git a/src/layout/src/ToggleBar.tsx b/src/layout/src/ToggleBar.tsx index dada144f5..ce95c7ded 100644 --- a/src/layout/src/ToggleBar.tsx +++ b/src/layout/src/ToggleBar.tsx @@ -6,22 +6,12 @@ export default defineComponent({ type: String, required: true }, - onClick: Function as PropType<(e: MouseEvent) => void>, - collapsed: { - type: Boolean, - default: false - } + onClick: Function as PropType<(e: MouseEvent) => void> }, render () { const { clsPrefix } = this return ( -
+
diff --git a/src/layout/src/styles/layout-sider.cssr.ts b/src/layout/src/styles/layout-sider.cssr.ts index df1cc8efd..c361e26b1 100644 --- a/src/layout/src/styles/layout-sider.cssr.ts +++ b/src/layout/src/styles/layout-sider.cssr.ts @@ -25,26 +25,59 @@ export default cB('layout-sider', ` display: flex; justify-content: flex-end; `, [ - c('>', [ - cB('scrollbar', ` - transition: transform .3s var(--bezier); - `) - ]), - cM('right', [ + cM('right-placement', ` + justify-content: flex-start; + `, [ cM('bordered', ` + border-right: none; border-left: 1px solid var(--border-color); `), + cM('collapsed', [ + cB('layout-toggle-button', ` + transform: translateX(-50%) translateY(-50%) rotate(0); + `), + cB('layout-toggle-bar', [ + c('&:hover', [ + cE('top', { + transform: 'rotate(-12deg) scale(1.15) translateY(-2px)' + }), + cE('bottom', { + transform: 'rotate(12deg) scale(1.15) translateY(2px)' + }) + ]) + ]) + ]), cB('layout-toggle-button', ` transform: translateX(-50%) translateY(-50%) rotate(180deg); left: 0; - `, [ - cM('collapsed', ` - transform: translateX(-50%) translateY(-50%) rotate(0); - `) - ]), + `), cB('layout-toggle-bar', ` left: -28px; transform: rotate(180deg); + `, [ + c('&:hover', [ + cE('top', { + transform: 'rotate(12deg) scale(1.15) translateY(-2px)' + }), + cE('bottom', { + transform: 'rotate(-12deg) scale(1.15) translateY(2px)' + }) + ]) + ]) + ]), + cM('collapsed', [ + cB('layout-toggle-bar', [ + c('&:hover', [ + cE('top', { + transform: 'rotate(-12deg) scale(1.15) translateY(-2px)' + }), + cE('bottom', { + transform: 'rotate(12deg) scale(1.15) translateY(2px)' + }) + ]) + ]), + cB('layout-toggle-button', ` + transform: translateX(50%) translateY(-50%) rotate(180deg); `) ]), cB('layout-toggle-button', ` @@ -59,11 +92,7 @@ export default cB('layout-sider', ` right: 0; fill: var(--toggle-button-color); transform: translateX(50%) translateY(-50%) rotate(0); - `, [ - cM('collapsed', ` - transform: translateX(50%) translateY(-50%) rotate(180deg); - `) - ]), + `), cB('layout-toggle-bar', ` cursor: pointer; height: 72px; @@ -94,16 +123,6 @@ export default cB('layout-sider', ` transform: 'rotate(-12deg) scale(1.15) translateY(2px)' }) ]), - cM('collapsed', [ - c('&:hover', [ - cE('top', { - transform: 'rotate(-12deg) scale(1.15) translateY(-2px)' - }), - cE('bottom', { - transform: 'rotate(12deg) scale(1.15) translateY(2px)' - }) - ]) - ]), cE('top, bottom', { backgroundColor: 'var(--toggle-bar-color)' }), @@ -127,7 +146,7 @@ export default cB('layout-sider', ` box-sizing: border-box; height: 100%; opacity: 0; - transition: transform .3s var(--bezier), opacity .3s var(--bezier); + transition: opacity .3s var(--bezier); max-width: 100%; `), cM('show-content', [