forked from vikunja/frontend
Compare commits
3 Commits
main
...
fix/task-l
Author | SHA1 | Date |
---|---|---|
kolaente | 4924470f2b | |
kolaente | 5e9ed290ac | |
kolaente | 00248e7c91 |
|
@ -7,7 +7,7 @@
|
||||||
@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
|
@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
/>
|
/>
|
||||||
<label :for="checkBoxId" class="check" @click.prevent="check">
|
<label :for="checkBoxId" class="check">
|
||||||
<svg height="18px" viewBox="0 0 18 18" width="18px">
|
<svg height="18px" viewBox="0 0 18 18" width="18px">
|
||||||
<path
|
<path
|
||||||
d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
|
d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
|
||||||
|
@ -56,11 +56,6 @@ function updateData(newChecked: boolean) {
|
||||||
emit('update:modelValue', newChecked)
|
emit('update:modelValue', newChecked)
|
||||||
emit('change', newChecked)
|
emit('change', newChecked)
|
||||||
}
|
}
|
||||||
|
|
||||||
function check() {
|
|
||||||
checked.value = !checked.value
|
|
||||||
updateData(checked.value)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<router-link
|
<div :class="{'is-loading': taskService.loading}" class="task loader-container" @click.stop.self="openTaskDetail">
|
||||||
:to="taskDetailRoute"
|
|
||||||
:class="{'is-loading': taskService.loading}"
|
|
||||||
class="task loader-container"
|
|
||||||
>
|
|
||||||
<fancycheckbox
|
<fancycheckbox
|
||||||
:disabled="(isArchived || disabled) && !canMarkAsDone"
|
:disabled="(isArchived || disabled) && !canMarkAsDone"
|
||||||
@change="markAsDone"
|
@change="markAsDone"
|
||||||
|
@ -16,7 +12,8 @@
|
||||||
class="mr-1"
|
class="mr-1"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div
|
<router-link
|
||||||
|
:to="taskDetailRoute"
|
||||||
:class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
|
:class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
|
||||||
class="tasktext"
|
class="tasktext"
|
||||||
>
|
>
|
||||||
|
@ -96,7 +93,7 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<checklist-summary :task="task"/>
|
<checklist-summary :task="task"/>
|
||||||
</div>
|
</router-link>
|
||||||
|
|
||||||
<progress
|
<progress
|
||||||
class="progress is-small"
|
class="progress is-small"
|
||||||
|
@ -117,26 +114,27 @@
|
||||||
|
|
||||||
<BaseButton
|
<BaseButton
|
||||||
:class="{'is-favorite': task.isFavorite}"
|
:class="{'is-favorite': task.isFavorite}"
|
||||||
@click.prevent="toggleFavorite"
|
@click="toggleFavorite"
|
||||||
class="favorite"
|
class="favorite"
|
||||||
>
|
>
|
||||||
<icon icon="star" v-if="task.isFavorite"/>
|
<icon icon="star" v-if="task.isFavorite"/>
|
||||||
<icon :icon="['far', 'star']" v-else/>
|
<icon :icon="['far', 'star']" v-else/>
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
<slot />
|
<slot />
|
||||||
</router-link>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref, watch, shallowReactive, toRef, type PropType, onMounted, onBeforeUnmount, computed} from 'vue'
|
import {ref, watch, shallowReactive, toRef, type PropType, onMounted, onBeforeUnmount, computed} from 'vue'
|
||||||
import {useI18n} from 'vue-i18n'
|
import {useI18n} from 'vue-i18n'
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
|
||||||
import TaskModel, { getHexColor } from '@/models/task'
|
import TaskModel, { getHexColor } from '@/models/task'
|
||||||
import type {ITask} from '@/modelTypes/ITask'
|
import type {ITask} from '@/modelTypes/ITask'
|
||||||
|
|
||||||
import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
|
import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
|
||||||
import Labels from '@/components/tasks/partials//labels.vue'
|
import Labels from '@/components/tasks/partials/labels.vue'
|
||||||
import DeferTask from '@/components/tasks/partials//defer-task.vue'
|
import DeferTask from '@/components/tasks/partials/defer-task.vue'
|
||||||
import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
|
import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
|
||||||
|
|
||||||
import User from '@/components/misc/user.vue'
|
import User from '@/components/misc/user.vue'
|
||||||
|
@ -186,6 +184,7 @@ const props = defineProps({
|
||||||
const emit = defineEmits(['task-updated'])
|
const emit = defineEmits(['task-updated'])
|
||||||
|
|
||||||
const {t} = useI18n({useScope: 'global'})
|
const {t} = useI18n({useScope: 'global'})
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
const taskService = shallowReactive(new TaskService())
|
const taskService = shallowReactive(new TaskService())
|
||||||
const task = ref<ITask>(new TaskModel())
|
const task = ref<ITask>(new TaskModel())
|
||||||
|
@ -275,6 +274,14 @@ function hideDeferDueDatePopup(e) {
|
||||||
showDefer.value = false
|
showDefer.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const taskLink = ref(null)
|
||||||
|
function openTaskDetail() {
|
||||||
|
const isTextSelected = window.getSelection().toString()
|
||||||
|
if (!isTextSelected) {
|
||||||
|
router.push(taskDetailRoute.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -287,15 +294,19 @@ function hideDeferDueDatePopup(e) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
|
|
||||||
color: var(--text);
|
|
||||||
transition: color ease $transition-duration;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--grey-900);
|
|
||||||
background-color: var(--grey-100);
|
background-color: var(--grey-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
|
||||||
|
|
||||||
|
a.tasktext {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tasktext,
|
.tasktext,
|
||||||
&.tasktext {
|
&.tasktext {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -338,6 +349,15 @@ function hideDeferDueDatePopup(e) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text);
|
||||||
|
transition: color ease $transition-duration;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--grey-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.favorite {
|
.favorite {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -354,7 +374,8 @@ function hideDeferDueDatePopup(e) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .favorite {
|
&:hover .favorite,
|
||||||
|
.favorite:focus {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue