fix(kanban): make sure kanban cards always have text color matching their background
continuous-integration/drone/push Build is passing Details

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
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 16 additions and 2 deletions

View File

@ -5,6 +5,7 @@
'is-loading': loadingInternal || loading,
'draggable': !(loadingInternal || loading),
'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}"
@click.exact="openTaskDetail()"
@ -48,7 +49,10 @@
</progress>
<div class="footer">
<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
v-if="task.assignees.length > 0"
:assignees="task.assignees"
@ -114,7 +118,7 @@ async function toggleTaskDone(task: ITask) {
...task,
done: !task.done,
})
if (updatedTask.done && useAuthStore().settings.frontendSettings.playSoundWhenDone) {
playPopSound()
}
@ -280,6 +284,16 @@ $task-background: var(--white);
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 {
color: var(--white);