feat(activator): update the default activator style

ly525 · Feb 1, 2019 · bffa31d · bffa31d
1 parent 36e80d8
commit bffa31d
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 80 deletions.
diff --git a/src/components/Picker.vue b/src/components/Picker.vue
@@ -2,9 +2,7 @@
   <div class="md-date-range-picker" v-clickoutside="clickedApply">
     <div class="md-date-range-picker__activator" @click="togglePicker">
       <slot name="input">
-        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
-        <span>{{ startText }} - {{ endText }}</span>
-        <!-- <b class="caret"></b> -->
+        <default-activator :value="`${startText} - ${endText}`" readonly />
       </slot>
     </div>
     <transition name="slide-fade" mode="out-in">
@@ -59,13 +57,15 @@
 import moment from 'moment';
 import Calendar from './Calendar.vue';
 import CalendarRanges from './Ranges.vue';
+import DefaultActivator from './widgets/activator.vue';
+
 import clickoutside from '../directives/clickoutside';
 
 import { defaultPresets } from '../constant/index.js';
 
 export default {
   name: 'v-md-date-range-picker',
-  components: { Calendar, CalendarRanges },
+  components: { Calendar, CalendarRanges, DefaultActivator, },
   directives: { clickoutside },
   provide () {
     return {
@@ -124,6 +124,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    // show label for the default activator (inputbox)
+    showActivatorLabel: {
+      type: Boolean,
+      default: true,
+    },
+    // show animation bar for the default activator (inputbox)
+    showActivatorBar: {
+      type: Boolean,
+      default: true,
+    },
   },
   data () {
     const data = {

diff --git a/src/components/widgets/activator.vue b/src/components/widgets/activator.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="activator-wrapper">
+    <input v-bind="$attrs" class="text-field" :class="inputClass" type="text" :value="value">
+    <span v-if="picker.showActivatorBar" class="bar"></span>
+    <label v-if="picker.showActivatorLabel">Select Date</label>
+  </div>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+  inject: ['picker'],
+  props: ['value'],
+  computed: {
+    inputClass () {
+      return {
+        'text-field__filled': this.value.trim().length > 0,
+      };
+    },
+  },
+}
+</script>
+
+
+<style lang="scss">
+@import '../../styles/components/activator.scss';
+</style>
diff --git a/src/styles/components/activator.scss b/src/styles/components/activator.scss
@@ -0,0 +1,64 @@
+.md-date-range-picker__activator .activator-wrapper {
+  position:relative;
+
+  .text-field 				{
+    display: block;
+    font-size: 18px;
+    padding: 4px 10px 10px 5px;
+    width: 300px;
+    border: none;
+    border-bottom: 1px solid #757575;
+
+    &:focus { outline: none; }
+  }
+
+  /* label */
+  label 				 {
+    color:#999;
+    font-size:14px;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 5px;
+    top: 10px;
+    transition: 0.2s ease all;
+  }
+
+  /* active state
+   * use the class if the input value is not empty with javascript trim function
+   * https://stackoverflow.com/questions/8639282/notempty-css-selector-is-not-working
+   */
+  .text-field__filled ~ label,
+  .text-field:focus ~ label {
+    top: -20px;
+    font-size: 14px;
+    color: #1976d2;
+  }
+
+  /* bottom bars */
+  .bar 	{
+    position: relative;
+    display: block;
+    width: 315px;
+
+    &:before,
+    &:after {
+      content: '';
+      height: 2px;
+      width: 0;
+      bottom: 1px;
+      position: absolute;
+      background: #1976d2;
+      transition: 0.2s ease all;
+    }
+
+    &:before { left: 50%; }
+    &:after { right: 50%; }
+  }
+
+  /* active state */
+  .text-field:focus ~ .bar:before,
+  .text-field:focus ~ .bar:after {
+    width: 50%;
+  }
+}
diff --git a/src/styles/components/calendar.scss b/src/styles/components/calendar.scss
@@ -1,12 +1,11 @@
-table {
+table.calendar-table {
   width: 100%;
   margin: 0;
   border-spacing: 0;
   // ??? border-collapse
   border-collapse: collapse;
-}
 
-table {
+  // TODO add renderCalendarCell function for API to custom the calendar cell style
   td,
   th {
     white-space: nowrap;
@@ -22,52 +21,53 @@ table {
     white-space: nowrap;
     cursor: pointer;
   }
-}
-td {
-  &:hover {
-    background-color: #eee;
-    border-color: transparent;
-    color: inherit;
-  }
-  &.today {
-    font-weight: bold;
-  }
-
-  // items between start and end
-  &.in-range {
-    background-color: #ebf4f8;
-    border-color: transparent;
-    color: #000;
-    border-radius: 0;
-  }
 
-  // 选中项 (active item)
-  // TODO 开放 API，允许用户自定义 active 的样式，如何做 ？
-  // TODO give an API for user to custom active class
-  &.active,
-  &.active:hover {
-    background-color: #357ebd;
-    border-color: transparent;
-    color: #fff;
+  td {
+    &:hover {
+      background-color: #eee;
+      border-color: transparent;
+      color: inherit;
+    }
+    &.today {
+      font-weight: bold;
+    }
 
-    &.start-date {
-      border-radius: 4px 0 0 0;
+    // items between start and end
+    &.in-range {
+      background-color: #ebf4f8;
+      border-color: transparent;
+      color: #000;
+      border-radius: 0;
     }
 
-    &.end-date {
-      border-radius: 0 0 4px 0;
+    // 选中项 (active item)
+    // TODO 开放 API，允许用户自定义 active 的样式，如何做 ？
+    // TODO give an API for user to custom active class
+    &.active,
+    &.active:hover {
+      background-color: #357ebd;
+      border-color: transparent;
+      color: #fff;
+
+      &.start-date {
+        border-radius: 4px 0 0 0;
+      }
+
+      &.end-date {
+        border-radius: 0 0 4px 0;
+      }
     }
-  }
 
-  // Items that do not belong to the current month（不在当前月份 Calendar 的 item）
-  // see more: https://github.com/ly525/v-md-date-range-picker/wiki/styles#dayoff
-  &.off,
-  &.off.in-range,
-  &.off.start-date,
-  &.off.end-date {
-    background-color: #fff;
-    border-color: transparent;
-    color: #999;
+    // Items that do not belong to the current month（不在当前月份 Calendar 的 item）
+    // see more: https://github.com/ly525/v-md-date-range-picker/wiki/styles#dayoff
+    &.off,
+    &.off.in-range,
+    &.off.start-date,
+    &.off.end-date {
+      background-color: #fff;
+      border-color: transparent;
+      color: #999;
+    }
   }
 }
 

diff --git a/src/styles/components/picker.scss b/src/styles/components/picker.scss
@@ -62,7 +62,7 @@
   $reverse-direction: if($direction == left, right, left);
 
   &.opens-arrow-pos-#{$direction} {
-    top: 35px;
+    top: 40px;
     @if $direction != center {
       #{$direction}: 10px;
       // 这边的 auto 做了什么？
@@ -93,40 +93,8 @@
 /* gs-date-range-picker-container */
 .md-date-range-picker {
   position: relative;
-
-  &__activator {
-    color: #7e848c;
-    display: inline-block;
-    width: 100%;
-    background: #fff;
-    cursor: pointer;
-    border: 1px solid #7e848c;
-    border-radius: 5px;
-    line-height: 35px;
-    padding: 0 20px 0 10px;
-    box-sizing: border-box;
-  }
 }
 
-// .caret {
-//   border: none;
-//   height: 34px;
-//   display: inline-block;
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-// }
-
-// .caret::after {
-//   content: "\F107";
-//   font-family: FontAwesome;
-//   position: absolute;
-//   right: 10px;
-//   top: 50%;
-//   -webkit-transform: translateY(-50%);
-//   transform: translateY(-50%);
-// }
-
 $prefix-class: daterangepicker;
 
 .#{$prefix-class} {