UI: redesign DatePicker (#12418)

* extract datepicker & settings as component + redesign * fix updating values + fix button styling + popover position * remove eslint-config-standard / html
2020-08-09 22:25:56 +02:00
parent 13a5b276e9
commit d2fc7c0c3d
10 changed files with 239 additions and 73 deletions
@@ -0,0 +1,19 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import datepicker from './datepicker.vue';
+
+const stories = storiesOf('Date Picker', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('simple', () => ({
+    components: { datepicker },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <datepicker></datepicker>
+      </div>
+    `,
+  }));
@@ -0,0 +1,198 @@
+<template>
+  <datepicker
+    v-model="value"
+    @input="upDate($event)"
+    :calendarButton="true"
+    :calendarButtonIconContent="icons.calendar"
+    :bootstrapStyling="true"
+    :clear-button="false"
+    :today-button="false"
+    :disabled-picker="disabled"
+    :class="{disabled: disabled}"
+    :highlighted="highlighted"
+    calendar-class="calendar-padding"
+  >
+    <div slot="beforeCalendarHeader">
+      <div class="datetime-buttons">
+       <button
+          class="btn btn-flat"
+          @click="setToday()"
+          type="button"
+        >
+          {{ $t('today') }}
+        </button>
+        <button
+            class="btn btn-flat"
+            @click="setTomorrow()"
+            type="button"
+          >
+            {{ $t('tomorrow') }}
+        </button>
+      </div>
+    </div>
+  </datepicker>
+</template>
+
+<script>
+import moment from 'moment';
+import datepicker from 'vuejs-datepicker';
+import calendarIcon from '@/assets/svg/calendar.svg';
+
+export default {
+  components: {
+    datepicker,
+  },
+  props: ['date', 'disabled', 'highlighted'],
+  data () {
+    return {
+      value: this.date,
+      icons: Object.freeze({
+        calendar: calendarIcon,
+      }),
+    };
+  },
+  watch: {
+    date () {
+      this.value = this.date;
+    },
+  },
+  methods: {
+    upDate (after) {
+      this.value = after;
+      this.$emit('update:date', after);
+    },
+    setToday () {
+      this.upDate(moment().toDate());
+    },
+    setTomorrow () {
+      this.upDate(moment().add(1, 'day').toDate());
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .vdp-datepicker__calendar {
+    bottom: 2.125rem;  // 2rem input control height + 0.125rem margin above
+  }
+
+ .vdp-datepicker {
+    .input-group-append {
+      width: auto;
+      min-width: 2rem;
+    }
+  }
+
+  .vdp-datepicker__calendar-button .svg-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+   .vdp-datepicker.disabled, .input-group-outer.disabled {
+      .input-group:hover {
+        border-color: $gray-400;
+      }
+
+      .input-group .form-control {
+        background-color: $gray-700;
+        border-color: $gray-500;
+        color: $gray-200;
+      }
+
+      svg path {
+        opacity: 0.75;
+        fill: $gray-200;
+      }
+    }
+
+  .vdp-datepicker .vdp-datepicker__calendar {
+    width: 100%;
+    padding: 0.5rem;
+
+    .datetime-buttons {
+      height: 50px;
+
+      button {
+        padding: 0;
+        margin: 0.5rem;
+        height: 1.5rem;
+        border-radius: 2px;
+        background-color: $gray-600;
+        color: $gray-100;
+
+        &:not(:hover) {
+          box-shadow: none;
+        }
+
+        &:hover {
+          color: $purple-300;
+        }
+      }
+    }
+
+    header, .datetime-buttons {
+      min-height: 40px;
+      margin-top: -0.5rem;
+      margin-left: -0.5rem;
+      margin-right: -0.5rem;
+      background-color: $gray-700 !important;
+    }
+
+    .calendar-padding {
+      margin: 0.25rem;
+    }
+
+    &.picker_day {
+      .cell:not(.disabled) {
+        width: calc(100% / 7);
+        border-radius: 2px;
+        font-size: 14px;
+        line-height: 1.21;
+        text-align: center;
+        padding: 0.65rem 0.35rem;
+      }
+    }
+
+    .cell:not(.blank):not(.disabled).day:hover {
+      border-radius: 2px;
+      border: 1px solid $purple-400;
+    }
+
+    .cell.selected,
+    .cell.selected.highlighted,
+    .cell.selected:hover {
+      color: $white;
+      background: $purple-300;
+    }
+
+    .cell.highlighted {
+      background: rgba($purple-600, 0.25);
+      color: $purple-300;
+
+      font-weight: bold;
+    }
+
+    .cell.highlighted,
+    .cell.selected {
+      border-radius: 2px;
+      font-weight: bold;
+    }
+
+    .cell.day-header {
+      font-size: 12px;
+      font-weight: bold;
+      line-height: 1.33;
+      text-align: center;
+      color: $gray-100;
+    }
+
+    .month__year_btn, .day__month_btn {
+      font-size: 14px;
+      font-weight: bold;
+      text-align: center;
+      color: $gray-50;
+    }
+  }
+</style>