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

massive UploadAvatar improvements

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-01 12:02:09 +00:00
parent d158f51141
commit 494badfdaa
4 changed files with 59 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/src/Account.tsx
View File

@@ -57,11 +57,8 @@ function Account() {
return (
<SettingsPageLayout title="Account">
<form onSubmit={handleSubmit} className="flex flex-col p-4 gap-2 w-sm border">
<h2 className="text-xl font-600 mb-2">Account Details</h2>
<div>
<Label className="mb-4 block">Avatar</Label>
<UploadAvatar avatarURL={avatarURL} onAvatarUploaded={setAvatarUrl} />
</div>
<h2 className="text-xl font-600 mb-2 text-center">Account Details</h2>
<UploadAvatar avatarURL={avatarURL} onAvatarUploaded={setAvatarUrl} />
<Field
label="Full Name"
value={name}

27
packages/frontend/src/components/organisation-select.tsx
View File

@@ -5,7 +5,9 @@ import { Button } from "@/components/ui/button";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectSeparator,
SelectTrigger,
SelectValue,
@@ -40,20 +42,23 @@ export function OrganisationSelect({
onOpenChange={setOpen}
>
<SelectTrigger className="text-sm" isOpen={open}>
<SelectValue
placeholder={
selectedOrganisation ? `O: ${selectedOrganisation.Organisation.name}` : placeholder
}
/>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent side="bottom" position="popper">
{organisations.map((organisation) => (
<SelectItem key={organisation.Organisation.id} value={`${organisation.Organisation.id}`}>
{organisation.Organisation.name}
</SelectItem>
))}
<SelectGroup>
<SelectLabel>Organisations</SelectLabel>
{organisations.map((organisation) => (
<SelectItem
key={organisation.Organisation.id}
value={`${organisation.Organisation.id}`}
>
{organisation.Organisation.name}
</SelectItem>
))}
{organisations.length > 0 && <SelectSeparator />}
</SelectGroup>
{organisations.length > 0 && <SelectSeparator />}
<CreateOrganisation
trigger={
<Button variant="ghost" className={"w-full"} size={"sm"}>

21
packages/frontend/src/components/project-select.tsx
View File

@@ -5,7 +5,9 @@ import { Button } from "@/components/ui/button";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectSeparator,
SelectTrigger,
SelectValue,
@@ -42,17 +44,18 @@ export function ProjectSelect({
onOpenChange={setOpen}
>
<SelectTrigger className="text-sm" isOpen={open}>
<SelectValue
placeholder={selectedProject ? `P: ${selectedProject.Project.name}` : placeholder}
/>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent side="bottom" position="popper" align={"start"}>
{projects.map((project) => (
<SelectItem key={project.Project.id} value={`${project.Project.id}`}>
{project.Project.name}
</SelectItem>
))}
{projects.length > 0 && <SelectSeparator />}
<SelectGroup>
<SelectLabel>Projects</SelectLabel>
{projects.map((project) => (
<SelectItem key={project.Project.id} value={`${project.Project.id}`}>
{project.Project.name}
</SelectItem>
))}
{projects.length > 0 && <SelectSeparator />}
</SelectGroup>
<CreateProject
organisationId={organisationId}
trigger={

39
packages/frontend/src/components/upload-avatar.tsx
View File

@@ -1,3 +1,4 @@
import { Edit } from "lucide-react";
import { useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
@@ -18,6 +19,7 @@ export function UploadAvatar({
const [uploading, setUploading] = useState(false);
const [error, setError] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const [showEdit, setShowEdit] = useState(false);
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
@@ -40,9 +42,23 @@ export function UploadAvatar({
};
return (
<div className={cn("flex items-center gap-4", className)}>
<div className={cn("flex flex-col items-center gap-4", className)}>
{avatarURL && (
<img src={avatarURL} alt="Avatar" className="w-16 h-16 rounded-full border object-cover" />
<Button
variant="dummy"
type="button"
onClick={() => fileInputRef.current?.click()}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
className="w-24 h-24 rounded-full border-1 p-0 relative overflow-hidden"
>
<img src={avatarURL} alt="Avatar" className={cn("rounded-full")} />
{showEdit && (
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
<Edit className="size-6 text-white drop-shadow-md" />
</div>
)}
</Button>
)}
<input
type="file"
@@ -51,14 +67,17 @@ export function UploadAvatar({
accept="image/png,image/jpeg,image/webp,image/gif"
className="hidden"
/>
<Button
variant="outline"
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
>
{uploading ? "Uploading..." : label || avatarURL ? "Change Avatar" : "Upload Avatar"}
</Button>
{!avatarURL && (
<Button
variant="outline"
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
>
{uploading ? "Uploading..." : label || avatarURL ? "Change Avatar" : "Upload Avatar"}
</Button>
)}
{error && <Label className="text-destructive text-sm">{error}</Label>}
</div>
);