ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

chevron rotates when select is open

Browse Source
This commit is contained in:
Oliver Bryan
2025-12-22 19:37:31 +00:00
parent 393ce37b7f
commit e6d374f444
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/frontend/src/Index.tsx
View File

@@ -6,13 +6,14 @@ import SmallUserDisplay from "@/components/small-user-display";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { getAuthHeaders } from "@/lib/utils"; import { getAuthHeaders } from "@/lib/utils";
import LogOutButton from "./components/log-out-button"; import LogOutButton from "./components/log-out-button";
import Loading from "./components/loading";
function Index() { function Index() {
const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000"; const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord; const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
const [projectSelectOpen, setProjectSelectOpen] = useState(false);
const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null); const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
const [projects, setProjects] = useState<ProjectResponse[]>([]); const [projects, setProjects] = useState<ProjectResponse[]>([]);
const projectsRef = useRef(false); const projectsRef = useRef(false);
@@ -50,8 +51,8 @@ function Index() {
return ( return (
<main className="w-full h-full p-1"> <main className="w-full h-full p-1">
{/* header area */} {/* header area */}
<div className="flex gap-4 items-center justify-between"> <div className="flex gap-12 items-center justify-between">
<div className="flex gap-4 items-center"> <div className="flex gap-2 items-center">
<Select <Select
onValueChange={(value) => { onValueChange={(value) => {
if (value === "NONE") { if (value === "NONE") {
@@ -67,8 +68,9 @@ function Index() {
setSelectedProject(project); setSelectedProject(project);
setSelectedIssue(null); setSelectedIssue(null);
}} }}
onOpenChange={setProjectSelectOpen}
> >
<SelectTrigger className="h-8 lg:flex"> <SelectTrigger className="h-8 lg:flex" isOpen={projectSelectOpen}>
<SelectValue <SelectValue
placeholder={ placeholder={
selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project" selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"

9
packages/frontend/src/components/ui/select.tsx
View File

@@ -20,8 +20,10 @@ function SelectTrigger({
className, className,
size = "default", size = "default",
children, children,
isOpen,
...props ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
isOpen?: boolean;
size?: "sm" | "default"; size?: "sm" | "default";
}) { }) {
return ( return (
@@ -46,7 +48,10 @@ function SelectTrigger({
> >
{children} {children}
<SelectPrimitive.Icon asChild> <SelectPrimitive.Icon asChild>
<ChevronDownIcon className="size-4 opacity-50" /> <ChevronDownIcon
className="size-4 opacity-50"
style={{ rotate: isOpen ? "180deg" : "0deg" }}
/>
</SelectPrimitive.Icon> </SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
); );
@@ -73,7 +78,7 @@ function SelectContent({
"origin-(--radix-select-content-transform-origin) overflow-x-hidden", "origin-(--radix-select-content-transform-origin) overflow-x-hidden",
"overflow-y-auto border shadow-md", "overflow-y-auto border shadow-md",
position === "popper" && position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=bottom]:-translate-x-0.5 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[side=top]:-translate-x-0.5", "data-[side=bottom]:translate-y-1 data-[side=bottom]:-translate-x-1.5 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[side=top]:-translate-x-0.5",
className, className,
)} )}
position={position} position={position}