forked from vikunja/frontend
Compare commits
6 Commits
fix/read-o
...
main
Author | SHA1 | Date | |
---|---|---|---|
a94198f2eb | |||
a6e7e6efa6 | |||
6f5f7b190a | |||
0473c385d6 | |||
68a76faacc | |||
4579dd3ce7 |
|
@ -128,7 +128,7 @@ describe('Task', () => {
|
|||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
cy.get('.task-view .action-buttons .button')
|
||||
.contains('Done!')
|
||||
.contains('Mark task done!')
|
||||
.click()
|
||||
|
||||
cy.get('.task-view .heading .is-done')
|
||||
|
|
|
@ -348,6 +348,10 @@ $editor-border-color: #ddd;
|
|||
color: var(--grey-400) !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&-cursor {
|
||||
border-color: var(--grey-700);
|
||||
}
|
||||
}
|
||||
|
||||
.editor-preview {
|
||||
|
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<p class="created">
|
||||
<i18n-t keypath="task.detail.created">
|
||||
<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
|
||||
{{ task.createdBy.getDisplayName() }}
|
||||
</i18n-t>
|
||||
<template v-if="+new Date(task.created) !== +new Date(task.updated)">
|
||||
<br/>
|
||||
<!-- Computed properties to show the actual date every time it gets updated -->
|
||||
<i18n-t keypath="task.detail.updated">
|
||||
<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
|
||||
</i18n-t>
|
||||
</template>
|
||||
<template v-if="task.done">
|
||||
<br/>
|
||||
<i18n-t keypath="task.detail.doneAt">
|
||||
<span v-tooltip="doneFormatted">{{ doneSince }}</span>
|
||||
</i18n-t>
|
||||
</template>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, toRefs} from 'vue'
|
||||
import TaskModel from '@/models/task'
|
||||
import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
|
||||
|
||||
const props = defineProps({
|
||||
task: {
|
||||
type: TaskModel,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const {task} = toRefs(props)
|
||||
|
||||
const updatedSince = computed(() => formatDateSince(task.value.updated))
|
||||
const updatedFormatted = computed(() => formatDateLong(task.value.updated))
|
||||
const doneSince = computed(() => formatDateSince(task.value.doneAt))
|
||||
const doneFormatted = computed(() => formatDateLong(task.value.doneAt))
|
||||
</script>
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="task-relations">
|
||||
<x-button
|
||||
v-if="editEnabled && Object.keys(relatedTasks).length > 0"
|
||||
v-if="Object.keys(relatedTasks).length > 0"
|
||||
@click="showNewRelationForm = !showNewRelationForm"
|
||||
class="is-pulled-right add-task-relation-button"
|
||||
:class="{'is-active': showNewRelationForm}"
|
||||
|
|
|
@ -545,7 +545,7 @@
|
|||
"chooseStartDate": "Click here to set a start date",
|
||||
"chooseEndDate": "Click here to set an end date",
|
||||
"move": "Move task to a different list",
|
||||
"done": "Done!",
|
||||
"done": "Mark task done!",
|
||||
"undone": "Mark as undone",
|
||||
"created": "Created {0} by {1}",
|
||||
"updated": "Updated {0}",
|
||||
|
@ -781,7 +781,7 @@
|
|||
"then": "then",
|
||||
"task": {
|
||||
"title": "Task Page",
|
||||
"done": "Mark a task as done",
|
||||
"done": "Done",
|
||||
"assign": "Assign to a user",
|
||||
"labels": "Add labels to this task",
|
||||
"dueDate": "Change the due date of this task",
|
||||
|
|
|
@ -246,11 +246,11 @@
|
|||
<!-- Comments -->
|
||||
<comments :can-write="canWrite" :task-id="taskId"/>
|
||||
</div>
|
||||
<div class="column is-one-third action-buttons" v-if="canWrite || shouldShowClosePopup">
|
||||
<BaseButton @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4 has-text-primary" v-if="shouldShowClosePopup">
|
||||
<div class="column is-one-third action-buttons">
|
||||
<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4" v-if="shouldShowClosePopup">
|
||||
<icon icon="arrow-left"/>
|
||||
{{ $t('task.detail.closePopup') }}
|
||||
</BaseButton>
|
||||
</a>
|
||||
<template v-if="canWrite">
|
||||
<x-button
|
||||
:class="{'is-success': !task.done}"
|
||||
|
@ -385,11 +385,27 @@
|
|||
</template>
|
||||
|
||||
<!-- Created / Updated [by] -->
|
||||
<created-updated :task="task"/>
|
||||
<p class="created">
|
||||
<i18n-t keypath="task.detail.created">
|
||||
<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
|
||||
{{ task.createdBy.getDisplayName() }}
|
||||
</i18n-t>
|
||||
<template v-if="+new Date(task.created) !== +new Date(task.updated)">
|
||||
<br/>
|
||||
<!-- Computed properties to show the actual date every time it gets updated -->
|
||||
<i18n-t keypath="task.detail.updated">
|
||||
<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
|
||||
</i18n-t>
|
||||
</template>
|
||||
<template v-if="task.done">
|
||||
<br/>
|
||||
<i18n-t keypath="task.detail.doneAt">
|
||||
<span v-tooltip="doneFormatted">{{ doneSince }}</span>
|
||||
</i18n-t>
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Created / Updated [by] -->
|
||||
<created-updated :task="task" v-if="!canWrite && !shouldShowClosePopup"/>
|
||||
</div>
|
||||
|
||||
<transition name="modal">
|
||||
|
@ -430,20 +446,16 @@ import description from '@/components/tasks/partials/description.vue'
|
|||
import ColorPicker from '../../components/input/colorPicker'
|
||||
import heading from '@/components/tasks/partials/heading.vue'
|
||||
import Datepicker from '@/components/input/datepicker.vue'
|
||||
import BaseButton from '@/components/base/BaseButton'
|
||||
import {playPop} from '@/helpers/playPop'
|
||||
import TaskSubscription from '@/components/misc/subscription.vue'
|
||||
import {CURRENT_LIST} from '@/store/mutation-types'
|
||||
|
||||
import {uploadFile} from '@/helpers/attachments'
|
||||
import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
|
||||
import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
|
||||
|
||||
export default {
|
||||
name: 'TaskDetailView',
|
||||
components: {
|
||||
BaseButton,
|
||||
CreatedUpdated,
|
||||
ChecklistSummary,
|
||||
TaskSubscription,
|
||||
Datepicker,
|
||||
|
@ -535,6 +547,18 @@ export default {
|
|||
canWrite() {
|
||||
return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
|
||||
},
|
||||
updatedSince() {
|
||||
return this.formatDateSince(this.task.updated)
|
||||
},
|
||||
updatedFormatted() {
|
||||
return this.formatDate(this.task.updated)
|
||||
},
|
||||
doneSince() {
|
||||
return this.formatDateSince(this.task.doneAt)
|
||||
},
|
||||
doneFormatted() {
|
||||
return this.formatDate(this.task.doneAt)
|
||||
},
|
||||
hasAttachments() {
|
||||
return this.$store.state.attachments.attachments.length > 0
|
||||
},
|
||||
|
@ -603,7 +627,6 @@ export default {
|
|||
}
|
||||
|
||||
this.task = await this.$store.dispatch('tasks/update', this.task)
|
||||
this.setActiveFields()
|
||||
|
||||
if (!showNotification) {
|
||||
return
|
||||
|
@ -684,7 +707,7 @@ $flash-background-duration: 750ms;
|
|||
|
||||
.subtitle {
|
||||
color: var(--grey-500);
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a {
|
||||
color: var(--grey-800);
|
||||
|
@ -712,15 +735,15 @@ $flash-background-duration: 750ms;
|
|||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title.input {
|
||||
// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
|
||||
min-height: calc(1.8rem * 1.125 + .6rem + 2px);
|
||||
.title.input {
|
||||
// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
|
||||
min-height: calc(1.8rem * 1.125 + .6rem + 2px);
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
|
||||
}
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
|
||||
}
|
||||
}
|
||||
|
||||
.title.task-id {
|
||||
|
@ -784,7 +807,7 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
|
||||
&.labels-list,
|
||||
.assignees {
|
||||
.assignees {
|
||||
:deep(.multiselect) {
|
||||
.input-wrapper {
|
||||
&:not(:focus-within):not(:hover) {
|
||||
|
@ -847,7 +870,7 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
|
||||
.action-buttons {
|
||||
a.button {
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
justify-content: left;
|
||||
|
@ -869,7 +892,7 @@ $flash-background-duration: 750ms;
|
|||
padding-bottom: 1rem;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.task-view * {
|
||||
|
@ -896,7 +919,7 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
|
||||
.flash-background-enter-from,
|
||||
.flash-background-enter-active {
|
||||
.flash-background-enter-active {
|
||||
animation: flash-background $flash-background-duration ease 1;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user