feat(AcitonSheet): 优化 ActionSheet 的样式

jd-opensource · Aug 10, 2018 · ca42bce · ca42bce
1 parent 4ec8cee
commit ca42bce
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 28 deletions.
diff --git a/src/components/action-sheet/body/item/index.scss b/src/components/action-sheet/body/item/index.scss
@@ -2,8 +2,9 @@
 @import "../../../../style/theme/default.scss";
 
 .at-action-sheet-item {
-  font-size: 36px;
-  padding: 25px 0;
+  padding: $spacing-v-lg $spacing-h-lg;
+  font-size: $font-size-xl;
 
-  @include border-thin-bottom($color-grey-4);
+  @include border-thin-bottom();
+  @include line(1);
 }
diff --git a/src/components/action-sheet/footer/index.scss b/src/components/action-sheet/footer/index.scss
@@ -1,5 +1,7 @@
+@import "../../../style/theme/default.scss";
+
 .at-action-sheet-footer {
-  font-size: 36px;
-  padding: 25px 0;
-  border-top: 12px solid rgba($color: #cdcdd1, $alpha: 0.3);
+  font-size: $font-size-xl;
+  padding: $spacing-v-lg $spacing-h-lg;
+  border-top: 12px solid rgba($color: $color-border-base, $alpha: 0.3);
 }
diff --git a/src/components/action-sheet/header/index.scss b/src/components/action-sheet/header/index.scss
@@ -2,11 +2,11 @@
 @import "../../../style/theme/default.scss";
 
 .at-action-sheet-header {
+  padding: $spacing-v-lg $spacing-h-lg;
   color: $color-black-3;
-  padding: 25px;
-  text-align: center;
   font-size: $font-size-base;
+  text-align: center;
   line-height: $line-height-zh;
 
-  @include border-thin-bottom($color-grey-4);
+  @include border-thin-bottom();
 }
diff --git a/src/components/action-sheet/index.scss b/src/components/action-sheet/index.scss
@@ -1,6 +1,8 @@
 @import "../../style/theme/default.scss";
 @import "../../style/mixins/index.scss";
 
+$action-sheet-timer: 300ms;
+
 .at-action-sheet {
   position: fixed;
   width: 100%;
@@ -9,13 +11,13 @@
   left: 0;
   z-index: $zindex-action-sheet;
   visibility: hidden;
-  transition: visibility 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+  transition: visibility $action-sheet-timer $timing-func;
 
   &__overlay {
     @include overlay;
 
     opacity: 0;
-    transition: opacity 150ms ease-in;
+    transition: opacity $action-sheet-timer ease-in;
   }
 
   &__container {
@@ -24,9 +26,9 @@
     max-height: 50%;
     text-align: center;
     position: absolute;
-    background-color: white;
+    background-color: $color-white;
     transform: translate3d(0, 100%, 0);
-    transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+    transition: transform $action-sheet-timer $timing-func;
   }
 }
 

diff --git a/src/components/icon/index.scss b/src/components/icon/index.scss
diff --git a/src/pages/action/action-sheet/index.js b/src/pages/action/action-sheet/index.js
@@ -16,13 +16,22 @@ export default class ActionSheetPage extends Taro.Component {
   constructor () {
     super(...arguments)
     this.state = {
-      isOpened: false
+      isOpened1: false,
+      isOpened2: false,
+      isOpened3: false
     }
   }
 
   handleClick = e => {
-    const state = Object.assign({ isOpened: true }, e.currentTarget.dataset)
-    this.setState(state)
+    const { type } = e.currentTarget.dataset
+
+    if (type === '1') {
+      this.setState({ isOpened1: true })
+    } else if (type === '2') {
+      this.setState({ isOpened2: true })
+    } else if (type === '3') {
+      this.setState({ isOpened3: true })
+    }
   }
 
   showToast = name => {
@@ -33,7 +42,8 @@ export default class ActionSheetPage extends Taro.Component {
   }
 
   render () {
-    const { isOpened } = this.state
+    const { isOpened1, isOpened2, isOpened3 } = this.state
+
     return (
       <View className='page'>
         {/* S Header */}
@@ -42,20 +52,73 @@ export default class ActionSheetPage extends Taro.Component {
 
         {/* S Body */}
         <View className='doc-body'>
-          {/* 圆形头像 */}
+          {/* 无 Title */}
+          <View className='panel'>
+            <View className='panel__title'>无标题</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <Button data-type='1' onClick={this.handleClick}>打开 ActionSheet</Button>
+              </View>
+            </View>
+          </View>
+
+          {/* 含标题 */}
+          <View className='panel'>
+            <View className='panel__title'>含标题</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <Button data-type='2' onClick={this.handleClick}>打开 ActionSheet</Button>
+              </View>
+            </View>
+          </View>
+
+          {/* 自定义选项 */}
           <View className='panel'>
-            <View className='panel__title'>示例</View>
+            <View className='panel__title'>自定义选项</View>
             <View className='panel__content'>
               <View className='example-item'>
-                <Button onClick={this.handleClick}>打开 ActionSheet</Button>
+                <Button data-type='3' onClick={this.handleClick}>打开 ActionSheet</Button>
               </View>
             </View>
           </View>
         </View>
 
         <AtActionSheet
           cancleText='取消'
-          isOpened={isOpened}
+          isOpened={isOpened1}
+        >
+          <AtActionSheetItem
+            onClick={this.showToast.bind(this, '点击了按钮一')}
+          >
+            按钮一按钮一按钮一按钮一按钮一按钮一按钮一按钮一
+          </AtActionSheetItem>
+          <AtActionSheetItem
+            onClick={this.showToast.bind(this, '点击了按钮二')}
+          >
+            按钮二
+          </AtActionSheetItem>
+        </AtActionSheet>
+
+        <AtActionSheet
+          cancleText='取消'
+          isOpened={isOpened2}
+          title='清除位置信息后， 别人将不能查看到你\r\n可以通过转义字符换行'
+        >
+          <AtActionSheetItem
+            onClick={this.showToast.bind(this, '点击了按钮一')}
+          >
+            按钮一
+          </AtActionSheetItem>
+          <AtActionSheetItem
+            onClick={this.showToast.bind(this, '点击了按钮二')}
+          >
+            按钮二
+          </AtActionSheetItem>
+        </AtActionSheet>
+
+        <AtActionSheet
+          cancleText='取消'
+          isOpened={isOpened3}
           title='清除位置信息后， 别人将不能查看到你\r\n可以通过转义字符换行'
         >
           <AtActionSheetItem

diff --git a/src/style/mixins/libs/border.scss b/src/style/mixins/libs/border.scss
@@ -1,9 +1,9 @@
 @import "../../theme/default";
 
-// 默认主题下 $color-border-split : #e5e5e5
+// 默认主题下 $color-border-lighter
 
 @mixin border-thin(
-  $color: $color-border-split,
+  $color: $color-border-lighter,
   $style: solid,
   $directions: top bottom right left
 ) {
@@ -13,18 +13,18 @@
   }
 }
 
-@mixin border-thin-top($color: $color-border-split, $style: solid) {
+@mixin border-thin-top($color: $color-border-lighter, $style: solid) {
   @include border-thin($color, $style, top);
 }
 
-@mixin border-thin-left($color: $color-border-split, $style: solid) {
+@mixin border-thin-left($color: $color-border-lighter, $style: solid) {
   @include border-thin($color, $style, left);
 }
 
-@mixin border-thin-right($color: $color-border-split, $style: solid) {
+@mixin border-thin-right($color: $color-border-lighter, $style: solid) {
   @include border-thin($color, $style, right);
 }
 
-@mixin border-thin-bottom($color: $color-border-split, $style: solid) {
+@mixin border-thin-bottom($color: $color-border-lighter, $style: solid) {
   @include border-thin($color, $style, bottom);
 }
diff --git a/src/style/theme/default.scss b/src/style/theme/default.scss
@@ -114,6 +114,9 @@ $zindex-action-sheet: 1010;
 $zindex-picker: 1010;
 $zindex-toast: 1090;
 
+/* timing function */
+$timing-func: cubic-bezier(0.36, 0.66, 0.04, 1);
+
 /**
  * CSS cubic-bezier timing functions
  * http://bourbon.io/docs/#timing-functions