iPhone X compatible: ActionSheet、Picker (#47)

81f92d98 · wind-stone · doly mood · c3cbe43c · 81f92d98 · 81f92d98
6 changed file
--- 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>

--- a/src/common/stylus/base.styl
+++ b/src/common/stylus/base.styl
 @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

--- 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("")
--- 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

--- 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

--- 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>