aimond/sapiens-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve article view mode selection with tooltips

Browse Source 
Replace text labels on grid and list view buttons with tooltips and remove unnecessary text.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/16cZmxV
This commit is contained in:
kimjaehyeon0101
2025-09-30 05:53:35 +00:00
parent 73f9ad199e
commit dc2aa8cf28
2 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/스크린샷 2025-09-30 오후 2.52.58_1759211582522.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

61
client/src/pages/MediaOutlet.tsx
View File

@ -7,6 +7,7 @@ import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List, Edit, Info } from "lucide-react"; import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List, Edit, Info } from "lucide-react";
import { useAuth } from "@/hooks/useAuth"; import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
@ -467,27 +468,45 @@ export default function MediaOutlet() {
<div className="mb-4"> <div className="mb-4">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h2 className="text-xl font-bold">Latest Articles</h2> <h2 className="text-xl font-bold">Latest Articles</h2>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2" role="group" aria-label="Article view mode">
<Button <TooltipProvider>
variant="outline" <Tooltip>
size="sm" <TooltipTrigger asChild>
onClick={() => setViewMode("grid")} <Button
className={viewMode === "grid" ? "bg-gray-600 text-white hover:bg-gray-700" : ""} variant="outline"
data-testid="button-grid-view" size="sm"
> onClick={() => setViewMode("grid")}
<Grid className="h-4 w-4 mr-2" /> className={viewMode === "grid" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
Grid aria-label="Grid view"
</Button> aria-pressed={viewMode === "grid"}
<Button data-testid="button-grid-view"
variant="outline" >
size="sm" <Grid className="h-4 w-4" />
onClick={() => setViewMode("list")} </Button>
className={viewMode === "list" ? "bg-gray-600 text-white hover:bg-gray-700" : ""} </TooltipTrigger>
data-testid="button-list-view" <TooltipContent>
> <p>Grid view</p>
<List className="h-4 w-4 mr-2" /> </TooltipContent>
List </Tooltip>
</Button> <Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={() => setViewMode("list")}
className={viewMode === "list" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
aria-label="List view"
aria-pressed={viewMode === "list"}
data-testid="button-list-view"
>
<List className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>List view</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div> </div>
</div> </div>