fix(pickerheader): Reorder prev/next buttons when rtl

mst101 · Jun 30, 2021 · d4ab12c · d4ab12c
1 parent 628768d
commit d4ab12c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 23 deletions.
diff --git a/src/components/PickerHeader.vue b/src/components/PickerHeader.vue
@@ -2,7 +2,7 @@
   <header>
     <span
       class="prev"
-      :class="{ disabled: isLeftNavDisabled }"
+      :class="{ disabled: isPreviousDisabled, rtl: isRtl }"
       @click="$emit('page-change', -1)"
     >
       <slot name="prevIntervalBtn">
@@ -12,7 +12,7 @@
     <slot />
     <span
       class="next"
-      :class="{ disabled: isRightNavDisabled }"
+      :class="{ disabled: isNextDisabled, rtl: isRtl }"
       @click="$emit('page-change', 1)"
     >
       <slot name="nextIntervalBtn">
@@ -39,23 +39,5 @@ export default {
       required: true,
     },
   },
-  computed: {
-    /**
-     * Is the left hand navigation button disabled?
-     * @return {Boolean}
-     */
-    /* istanbul ignore next */
-    isLeftNavDisabled() {
-      return this.isRtl ? this.isNextDisabled : this.isPreviousDisabled
-    },
-    /**
-     * Is the right hand navigation button disabled?
-     * @return {Boolean}
-     */
-    /* istanbul ignore next */
-    isRightNavDisabled() {
-      return this.isRtl ? this.isPreviousDisabled : this.isNextDisabled
-    },
-  },
 }
 </script>
diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -32,19 +32,18 @@
   }
 
   header {
-    display: block;
+    display: flex;
+    justify-content: space-between;
     line-height: 40px;
 
     span {
       display: inline-block;
-      float: left;
       text-align: center;
       width: 71.42857142857143%;
     }
 
     .prev,
     .next {
-      float: left;
       max-height: 40px;
       position: relative;
       width: 14.285714285714286%;
@@ -61,6 +60,10 @@
           transform: translateX(-50%) translateY(-50%);
         }
       }
+
+      &.rtl {
+        transform: rotate(180deg);
+      }
     }
 
     .prev {