Добавила в хедер колонок чекбокс

This commit is contained in:
Daria Golova
2022-10-28 18:16:15 +03:00
parent 361ef76714
commit 6953412f4d
2 changed files with 50 additions and 3 deletions

View File

@@ -7,7 +7,7 @@
span(v-if="!ownerData.avatar") {{ defaultAvatar }} span(v-if="!ownerData.avatar") {{ defaultAvatar }}
span.owner-name.font-medium.text-base.mr-6 {{ ownerName }} span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg") img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
base-button.btn(left-icon="icon-doc-ok", :icon-left-size="24", :size="32", secondary) column-header-checkbox
.body.pl-1 .body.pl-1
calendar-event-card( calendar-event-card(
v-for="event in dayEvents" v-for="event in dayEvents"
@@ -18,12 +18,16 @@
</template> </template>
<script> <script>
import ColumnHeaderCheckbox from "./CalendarColumnHeaderCheckbox.vue";
import BaseAvatar from "@/components/base/BaseAvatar"; import BaseAvatar from "@/components/base/BaseAvatar";
import BaseButton from "@/components/base/BaseButton.vue";
import CalendarEventCard from "./CalendarEventCard.vue"; import CalendarEventCard from "./CalendarEventCard.vue";
export default { export default {
name: "CalendarColumn", name: "CalendarColumn",
components: { CalendarEventCard, BaseButton, BaseAvatar }, components: {
CalendarEventCard,
BaseAvatar,
ColumnHeaderCheckbox,
},
props: { props: {
ownerData: Object, ownerData: Object,
dayEvents: Array, dayEvents: Array,

View File

@@ -0,0 +1,43 @@
<template lang="pug">
div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
:class="{disable: !isChecked}"
@click="changeState"
)
span(v-if="numberIsVisible") 3
.icon-doc-ok.text-xxl
</template>
<script>
export default {
name: "CalendarColumnHeaderCheckbox",
data() {
return {
isChecked: false,
};
},
methods: {
changeState() {
this.isChecked = !this.isChecked;
this.$emit("isChecked", this.isChecked);
},
},
};
</script>
<style lang="sass" scoped>
.disable
opacity: 0.5
.icon-wrap
height: 32px
background-color: var(--btn-blue-color-1)
color: var(--btn-blue-color)
border-radius: 4px
&:hover
background-color: var(--btn-blue-color-2)
&:active
background-color: var(--font-dark-blue-color)
color: var(--default-white)
.icon-doc-ok
width: 24px
height: 24px
</style>