From d4d297846f51a7928ba41d951f13c2f032550d83 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Tue, 11 Jul 2023 17:29:43 +0300 Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?= =?UTF-8?q?=D0=B0=20BaseButton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/sass/variables.sass | 16 +- src/components/TheHeader.vue | 64 +++-- src/components/base/BaseButton.vue | 235 +++++++----------- src/components/base/BaseCategorySelection.vue | 22 +- .../components/TableCreatePackageDoc.vue | 8 +- src/pages/login/TheLogin.vue | 10 +- .../components/CalendarOpenSidebar.vue | 16 +- .../components/CalendarSidebar.vue | 3 +- .../AllergiesForms/AllergiesForm.vue | 23 +- .../BasicDataForms/ContactsForm.vue | 25 +- .../MedicalProtocolsInspection.vue | 4 +- .../components/MedicalConfidantWrapper.vue | 24 +- 12 files changed, 214 insertions(+), 236 deletions(-) diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index b057174..55c87e1 100644 --- a/src/assets/sass/variables.sass +++ b/src/assets/sass/variables.sass @@ -12,16 +12,27 @@ --font-black-color-1: rgba(9, 10, 21, 0.5) --icon-light-blue: #d7d9ff --btn-blue-color: #4772f2 - --btn-blue-sec-color: #c6d2f6 --btn-blue-color-hover: #7e9cf6 - --btn-blue-sec-color-hover: #a0b4f0 --btn-blue-color-disabled: #c8d5fb + --btn-blue-sec-border-color: rgba(71, 114, 242, 0.35) + --btn-blue-sec-color-hover: rgba(71, 114, 242, 0.08) + --btn-blue-sec-color-active: rgba(71, 114, 242, 0.16) + --btn-blue-sec-border-color-disabled: #e5ebfd + --btn-blue-sec-color-disabled: #afc0f2 --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) --btn-blue-color-4: rgba(65, 105, 225, 0.8) --btn-blue-color-5: rgba(65, 105, 225, 0.4) + --btn-mini-color: rgba(65, 105, 225, 0.2) + --btn-mini-color-active: rgba(60, 217, 75, 0.2) + --border-red-color: #ff6565 + --btn-red-border-color: rgba(255, 101, 101, 0.35) + --btn-red-color-hover: rgba(255, 101, 101, 0.08) + --btn-red-color-active: rgba(255, 101, 101, 0.16) --bg-btn-icons-color: rgba(215, 217, 255, 0.6) + --btn-red-border-color-disabled: rgba(255, 201, 201, 0.3) + --btn-red-color-disabled: rgba(255, 101, 101, 0.35) --font-grey-color: #9294a7 --font-grey-color-0: #85858b --font-dark-grey-color: #7a88a8 @@ -67,7 +78,6 @@ --border-light-grey-color-1: rgba(211, 212, 220, 0.5) --bg-white-color-0: rgba(255, 255, 255, 0.3) --bg-white-color-1: rgba(255, 255, 255, 0.5) - --border-red-color: #ff6565 --btn-grey-color: #e8e8f3 --pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%) --pagination-current-item-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%) diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue index 21b5495..03db105 100644 --- a/src/components/TheHeader.vue +++ b/src/components/TheHeader.vue @@ -7,52 +7,42 @@ @click="redirectHomePage" ) header-inputs - .flex.ml-auto - q-btn.mr-9( - color="primary", - outline, - dense, - padding="4px 22px", + .flex.ml-auto.items-center.gap-x-8 + base-button( + type="secondary", + width="80px", + no-padding, @click="openForm" ) - q-icon( - name="app:icon-plus", - size="10px", - style="margin-right: 4px", - ) - q-icon( - name="app:icon-person", - size="18px", - style="margin-left: 4px" - ) + q-icon(name="app:plus", size="12px") + q-icon(name="app:person", size="20px", right) base-client-form-create( v-model="isOpenFormInternal", :set-updated-clients="setUpdatedClients", :write-created-client-id="writeCreatedClientId", ) - q-btn.mr-8( + q-btn( flat, dense, - style="color: var(--font-dark-blue-color)", - padding="4px 8px", - icon="app:icon-bell", - size="18px", + :style="{color: 'var(--font-dark-blue-color)', 'min-width': '24px', 'min-height': '24px'}", round, - ) + ) + q-icon(name="app:icon-bell", size="20px") .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") q-btn( - @click="openPopup" - flat - icon="app:icon-down-arrow", - style="color: var(--font-dark-blue-color)", - size="10px", - padding="4px 2px 2px 2px" - dense, + @click="openPopup", + flat, + padding="0", + style="color: var(--font-grey-color)" ) - q-menu(style="margin-top: 19px !important") + base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}} + base-avatar(:size="32", v-else) + img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar") + .h-6.w-6.flex.items-center.justify-center.ml-2 + q-icon(name="app:icon-down-arrow", size="12px") + q-menu( + :offset="[60, 6]" + ) .menu.p-4 .text-popup.flex.cursor-pointer.pl-2(@click="logout", v-close-popup) Выйти @@ -64,6 +54,7 @@ import HeaderInputs from "./HeaderInputs.vue"; import BaseAvatar from "@/components/base/BaseAvatar"; import BasePopup from "@/components/base/BasePopup.vue"; import BaseClientFormCreate from "@/components/base/BaseClientFormCreate"; +import BaseButton from "@/components/base/BaseButton.vue"; export default { name: "TheHeader", components: { @@ -71,6 +62,7 @@ export default { BaseAvatar, BasePopup, BaseClientFormCreate, + BaseButton, }, props: { url: String, @@ -162,4 +154,10 @@ export default { max-width: 160px !important border-radius: 4px background-color: var(--default-white) +.on-right + margin-left: 8px +.q-btn :deep(.q-ripple) + display: none +.q-btn :deep(.q-focus-helper) + display: none diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue index acaa248..e60aed6 100644 --- a/src/components/base/BaseButton.vue +++ b/src/components/base/BaseButton.vue @@ -1,180 +1,123 @@ diff --git a/src/components/base/BaseCategorySelection.vue b/src/components/base/BaseCategorySelection.vue index 7f7bedf..2c60608 100644 --- a/src/components/base/BaseCategorySelection.vue +++ b/src/components/base/BaseCategorySelection.vue @@ -31,12 +31,26 @@ ) .name.flex.items-center.font-medium.text-xm {{benefit.name}} .buttons-group.flex.py-4.px-8.justify-center - base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить - base-button.text-base.font-semibold( + q-btn( + color="primary", + outline, + size="16px", + no-caps, + label="Отменить", + :style="{width: '126px', height: '40px'}", + padding="0", + @click="closeModalCategories" + ) + q-btn( v-if="selected[0]?.id", - :size="40", + color="primary", + size="16px", + no-caps, + label="Сохранить изменения", + :style="{width: '132px', height: '40px'}", + padding="0", @click="saveCategories(selected[0])" - ) Сохранить + ) .right-side.flex.px-14.font-bold.relative q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories") .flex.py-10.gap-y-6.flex-col(v-if="selected[0]?.id && selected[0]?.name !== 'Без льготы'") diff --git a/src/pages/clients/components/TableCreatePackageDoc.vue b/src/pages/clients/components/TableCreatePackageDoc.vue index bfcd674..81424a5 100644 --- 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 diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue index 13346cd..9b28dc0 100644 --- 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)", diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue index 740bb89..2155c5c 100644 --- 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: [], diff --git a/src/pages/newCalendar/components/CalendarSidebar.vue b/src/pages/newCalendar/components/CalendarSidebar.vue index a2f352b..c8a4a45 100644 --- 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, diff --git a/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue b/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue index f06e644..6eb7121 100644 --- 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 Добавить