feat: color the task color button when the task has a color set
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
This commit is contained in:
parent
65fd2f14a0
commit
60a79996f4
|
@ -376,6 +376,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>
|
||||||
|
@ -426,7 +428,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, { type ITask } from '@/models/task'
|
import TaskModel, {type ITask, TASK_DEFAULT_COLOR} from '@/models/task'
|
||||||
|
|
||||||
import { PRIORITIES as priorites } from '@/constants/priorities'
|
import { PRIORITIES as priorites } from '@/constants/priorities'
|
||||||
import {RIGHTS as rights} from '@/constants/rights'
|
import {RIGHTS as rights} from '@/constants/rights'
|
||||||
|
@ -457,6 +459,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 '@/models/list'
|
import type { IList } from '@/models/list'
|
||||||
|
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||||
|
|
||||||
function scrollIntoView(el) {
|
function scrollIntoView(el) {
|
||||||
if (!el) {
|
if (!el) {
|
||||||
|
@ -523,6 +526,8 @@ export default defineComponent({
|
||||||
showDeleteModal: false,
|
showDeleteModal: false,
|
||||||
// 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,
|
||||||
|
@ -590,6 +595,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,
|
||||||
|
@ -741,6 +751,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>
|
||||||
|
@ -928,7 +940,11 @@ $flash-background-duration: 750ms;
|
||||||
.button {
|
.button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
|
|
||||||
|
&.has-light-text {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue
Block a user