local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: color the task color button when the task has a color set

Browse source
This commit is contained in:
kolaente 2022-09-07 17:57:44 +02:00
parent a6e9b36bd6
commit 51c806c12b
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/views/tasks/TaskDetailView.vue
View file

@ -379,6 +379,8 @@
variant="secondary" variant="secondary"
icon="fill-drip" icon="fill-drip"
v-shortcut="'c'" v-shortcut="'c'"
:class="{'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color)}"
:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
> >
{{ $t('task.detail.actions.color') }} {{ $t('task.detail.actions.color') }}
</x-button> </x-button>
@ -429,7 +431,7 @@ import {defineComponent} from 'vue'
import cloneDeep from 'lodash.clonedeep' import cloneDeep from 'lodash.clonedeep'
import TaskService from '../../services/task' import TaskService from '../../services/task'
import TaskModel from '@/models/task' import TaskModel, {TASK_DEFAULT_COLOR} from '@/models/task'
import type {ITask} from '@/modelTypes/ITask' import type {ITask} from '@/modelTypes/ITask'
import { PRIORITIES as priorites } from '@/constants/priorities' import { PRIORITIES as priorites } from '@/constants/priorities'
@ -461,6 +463,7 @@ import { setTitle } from '@/helpers/setTitle'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle' import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import {getListTitle} from '@/helpers/getListTitle' import {getListTitle} from '@/helpers/getListTitle'
import type { IList } from '@/modelTypes/IList' import type { IList } from '@/modelTypes/IList'
import {colorIsDark} from '@/helpers/color/colorIsDark'
function scrollIntoView(el) { function scrollIntoView(el) {
if (!el) { if (!el) {
@ -528,6 +531,8 @@ export default defineComponent({
// Used to avoid flashing of empty elements if the task content is not yet loaded. // Used to avoid flashing of empty elements if the task content is not yet loaded.
visible: false, visible: false,
TASK_DEFAULT_COLOR,
activeFields: { activeFields: {
assignees: false, assignees: false,
priority: false, priority: false,
@ -594,6 +599,11 @@ export default defineComponent({
shouldShowClosePopup() { shouldShowClosePopup() {
return this.$route.name.includes('kanban') return this.$route.name.includes('kanban')
}, },
color() {
return this.task.getHexColor
? this.task.getHexColor()
: TASK_DEFAULT_COLOR
},
}, },
methods: { methods: {
getNamespaceTitle, getNamespaceTitle,
@ -745,6 +755,8 @@ export default defineComponent({
this.task = await this.taskService.update(this.task) this.task = await this.taskService.update(this.task)
this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist') this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
}, },
colorIsDark,
}, },
}) })
</script> </script>
@ -933,6 +945,10 @@ $flash-background-duration: 750ms;
width: 100%; width: 100%;
margin-bottom: .5rem; margin-bottom: .5rem;
justify-content: left; justify-content: left;
&.has-light-text {
color: var(--white);
}
} }
} }