feat(Toast): 优化样式

src/app.js

@@ -17,13 +17,13 @@ class App extends Component {
       'pages/view/tag/index',
       'pages/view/avatar/index',
       'pages/view/article/index',
+      'pages/view/timeline/index',
       'pages/action/toast/index',
       'pages/action/modal/index',
       'pages/action/progress/index',
       'pages/action/action-sheet/index',
       'pages/action/activity-indicator/index',
       'pages/navigation/drawer/index',
-      'pages/navigation/timeline/index',
       'pages/navigation/pagination/index',
       'pages/navigation/tabs/index',
       'pages/navigation/tabbar/index',

src/components/modal/action/index.scss

@@ -10,6 +10,7 @@
     & > button {
       @include flex(auto);
       @include line(1);
+      @include active;
 
       min-width: 160px;
       height: 88px;

src/components/toast/index.js

@@ -88,6 +88,10 @@ export default class AtToast extends Taro.Component {
       rootClass.push(`at-toast-body--${status}`)
     }
 
+    if (image) {
+      rootClass.push('at-toast-body--custom-image')
+    }
+
     return isOpened ? (
       <View className='at-toast'>
         {hasMask && <View className='at-toast-overlay' />}
@@ -121,7 +125,7 @@ export default class AtToast extends Taro.Component {
 }
 
 AtToast.defaultProps = {
-  duration: 3000
+  duration: 30000
 }
 
 AtToast.propTypes = {

src/components/toast/index.scss

@@ -66,20 +66,17 @@ $toast-loading-size: 100px;
       margin-top: 0;
     }
   }
+
+  &.at-toast-body--custom-image,
+  &.at-toast-body--success,
+  &.at-toast-body--error,
+  &.at-toast-body--loading {
+    padding-bottom: $spacing-v-lg - (($font-size-base * $line-height-zh - $font-size-base) / 2);
+  }
 }
 
 .at-toast-body--loading {
-  .toast-body-content__img {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: $toast-image-size;
-
-    &-item {
-      width: $toast-loading-size;
-      height: $toast-loading-size;
-      animation: atRotate 1350ms linear infinite;
-    }
+  .toast-body-content__img-item {
+    animation: atRotate 1350ms linear infinite;
   }
 }

src/pages/action/modal/index.js

@@ -116,7 +116,7 @@ export default class ModalPage extends Taro.Component {
             <Button onClick={this.closeModal.bind(this, 1, '点击了取消')}>
               取消
             </Button>
-            <Button onClick={this.closeModal.bind(this, 1, '点击了确定')}>
+            <Button style='color:#6190E8' onClick={this.closeModal.bind(this, 1, '点击了确定')}>
               确定
             </Button>
           </AtModalAction>
@@ -152,7 +152,7 @@ export default class ModalPage extends Taro.Component {
             <Button onClick={this.closeModal.bind(this, 3, '点击了取消')}>
               取消
             </Button>
-            <Button onClick={this.closeModal.bind(this, 3, '点击了确定')}>
+            <Button style='color:#6190E8' onClick={this.closeModal.bind(this, 3, '点击了确定')}>
               确定
             </Button>
           </AtModalAction>

src/pages/panel/index.js

@@ -47,14 +47,14 @@ export default class PanelBasic extends Component {
       },
       list: {
         'basic': [
-          {
-            id: 'Icon',
-            name: '图标'
-          },
           {
             id: 'Color',
             name: '颜色'
           },
+          {
+            id: 'Icon',
+            name: '图标'
+          },
           {
             id: 'Typo',
             name: '字体'
@@ -66,24 +66,28 @@ export default class PanelBasic extends Component {
         ],
         'view': [
           {
-            id: 'NoticeBar',
-            name: '通告栏'
+            id: 'Avatar',
+            name: '头像'
+          },
+          {
+            id: 'Article',
+            name: '文章'
           },
           {
             id: 'Badge',
             name: '徽标'
           },
           {
-            id: 'Tag',
-            name: '标签'
+            id: 'NoticeBar',
+            name: '通告栏'
           },
           {
-            id: 'Avatar',
-            name: '头像'
+            id: 'Tag',
+            name: '标签'
           },
           {
-            id: 'Article',
-            name: '文章'
+            id: 'Timeline',
+            name: '时间轴'
           }
         ],
         'action': [
@@ -151,13 +155,13 @@ export default class PanelBasic extends Component {
             id: 'List',
             name: '列表'
           },
-          {
-            id: 'Float-Layout',
-            name: '浮层'
-          },
           {
             id: 'Card',
             name: '卡片'
+          },
+          {
+            id: 'Float-Layout',
+            name: '浮层'
           }
         ],
         'navigation': [
@@ -177,10 +181,6 @@ export default class PanelBasic extends Component {
             id: 'Segmented-Control',
             name: '分段器'
           },
-          {
-            id: 'Timeline',
-            name: '时间轴'
-          },
           {
             id: 'Pagination',
             name: '分页器'