WIP Переделана часть кнопок

2023-01-16 18:38:28 +03:00
parent 6750ee5af9
commit c397f90ae2
10 changed files with 232 additions and 104 deletions
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -10,8 +10,6 @@
    .flex.items-center.box-border.cursor-pointer.mr-auto
      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
      header-inputs
-    //- .charge-person-container
-    //-   header-active-client-panel(:info="chargePersonInfo")
    .flex.ml-auto
      base-button.mr-9(
        left-icon="icon-plus",
--- a/src/pages/calendar/components/CalendarDeleteModal.vue
+++ b/src/pages/calendar/components/CalendarDeleteModal.vue
@@ -8,21 +8,26 @@
        :owner-event="ownerEvent"
      )
    .flex.gap-x-3.mt-6.font-semibold
-      base-button(
-        outlined,
-        :size=40,
+      q-btn(
+        label="Отменить",
+        no-caps,
+        outline,
+        color="primary",
+        padding="10px 22px",
        @click="closeModal"
-      ) Отменить
-      base-button(
-        outlined-red,
-        :size=40,
+      )
+      q-btn(
+        label="Удалить",
+        no-caps,
+        outline,
+        style="color: var(--border-red-color)",
+        padding="10px 22px",
        @click="deleteEvent"
-      ) Удалить
+      )
 </template>

 <script>
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
-import BaseButton from "@/components/base/BaseButton.vue";
 import CalendarEventDescriptionCard from "./CalendarEventDescriptionCard.vue";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 import { addNotification } from "@/components/Notifications/notificationContext";
