adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 08:12:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

add project color selector

Browse Source
This commit is contained in:
Gregor Vostrak
2024-04-17 17:33:02 +02:00
committed by Gregor Vostrak
parent e593430d72
commit 5b86c85aca
2 changed files with 44 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/Components/Common/Project/ProjectColorSelector.vue Normal file
View File

@@ -0,0 +1,36 @@
<script setup lang="ts">
import Dropdown from '@/Components/Dropdown.vue';
import { colors } from '@/utils/color';
const model = defineModel<string>({ default: '' });
</script>
<template>
<div class="px-3">
<Dropdown align="bottom">
<template #trigger>
<div
:style="{
backgroundColor: model,
boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${model}30`,
}"
class="w-4 h-4 rounded-full cursor-pointer"></div>
</template>
<template #content>
<div class="text-white grid grid-cols-6 gap-3 px-3 py-3">
<div
v-for="color in colors"
:key="color"
@click="model = color"
:style="{
backgroundColor: color,
boxShadow: `var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) ${color}30`,
}"
class="w-4 h-4 rounded-full cursor-pointer"></div>
</div>
</template>
</Dropdown>
</div>
</template>
<style scoped></style>

16
resources/js/Components/Common/Project/ProjectCreateModal.vue
View File

@@ -13,6 +13,7 @@ import { twMerge } from 'tailwind-merge';
import Badge from '@/Components/Common/Badge.vue';
import { useClientsStore } from '@/utils/useClients';
import { storeToRefs } from 'pinia';
import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
const { createProject } = useProjectsStore();
const { clients } = storeToRefs(useClientsStore());
@@ -28,6 +29,11 @@ const project = ref<CreateProjectBody>({
async function submit() {
await createProject(project.value);
show.value = false;
project.value = {
name: '',
color: getRandomColor(),
client_id: null,
};
}
const projectNameInput = ref<HTMLInputElement | null>(null);
@@ -54,14 +60,8 @@ const currentClientName = computed(() => {
<template #content>
<div class="flex items-center space-x-4">
<div class="px-3">
<div
:style="{
backgroundColor: project.color,
boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${project.color}30`,
}"
class="w-4 h-4 rounded-full"></div>
</div>
<ProjectColorSelector
v-model="project.color"></ProjectColorSelector>
<div class="col-span-6 sm:col-span-4 flex-1">
<TextInput
id="projectName"