WIP Сделала BaseButton

2023-07-11 17:29:43 +03:00
parent 8655620d65
commit d4d297846f
12 changed files with 214 additions and 236 deletions
--- a/src/pages/clients/components/TableCreatePackageDoc.vue
+++ b/src/pages/clients/components/TableCreatePackageDoc.vue
@@ -3,12 +3,12 @@
    .flex.flex.flex-col.gap-y-9
      span.font-bold.text-xl Договор
      .flex.justify-center.items-center.gap-x-2
-        base-button.button(:size="32", :rounded="true")
-          span(v-if="!isServices") 1
-          .icon-ok.text-xs(v-else)
+        //- base-button.button(:size="32", :rounded="true")
+        //-   span(v-if="!isServices") 1
+        //-   .icon-ok.text-xs(v-else)
        span(:style="{color: 'var(--btn-blue-color)'}") Основное
        .line.flex.mx-2
-        base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
+        //base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
        span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
    .base.flex.flex-col.gap-y-6(v-if="!isServices")
      .flex.flex-col.gap-y-6
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -35,12 +35,11 @@
          .flex.items-center.gap-x-8px
            q-checkbox(@click="persist", v-model="isView", type="checkbox")
            .flex.non-italic.font-medium.base Запомнить меня
-        q-btn(
+        base-button(
          :disable="disabledButton",
-          @click="login",
          label="Войти в аккаунт",
-          color="primary",
-          no-caps
+          size="L",
+          @click="login",
        )
      .absolute.left-12.bottom-12 2023 © Астра
    .right-col.flex.items-center.justify-center.relative
@@ -50,10 +49,11 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import BaseInput from "@/components/base/BaseInput";
 import logoMark from "@/assets/images/logoMark.svg";
+import BaseButton from "@/components/base/BaseButton.vue";

 export default {
  name: "TheLogin",
-  components: { BaseInput },
+  components: { BaseInput, BaseButton },
  data() {
    return {
      underTextColor: "var(--font-grey-color)",
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -9,16 +9,12 @@
      )
        img(:src="arrow")
    .form.flex.p-4
-      q-btn(
-        color="primary",
-        size="16px",
-        label="Создать запись",
+      base-button(
+        width="100%",
        @click="createForm",
-        no-caps,
-        icon="add",
-        :style="{width: '100%', height: '40px'}",
-        padding="0"
      )
+        q-icon(name="app:plus", size="12px", left)
+        span Создать событие
    .flex.flex-col.gap-y-1
      q-expansion-item.expansion.font-bold.text-xm(
        v-for="(elem, index) in patientList",
@@ -83,11 +79,11 @@ import sort_word from "@/assets/icons/sort_word.svg";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
-
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
  name: "CalendarOpenSidebar",
  props: { openSidebar: Function, createForm: Function },
-  components: { BaseInput },
+  components: { BaseInput, BaseButton },
  data() {
    return {
      val: [],
--- a/src/pages/newCalendar/components/CalendarSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarSidebar.vue
@@ -115,11 +115,12 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import BaseButton from "@/components/base/BaseButton.vue";

 export default {
  name: "CalendarSidebar",
  props: { openSidebar: Function, createForm: Function },
-  components: { BaseInput, CalendarSidebarSvg },
+  components: { BaseInput, CalendarSidebarSvg, BaseButton },
  data() {
    return {
      arrow,
--- a/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
+++ b/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
@@ -45,19 +45,21 @@
              v-if="isEdit" 
              @click="() => deleteAllergy(index)"
            )
-    base-button(
-      v-if="isEdit"
-      left-icon="icon-plus" 
-      added-border-none
+    q-btn.ml-2px(
+      v-if="isEdit",
+      color="primary",
+      flat,
+      :style="{'font-weight': 500, width: '104px', height: '24px'}",
+      no-caps,
+      padding="0",
      @click="(e) => addNewAllergy(e)" 
-      :icon-left-size="12"
-      )
-      span.font-medium.text-base Добавить
+    )
+      q-icon(name="app:icon-plus", size="12px", left)
+      span Добавить
 </template>

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
 import { getFieldsNameUnvalidated } from "@/shared/utils/changesObjects";
@@ -71,7 +73,6 @@ export default {
  name: "AllergiesForm",
  components: {
    MedicalFormWrapper,
-    BaseButton,
    BaseInput,
    TheNotificationProvider,
  },
@@ -164,4 +165,8 @@ export default {
  color: var(--font-grey-color)
 .label-field
  color: var(--font-grey-color)
+.on-left
+  margin-right: 10px
+.q-btn :deep(.q-ripple)
+  display: none
 </style>
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
@@ -58,20 +58,22 @@
              v-if="isEdit" 
              @click="() => deleteContact(key, index)"
              )
-        base-button.ml-6px(
-            v-if="isEdit" 
-            left-icon="icon-plus" 
-            added-border-none
-            :icon-left-size="12"
-            @click="(e) => addNewContact(e, key)"
-          )
-          span.font-medium.text-base Добавить
+        q-btn.ml-2px(
+          v-if="isEdit",
+          color="primary",
+          flat,
+          :style="{'font-weight': 500, width: '104px', height: '24px'}",
+          no-caps,
+          padding="0",
+          @click="(e) => addNewContact(e, key)"
+        )
+          q-icon(name="app:icon-plus", size="12px", left)
+          span Добавить
 </template>

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
 import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
@@ -90,7 +92,6 @@ export default {
    MedicalFormWrapper,
    BaseInput,
    BaseSelectNetworks,
-    BaseButton,
    TheNotificationProvider,
  },
  data() {
@@ -233,4 +234,8 @@ export default {
  color: var(--font-grey-color)
 .delete-contact
  color: var(--font-grey-color)
+.on-left
+  margin-right: 10px
+.q-btn :deep(.q-ripple)
+  display: none
 </style>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
@@ -26,8 +26,8 @@
        component(v-bind:is="form.component", :data="form", :fill-inspection="fillInspection", :abc="abc")
      .protocol.flex.justify-between.p-6(v-if="fillInspection")
        .flex.h-fit.w-fit.gap-2
-          base-button.text-base.font-semibold(outlined, :size="40") Отменить
-          base-button.text-base.font-semibold(:size="40") Сохранить
+          base-button(label="Отменить", type="secondary", width="126px")
+          base-button(label="Сохранить", width="132px")
        .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
          .flex.font-semibold.text-7xl {{ percent + "%" }}
          .flex.font-medium.text-smm.w-20 заполнение осмотра
--- a/src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue
@@ -2,24 +2,26 @@
  .wrapper.flex.flex-col.gap-27px.h-full.pb-4
    .flex.flex-col.gap-2
      confidant-form(v-for="(confidant, index) in confidants" :index="index" :confidant="confidant")
-    base-button.ml-30px(
-      left-icon="icon-plus" 
-      added-border-none
-      :icon-left-size="12"
-      @click="addNewConfidant"
-      )
-      span.font-medium.text-base Добавить контакт
+    q-btn.ml-2px(
+      color="primary",
+      flat,
+      :style="{'font-weight': 500, width: '174px', height: '24px'}",
+      no-caps,
+      padding="0",
+      @click="addNewConfidant" 
+    )
+      q-icon(name="app:icon-plus", size="12px", left)
+      span Добавить контакт
 </template>

 <script>
 import ConfidantForm from "@/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
 import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
 import { mapState } from "vuex";

 export default {
  name: "MedicalConfidantWrapper",
-  components: { ConfidantForm, BaseButton },
+  components: { ConfidantForm },
  computed: {
    ...mapState({
      confidants: (state) => state.medical.confidantData,
@@ -43,4 +45,8 @@ export default {
    width: fit-content
  &::-webkit-scrollbar
    width: 0
+.on-left
+  margin-right: 10px
+.q-btn :deep(.q-ripple)
+  display: none
 </style>