Spaces:
Paused
Paused
File size: 5,128 Bytes
8d1819a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | <html>
<head>
<script type="module">
import { store as projectsStore } from "/components/projects/projects-store.js";
import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
</script>
</head>
<body>
<div x-data="{ open: false }" @click.away="open = false" class="project-dropdown-container">
<template x-if="$store.projects && $store.chats && $store.chats.selectedContext">
<div>
<template x-if="$store.chats.selectedContext.project?.name">
<button @click="open = !open" type="button" class="button project-dropdown-button">
<span class="project-color-ball" :style="$store.chats.selectedContext.project.color ? { backgroundColor: $store.chats.selectedContext.project.color } : { border: '1px solid var(--color-border)' }"></span>
<span x-text="$store.chats.selectedContext.project.title"></span>
<span class="icon material-symbols-outlined">arrow_drop_down</span>
</button>
</template>
<template x-if="!$store.chats.selectedContext.project?.name">
<button @click="open = !open" type="button" class="button project-dropdown-button">
No project
<span class="icon material-symbols-outlined">arrow_drop_down</span>
</button>
</template>
<div x-show="open" x-init="$store.projects.loadProjectsList()" class="project-dropdown-menu" style="display: none;" x-transition>
<a href="#" @click.prevent="$store.projects.openProjectsModal(); open = false;" class="project-dropdown-item"><span class="icon material-symbols-outlined">snippet_folder</span> <span class="project-selector-item-text">Projects</span></a>
<a x-show="$store.chats.selectedContext.project?.name" href="#" @click.prevent="$store.projects.editActiveProject(); open = false;" class="project-dropdown-item"><span class="icon material-symbols-outlined">edit</span> <span class="project-selector-item-text">Edit <span x-text="$store.chats.selectedContext.project?.title"></span></span></a>
<a x-show="$store.chats.selectedContext.project?.name" href="#" @click.prevent="$store.projects.deactivateProject(); open = false;" class="project-dropdown-item"><span class="icon material-symbols-outlined">close</span> <span class="project-selector-item-text">Deactivate</span></a>
<!-- <a href="#" @click.prevent="$store.projects.openProjectsModal(); $store.projects.openCreateModal(); open = false;" class="project-dropdown-item">Create Project</a> -->
<hr x-show=" $store.projects.projectList.length > 0" class="project-dropdown-divider">
<template x-for="project in $store.projects.projectList" :key="project.name">
<a href="#" @click.prevent="$store.projects.activateProject(project.name); open = false;" class="project-dropdown-item">
<span class="project-color-ball" :style="project.color ? { backgroundColor: project.color } : { border: '1px solid var(--color-border)' }"></span>
<span class="project-selector-item-text" x-text="project.title"></span>
</a>
</template>
</div>
</div>
</template>
</div>
</body>
<style>
.project-dropdown-container {
position: relative;
display: inline-block;
}
.project-dropdown-button {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding-left: 0.5em;
padding-right: 0.5em;
}
.project-color-ball {
width: 0.6em;
height: 0.6em;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
flex-shrink: 0;
}
.project-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
background-color: var(--color-panel);
border: 1px solid var(--color-border);
border-radius: 4px;
padding: 0.5em 0;
min-width: 10rem;
max-width: 20em;
max-height: 70vh;
overflow-y: auto;
margin-top: 0.25rem;
}
.project-dropdown-item {
display: flex;
align-items: center;
margin: 0.25em 0.5em 0.25em 0.5em;
padding: 0.5em 1em;
color: var(--color-text-primary);
border-radius: var(--spacing-xs);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-dropdown-item:hover {
background-color: var(--color-background-hover);
}
.project-dropdown-divider {
height: 1px;
margin: 0.5rem 0;
overflow: hidden;
background-color: var(--color-border);
border: 0;
}
.project-selector-item-text {
margin-left: 0.5em;
}
</style>
</html>
|