iPhone X compatible: ActionSheet、Picker (#47)

wind-stone · dolymood · commit 81f92d98df0c · 2017-12-15T12:33:48.000+08:00
diff --git a/example/index.html b/example/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>cube-ui lib</title>
   <meta name="viewport"
-        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
 </head>
 <body>
   <div id="app"></div>
diff --git a/src/common/stylus/base.styl b/src/common/stylus/base.styl
@@ -1,4 +1,5 @@
 @require "./variable.styl"
+@require "./mixin.styl"
 
 body, html
   line-height: 1
@@ -52,6 +53,9 @@ body, html
     height: 100%
     transform-origin: left 0
 
+.cube-safe-area-pb
+  safe-area-mixin(padding-bottom, bottom, true)
+
 @media (min-resolution: 2dppx)
   .border-top-1px
     &::before
diff --git a/src/common/stylus/mixin.styl b/src/common/stylus/mixin.styl
@@ -54,3 +54,10 @@ bg-image($url, $ext = ".png")
   background-image: url($url + "@2x" + $ext)
   @media (min-resolution: 3dppx)
     background-image: url($url + "@3x" + $ext)
+
+functions = constant env
+safe-area-fn(fn, position)
+  s("%s(safe-area-inset-%s)", fn, position)
+safe-area-mixin(property, position, important = false)
+  for fn in functions
+    {property} safe-area-fn(fn, position) important == true ? !important : unquote("")
diff --git a/src/common/stylus/theme/default.styl b/src/common/stylus/theme/default.styl
@@ -6,6 +6,7 @@ $action-sheet-active-color := $color-orange
 $action-sheet-bgc := $color-white
 $action-sheet-active-bgc := $color-light-grey-opacity
 $action-sheet-title-color := $color-dark-grey
+$action-sheet-space-bgc := $color-mask-bg
 /// picker style
 $action-sheet-picker-cancel-color := $color-light-grey
 $action-sheet-picker-cancel-active-color := $color-light-grey-s
diff --git a/src/components/action-sheet/action-sheet.vue b/src/components/action-sheet/action-sheet.vue
@@ -9,7 +9,7 @@
       @touchmove.prevent="noop"
       @click="cancel">
       <transition name="cube-action-sheet-move">
-        <div class="cube-action-sheet-panel" v-show="isVisible" @click.stop="noop">
+        <div class="cube-action-sheet-panel cube-safe-area-pb" v-show="isVisible" @click.stop="noop">
           <h1 class="cube-action-sheet-title border-bottom-1px" v-show="pickerStyle || title">{{title}}</h1>
           <div class="cube-action-sheet-content">
             <ul class="cube-action-sheet-list">
@@ -94,6 +94,7 @@
   .cube-action-sheet-panel
     text-align: center
     font-size: $fontsize-medium
+    background-color: $action-sheet-bgc
   .cube-action-sheet-move-enter, .cube-action-sheet-move-leave-active
     transform: translate3d(0, 100%, 0)
   .cube-action-sheet-move-enter-active, .cube-action-sheet-move-leave-active
@@ -142,6 +143,7 @@
 
   .cube-action-sheet-space
     height: 6px
+    background-color: $action-sheet-space-bgc
 
   .cube-action-sheet-item_active
     color: $action-sheet-active-color
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
@@ -8,7 +8,7 @@
         @touchmove.prevent
         @mask-click="cancel">
       <transition name="cube-picker-move">
-        <div class="cube-picker-panel" v-show="isVisible" @click.stop>
+        <div class="cube-picker-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
           <div class="cube-picker-choose border-bottom-1px">
             <span data-action="cancel" @click="cancel">{{cancelTxt}}</span>
             <span data-action="confirm" @click="confirm">{{confirmTxt}}</span>