@@ -30,7 +35,6 @@ export default {
  name: "CalendarDeleteModal",
  components: {
    CalendarEventDescriptionCard,
-    BaseButton,
    TheNotificationProvider,
  },
  props: {
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -46,18 +46,24 @@
          v-model="endTime",
          label="Конец"
        )
-    base-button.create-button.text-base.font-semibold(
+    q-btn.create-button(
      v-if="!selectedEventData.id",
-      :size="40",
+      label="Создать событие",
+      no-caps,
+      color="primary",
+      padding="10px 22px",
      :disabled="disabledCreateButton",
      @click="sendEventData",
-    ) Создать событие
-    base-button.update-button.text-base.font-semibold(
+    )
+    q-btn.update-button(
      v-else,
-      :size="40",
+      label="Сохранить",
+      no-caps,
+      color="primary",
+      padding="10px 22px",
      :disabled="disabledUpdateButton",
      @click="updateEventData",
-    ) Сохранить
+    )
 </template>

 <script>
@@ -69,14 +75,12 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
-import BaseButton from "@/components/base/BaseButton";
 import * as moment from "moment/moment";
 import { statusesDictionary } from "../utils/statusesDictionary.js";
 export default {
  name: "FormChangeEvent",
  components: {
    BaseSelect,
-    BaseButton,
    BaseInput,
    BaseInputDate,
    BaseInputTime,
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,10 +1,22 @@
 <template lang="pug">
  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
    .flex
-      base-button.left-arrow.mr-4(left-icon="icon-down-arrow", rounded, secondary,
-        :iconLeftSize="16", :size="32", @click="previousHandler")
-      base-button.right-arrow.mr-6(left-icon="icon-down-arrow", rounded, secondary,
-        :iconLeftSize="16", :size="32", @click="nextHandler")
+      q-btn.mr-4(
+        class="secondary",
+        round,
+        size="14px",
+        dense,
+        @click="previousHandler"
+      )
+        q-icon(name="arrow_back_ios", right)
+      q-btn.mr-4(
+        class="secondary",
+        icon="arrow_forward_ios",
+        round,
+        size="14px",
+        dense,
+        @click="nextHandler"
+      ) 
      .text.flex.items-center
        span.font-medium.text-base {{ dateString }}
          span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
@@ -12,11 +24,10 @@
 </template>

 <script>
-import BaseButton from "@/components/base/BaseButton.vue";
 import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
  name: "CalendarHeader",
-  components: { CalendarLayoutSwitch, BaseButton },
+  components: { CalendarLayoutSwitch },
  props: {
    currentDate: Object,
    isCurrentDate: Boolean,
@@ -68,4 +79,17 @@ export default {

 .today
  opacity: 0.5
+
+.secondary
+  background-color: var(--btn-blue-sec-color)
+  border: 1px solid var(--btn-blue-sec-color)
+  color: var(--btn-blue-color)
+  &:hover
+    background-color: var(--btn-blue-color-hover)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color)
+  &:disabled, &[disabled]
+    background-color: var(--btn-blue-sec-color)
+    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-color)
 </style>
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -2,45 +2,44 @@
  .sidebar.flex.flex-col.bg-white(:class="openSidebar")
    .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
-        base-button(
-          left-icon="icon-plus",
-          rounded,
-          :size="40",
-          :icon-left-size="10",
+        q-btn(
+          color="primary",
+          round,
+          icon="add",
+          size="13px",
          @click="openFormCreate",
          v-if="!isOpen"
        )
-        base-button.w-full(
-          right-icon="icon-plus",
-          split,
-          :size="40",
-          :icon-right-size="10",
-          :marginLeftIcon="7",
+        q-btn(
+          no-caps
+          label="Создать событие",
+          color="primary",
+          class="text-weight-medium, full-width",
+          icon-right="add",
          @click="openFormCreate",
          v-else
-        ) Создать событие
+        )
        calendar-sidebar-event(:is-open="isOpen", :event-statuses="eventStatuses")
        calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url")
-        //- .button-wrapper.flex.justify-center.mb-23px
-        //-   base-button(
-        //-     left-icon="icon-long-arrow",
-        //-     rounded, :size="40",
-        //-     :icon-left-size="18",
-        //-     secondary,
-        //-     :style="{ transform: `rotate(${turnButton})`}",
-        //-     @click="changeSize"
+        //.button-wrapper.flex.justify-center.mb-23px
+          q-btn(
+            round,
+            icon="east",
+            size="18px",
+            class="secondary",
+            padding="6px",
+            :style="{ transform: `rotate(${turnButton})`}",
+            @click="changeSize",
          )
 </template>

 <script>
-import BaseButton from "@/components/base/BaseButton";
 import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
 import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";

 export default {
  name: "CalendarSidebar",
  components: {
-    BaseButton,
    CalendarSidebarEvent,
    CalendarSidebarTeammate,
  },
@@ -55,7 +54,7 @@ export default {
      widthSidebarOpen: "232px",
      widthSidebarClose: "72px",
      isOpen: false,
-      turnButton: "180deg",
+      turnButton: "0deg",
    };
  },
  computed: {
@@ -86,7 +85,7 @@ export default {
        "width",
        this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
      );
-      this.turnButton = this.isOpen ? "0deg" : "180deg";
+      this.turnButton = this.isOpen ? "180deg" : "0deg";
    },
  },
 };
@@ -111,4 +110,17 @@ export default {
  .button-wrapper
    justify-content: end
    padding-right: 16px
+
+.secondary
+  background-color: var(--btn-blue-sec-color)
+  border: 1px solid var(--btn-blue-sec-color)
+  color: var(--btn-blue-color)
+  &:hover
+    background-color: var(--btn-blue-color-hover)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color)
+  &:disabled, &[disabled]
+    background-color: var(--btn-blue-sec-color)
+    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-color)
 </style>
--- a/src/pages/calendar/components/CalendarSidebarEvent.vue
+++ b/src/pages/calendar/components/CalendarSidebarEvent.vue
@@ -1,19 +1,27 @@
 <template lang="pug">
  .flex.flex-col.items-center.w-full
    .flex.flex-col.items-center(v-if="!isOpen")
-      base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+      q-btn(
+        round,
+        icon="add",
+        size="12px",
+        class="secondary",
+        padding="4px",
+        dense
+      )
      .flex.flex-col.gap-y-2.items-center.mt-4
        .event.flex.items-center.justify-center(v-for="event in eventStatuses" :key="event.id")
          .event-type(:style="{ background: event.color }")
    .flex.flex-col.gap-y-4.w-full(v-else)
      .flex.items-center.justify-between
        .flex.text-base.font-bold(:style="{ color: 'var(--font-dark-blue-color)' }") Виды событий
-        base-button(
+        q-btn(
          v-if="isOpen",
-          left-icon="icon-plus",
-          rounded, :size="24",
-          :icon-left-size="10",
-          secondary
+          round,
+          icon="add",
+          size="12px",
+          class="secondary",
+          padding="4px"
        )
      .flex.flex-col.gap-y-2
        .relative.flex.items-center.gap-x-3.h-8(v-for="event in eventStatuses")
@@ -26,12 +34,8 @@
 </template>

 <script>
-import BaseButton from "@/components/base/BaseButton";
 export default {
  name: "CalendarSidebarEvent",
-  components: {
-    BaseButton,
-  },
  props: {
    isOpen: Boolean,
    eventStatuses: Array,
@@ -73,4 +77,17 @@ export default {
  height: 16px
  top: 8px
  left: 8px
+
+.secondary
+  background-color: var(--btn-blue-sec-color)
+  border: 1px solid var(--btn-blue-sec-color)
+  color: var(--btn-blue-color)
+  &:hover
+    background-color: var(--btn-blue-color-hover)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color)
+  &:disabled, &[disabled]
+    background-color: var(--btn-blue-sec-color)
+    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-color)
 </style>
--- a/src/pages/calendar/components/CalendarSidebarTeammate.vue
+++ b/src/pages/calendar/components/CalendarSidebarTeammate.vue
@@ -1,6 +1,13 @@
 <template lang="pug">
  .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
-    base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+    q-btn(
+        round,
+        icon="add",
+        size="12px",
+        class="secondary",
+        padding="4px",
+        dense
+      )
    .team-card(v-for="teammate in teamData" :key="teammate.id")
      base-avatar(:size="32", :color="teammate.color")
        img.h-full.object-cover(:src="url + teammate.photo", alt="Team member", v-if="teammate.photo")
@@ -8,7 +15,14 @@
  .flex.flex-col.gap-y-4.w-full(v-else, :style="{ color: 'var(--font-dark-blue-color)' }")
    .flex.items-center.justify-between
      .flex.text-base.font-bold Команды
-      base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+      q-btn(
+        round,
+        icon="add",
+        size="12px",
+        class="secondary",
+        padding="4px",
+        dense
+      )
    .box-team.flex.flex-col.gap-y-2
      .team-card.flex.items-center.justify-between.cursor-pointer(
        v-for="teammate in teamData",
@@ -23,7 +37,6 @@
 </template>

 <script>
-import BaseButton from "@/components/base/BaseButton";
 import BaseAvatar from "@/components/base/BaseAvatar";
 export default {
  name: "CalendarSidebarTeammate",
@@ -33,7 +46,6 @@ export default {
    url: String,
  },
  components: {
-    BaseButton,
    BaseAvatar,
  },
  data() {
@@ -69,4 +81,16 @@ export default {
  &:hover
    background: var(--font-dark-blue-color)
    color: var(--default-white)
+.secondary
+  background-color: var(--btn-blue-sec-color)
+  border: 1px solid var(--btn-blue-sec-color)
+  color: var(--btn-blue-color)
+  &:hover
+    background-color: var(--btn-blue-color-hover)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color)
+  &:disabled, &[disabled]
+    background-color: var(--btn-blue-sec-color)
+    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-color)
 </style>
--- a/src/pages/clients/components/ClientTableModal.vue
+++ b/src/pages/clients/components/ClientTableModal.vue
@@ -1,17 +1,23 @@
 <template lang="pug">
  .flex.flex-col.mb-1.mt-4
    span.font-medium.text-base.modal-text {{ bodyText }}
-    .flex.gap-x-3.mt-6.font-semibold
-      base-button(
-        outlined,
-        :size=40,
+    .flex.gap-x-3.mt-6
+      q-btn(
+        label="Отменить",
+        no-caps,
+        outline,
+        color="primary",
+        padding="10px 24px",
        @click="closeModal"
-      ) Отменить
-      base-button(
-        outlined-red,
-        :size=40,
+      )
+      q-btn(
+        :label="confirmTitle",
+        no-caps,
+        outline,
+        style="color: var(--border-red-color)",
+        padding="10px 24px",
        @click="clickConfirm"
-      ) {{ confirmTitle }}
+      )
 </template>

 <script>
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -11,22 +11,40 @@
        )
          .flex.items-center.cursor-pointer
            .icon-search
-      base-button.font-semibold(
+      q-btn(
        v-if="createdClientName === ''",
        @click="searchLastName",
-        :size=40
-      ) Поиск
-      base-button.font-semibold(
+        color="primary",
+        label="Поиск",
+        padding="8px 24px",
+        no-caps
+      )
+      q-btn(
        v-if="searchClient.length > 0",
-        outlined,
+        outline,
        @click="resetLastName",
-        :size=40
-      ) Сбросить
+        color="primary",
+        label="Сбросить",
+        padding="8px 24px",
+        no-caps
+      )
    //- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
-    .flex.w-fit.h-fit.gap-x-2
-      base-button(left-icon="icon-download", :icon-left-size="16", :size="40", :outlined="true")
-      base-button(left-icon="icon-plus", :icon-left-size="13", :size="40", @click="openForm")
-        span.font-semibold Создать
+    .flex.w-fit.h-10.gap-x-2
+      q-btn(
+        outline,
+        icon="icon-download",
+        color="primary",
+        size="12px",
+        padding="8px 24px",
+      )
+      q-btn(
+        @click="openForm",
+        color="primary",
+        icon="add",
+        label="Создать",
+        padding="6px 24px",
+        no-caps
+      )
 </template>

 <script>
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/src/pages/schedule/components/ScheduleHeader.vue
@@ -10,32 +10,40 @@
    .flex
      .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
        .flex
-          base-button.left-arrow.mr-4(
+          q-btn.mr-4(
+            class="secondary",
+            round,
+            size="14px",
+            dense,
            @click="previousHandler",
-            left-icon="icon-down-arrow",
-            rounded,
-            secondary,
-            :iconLeftSize="16",
-            :size="32"
          )
-          base-button.right-arrow.mr-6(
+            q-icon(name="arrow_back_ios", right)
+          q-btn.mr-6(
            @click="nextHandler",
-            left-icon="icon-down-arrow",
-            rounded,
-            secondary,
-            :iconLeftSize="16",
-            :size="32"
+            class="secondary",
+            icon="arrow_forward_ios",
+            round,
+            size="14px",
+            dense,
          ) 
          .text.flex.items-center
            .text.font-medium.text-base {{ dateString }}
            .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
-        .flex.gap-x-4
-          base-button.font-semibold(
-            :size="40",
-            :style="{minWidth: '176px'}",
-            @click="changeShowTime"
-          ) {{textButton}}
-          base-button.font-semibold(:size="40", @click="openForm") Замена смен
+        .flex.gap-x-4.h-10
+          q-btn(
+            :label="textButton",
+            color="primary",
+            no-caps,
+            padding="8px 24px",
+            @click="changeShowTime",
+          )
+          q-btn(
+            label="Замена смен",
+            color="primary",
+            no-caps,
+            padding="8px 24px",
+            @click="openForm",
+          )
 </template>

 <script>
@@ -134,4 +142,17 @@ export default {

 .form-move
  transition: 0.5s ease
+
+.secondary
+  background-color: var(--btn-blue-sec-color)
+  border: 1px solid var(--btn-blue-sec-color)
+  color: var(--btn-blue-color)
+  &:hover
+    background-color: var(--btn-blue-color-hover)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color)
+  &:disabled, &[disabled]
+    background-color: var(--btn-blue-sec-color)
+    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-color)
 </style>