feat: color the task color button when the task has a color set
This commit is contained in:
parent
a6e9b36bd6
commit
51c806c12b
1 changed files with 18 additions and 2 deletions
|
@ -379,6 +379,8 @@
|
|||
variant="secondary"
|
||||
icon="fill-drip"
|
||||
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') }}
|
||||
</x-button>
|
||||
|
@ -429,7 +431,7 @@ import {defineComponent} from 'vue'
|
|||
import cloneDeep from 'lodash.clonedeep'
|
||||
|
||||
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 { PRIORITIES as priorites } from '@/constants/priorities'
|
||||
|
@ -461,6 +463,7 @@ import { setTitle } from '@/helpers/setTitle'
|
|||
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
|
||||
import {getListTitle} from '@/helpers/getListTitle'
|
||||
import type { IList } from '@/modelTypes/IList'
|
||||
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||
|
||||
function scrollIntoView(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.
|
||||
visible: false,
|
||||
|
||||
TASK_DEFAULT_COLOR,
|
||||
|
||||
activeFields: {
|
||||
assignees: false,
|
||||
priority: false,
|
||||
|
@ -594,6 +599,11 @@ export default defineComponent({
|
|||
shouldShowClosePopup() {
|
||||
return this.$route.name.includes('kanban')
|
||||
},
|
||||
color() {
|
||||
return this.task.getHexColor
|
||||
? this.task.getHexColor()
|
||||
: TASK_DEFAULT_COLOR
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getNamespaceTitle,
|
||||
|
@ -745,6 +755,8 @@ export default defineComponent({
|
|||
this.task = await this.taskService.update(this.task)
|
||||
this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
|
||||
},
|
||||
|
||||
colorIsDark,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
@ -933,6 +945,10 @@ $flash-background-duration: 750ms;
|
|||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
justify-content: left;
|
||||
|
||||
&.has-light-text {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue