vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: improve UX/UI on Home and TaskDetailView #3863

Closed
Jakob wants to merge 11 commits from Jakob/frontend:feat/improve-uxui into main
pull from: Jakob/frontend:feat/improve-uxui
merge into: vikunja:main
Conversation 4 Commits 11 Files Changed 7 +64 -45
7 changed files with 64 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/project/partials/ProjectCardGrid.vue
View File

@ -40,7 +40,7 @@ const filteredProjects = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.project-grid { .project-grid {
--project-grid-item-height: 150px; --project-grid-item-height: 100px;
--project-grid-gap: 1rem; --project-grid-gap: 1rem;
margin: 0; // reset li margin: 0; // reset li
list-style-type: none; list-style-type: none;

3
src/components/tasks/partials/singleTaskInProject.vue
View File

@ -386,7 +386,8 @@ function focusTaskLink() {
} }
.task-project { .task-project {
width: auto; min-width: 60px; //TODO: Quickfix, find a better way to make a nice vertical alignment
konrad commented 2023-12-27 17:45:13 +00:00
Review
Copy Link

What exactly is the goal here? Can you point it out with before/after screenshots?

What exactly is the goal here? Can you point it out with before/after screenshots?
display: inline-block;
color: var(--grey-400); color: var(--grey-400);
font-size: .9rem; font-size: .9rem;
white-space: nowrap; white-space: nowrap;

4
src/styles/theme/_index.scss
View File

@ -9,4 +9,6 @@
@import "loading"; @import "loading";
@import "flatpickr"; @import "flatpickr";
@import 'helpers'; @import 'helpers';
@import 'navigation'; @import 'navigation';
@import 'button';
@import 'cards';

3
src/styles/theme/button.scss Normal file
View File

@ -0,0 +1,3 @@
.button.border {
border: 1px solid;
}

8
src/styles/theme/cards.scss Normal file
View File

@ -0,0 +1,8 @@
.section-card {
konrad commented 2023-12-27 17:50:38 +00:00
Review
Copy Link

What is the difference between this and the existing card component?

What is the difference between this and the existing card component?
background: var(--card-background-color);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
color: var(--card-color);
padding: 20px;
margin: 0 0 20px 0;
}

35
src/views/tasks/ShowTasks.vue
View File

@ -3,21 +3,25 @@
<h3 class="mb-2 title"> <h3 class="mb-2 title">
{{ pageTitle }} {{ pageTitle }}
</h3> </h3>
<p v-if="!showAll" class="show-tasks-options"> <div v-if="!showAll" class="show-tasks-options section-card columns">
<datepicker-with-range @update:model-value="setDate"> <div class="column">
<template #trigger="{toggle}"> <datepicker-with-range @update:model-value="setDate">
<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2"> <template #trigger="{toggle}">
{{ $t('task.show.select') }} <x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
</x-button> {{ $t('task.show.select') }}
</template> </x-button>
</datepicker-with-range> </template>
<fancycheckbox @update:model-value="setShowNulls" :model-value="showNulls" class="mr-2"> </datepicker-with-range>
{{ $t('task.show.noDates') }} </div>
</fancycheckbox> <div class="column">
<fancycheckbox @update:model-value="setShowOverdue" :model-value="showOverdue"> <fancycheckbox @update:model-value="setShowNulls" :model-value="showNulls" class="mr-2">
{{ $t('task.show.overdue') }} {{ $t('task.show.noDates') }}
</fancycheckbox> </fancycheckbox>
</p> <fancycheckbox @update:model-value="setShowOverdue" :model-value="showOverdue">
{{ $t('task.show.overdue') }}
</fancycheckbox>
</div>
</div>
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo"> <template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3> <h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
<LlamaCool class="llama-cool"/> <LlamaCool class="llama-cool"/>
@ -213,6 +217,7 @@ watchEffect(() => setTitle(pageTitle.value))
.show-tasks-options { .show-tasks-options {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-flow: row wrap;
} }
.llama-cool { .llama-cool {

54
src/views/tasks/TaskDetailView.vue
View File

@ -8,28 +8,29 @@
> >
<!-- Removing everything until the task is loaded to prevent empty initialization of other components --> <!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
<div class="task-view" v-if="visible"> <div class="task-view" v-if="visible">
<Heading <div class="section-card">
:task="task" <Heading
@update:task="Object.assign(task, $event)" :task="task"
:can-write="canWrite" @update:task="Object.assign(task, $event)"
ref="heading" :can-write="canWrite"
/> ref="heading"
<h6 class="subtitle" v-if="project?.id"> />
<template v-for="p in projectStore.getAncestors(project)" :key="p.id"> <h6 class="subtitle" v-if="project?.id">
<router-link :to="{ name: 'project.index', params: { projectId: p.id } }"> <template v-for="p in projectStore.getAncestors(project)" :key="p.id">
{{ getProjectTitle(p) }} <router-link :to="{ name: 'project.index', params: { projectId: p.id } }">
</router-link> {{ getProjectTitle(p) }}
<span class="has-text-grey-light" v-if="p.id !== project?.id"> &gt; </span> </router-link>
</template> <span class="has-text-grey-light" v-if="p.id !== project?.id"> &gt; </span>
</h6> </template>
</h6>
</div>
<checklist-summary :task="task"/> <checklist-summary :task="task"/>
<!-- Content and buttons --> <!-- Content and buttons -->
<div class="columns mt-2"> <div class="columns mt-2">
<!-- Content --> <!-- Content -->
<div :class="{'is-two-thirds': canWrite}" class="column detail-content"> <div :class="{'is-two-thirds': canWrite}" class="column detail-content">
<div class="columns details"> <div class="columns details section-card">
<div class="column assignees" v-if="activeFields.assignees"> <div class="column assignees" v-if="activeFields.assignees">
<!-- Assignees --> <!-- Assignees -->
<div class="detail-title"> <div class="detail-title">
@ -209,7 +210,7 @@
</div> </div>
<!-- Labels --> <!-- Labels -->
<div class="labels-list details" v-if="activeFields.labels"> <div class="labels-list details section-card" v-if="activeFields.labels">
<div class="detail-title"> <div class="detail-title">
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="tags"/> <icon icon="tags"/>
@ -224,7 +225,7 @@
</div> </div>
<!-- Description --> <!-- Description -->
<div class="details content description"> <div class="details content description section-card">
<description <description
:model-value="task" :model-value="task"
@update:modelValue="Object.assign(task, $event)" @update:modelValue="Object.assign(task, $event)"
@ -234,7 +235,7 @@
</div> </div>
<!-- Attachments --> <!-- Attachments -->
<div class="content attachments" v-if="activeFields.attachments || hasAttachments"> <div class="content attachments section-card" v-if="activeFields.attachments || hasAttachments">
<attachments <attachments
:edit-enabled="canWrite" :edit-enabled="canWrite"
:task="task" :task="task"
@ -244,7 +245,7 @@
</div> </div>
<!-- Related Tasks --> <!-- Related Tasks -->
<div class="content details mb-0" v-if="activeFields.relatedTasks"> <div class="content details section-card" v-if="activeFields.relatedTasks">
<h3> <h3>
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="sitemap"/> <icon icon="sitemap"/>
@ -262,7 +263,7 @@
</div> </div>
<!-- Move Task --> <!-- Move Task -->
<div class="content details" v-if="activeFields.moveProject"> <div class="content details section-card" v-if="activeFields.moveProject">
<h3> <h3>
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="list"/> <icon icon="list"/>
@ -280,7 +281,9 @@
</div> </div>
<!-- Comments --> <!-- Comments -->
<comments :can-write="canWrite" :task-id="taskId"/> <div class="section-card">
<comments :can-write="canWrite" :task-id="taskId"/>
</div>
</div> </div>
<!-- Task Actions --> <!-- Task Actions -->
@ -290,7 +293,7 @@
:class="{'is-success': !task.done}" :class="{'is-success': !task.done}"
:shadow="task.done" :shadow="task.done"
@click="toggleTaskDone()" @click="toggleTaskDone()"
class="is-outlined has-no-border" class="is-outlined border"
konrad commented 2023-12-27 17:48:05 +00:00
Review
Copy Link

I don't think this is an improvment. The button should either have no shadow or the one already set up. A 1px border looks out of place.

I don't think this is an improvment. The button should either have no shadow or the one already set up. A 1px border looks out of place.
icon="check-double" icon="check-double"
variant="secondary" variant="secondary"
v-shortcut="'t'" v-shortcut="'t'"
@ -428,7 +431,7 @@
@click="showDeleteModal = true" @click="showDeleteModal = true"
icon="trash-alt" icon="trash-alt"
:shadow="false" :shadow="false"
class="is-danger is-outlined has-no-border" class="is-danger is-outlined border"
v-shortcut="'Shift+Delete'" v-shortcut="'Shift+Delete'"
> >
{{ $t('task.detail.actions.delete') }} {{ $t('task.detail.actions.delete') }}
@ -858,7 +861,6 @@ function setRelatedTasksActive() {
opacity: 0; opacity: 0;
} }
.subtitle { .subtitle {
color: var(--grey-500); color: var(--grey-500);
margin-bottom: 1rem; margin-bottom: 1rem;
@ -914,7 +916,6 @@ h3 .button {
.details { .details {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
flex-flow: row wrap; flex-flow: row wrap;
margin-bottom: 0;
.detail-title { .detail-title {
display: block; display: block;
@ -986,7 +987,6 @@ h3 .button {
} }
.attachments { .attachments {
margin-bottom: 0;
konrad commented 2023-12-27 17:56:32 +00:00
Review
Copy Link

Why remove the spacing?

Why remove the spacing?
table tr:last-child td { table tr:last-child td {
border-bottom: none; border-bottom: none;