mirror of https://github.com/nextcloud/calendar
Show colored checkbox for Reminders with a timed due time
Signed-off-by: Georg Ehrke <developer@georgehrke.com>
This commit is contained in:
parent
d6a2973ea8
commit
f04bb97e6f
|
@ -237,3 +237,19 @@
|
|||
background-color: var(--color-main-background);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event-title-container {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
||||
.fc-event-title-checkbox {
|
||||
margin: 0 4px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-event-checkbox {
|
||||
margin: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
|
@ -231,3 +231,17 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../fonts/scss/iconfont-calendar-app';
|
||||
|
||||
.calendar-grid-checkbox {
|
||||
border-color: transparent;
|
||||
@include iconfont('checkbox');
|
||||
}
|
||||
|
||||
.calendar-grid-checkbox-checked {
|
||||
border-color: transparent;
|
||||
@include iconfont('checkbox-checked');
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -41,22 +41,30 @@ export default function({ event, el }) {
|
|||
}
|
||||
|
||||
if (el.classList.contains('fc-event-nc-task')) {
|
||||
const taskIcon = document.createElement('span')
|
||||
taskIcon.type = 'checkbox'
|
||||
taskIcon.classList.add('icon-event-task')
|
||||
if (event.extendedProps.darkText) {
|
||||
taskIcon.classList.add('icon-event-task--dark')
|
||||
} else {
|
||||
taskIcon.classList.add('icon-event-task--light')
|
||||
}
|
||||
if (event.extendedProps.percent === 100) {
|
||||
if (event.extendedProps.darkText) {
|
||||
taskIcon.classList.add('icon-event-task--checked--dark')
|
||||
// Is this a dot event in day-grid view
|
||||
if (el.classList.contains('fc-daygrid-dot-event')) {
|
||||
const dotElement = el.querySelector('.fc-daygrid-event-dot')
|
||||
dotElement.classList.remove('fc-daygrid-event-dot')
|
||||
dotElement.classList.add('fc-daygrid-event-checkbox')
|
||||
dotElement.style.color = dotElement.style.borderColor
|
||||
|
||||
if (event.extendedProps.percent === 100) {
|
||||
dotElement.classList.add('calendar-grid-checkbox-checked')
|
||||
} else {
|
||||
taskIcon.classList.add('icon-event-task--checked--light')
|
||||
dotElement.classList.add('calendar-grid-checkbox')
|
||||
}
|
||||
} else {
|
||||
const titleContainer = el.querySelector('.fc-event-title-container')
|
||||
const checkboxElement = document.createElement('div')
|
||||
checkboxElement.classList.add('fc-event-title-checkbox')
|
||||
if (event.extendedProps.percent === 100) {
|
||||
checkboxElement.classList.add('calendar-grid-checkbox-checked')
|
||||
} else {
|
||||
checkboxElement.classList.add('calendar-grid-checkbox')
|
||||
}
|
||||
|
||||
titleContainer.prepend(checkboxElement)
|
||||
}
|
||||
el.firstChild.insertBefore(taskIcon, el.firstChild.firstChild)
|
||||
}
|
||||
|
||||
if (event.source === null) {
|
||||
|
|
Loading…
Reference in New Issue