Добавила в хедер колонок чекбокс
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user