Show colored checkbox for Reminders with a timed due time

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
This commit is contained in:
Georg Ehrke 2020-08-22 20:39:12 +02:00
parent d6a2973ea8
commit f04bb97e6f
No known key found for this signature in database
GPG Key ID: 9D98FD9380A1CB43
3 changed files with 51 additions and 13 deletions

View File

@ -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;
}

View File

@ -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>

View File

@ -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) {