Merge branch 'UC-209' into 'master'

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

See merge request andrusyakka/urban-couscous!255

src/assets/sass/variables.sass

@@ -3,7 +3,6 @@
   --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
   --font-black-color: #090a15
-  --font-black-color-0: rgba(9, 10, 21, 0)
   --font-black-color-1: rgba(9, 10, 21, 0.5)
   --icon-light-blue: #d7d9ff
   --btn-blue-color: #4772f2
@@ -11,7 +10,6 @@
   --btn-blue-color-hover: #7e9cf6
   --btn-blue-sec-color-hover: #a0b4f0
   --btn-blue-color-disabled: #c8d5fb
-  --btn-blue-color-0: rgba(65, 105, 225, 0)
   --btn-blue-color-1: rgba(65, 105, 225, 0.3)
   --btn-blue-color-2: rgba(65, 105, 225, 0.5)
   --btn-blue-color-3: rgba(65, 105, 225, 0.2)

src/components/TheHeader.vue

@@ -11,22 +11,44 @@
       img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
     .flex.ml-auto
-      base-button.mr-9(
+      q-btn.mr-9(
-        left-icon="icon-plus",
+        color="primary",
-        :icon-left-size="10",
+        dense,
-        :size="40",
+        padding="4px 22px",
-        right-icon="icon-person",
+         @click="openForm"
-        :icon-right-size="18",
-        @click="openForm"
       )
-      button.header-buttons.flex.justify-center.items-center.mr-8.p-0
+        q-icon(
-        .icon-bell.text-xxl
+          name="app:icon-plus",
+          size="10px",
+          style="margin-right: 4px",
+        )
+        q-icon(
+          name="app:icon-person",
+          size="18px",
+          style="margin-left: 4px"
+        )
+      q-btn.mr-8(
+        flat,
+        dense,
+        style="color: var(--font-dark-blue-color)",
+        padding="4px 8px"
+        icon="app:icon-bell",
+        size="18px",
+        round
+      )  
       .flex.justify-centflexer.items-center.relative
         base-avatar.mr-2(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
         base-avatar.mr-2(:size="32", v-else)
           img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
-        button.header-buttons(@click="openPopup")
+        q-btn(
-          .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
+          @click="openPopup",
+          flat
+          icon="app:icon-down-arrow",
+          style="color: var(--font-dark-blue-color)",
+          size="10px",
+          padding="4px 2px 2px 2px"
+          dense,
+        )
         base-popup.right-2.top-10(
           corner,
           v-if="showPopup",
@@ -41,7 +63,6 @@ import img from "@/assets/images/avatar.svg";
 import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
-import BaseButton from "@/components/base/BaseButton.vue";
 import BasePopup from "@/components/base/BasePopup.vue";
 import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 export default {
@@ -49,7 +70,6 @@ export default {
   components: {
     HeaderInputs,
     BaseAvatar,
-    BaseButton,
     BasePopup,
     BaseClientFormCreate,
   },

src/components/TheSidebar.vue

@@ -10,7 +10,7 @@
         :active="button.active",
         :change-style-page="changeStylePage"
       )
-        .icon(:class="button.icon")
+        q-icon(:name="`app:${button.icon}`", size="36px")
     .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(
         :path="getSettings.path",
@@ -18,7 +18,7 @@
         :active="getSettings.active",
         :change-style-page="changeStylePage"
       )
-        .icon(:class="getSettings.icon")
+        q-icon(:name="`app:${getSettings.icon}`", size="36px")
 </template>
 
 <script>
@@ -89,6 +89,4 @@ export default {
   max-width: 80px
   min-width: 80px
   background-color: var(--default-white)
-.icon
-  min-width: 44px
 </style>

src/components/base/BaseClientFormCreate.vue

@@ -6,16 +6,26 @@
     span.title.text-xl.font-bold.px-4 Создание клиента
     .flex.gap-x-4.h-fit.px-4
       .flex.gap-x-3.w-full
-        base-button.relative(
+        q-btn.relative(
-          :rounded="true",
+          color="secondary",
-          :secondary="true",
+          text-color="primary",
-          :size="40",
+          v-for="img in image",
           @click="changeOpenPopup",
-          v-for="img in image"
+          style="width: 40px; height: 40px",
+          rounded
+          no-caps
+          padding="0 16px"
         )
-          .icon-download.text-xl(v-if="img === defaultIcon")
+          q-icon(
-          .wrapper-img.flex.w-10.h-10(v-else)
+            v-if="img === defaultIcon"
-            img.current-avatar.object-cover(:src="img")
+            name="app:icon-download",
+          )
+          q-avatar(
+            v-else,
+            size="40px",
+            round
+          )
+            img(:src="img")
           base-popup.right-5.top-7(v-if="showPopup", v-click-outside="closePopup", :width="230")
             .flex.items-center.gap-x-2
               img(src="@/assets/icons/computer.svg")
@@ -36,8 +46,12 @@
                 )
                 .avatar.flex.absolute.items-center.gap-x-6(v-for="img in image")
                   img.avatar.object-cover(for="image-upload", :src="img", v-if="img")
-                  base-button(:rounded="true", :size="48", @click="closeAddImage")
+                  q-btn(
-                    .icon-ok
+                    round,
+                    color="primary",
+                    @click="closeAddImage",
+                    icon="app:icon-ok"
+                  )
         base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex.px-4
@@ -87,7 +101,6 @@ import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateId
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
 import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
 import BaseInput from "@/components/base/BaseInput";
-import BaseButton from "@/components/base/BaseButton";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
 import addImageIcon from "@/assets/icons/photo.svg";
@@ -102,7 +115,6 @@ export default {
     FormCreateIdentityDocuments,
     FormCreateAddresses,
     FormCreateAdditional,
-    BaseButton,
     BasePopup,
     BaseModal,
     addImageIcon,

src/components/base/BaseSelectNetworks.vue

@@ -68,7 +68,6 @@ export default {
   border: none
   outline: none
   color: var(--font-dark-blue-color)
-  background-color: var(--font-black-color-0)
   &.default
     color: var(--font-black-color-1)
   &::-webkit-calendar-picker-indicator

src/components/base/BaseSidebarButton.vue

@@ -1,7 +1,13 @@
 <template lang="pug">
-  a(:href="path")
+  q-btn(
-    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3.transition(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
+    padding="14px 14px 14px 10px",
-      slot
+    style="width: 76px"
+    :class="checkActive",
+    :href="path",
+    :id="id",
+    @click="(e) => changeStylePage(e)"
+  )
+    slot
 </template>
 
 <script>
@@ -18,20 +24,19 @@ export default {
       selectedStyle: false,
     };
   },
+  computed: {
+    checkActive() {
+      return this.active ? "active button" : "button";
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .button
-  width: fit-content
+  background-color: trnsparent
-  background-color: var(--btn-blue-color-0)
   border-radius: 0 4px 4px 0
-  border-left-color: var(--btn-blue-color-0)
+  border-left: 4px solid transparent
-  border-left-width: 4px
-  border-right: none
-  border-top: none
-  border-bottom: none
-  border-left-style: solid
 .active
   background-color: var(--btn-blue-color-1)
   border-left-color: var(--btn-blue-color)

src/pages/calendar/components/CalendarHeader.vue

@@ -2,18 +2,20 @@
   .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
       q-btn.mr-4(
-        class="secondary",
+        color="secondary",
         round,
         size="14px",
         dense,
+        text-color="primary",
         @click="previousHandler"
       )
         q-icon(name="arrow_back_ios", right)
       q-btn.mr-4(
-        class="secondary",
+        color="secondary",
         icon="arrow_forward_ios",
         round,
         size="14px",
+        text-color="primary",
         dense,
         @click="nextHandler"
       ) 
@@ -79,17 +81,4 @@ 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

@@ -24,10 +24,10 @@
         //.button-wrapper.flex.justify-center.mb-23px
           q-btn(
             round,
-            icon="east",
+            icon="app:icon-long-arrow",
-            size="18px",
+            size="13px",
-            class="secondary",
+            color="secondary",
-            padding="6px",
+            text-color="primary"
             :style="{ transform: `rotate(${turnButton})`}",
             @click="changeSize",
           )
@@ -54,7 +54,7 @@ export default {
       widthSidebarOpen: "232px",
       widthSidebarClose: "72px",
       isOpen: false,
-      turnButton: "0deg",
+      turnButton: "180deg",
     };
   },
   computed: {
@@ -85,7 +85,7 @@ export default {
         "width",
         this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
       );
-      this.turnButton = this.isOpen ? "180deg" : "0deg";
+      this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
   },
 };
@@ -110,17 +110,4 @@ 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

@@ -5,7 +5,8 @@
         round,
         icon="add",
         size="12px",
-        class="secondary",
+        text-color="primary",
+        color="secondary"
         padding="4px",
         dense
       )
@@ -20,7 +21,8 @@
           round,
           icon="add",
           size="12px",
-          class="secondary",
+          text-color="primary",
+          color="secondary"
           padding="4px"
         )
       .flex.flex-col.gap-y-2
@@ -77,17 +79,4 @@ 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

@@ -4,7 +4,8 @@
         round,
         icon="add",
         size="12px",
-        class="secondary",
+        text-color="primary",
+        color="secondary"
         padding="4px",
         dense
       )
@@ -19,7 +20,8 @@
         round,
         icon="add",
         size="12px",
-        class="secondary",
+        text-color="primary",
+        color="secondary"
         padding="4px",
         dense
       )
@@ -81,16 +83,4 @@ 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/schedule/components/ScheduleBar.vue

@@ -17,13 +17,17 @@
         .flex.justify-center.items-center.h-10
           span.font-semibold Статусы
         .flex.justify-around.gap-x-4(class="py-2.5")
-          base-button.font-semibold.border-none(
+          q-btn(
             v-for="item in buttons",
-            :class="item.class",
             :key="item",
-            :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
+            @click="choiceSchedule(item.class)",
-            @click="choiceSchedule(item.class)"
+            :label="item.name",
-          ) {{item.name}}
+            :class="item.class",
+            text-color="white",
+            :style="{border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
+            no-caps,
+            style="width: 200px"
+          )
       .graph-template.flex.flex-col.items-center.gap-y-4
         base-custom-select(
           :items="templateList",
@@ -38,23 +42,32 @@
           label="Введите график",
           v-model="template.item.label"
         )
-    .flex.justify-center.gap-x-6
+    .flex.justify-center.gap-x-6.h-10
-      base-button.font-semibold.w-36(:size="40", @click="createSchedules") Сохранить
+      q-btn(
-      base-button.delete-button.font-semibold.w-36(
+        label="Сохранить",
-        :size="40",
+        color="primary",
-        @click="deleteSchedule"
+        style="width: 144px",
-      ) Удалить
+        padding="4px 24px",
+        @click="createSchedules",
+        no-caps
+      )
+      q-btn(
+        label="Удалить",
+        style="background-color: var(--bg-event-red-color); width: 144px",
+        text-color="white",
+        padding="4px 24px",
+        @click="deleteSchedule",
+        no-caps
+      )
 </template>
 
 <script>
-import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "ScheduleBar",
   components: {
-    BaseButton,
     BaseInput,
     BaseCustomSelect,
   },
@@ -112,9 +125,6 @@ export default {
   &::placeholder
     color: var(--font-black-color-1)
 
-.text
-  color: var(--font-grey-color)
-
 .status-wrapper
   min-width: 540px
   height: 120px

src/pages/schedule/components/ScheduleHeader.vue

@@ -11,7 +11,8 @@
       .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
         .flex
           q-btn.mr-4(
-            class="secondary",
+            text-color="primary",
+            color="secondary"
             round,
             size="14px",
             dense,
@@ -20,7 +21,8 @@
             q-icon(name="arrow_back_ios", right)
           q-btn.mr-6(
             @click="nextHandler",
-            class="secondary",
+            text-color="primary",
+            color="secondary"
             icon="arrow_forward_ios",
             round,
             size="14px",