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

Merge branch 'UC-209' into 'master'

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

See merge request andrusyakka/urban-couscous!255
This commit is contained in:
Daria Golova
2023-01-17 15:59:19 +00:00
parent fe37e7bb66 7cca1a88cc
commit b2a4d8313d
12 changed files with 123 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,6 @@
--bg-ligth-blue-color: #e6eafc
--font-dark-blue-color: #252850
--font-black-color: #090a15
--font-black-color-0: rgba(9, 10, 21, 0)
--font-black-color-1: rgba(9, 10, 21, 0.5)
--icon-light-blue: #d7d9ff
--btn-blue-color: #4772f2
@@ -11,7 +10,6 @@
--btn-blue-color-hover: #7e9cf6
--btn-blue-sec-color-hover: #a0b4f0
--btn-blue-color-disabled: #c8d5fb
--btn-blue-color-0: rgba(65, 105, 225, 0)
--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)

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)

19
src/pages/calendar/components/CalendarHeader.vue
View File

@@ -2,18 +2,20 @@
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
q-btn.mr-4(
class="secondary",
color="secondary",
round,
size="14px",
dense,
text-color="primary",
@click="previousHandler"
)
q-icon(name="arrow_back_ios", right)
q-btn.mr-4(
class="secondary",
color="secondary",
icon="arrow_forward_ios",
round,
size="14px",
text-color="primary",
dense,
@click="nextHandler"
)
@@ -79,17 +81,4 @@ export default {
.today
opacity: 0.5
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

25
src/pages/calendar/components/CalendarSidebar.vue
View File

@@ -24,10 +24,10 @@
//.button-wrapper.flex.justify-center.mb-23px
q-btn(
round,
icon="east",
size="18px",
class="secondary",
padding="6px",
icon="app:icon-long-arrow",
size="13px",
color="secondary",
text-color="primary"
:style="{ transform: `rotate(${turnButton})`}",
@click="changeSize",
)
@@ -54,7 +54,7 @@ export default {
widthSidebarOpen: "232px",
widthSidebarClose: "72px",
isOpen: false,
turnButton: "0deg",
turnButton: "180deg",
};
},
computed: {
@@ -85,7 +85,7 @@ export default {
"width",
this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
);
this.turnButton = this.isOpen ? "180deg" : "0deg";
this.turnButton = this.isOpen ? "0deg" : "180deg";
},
},
};
@@ -110,17 +110,4 @@ export default {
.button-wrapper
justify-content: end
padding-right: 16px
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

19
src/pages/calendar/components/CalendarSidebarEvent.vue
View File

@@ -5,7 +5,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px",
dense
)
@@ -20,7 +21,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px"
)
.flex.flex-col.gap-y-2
@@ -77,17 +79,4 @@ export default {
height: 16px
top: 8px
left: 8px
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

18
src/pages/calendar/components/CalendarSidebarTeammate.vue
View File

@@ -4,7 +4,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px",
dense
)
@@ -19,7 +20,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px",
dense
)
@@ -81,16 +83,4 @@ export default {
&:hover
background: var(--font-dark-blue-color)
color: var(--default-white)
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

42
src/pages/schedule/components/ScheduleBar.vue
View File

@@ -17,13 +17,17 @@
.flex.justify-center.items-center.h-10
span.font-semibold Статусы
.flex.justify-around.gap-x-4(class="py-2.5")
base-button.font-semibold.border-none(
q-btn(
v-for="item in buttons",
:class="item.class",
:key="item",
:style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
@click="choiceSchedule(item.class)"
) {{item.name}}
@click="choiceSchedule(item.class)",
:label="item.name",
:class="item.class",
text-color="white",
:style="{border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
no-caps,
style="width: 200px"
)
.graph-template.flex.flex-col.items-center.gap-y-4
base-custom-select(
:items="templateList",
@@ -38,23 +42,32 @@
label="Введите график",
v-model="template.item.label"
)
.flex.justify-center.gap-x-6
base-button.font-semibold.w-36(:size="40", @click="createSchedules") Сохранить
base-button.delete-button.font-semibold.w-36(
:size="40",
@click="deleteSchedule"
) Удалить
.flex.justify-center.gap-x-6.h-10
q-btn(
label="Сохранить",
color="primary",
style="width: 144px",
padding="4px 24px",
@click="createSchedules",
no-caps
)
q-btn(
label="Удалить",
style="background-color: var(--bg-event-red-color); width: 144px",
text-color="white",
padding="4px 24px",
@click="deleteSchedule",
no-caps
)
</template>
<script>
import BaseButton from "@/components/base/BaseButton.vue";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "ScheduleBar",
components: {
BaseButton,
BaseInput,
BaseCustomSelect,
},
@@ -112,9 +125,6 @@ export default {
&::placeholder
color: var(--font-black-color-1)
.text
color: var(--font-grey-color)
.status-wrapper
min-width: 540px
height: 120px

6
src/pages/schedule/components/ScheduleHeader.vue
View File

@@ -11,7 +11,8 @@
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
q-btn.mr-4(
class="secondary",
text-color="primary",
color="secondary"
round,
size="14px",
dense,
@@ -20,7 +21,8 @@
q-icon(name="arrow_back_ios", right)
q-btn.mr-6(
@click="nextHandler",
class="secondary",
text-color="primary",
color="secondary"
icon="arrow_forward_ios",
round,
size="14px",