refactor(layout-sider): sider placement right

tusen-ai · Aug 7, 2021 · 3f8e640 · 3f8e640
1 parent ccb0ded
commit 3f8e640
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 115 deletions.
diff --git a/src/layout/demos/enUS/basic.demo.md b/src/layout/demos/enUS/basic.demo.md
@@ -6,18 +6,18 @@ I hope the demo can meet you demand, so that you can have more time to do other
 <n-space vertical size="large">
   <n-layout>
     <n-layout-header>Yiheyuan Road</n-layout-header>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
     <n-layout-footer>Chengfu Road</n-layout-footer>
   </n-layout>
   <n-layout>
     <n-layout-header>Yiheyuan Road</n-layout-header>
     <n-layout has-sider>
-      <n-layout-sider content-style="padding: 24px"
+      <n-layout-sider content-style="padding: 24px;"
         >Handian Bridge</n-layout-sider
       >
-      <n-layout-content content-style="padding: 24px"
+      <n-layout-content content-style="padding: 24px;"
         >Pingshan Road</n-layout-content
       >
     </n-layout>
@@ -29,7 +29,7 @@ I hope the demo can meet you demand, so that you can have more time to do other
     >
     <n-layout>
       <n-layout-header>Yiheyuan Road</n-layout-header>
-      <n-layout-content content-style="padding: 24px"
+      <n-layout-content content-style="padding: 24px;"
         >Pingshan Road</n-layout-content
       >
       <n-layout-footer>Chengfu Road</n-layout-footer>

diff --git a/src/layout/demos/enUS/collapse-right.demo.md b/src/layout/demos/enUS/collapse-right.demo.md
@@ -5,41 +5,42 @@ Sometimes you might want to put the collapsed sidebar on the right.
 ```html
 <n-space vertical size="large">
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;"
+      >Pingshan Road</n-layout-content
+    >
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :native-scrollbar="true"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>
         Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian
         Bridge
       </p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
-      >Pingshan Road</n-layout-content
-    >
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;"
+      >Pingshan Road</n-layout-content
+    >
     <n-layout-sider
       collapse-mode="transform"
       :native-scrollbar="false"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      show-trigger="bar"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
-      >Pingshan Road</n-layout-content
-    >
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout style="max-height: 320px;" />
     <n-layout-sider
       bordered
       show-trigger
@@ -57,7 +58,6 @@ Sometimes you might want to put the collapsed sidebar on the right.
         :options="menuOptions"
       />
     </n-layout-sider>
-    <n-layout style="max-height: 320px;" />
   </n-layout>
 </n-space>
 ```

diff --git a/src/layout/demos/enUS/collapse.demo.md b/src/layout/demos/enUS/collapse.demo.md
@@ -15,16 +15,16 @@ 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
     >
       <p>
         Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian
         Bridge
       </p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
@@ -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
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>

diff --git 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
-<n-layout embedded content-style="padding: 24px">
+<n-layout embedded content-style="padding: 24px;">
   <n-card>
     All you need to do to look to those clouds,<br />
     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
@@ -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
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
@@ -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
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>

diff --git a/src/layout/demos/zhCN/basic.demo.md b/src/layout/demos/zhCN/basic.demo.md
@@ -6,22 +6,22 @@
 <n-space vertical size="large">
   <n-layout>
     <n-layout-header>颐和园路</n-layout-header>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-footer>成府路</n-layout-footer>
   </n-layout>
   <n-layout>
     <n-layout-header>颐和园路</n-layout-header>
     <n-layout has-sider>
-      <n-layout-sider content-style="padding: 24px">海淀桥</n-layout-sider>
-      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+      <n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
+      <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     </n-layout>
     <n-layout-footer>成府路</n-layout-footer>
   </n-layout>
   <n-layout has-sider>
     <n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
     <n-layout>
       <n-layout-header>颐和园路</n-layout-header>
-      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+      <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
       <n-layout-footer>成府路</n-layout-footer>
     </n-layout>
   </n-layout>

diff --git a/src/layout/demos/zhCN/collapse-right.demo.md b/src/layout/demos/zhCN/collapse-right.demo.md
@@ -5,34 +5,35 @@
 ```html
 <n-space vertical size="large">
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :width="240"
       :native-scrollbar="true"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
       :native-scrollbar="false"
-      show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      show-trigger="bar"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout style="max-height: 320px;" />
     <n-layout-sider
       bordered
       show-trigger
@@ -48,7 +49,6 @@
         :options="menuOptions"
       />
     </n-layout-sider>
-    <n-layout style="max-height: 320px;" />
   </n-layout>
 </n-space>
 ```

diff --git 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
     >
       <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      show-trigger="bar"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
 </n-space>
 ```
diff --git a/src/layout/demos/zhCN/embedded.demo.md b/src/layout/demos/zhCN/embedded.demo.md
@@ -3,7 +3,7 @@
 有的时候你希望背景色暗一点，来突出上面显示的内容（尤其是卡片）。
 
 ```html
-<n-layout embedded content-style="padding: 24px">
+<n-layout embedded content-style="padding: 24px;">
   <n-card>
     只要是 看到天边云一朵<br />
     逐天拢有好心情

diff --git a/src/layout/demos/zhCN/show-sider-content.demo.md b/src/layout/demos/zhCN/show-sider-content.demo.md
@@ -16,7 +16,7 @@
     >
       海淀桥 海淀桥 海淀桥 海淀桥 海淀桥
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider>
     <n-layout-sider
@@ -29,7 +29,7 @@
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
 </n-space>
 ```
diff --git a/src/layout/src/Layout.tsx b/src/layout/src/Layout.tsx
@@ -40,8 +40,9 @@ const layoutProps = {
 
 export type LayoutProps = ExtractPublicPropTypes<typeof layoutProps>
 
-export const layoutInjectionKey: InjectionKey<ExtractPropTypes<LayoutProps>> =
-  Symbol('layout')
+export const layoutInjectionKey: InjectionKey<
+ExtractPropTypes<typeof layoutProps>
+> = 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) {
             <div
               ref="scrollableElRef"
               class={`${mergedClsPrefix}-layout-scroll-container`}
-              style={
-                [this.contentStyle, hasSiderStyle, siderPlacementStyle] as any
-              }
+              style={[this.contentStyle, hasSiderStyle] as any}
             >
               {this.$slots}
             </div>
@@ -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}