Исправила базовые кнопки

This commit is contained in:
Daria Golova
2023-07-12 16:13:11 +03:00
parent 73b40e4b0e
commit 7458a1dd32
22 changed files with 171 additions and 213 deletions

View File

@@ -3,7 +3,7 @@
:label="miniSize || round ? '' : label",
no-caps,
:class="btnClass"
:style="{width: miniSize ? '40px' : width, 'min-width': (miniSize || round) && '0px', ...btnStyle}",
:style="{width: miniSize ? '40px' : width, 'min-width': width, ...btnHeight}",
:round="miniSize || round",
:padding="computedPadding",
:disable="disable"
@@ -40,7 +40,7 @@ export default {
[this.type]: true,
};
},
btnStyle() {
btnHeight() {
if (this.size === "L")
return {
height: "48px",
@@ -51,6 +51,13 @@ export default {
"min-height": "40px",
};
},
btnWidth() {
return !this.width === "auto"
? {
"min-width": this.width,
}
: {};
},
miniSize() {
return this.type === "mini";
},

View File

@@ -31,24 +31,16 @@
)
.name.flex.items-center.font-medium.text-xm {{benefit.name}}
.buttons-group.flex.py-4.px-8.justify-center
q-btn(
color="primary",
outline,
size="16px",
no-caps,
label="Отменить",
:style="{width: '126px', height: '40px'}",
padding="0",
base-button(
type="secondary",
label="Сбросить",
width="146px",
@click="closeModalCategories"
)
q-btn(
base-button(
v-if="selected[0]?.id",
color="primary",
size="16px",
no-caps,
label="Сохранить изменения",
:style="{width: '132px', height: '40px'}",
padding="0",
label="Сохранить",
width="146px",
@click="saveCategories(selected[0])"
)
.right-side.flex.px-14.font-bold.relative

View File

@@ -55,12 +55,14 @@
)
.avatar.flex.absolute.items-center.gap-x-6
img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
q-btn(
round,
color="primary",
base-button(
width="48px",
@click="closeAddImage",
icon="app:icon-ok"
size="L",
round,
padding="2px 0 0 0"
)
q-icon(name="app:ok", size="20px")
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
.flex.flex-col.flex-auto.l.gap-y-8
.flex
@@ -83,14 +85,7 @@
:save-file="saveDocFile",
:networks-list="getNetworksList",
)
q-btn(
label="Создать клиента",
color="primary",
style="height: 40px; width: 180px",
no-caps,
padding="8px 24px",
@click="saveClient",
)
base-button(label="Создать клиента", width="180px", @click="saveClient")
</template>
<script>
@@ -107,6 +102,7 @@ import TheNotificationProvider from "@/components/Notifications/TheNotificationP
import { addNotification } from "@/components/Notifications/notificationContext";
import * as moment from "moment";
import { v_model } from "@/shared/mixins/v-model";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "BaseClientFormClient",
@@ -119,6 +115,7 @@ export default {
BaseModal,
addImageIcon,
TheNotificationProvider,
BaseButton,
},
props: {
setUpdatedClients: Function,

View File

@@ -33,7 +33,14 @@
)
.avatar.flex.absolute.items-center.gap-x-6
img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
base-button(
width="48px",
@click="closeAddImage",
size="L",
round,
padding="2px 0 0 0"
)
q-icon(name="app:ok", size="20px")
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", outlined)
</template>
@@ -41,10 +48,11 @@
import BaseModal from "./BaseModal.vue";
import BaseInput from "./BaseInput.vue";
import addImageIcon from "@/assets/icons/photo.svg";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "BaseInputFullName",
components: { BaseModal, BaseInput },
components: { BaseModal, BaseInput, BaseButton },
props: { infoClient: Object },
data() {
return {

View File

@@ -10,23 +10,15 @@
img(:src="lockIcon")
.flex.justify-between.items-center
.flex.gap-2
q-btn(
color="primary",
outline,
size="16px",
no-caps,
base-button(
type="secondary",
width="108px",
label="Отмена",
:style="{width: '108px', height: '40px'}",
padding="0",
@click="closeModalTime"
@click="closeModalTime",
)
q-btn(
color="primary",
size="16px",
no-caps,
label="Сохранить"
:style="{width: '132px', height: '40px'}",
padding="0",
base-button(
width="132px",
label="Сохранить",
@click="closeModalTime"
)
.text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
@@ -34,10 +26,12 @@
<script>
import lockIcon from "@/assets/icons/locked.svg";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "BaseTimeModal",
props: { times: Object, closeModalTime: Function },
components: { BaseButton },
data() {
return { lockIcon, select: false };
},

View File

@@ -14,22 +14,25 @@
)
.avatar.flex.absolute.items-center.gap-x-6
img.avatar.object-cover(for="image-upload", :src="image" )
q-btn(
round,
color="primary",
base-button(
width="48px",
@click="confirm",
icon="app:icon-ok"
size="L",
round,
padding="2px 0 0 0"
)
q-icon(name="app:ok", size="20px")
</template>
<script>
import BaseInput from "./BaseInput.vue";
import addImageIcon from "@/assets/icons/photo.svg";
import { v_model } from "@/shared/mixins/v-model";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "BaseModalUploadPhoto",
components: { BaseInput, addImageIcon },
components: { BaseInput, addImageIcon, BaseButton },
data() {
return {
image: addImageIcon,