admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ASTRA-157' into 'master'

Browse Source 
WIP Сделала BaseButton

See merge request andrusyakka/urban-couscous!466
This commit is contained in:
Daria Golova
2023-07-11 14:31:30 +00:00
parent 8655620d65 d4d297846f
commit a5bbd9d895
12 changed files with 214 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/sass/variables.sass
View File

@@ -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%)

62
src/components/TheHeader.vue
View File

@@ -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) Выйти
</template>
@@ -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
</style>

235
src/components/base/BaseButton.vue
View File

@@ -1,180 +1,123 @@
<template lang="pug">
button.base-button.text-base(
type="button",
:disabled="disabled",
:class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}"
:style="{height: size + 'px', minWidth: size + 'px'}"
q-btn(
:label="miniSize || round ? '' : label",
no-caps,
:class="btnClass"
:style="{width: miniSize ? '40px' : width, 'min-width': (miniSize || round) && '0px', ...btnStyle}",
:round="miniSize || round",
:padding="computedPadding",
:disable="disable"
)
.button-container
span.icon-container(
:class="leftIcon",
v-if="leftIcon",
:style="{fontSize: iconLeftSize + 'px'}"
)
slot
.split(v-if="split")
span.icon-container(
:class="rightIcon",
v-if="rightIcon",
:style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
)
q-icon(v-if="miniSize", name="app:ok", size="20px")
slot(v-else)
</template>
<script>
export default {
name: "BaseButton",
props: {
confirm: Boolean,
outlined: Boolean,
outlinedRed: Boolean,
added: Boolean,
addedBorderNone: Boolean,
rounded: Boolean,
disabled: Boolean,
split: Boolean,
secondary: Boolean,
rightIcon: {
type: {
type: String,
default: "",
},
leftIcon: {
type: String,
default: "",
},
iconLeftSize: {
type: Number,
default: 10,
},
iconRightSize: {
type: Number,
default: 10,
default: "primary",
},
size: {
type: Number,
default: 24,
type: String,
default: "M",
},
marginLeftIcon: {
type: Number,
default: 0,
width: {
type: String,
default: "auto",
},
round: Boolean,
label: String,
disable: Boolean,
noPadding: Boolean,
padding: String,
},
computed: {
btnClass() {
return {
[this.type]: true,
};
},
btnStyle() {
if (this.size === "L")
return {
height: "48px",
"min-height": "48px",
};
return {
height: "40px",
"min-height": "40px",
};
},
miniSize() {
return this.type === "mini";
},
computedPadding() {
if (this.miniSize) return "2px 0 0 0";
if (this.noPadding) return "0";
if (this.padding) return this.padding;
return "";
},
},
};
</script>
<style scoped lang="sass">
.base-button
padding: 8px 23px
.primary
color: white
background-color: var(--btn-blue-color)
border: 1px solid var(--btn-blue-color)
color: var(--default-white)
display: flex
justify-content: center
align-items: center
border-radius: 4px
white-space: nowrap
&:hover
background-color: var(--btn-blue-color-hover)
&:active
background-color: var(--font-dark-blue-color)
border: 1px solid var(--font-dark-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
&:disabled, &[disabled]
opacity: 1 !important
background-color: var(--btn-blue-color-disabled)
border: 1px solid var(--btn-blue-color-disabled)
&:focus
outline: 0
.rounded
padding: 0
border-radius: 50%
.outlined
background-color: var(--default-white)
border: 1.5px solid var(--btn-blue-color)
color: var(--btn-blue-color)
&:active
background-color: var(--default-white)
border: 1.5px solid var(--font-dark-blue-color)
color: var(--font-dark-blue-color)
&:hover
background-color: var(--default-white)
border: 1.5px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color-hover)
&:disabled, &[disabled]
background-color: var(--default-white)
border: 1.5px solid var(--btn-blue-color-1)
color: var(--btn-blue-color-1)
.outlined-red
background-color: var(--default-white)
border: 1.5px solid var(--border-red-color)
color: var(--border-red-color)
&:active
background-color: var(--default-white)
border: 1.5px solid var(--bg-event-red-color)
color: var(--bg-event-red-color)
&:hover
background-color: var(--default-white)
border: 1.5px solid var(--bg-event-red-color-1)
color: var(--bg-event-red-color-1)
&:disabled, &[disabled]
background-color: var(--default-white)
border: 1.5px solid var(--bg-event-red-color-0)
color: var(--bg-event-red-color-0)
.added
border: 2px solid var(--btn-blue-color)
&:hover
border: none
background-color: var(--btn-blue-color)
color: var(--default-white)
.added-border-none
border: none
width: fit-content
background-color: var(--bg-opacity-0)
color: var(--btn-blue-color)
padding: 0
row-gap: 10px
&:hover
border: none
color: var(--btn-blue-color-hover)
background-color: var(--bg-opacity-0)
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
border: 1.5px solid var(--btn-blue-sec-border-color)
background-color: white
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
background-color: var(--btn-blue-sec-color-hover)
&:active
background-color: var(--btn-blue-sec-color-active)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
opacity: 1 !important
color: var(--btn-blue-sec-color-disabled)
background-color: white
border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
.confirm
border-color: var(--btn-blue-color)
border: 2px solid var(--btn-blue-color)
.remove
color: var(--border-red-color)
border: 1.5px solid var(--btn-red-border-color)
background-color: white
&:hover
background-color: var(--btn-red-color-hover)
&:active
background-color: var(--btn-red-color-active)
&:disabled, &[disabled]
opacity: 1 !important
color: var(--btn-red-color-disabled)
background-color: white
border: 1.5px solid var(--btn-red-border-color-disabled)
.mini
color: var(--btn-blue-color)
border: 1.5px solid var(--btn-mini-color)
background-color: white
&:hover
border: none
background-color: var(--btn-blue-color)
color: var(--default-white)
background-color: var(--btn-mini-color)
&:active
background-color: var(--btn-light-green-color)
color: var(--btn-green-color)
border: none
background-color: var(--btn-mini-color-active)
color: var(--bg-status-green)
.button-container
display: flex
gap: 8px
.split
height: 19px
width: 1px
border-radius: 1px
background-color: var(--default-white)
opacity: 0.3
.icon-container
display: flex
align-items: center
justify-content: center
.q-btn :deep(.q-focus-helper)
display: none
.q-btn :deep(.q-ripple)
display: none
</style>

22
src/components/base/BaseCategorySelection.vue
View File

@@ -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 !== 'Без льготы'")

8
src/pages/clients/components/TableCreatePackageDoc.vue
View File

@@ -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

10
src/pages/login/TheLogin.vue
View File

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

16
src/pages/newCalendar/components/CalendarOpenSidebar.vue
View File

@@ -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: [],

3
src/pages/newCalendar/components/CalendarSidebar.vue
View File

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

23
src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
View File

@@ -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>

25
src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
View File

@@ -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>

4
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
View File

@@ -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 заполнение осмотра

22
src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue
View File

@@ -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"
q-btn.ml-2px(
color="primary",
flat,
:style="{'font-weight': 500, width: '174px', height: '24px'}",
no-caps,
padding="0",
@click="addNewConfidant"
)
span.font-medium.text-base Добавить контакт
)
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>