[WIP] Заменил BaseInputTime на BaseInput, исправил стили

2023-01-17 18:26:19 +03:00
parent 9d2dfbffa3
commit 06d570d6df
10 changed files with 31 additions and 101 deletions
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -37,13 +37,15 @@
        label="Дата",
        type="date"
      )
-      .flex.gap-x-2.items-center
-        base-input-time.item-input.text-base(
+      .flex.gap-x-2.items-center.justify-between
+        base-input(
+          type="time",
          v-model="startTime",
          label="Начало"
        )
        span.mt-4 —
-        base-input-time.item-input.text-base(
+        base-input(
+          type="time",
          v-model="endTime",
          label="Конец"
        )
@@ -71,7 +73,6 @@
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 import { addNotification } from "@/components/Notifications/notificationContext";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
-import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
@@ -83,7 +84,6 @@ export default {
  components: {
    BaseSelect,
    BaseInput,
-    BaseInputTime,
    BaseCustomSelect,
    TheNotificationProvider,
  },
@@ -603,16 +603,6 @@ export default {
  width: 344px
  background-color: var(--default-white)

-.item-input
-  appearance: none
-  border: none
-  outline: none
-  &::-webkit-calendar-picker-indicator
-    display: none
-    -webkit-appearance: none
-  &::placeholder
-    color: var(--font-black-color-1)
-
 .date-input
  width: 174px
  border-radius: 4px
--- a/src/pages/clients/components/FormCreateAdditional.vue
+++ b/src/pages/clients/components/FormCreateAdditional.vue
@@ -40,7 +40,6 @@ export default {
  min-height: 443px
  max-height: 443px
  overflow-y: auto
-  color: var(--font-dark-blue-color)
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
    .flex.flex-col.gap-y-6.px-4
-      base-input.input-info(
+      base-input(
        v-model="addresses.full_address",
        placeholder="Введите адрес целиком",
        label="Полный адрес"
@@ -10,42 +10,42 @@
        .line.absolute
        span.text-sm.separator.px-2 или
      .grid.grid-cols-2.gap-y-6.gap-x-4
-        base-input.input-info(
+        base-input(
          disabled,
          filled,
          placeholder="Введите город",
          v-model="addresses.city",
          label="Город"
        )
-        base-input.input-info(
+        base-input(
          disabled,
          filled,
          placeholder="Введите область",
          v-model="addresses.region",
          label="Область"
        )
-        base-input.input-info(
+        base-input(
          disabled,
          filled,
          placeholder="Введите улицу",
          v-model="addresses.street",
          label="Введите улицу"
        )
-        base-input.input-info(
+        base-input(
          disabled,
          filled,
          placeholder="Номер дома",
          v-model="addresses.house_number",
          label="Дом"
        )
-        base-input.input-info(
+        base-input(
          disabled,
          filled,
          placeholder="Номер квартиры",
          v-model="addresses.apartment_number",
          label="Квартира"
        )
-        base-input.input-info(
+        base-input(
          disabled,
          filled,
          placeholder="000000",
@@ -79,7 +79,6 @@ export default {
  min-height: 443px
  max-height: 443px
  overflow-y: auto
-  color: var(--font-grey-color)
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track
@@ -88,15 +87,13 @@ export default {
  &::-webkit-scrollbar-thumb
    border-radius: 8px
    background-color: var(--btn-blue-color)
-.input-info
-  color: var(--font-dark-blue-color)
-.title-info
-  color: var(--font-dark-blue-color)
+
 .line
  width: 570px
  height: 1px
  background-color: var(--border-light-grey-color)
  z-index: -1
+
 .separator
  color: var(--font-dark-blue-color)
  background-color: var(--default-white)
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -7,18 +7,18 @@
        v-model="basicInfo.priority",
        label="Приоритет"
      )
-      base-input.input-info(
+      base-input(
        type="date"
        v-model="basicInfo.birth_date",
        label="Дата рождения"
      )
-      base-input.input-info(
+      base-input(
        v-model="phone.username",
        placeholder="+7 (915) 644–92–23",
        mask="+7 (###) ###-##-##",
        label="Номер телефона"
      )
-      base-input.input-info(
+      base-input(
        v-model="email.username",
        placeholder="user@yandex.ru",
        label="Email"
@@ -81,7 +81,6 @@ export default {
  min-height: 336px
  max-height: 443px
  overflow-y: auto
-  color: var(--font-grey-color)
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track
@@ -90,8 +89,6 @@ export default {
  &::-webkit-scrollbar-thumb
    border-radius: 8px
    background-color: var(--btn-blue-color)
-.input-info
-  color: var(--font-dark-blue-color)
 .obligatory
  color: var(--font-obligatory-color)
 .add-network
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -69,7 +69,6 @@ export default {
  min-height: 443px
  max-height: 443px
  overflow-y: auto
-  color: var(--font-grey-color)
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track
--- a/src/pages/schedule/components/FormChangeShift.vue
+++ b/src/pages/schedule/components/FormChangeShift.vue
@@ -10,9 +10,10 @@
      base-input(label="Дата", type="date")
      base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
      base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
-      .time-wrapper.flex.justify-center
-        base-input-time.px-4.item-input.text-base(label="Начало", v-model="timesShift.start_time")
-        base-input-time.px-4.item-input.text-base(label="Конец", v-model="timesShift.end_time")
+      .time-wrapper.flex.justify-center.gap-x-6
+        base-input(type="time", label="Начало", v-model="timesShift.start_time")
+        .flex.items-center.mt-4 —
+        base-input(type="time", label="Конец", v-model="timesShift.end_time")
      .flex.justify-center
        base-button.font-semibold(:size="40") Сохранить
 </template>
@@ -20,12 +21,11 @@
 <script>
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
-import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseButton from "@/components/base/BaseButton.vue";

 export default {
  name: "FormChangeShift",
-  components: { BaseCustomSelect, BaseInput, BaseInputTime, BaseButton },
+  components: { BaseCustomSelect, BaseInput, BaseButton },
  props: { closeForm: Function, timesShift: Object },
  data() {
    return {
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -1,12 +1,15 @@
 <template lang="pug">
  .wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
    .flex.w-full.justify-around.gap-x-4
-      .time-wrapper.flex.justify-between
-        base-input-time.py-14px.px-4.justify-around.items-center(
+      .time-wrapper.flex.justify-between.p-7
+        base-input(
+          type="time",
          v-model="times.start_time",
          label="Начало"
        )
-        base-input-time.py-14px.px-4.justify-around.items-center(
+        .flex.items-center.mt-6 —
+        base-input(
+          type="time",
          v-model="times.end_time",
          label="Конец"
        )
@@ -46,7 +49,6 @@
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
-import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";

 export default {
@@ -55,7 +57,6 @@ export default {
    BaseButton,
    BaseInput,
    BaseCustomSelect,
-    BaseInputTime,
  },
  props: {
    buttons: Array,
@@ -91,6 +92,7 @@ export default {
  width: calc(100vw - 136px)

 .time-wrapper
+  min-width: 320px
  height: 120px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px