ami/tl-vikunja
1
0
Fork 0
Code

fix(kanban): make sure kanban cards always have text color matching their background

Browse Source 
Resolves https://github.com/go-vikunja/frontend/issues/135
This commit is contained in:
kolaente 2023-12-13 18:54:36 +01:00
parent 0d074113f1
commit 34e4862c88
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/tasks/partials/kanban-card.vue
View File

@ -5,6 +5,7 @@
'is-loading': loadingInternal || loading, 'is-loading': loadingInternal || loading,
'draggable': !(loadingInternal || loading), 'draggable': !(loadingInternal || loading),
'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color), 'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
'has-custom-background-color': color !== TASK_DEFAULT_COLOR ? color : undefined,
}" }"
:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}" :style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}"
@click.exact="openTaskDetail()" @click.exact="openTaskDetail()"
@ -48,7 +49,10 @@
</progress> </progress>
<div class="footer"> <div class="footer">
<labels :labels="task.labels"/> <labels :labels="task.labels"/>
<priority-label :priority="task.priority" :done="task.done" class="is-inline-flex is-align-items-center"/> <priority-label
:priority="task.priority"
:done="task.done"
class="is-inline-flex is-align-items-center"/>
<assignee-list <assignee-list
v-if="task.assignees.length > 0" v-if="task.assignees.length > 0"
:assignees="task.assignees" :assignees="task.assignees"
@ -114,7 +118,7 @@ async function toggleTaskDone(task: ITask) {
...task, ...task,
done: !task.done, done: !task.done,
}) })
if (updatedTask.done && useAuthStore().settings.frontendSettings.playSoundWhenDone) { if (updatedTask.done && useAuthStore().settings.frontendSettings.playSoundWhenDone) {
playPopSound() playPopSound()
} }
@ -280,6 +284,16 @@ $task-background: var(--white);
width: auto; width: auto;
} }
&.has-custom-background-color {
color: hsl(215, 27.9%, 16.9%); // copied from grey-800 to avoid different values in dark mode
.footer .icon,
.due-date,
.priority-label {
background: hsl(220, 13%, 91%);
}
}
&.has-light-text { &.has-light-text {
color: var(--white); color: var(--white);