Merge branch 'UC-209' into 'master'

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

See merge request andrusyakka/urban-couscous!253

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",

src/pages/calendar/components/CalendarDeleteModal.vue

@@ -8,21 +8,26 @@
         :owner-event="ownerEvent"
       )
     .flex.gap-x-3.mt-6.font-semibold
-      base-button(
+      q-btn(
-        outlined,
+        label="Отменить",
-        :size=40,
+        no-caps,
+        outline,
+        color="primary",
+        padding="10px 22px",
         @click="closeModal"
-      ) Отменить
+      )
-      base-button(
+      q-btn(
-        outlined-red,
+        label="Удалить",
-        :size=40,
+        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: {

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,

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,
+      q-btn.mr-4(
-        :iconLeftSize="16", :size="32", @click="previousHandler")
+        class="secondary",
-      base-button.right-arrow.mr-6(left-icon="icon-down-arrow", rounded, secondary,
+        round,
-        :iconLeftSize="16", :size="32", @click="nextHandler")
+        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>

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(
+        q-btn(
-          left-icon="icon-plus",
+          color="primary",
-          rounded,
+          round,
-          :size="40",
+          icon="add",
-          :icon-left-size="10",
+          size="13px",
           @click="openFormCreate",
           v-if="!isOpen"
         )
-        base-button.w-full(
+        q-btn(
-          right-icon="icon-plus",
+          no-caps
-          split,
+          label="Создать событие",
-          :size="40",
+          color="primary",
-          :icon-right-size="10",
+          class="text-weight-medium, full-width",
-          :marginLeftIcon="7",
+          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
+        //.button-wrapper.flex.justify-center.mb-23px
-        //-   base-button(
+          q-btn(
-        //-     left-icon="icon-long-arrow",
+            round,
-        //-     rounded, :size="40",
+            icon="east",
-        //-     :icon-left-size="18",
+            size="18px",
-        //-     secondary,
+            class="secondary",
-        //-     :style="{ transform: `rotate(${turnButton})`}",
+            padding="6px",
-        //-     @click="changeSize"
+            :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>

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",
+          round,
-          rounded, :size="24",
+          icon="add",
-          :icon-left-size="10",
+          size="12px",
-          secondary
+          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>

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>

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
+    .flex.gap-x-3.mt-6
-      base-button(
+      q-btn(
-        outlined,
+        label="Отменить",
-        :size=40,
+        no-caps,
+        outline,
+        color="primary",
+        padding="10px 24px",
         @click="closeModal"
-      ) Отменить
+      )
-      base-button(
+      q-btn(
-        outlined-red,
+        :label="confirmTitle",
-        :size=40,
+        no-caps,
+        outline,
+        style="color: var(--border-red-color)",
+        padding="10px 24px",
         @click="clickConfirm"
-      ) {{ confirmTitle }}
+      )
 </template>
 
 <script>

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
+        color="primary",
-      ) Поиск
+        label="Поиск",
-      base-button.font-semibold(
+        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
+    .flex.w-fit.h-10.gap-x-2
-      base-button(left-icon="icon-download", :icon-left-size="16", :size="40", :outlined="true")
+      q-btn(
-      base-button(left-icon="icon-plus", :icon-left-size="13", :size="40", @click="openForm")
+        outline,
-        span.font-semibold Создать
+        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>

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",
+            class="secondary",
-            rounded,
+            icon="arrow_forward_ios",
-            secondary,
+            round,
-            :iconLeftSize="16",
+            size="14px",
-            :size="32"
+            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
+        .flex.gap-x-4.h-10
-          base-button.font-semibold(
+          q-btn(
-            :size="40",
+            :label="textButton",
-            :style="{minWidth: '176px'}",
+            color="primary",
-            @click="changeShowTime"
+            no-caps,
-          ) {{textButton}}
+            padding="8px 24px",
-          base-button.font-semibold(:size="40", @click="openForm") Замена смен
+            @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>