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

WIP Переделаны цвета карточек событий

Browse Source
This commit is contained in:
Daria Golova
2022-12-15 20:22:43 +03:00
parent 1c25170828
commit 5a5326b850
5 changed files with 124 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,6 +39,11 @@
--bg-event-blue-color-1: #93cdf6
--bg-event-default-hover-color: #d9e1f9
--border-event-default-color: #b3c3f3
--bg-event-orange-color: #FFC75B
--bg-event-orange-color-0: #ffdd9d
--bg-event-orange-color-1: #ffd27c
--bg-event-lavender-color: #8ba0ff
--bg-event-lavender-color-1: #c0d1ff
--light-grey-bg-color: #f8f9fa
--btn-green-color: rgba(60, 217, 75, 1)
--btn-light-green-color: rgba(60, 217, 75, 0.2)

56
src/pages/calendar/TheCalendar.vue
View File

@@ -4,7 +4,7 @@
:url="url",
:team-data="employeesData",
:open-form-create="openFormCreateEvent",
:event-types="eventTypes",
:event-types="eventStatus",
@width="changeWidth",
)
calendar-schedule(
@@ -14,7 +14,7 @@
:time-information="timeInformation",
:events-data="eventsData",
:sidebar-width="sidebarWidth",
:event-types="eventTypes",
:event-types="eventStatus",
:change-form-was-closed="changeFormWasClosed",
@previous-date="switchPreviousDate",
@next-date="switchNextDate",
@@ -30,7 +30,7 @@
:close-form="closeFormCreateEvent",
:owners-data="employeesData",
:selected-event-data="selectedEvent",
:event-types="eventTypes",
:event-types="eventStatus",
:time-information="timeInformation",
@clear-selected-event-data="clearSelectedEvent",
@close-change-form="setChangeFormState"
@@ -40,7 +40,7 @@
title="Удаление события"
)
calendar-delete-modal(
:event-types="eventTypes",
:event-types="eventStatus",
:owner-event="selectedEvent",
:close-modal="changeShowModal",
@update-events="fetchEventsData"
@@ -82,11 +82,49 @@ export default {
employeesData: [],
isOpenForm: false,
changeFormWasClosed: false,
eventTypes: [
{ id: 1, label: "Встреча", color: "var(--bg-event-green-color)" },
{ id: 2, label: "Планерка", color: "var(--bg-event-red-color)" },
{ id: 3, label: "Интервью", color: "var(--bg-event-yellow-color)" },
{ id: 4, label: "Важная работа", color: "var(--bg-event-blue-color)" },
eventStatus: [
{
id: 1,
label: "Ожидается прием",
value: "EXPECTED",
color: "var(--bg-event-yellow-color)",
},
{
id: 2,
label: "Идет прием",
value: "RECEPTION",
color: "var(--bg-event-blue-color)",
},
{
id: 3,
label: "Прием завершен",
value: "COMPLETED",
color: "var(--bg-event-green-color)",
},
{
id: 4,
label: "Не пришел",
value: "DID_NOT_COME",
color: "var(--bg-event-red-color)",
},
{
id: 5,
label: "Опаздывает",
value: "LATE",
color: "var(--bg-event-orange-color)",
},
{
id: 6,
label: "Отменил",
value: "CANCELED",
color: "var(--bg-event-lavender-color)",
},
{
id: 7,
label: "Планируется прием",
value: "PLANNED",
color: "var(--default-white)",
},
],
};
},

64
src/pages/calendar/components/CalendarEventCard.vue
View File

@@ -101,43 +101,61 @@ export default {
};
},
themeColors() {
switch (this.ownerEvent.kind) {
case this.eventTypes[0].label:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--bg-active": this.eventTypes[0].color,
"--bg-hover": "var(--bg-event-green-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[0].color,
};
case this.eventTypes[1].label:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--bg-active": this.eventTypes[1].color,
"--bg-hover": "var(--bg-event-red-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[1].color,
};
case this.eventTypes[2].label:
switch (this.ownerEvent.status) {
case this.eventTypes[0].value:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--bg-active": this.eventTypes[2].color,
"--bg-active": this.eventTypes[0].color,
"--bg-hover": "var(--bg-event-yellow-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--font-black-color)",
"--count-color": "var(--font-black-color)",
};
case this.eventTypes[3].label:
case this.eventTypes[1].value:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--bg-active": this.eventTypes[3].color,
"--bg-active": this.eventTypes[1].color,
"--bg-hover": "var(--bg-event-blue-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[1].color,
};
case this.eventTypes[2].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--bg-active": this.eventTypes[2].color,
"--bg-hover": "var(--bg-event-green-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[2].color,
};
case this.eventTypes[3].value:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--bg-active": this.eventTypes[3].color,
"--bg-hover": "var(--bg-event-red-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[3].color,
};
case this.eventTypes[4].value:
return {
"--bg-color": "var(--bg-event-orange-color-0)",
"--bg-active": this.eventTypes[4].color,
"--bg-hover": "var(--bg-event-orange-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--font-black-color)",
"--count-color": "var(--font-black-color)",
};
case this.eventTypes[5].value:
return {
"--bg-color": "var(--bg-lavender-color)",
"--bg-active": this.eventTypes[5].color,
"--bg-hover": "var(--bg-event-lavender-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[5].color,
};
default:
return {
"--bg-color": "var(--default-white)",

46
src/pages/calendar/components/CalendarEventDescriptionCard.vue
View File

@@ -8,8 +8,8 @@
.flex.justify-between.items-center.mb-2
.flex
span.inline-block.font-bold.text-base.mr-3.mt-2px {{ eventTime }}
.type.text-xxs.px-14px.py-1(v-if="isCertainType")
span.type-text {{ ownerEvent.kind }}
.type.text-xxs.flex.items-center.justify-center.px-14px(v-if="isCertainType")
span.type-text {{ ownerEvent.status }}
.right-side.flex.gap-x-4.text-sm(v-if="!disabled")
.icon-basket.flex.items-center.cursor-pointer(@click="transmitDeleteEvent")
.icon-edit.flex.items-center.cursor-pointer(@click="transmitEventData")
@@ -50,30 +50,42 @@ export default {
},
computed: {
typeColor() {
switch (this.ownerEvent.kind) {
case this.eventTypes[0].label:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--font-color": this.eventTypes[0].color,
};
case this.eventTypes[1].label:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--font-color": this.eventTypes[1].color,
};
case this.eventTypes[2].label:
switch (this.ownerEvent.status) {
case this.eventTypes[0].value:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--font-color": "var(--font-black-color)",
};
case this.eventTypes[3].label:
case this.eventTypes[1].value:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--font-color": this.eventTypes[1].color,
};
case this.eventTypes[2].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--font-color": this.eventTypes[2].color,
};
case this.eventTypes[3].value:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--font-color": this.eventTypes[3].color,
};
case this.eventTypes[4].value:
return {
"--bg-color": "var(--bg-event-orange-color-0)",
"--font-color": "var(--font-black-color)",
};
case this.eventTypes[5].value:
return {
"--bg-color": "var(--bg-lavender-color)",
"--font-color": "var(--font-black-color)",
};
default:
this.changeType();
return {};
return {
"--bg-color": "var(--bg-event-default-hover-color)",
"--font-color": "var(--btn-blue-color)",
};
}
},
eventTime() {

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

@@ -43,7 +43,7 @@ export default {
.event
width: 32px
height: 32px
background: var(--bg-event-box-color)
background: var(--btn-blue-sec-color)
border-radius: 4px
.event-type
@@ -58,7 +58,7 @@ export default {
border-radius: 4px
width: 169px
outline: none
background-color: var(--bg-event-box-color)
background-color: var(--btn-blue-sec-color)
&::placeholder
color: var(--font-dark-blue-color)
&:focus