Разделил сайдбар на компоненты
This commit is contained in:
megavrilinvv
@@ -1,77 +1,60 @@
|
||||
<template lang="pug">
|
||||
.sidebar.flex.flex-col.bg-white(:class="openSidebar")
|
||||
.sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
|
||||
.sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen")
|
||||
base-button(left-icon="icon-plus", rounded, :size="40", :icon-left-size="10" @click="openFormCreate" )
|
||||
.flex.flex-col.items-center(v-if="!isOpen")
|
||||
base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
|
||||
.flex.flex-col.gap-y-2.items-center.mt-4
|
||||
.event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
|
||||
.event-type(:style="{ background: event.color }")
|
||||
.flex.flex-col.items-center.gap-y-2.justify-center
|
||||
base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
|
||||
.team-card(v-for="teammate in teamData" :key="teammate.id")
|
||||
base-avatar(:size="32" :color="teammate.color")
|
||||
img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
|
||||
span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
|
||||
.sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
|
||||
base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10", @click="openFormCreate" ) Создать событие
|
||||
.flex.items-center.flex-col.gap-y-4
|
||||
.events-wrapper.flex.items-center.justify-between
|
||||
.flex {{ "Виды событий" }}
|
||||
base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
|
||||
.flex.flex-col.gap-y-2
|
||||
.relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
|
||||
input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
|
||||
:placeholder="event.name"
|
||||
:key="event.id")
|
||||
.event-type(:style="{ background: event.color }")
|
||||
span.icon-edit.cursor-pointer
|
||||
.flex.flex-col.gap-y-4
|
||||
.events-wrapper.flex.items-center.justify-between
|
||||
.flex {{ "Команды" }}
|
||||
base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
|
||||
.box-team.flex.flex-col.gap-y-2
|
||||
.team-card.flex.items-center.justify-between.cursor-pointer(
|
||||
v-for="teammate in teamData"
|
||||
:key="teammate.id")
|
||||
.flex.items-center
|
||||
base-avatar(:size="32" :color="teammate.color")
|
||||
img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
|
||||
span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
|
||||
.flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
|
||||
span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6
|
||||
.sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
|
||||
base-button(
|
||||
left-icon="icon-plus",
|
||||
rounded,
|
||||
:size="40",
|
||||
:icon-left-size="10",
|
||||
@click="openFormCreate",
|
||||
v-if="!isOpen"
|
||||
)
|
||||
base-button.w-full(
|
||||
right-icon="icon-plus",
|
||||
split,
|
||||
:size="40",
|
||||
:icon-right-size="10",
|
||||
:marginLeftIcon="7",
|
||||
@click="openFormCreate",
|
||||
v-else
|
||||
) Создать событие
|
||||
calendar-sidebar-event(:is-open="isOpen", :event-type="eventType")
|
||||
calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
|
||||
.button-wrapper.flex.justify-center.mb-23px
|
||||
base-button(left-icon="icon-long-arrow", rounded, :size="40", :icon-left-size="18", secondary, :style="{ transform: `rotate(${turnButton})`}", @click="changeSize")
|
||||
base-button(
|
||||
left-icon="icon-long-arrow",
|
||||
rounded, :size="40",
|
||||
:icon-left-size="18",
|
||||
secondary,
|
||||
:style="{ transform: `rotate(${turnButton})`}",
|
||||
@click="changeSize"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseButton from "@/components/base/BaseButton";
|
||||
import BaseAvatar from "@/components/base/BaseAvatar";
|
||||
import CalendarSidebarEvent from "./cells/CalendarSidebarEvent.vue";
|
||||
import CalendarSidebarTeammate from "./cells/CalendarSidebarTeammate.vue";
|
||||
|
||||
export default {
|
||||
name: "CalendarSidebar",
|
||||
components: {
|
||||
BaseButton,
|
||||
BaseAvatar,
|
||||
CalendarSidebarEvent,
|
||||
CalendarSidebarTeammate,
|
||||
},
|
||||
props: {
|
||||
teamData: Array,
|
||||
openFormCreate: Function,
|
||||
eventType: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
events: [
|
||||
{ id: 1, name: "Встреча", color: "var(--bg-event-green-color)" },
|
||||
{ id: 2, name: "Планерка", color: "var(--bg-event-red-color)" },
|
||||
{ id: 3, name: "Интервью", color: "var(--bg-event-yellow-color)" },
|
||||
{ id: 4, name: "Важная работа", color: "var(--bg-event-blue-color)" },
|
||||
],
|
||||
widthSidebarOpen: "232px",
|
||||
widthSidebarClose: "72px",
|
||||
isOpen: false,
|
||||
turnButton: "180deg",
|
||||
maxLengthLastName: 13,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -80,11 +63,6 @@ export default {
|
||||
"open-sidebar": this.isOpen,
|
||||
};
|
||||
},
|
||||
buttonStyled() {
|
||||
return {
|
||||
"button-styled": true,
|
||||
};
|
||||
},
|
||||
sidebarWidth() {
|
||||
if (this.isOpen) {
|
||||
return {
|
||||
@@ -95,9 +73,6 @@ export default {
|
||||
width: this.widthSidebarClose,
|
||||
};
|
||||
},
|
||||
defaultName(last, first) {
|
||||
return `${last[0]}${first[0]}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeSize() {
|
||||
@@ -108,16 +83,6 @@ export default {
|
||||
);
|
||||
this.turnButton = this.isOpen ? "0deg" : "180deg";
|
||||
},
|
||||
changeName(lastName, fitstName, patronymic) {
|
||||
return lastName.length > this.maxLengthLastName
|
||||
? lastName.slice(0, this.maxLengthLastName) +
|
||||
"... " +
|
||||
fitstName[0] +
|
||||
"." +
|
||||
patronymic[0] +
|
||||
"."
|
||||
: lastName + " " + fitstName[0] + "." + patronymic[0] + ".";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -126,83 +91,16 @@ export default {
|
||||
.sidebar-wrapper
|
||||
border-left: 2px solid var(--btn-blue-color-3)
|
||||
|
||||
.button-plus
|
||||
max-height: 40px
|
||||
background: var(--btn-blue-color)
|
||||
color: var(--default-white)
|
||||
|
||||
.event
|
||||
width: 32px
|
||||
height: 32px
|
||||
background: var(--bg-event-box-color)
|
||||
border-radius: 4px
|
||||
|
||||
.event-type
|
||||
width: 16px
|
||||
height: 16px
|
||||
border-radius: 2px
|
||||
|
||||
.avatar-wrapper
|
||||
width: 32px
|
||||
height: 32px
|
||||
|
||||
.open-button
|
||||
width: 40px
|
||||
height: 40px
|
||||
max-height: 40px
|
||||
|
||||
.button-styled
|
||||
max-height: 24px
|
||||
background: var(--btn-blue-color-1)
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.open-sidebar
|
||||
.sidebar-content
|
||||
align-items: flex-end
|
||||
padding-left: 15px
|
||||
.event-type
|
||||
position: absolute
|
||||
width: 8px
|
||||
height: 16px
|
||||
top: 8px
|
||||
left: 8px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
row-gap: 32px
|
||||
padding: 19px 16px
|
||||
align-items: center
|
||||
width: 232px
|
||||
|
||||
.button-wrapper
|
||||
justify-content: end
|
||||
padding-right: 16px
|
||||
|
||||
.create-event
|
||||
width: 200px
|
||||
height: 40px
|
||||
border-radius: 4px
|
||||
|
||||
.events-wrapper
|
||||
width: 200px
|
||||
|
||||
.input-wrapper
|
||||
border: none
|
||||
background: var(--bg-event-box-color)
|
||||
height: 32px
|
||||
width: 169px
|
||||
|
||||
.team-card
|
||||
border-radius: 16px
|
||||
&:hover
|
||||
background: var(--font-dark-blue-color)
|
||||
color: var(--default-white)
|
||||
|
||||
.button
|
||||
width: 200px
|
||||
|
||||
.custom-input
|
||||
border-radius: 4px
|
||||
width: 169px
|
||||
outline: none
|
||||
background-color: var(--bg-event-box-color)
|
||||
&::placeholder
|
||||
color: var(--font-dark-blue-color)
|
||||
&:focus
|
||||
background-color: var(--font-dark-blue-color)
|
||||
color: var(--default-white)
|
||||
&::placeholder
|
||||
color: var(--default-white)
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user