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

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

Browse Source
This commit is contained in:
Daria Golova
2023-01-17 18:53:36 +03:00
parent fe37e7bb66
commit 7cca1a88cc
12 changed files with 123 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/TheHeader.vue
View File

@@ -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(
left-icon="icon-plus",
:icon-left-size="10",
:size="40",
right-icon="icon-person",
:icon-right-size="18",
@click="openForm"
q-btn.mr-9(
color="primary",
dense,
padding="4px 22px",
@click="openForm"
)
button.header-buttons.flex.justify-center.items-center.mr-8.p-0
.icon-bell.text-xxl
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-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")
.icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
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,
)
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,
},

6
src/components/TheSidebar.vue
View File

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

36
src/components/base/BaseClientFormCreate.vue
View File

@@ -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(
:rounded="true",
:secondary="true",
:size="40",
q-btn.relative(
color="secondary",
text-color="primary",
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")
.wrapper-img.flex.w-10.h-10(v-else)
img.current-avatar.object-cover(:src="img")
q-icon(
v-if="img === defaultIcon"
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")
.icon-ok
q-btn(
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,

1
src/components/base/BaseSelectNetworks.vue
View File

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

27
src/components/base/BaseSidebarButton.vue
View File

@@ -1,7 +1,13 @@
<template lang="pug">
a(:href="path")
button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3.transition(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
slot
q-btn(
padding="14px 14px 14px 10px",
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: var(--btn-blue-color-0)
background-color: trnsparent
border-radius: 0 4px 4px 0
border-left-color: var(--btn-blue-color-0)
border-left-width: 4px
border-right: none
border-top: none
border-bottom: none
border-left-style: solid
border-left: 4px solid transparent
.active
background-color: var(--btn-blue-color-1)
border-left-color: var(--btn-blue-color)