mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-15 11:42:15 +01:00
add light mode
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
import DialogModal from '@/packages/ui/src/DialogModal.vue';
|
||||
import { ref } from 'vue';
|
||||
import { ref, watch } from "vue";
|
||||
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
|
||||
import { useFocus } from '@vueuse/core';
|
||||
import { useTasksStore } from '@/utils/useTasks';
|
||||
@@ -21,10 +21,16 @@ const props = defineProps<{
|
||||
projectId: string;
|
||||
}>();
|
||||
|
||||
const taskProjectId = ref<string>(props.projectId);
|
||||
|
||||
watch(() => props.projectId, (value) => {
|
||||
taskProjectId.value = value;
|
||||
});
|
||||
|
||||
async function submit() {
|
||||
await createTask({
|
||||
name: taskName.value,
|
||||
project_id: props.projectId,
|
||||
project_id: taskProjectId.value,
|
||||
estimated_time: estimatedTime.value,
|
||||
});
|
||||
show.value = false;
|
||||
@@ -53,13 +59,13 @@ useFocus(taskNameInput, { initialValue: true });
|
||||
v-model="taskName"
|
||||
type="text"
|
||||
placeholder="Task Name"
|
||||
class="mt-1 block w-full"
|
||||
class="block w-full"
|
||||
required
|
||||
autocomplete="taskName"
|
||||
@keydown.enter="submit()" />
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<ProjectDropdown :model-value="projectId"></ProjectDropdown>
|
||||
<ProjectDropdown v-model="taskProjectId"></ProjectDropdown>
|
||||
</div>
|
||||
</div>
|
||||
<EstimatedTimeSection
|
||||
|
||||
@@ -24,7 +24,7 @@ const props = defineProps<{
|
||||
v-if="canUpdateTasks()"
|
||||
:aria-label="'Edit Task ' + props.task.name"
|
||||
data-testid="task_edit"
|
||||
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
|
||||
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
|
||||
@click="emit('edit')">
|
||||
<PencilSquareIcon
|
||||
class="w-5 text-icon-active"></PencilSquareIcon>
|
||||
@@ -33,7 +33,7 @@ const props = defineProps<{
|
||||
<button
|
||||
v-if="canUpdateTasks()"
|
||||
:aria-label="'Mark Task ' + props.task.name + ' as done'"
|
||||
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
|
||||
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
|
||||
@click="emit('done')">
|
||||
<CheckCircleIcon class="w-5 text-icon-active"></CheckCircleIcon>
|
||||
<span v-if="props.task.is_done">Mark as active</span>
|
||||
@@ -43,7 +43,7 @@ const props = defineProps<{
|
||||
v-if="canDeleteTasks()"
|
||||
:aria-label="'Delete Task ' + props.task.name"
|
||||
data-testid="task_delete"
|
||||
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
|
||||
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
|
||||
@click="emit('delete')">
|
||||
<TrashIcon class="w-5 text-icon-active"></TrashIcon>
|
||||
<span>Delete</span>
|
||||
|
||||
@@ -41,7 +41,7 @@ const createTask = ref(false);
|
||||
class="col-span-5 py-24 text-center">
|
||||
<PlusCircleIcon
|
||||
class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
|
||||
<h3 class="text-white font-semibold">No tasks found</h3>
|
||||
<h3 class="text-text-primary font-semibold">No tasks found</h3>
|
||||
<p v-if="canCreateTasks()" class="pb-5">
|
||||
Create your first task now!
|
||||
</p>
|
||||
|
||||
@@ -5,16 +5,16 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
|
||||
<template>
|
||||
<TableHeading>
|
||||
<div
|
||||
class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
|
||||
class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
|
||||
Task Name
|
||||
</div>
|
||||
<div class="px-3 py-1.5 text-left font-semibold text-white">
|
||||
<div class="px-3 py-1.5 text-left font-semibold text-text-primary">
|
||||
Total Time
|
||||
</div>
|
||||
<div class="px-3 py-1.5 text-left font-semibold text-white">
|
||||
<div class="px-3 py-1.5 text-left font-semibold text-text-primary">
|
||||
Progress
|
||||
</div>
|
||||
<div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
|
||||
<div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>
|
||||
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
|
||||
<span class="sr-only">Edit</span>
|
||||
</div>
|
||||
|
||||
@@ -33,7 +33,7 @@ const showTaskEditModal = ref(false);
|
||||
<template>
|
||||
<TableRow>
|
||||
<div
|
||||
class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
|
||||
class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
|
||||
<span class="overflow-ellipsis overflow-hidden">
|
||||
{{ task.name }}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user