the Add Profile button has been moved, and the layout has been slightly changed.
This commit is contained in:
coolcoala
@@ -90,7 +90,6 @@ const MinimalHomePage: React.FC = () => {
|
|||||||
}
|
}
|
||||||
}, [profileItems, activateProfile]);
|
}, [profileItems, activateProfile]);
|
||||||
|
|
||||||
|
|
||||||
const handleProfileChange = useLockFn(async (uid: string) => {
|
const handleProfileChange = useLockFn(async (uid: string) => {
|
||||||
if (profiles?.current === uid) return;
|
if (profiles?.current === uid) return;
|
||||||
await activateProfile(uid, true);
|
await activateProfile(uid, true);
|
||||||
@@ -204,12 +203,47 @@ const MinimalHomePage: React.FC = () => {
|
|||||||
<SidebarTrigger />
|
<SidebarTrigger />
|
||||||
</div>
|
</div>
|
||||||
<div className="justify-self-center flex flex-col items-center gap-2">
|
<div className="justify-self-center flex flex-col items-center gap-2">
|
||||||
<div className="relative">
|
<div className="relative flex items-center justify-center">
|
||||||
{profileItems.length > 0 && (
|
{profileItems.length > 0 ? (
|
||||||
<div className="flex-shrink-0">
|
<>
|
||||||
|
<div className="absolute right-full mr-2">
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => viewerRef.current?.create()}
|
||||||
|
className={cn(
|
||||||
|
"backdrop-blur-sm bg-white/80 border-gray-300/60",
|
||||||
|
"dark:bg-white/5 dark:border-white/15",
|
||||||
|
"hover:bg-white/90 hover:border-gray-400/70",
|
||||||
|
"dark:hover:bg-white/10 dark:hover:border-white/20",
|
||||||
|
"transition-all duration-200"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<PlusCircle className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>{t("Add Profile")}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</div>
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="outline" className="w-full max-w-[250px] sm:max-w-xs">
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"w-full max-w-[250px] sm:max-w-xs",
|
||||||
|
"backdrop-blur-sm bg-white/80 border-gray-300/60",
|
||||||
|
"dark:bg-white/5 dark:border-white/15",
|
||||||
|
"hover:bg-white/90 hover:border-gray-400/70",
|
||||||
|
"dark:hover:bg-white/10 dark:hover:border-white/20",
|
||||||
|
"transition-all duration-200"
|
||||||
|
)}
|
||||||
|
>
|
||||||
<span className="truncate">{currentProfileName}</span>
|
<span className="truncate">{currentProfileName}</span>
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
@@ -228,17 +262,10 @@ const MinimalHomePage: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
))}
|
))}
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuItem onSelect={() => viewerRef.current?.create()}>
|
|
||||||
<PlusCircle className="mr-2 h-4 w-4" />
|
|
||||||
<span>{t("Add Profile")}</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{currentProfile?.type === 'remote' && (
|
{currentProfile?.type === 'remote' && (
|
||||||
<div className="absolute top-1/2 -translate-y-1/2 left-full ml-2">
|
<div className="absolute left-full ml-2">
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
@@ -247,7 +274,14 @@ const MinimalHomePage: React.FC = () => {
|
|||||||
size="icon"
|
size="icon"
|
||||||
onClick={handleUpdateProfile}
|
onClick={handleUpdateProfile}
|
||||||
disabled={isUpdating}
|
disabled={isUpdating}
|
||||||
className="flex-shrink-0"
|
className={cn(
|
||||||
|
"flex-shrink-0",
|
||||||
|
"backdrop-blur-sm bg-white/70 border border-gray-300/50",
|
||||||
|
"dark:bg-white/5 dark:border-white/10",
|
||||||
|
"hover:bg-white/85 hover:border-gray-400/60",
|
||||||
|
"dark:hover:bg-white/10 dark:hover:border-white/15",
|
||||||
|
"transition-all duration-200"
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{isUpdating ? <Loader2 className="h-5 w-5 animate-spin" /> : <RefreshCw className="h-5 w-5" />}
|
{isUpdating ? <Loader2 className="h-5 w-5 animate-spin" /> : <RefreshCw className="h-5 w-5" />}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -257,6 +291,48 @@ const MinimalHomePage: React.FC = () => {
|
|||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="absolute right-full mr-2">
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => viewerRef.current?.create()}
|
||||||
|
className={cn(
|
||||||
|
"backdrop-blur-sm bg-white/80 border-gray-300/60",
|
||||||
|
"dark:bg-white/5 dark:border-white/15",
|
||||||
|
"hover:bg-white/90 hover:border-gray-400/70",
|
||||||
|
"dark:hover:bg-white/10 dark:hover:border-white/20",
|
||||||
|
"transition-all duration-200"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<PlusCircle className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>{t("Add Profile")}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
disabled
|
||||||
|
className={cn(
|
||||||
|
"max-w-[250px] sm:max-w-xs opacity-50 cursor-not-allowed",
|
||||||
|
"backdrop-blur-sm bg-white/50 border-gray-300/40",
|
||||||
|
"dark:bg-white/3 dark:border-white/10"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="truncate">{t("No profiles available")}</span>
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-30" />
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
|
|||||||
Reference in New Issue
Block a user