github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): display text label when items are selected across all canvas views (#11636)

Browse Source
This commit is contained in:
Hiep Le 2025-11-05 16:47:22 +07:00 committed by GitHub
parent c544ea1187
commit 6411d4df94
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx
View File

@ -5,12 +5,16 @@ type ConversationTabNavProps = {
icon: ComponentType<{ className: string }>;
onClick(): void;
isActive?: boolean;
label?: string;
className?: string;
};
export function ConversationTabNav({
icon: Icon,
onClick,
isActive,
label,
className,
}: ConversationTabNavProps) {
return (
<button
@ -19,18 +23,21 @@ export function ConversationTabNav({
onClick();
}}
className={cn(
"p-1 rounded-md cursor-pointer",
"flex items-center gap-2 rounded-md cursor-pointer",
"pl-1.5 pr-2 py-1",
"text-[#9299AA] bg-[#0D0F11]",
isActive && "bg-[#25272D] text-white",
isActive
? "hover:text-white hover:bg-tertiary"
: "hover:text-white hover:bg-[#0D0F11]",
isActive
? "focus-within:text-white focus-within:bg-tertiary"
: "focus-within:text-[#9299AA] focus-within:bg-[#0D0F11]",
isActive ? "focus-within:text-white" : "focus-within:text-[#9299AA]",
className,
)}
>
<Icon className={cn("w-5 h-5 text-inherit")} />
<Icon className={cn("w-5 h-5 text-inherit flex-shrink-0")} />
{isActive && label && (
<span className="text-sm font-medium whitespace-nowrap">{label}</span>
)}
</button>
);
}

18
frontend/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
View File

@ -92,6 +92,7 @@ export function ConversationTabs() {
onClick: () => onTabSelected("editor"),
tooltipContent: t(I18nKey.COMMON$CHANGES),
tooltipAriaLabel: t(I18nKey.COMMON$CHANGES),
label: t(I18nKey.COMMON$CHANGES),
},
{
isActive: isTabActive("vscode"),
@ -99,6 +100,7 @@ export function ConversationTabs() {
onClick: () => onTabSelected("vscode"),
tooltipContent: <VSCodeTooltipContent />,
tooltipAriaLabel: t(I18nKey.COMMON$CODE),
label: t(I18nKey.COMMON$CODE),
},
{
isActive: isTabActive("terminal"),
@ -106,6 +108,8 @@ export function ConversationTabs() {
onClick: () => onTabSelected("terminal"),
tooltipContent: t(I18nKey.COMMON$TERMINAL),
tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),
label: t(I18nKey.COMMON$TERMINAL),
className: "pl-2",
},
{
isActive: isTabActive("served"),
@ -113,6 +117,7 @@ export function ConversationTabs() {
onClick: () => onTabSelected("served"),
tooltipContent: t(I18nKey.COMMON$APP),
tooltipAriaLabel: t(I18nKey.COMMON$APP),
label: t(I18nKey.COMMON$APP),
},
{
isActive: isTabActive("browser"),
@ -120,6 +125,7 @@ export function ConversationTabs() {
onClick: () => onTabSelected("browser"),
tooltipContent: t(I18nKey.COMMON$BROWSER),
tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),
label: t(I18nKey.COMMON$BROWSER),
},
];
@ -132,7 +138,15 @@ export function ConversationTabs() {
>
{tabs.map(
(
{ icon, onClick, isActive, tooltipContent, tooltipAriaLabel },
{
icon,
onClick,
isActive,
tooltipContent,
tooltipAriaLabel,
label,
className,
},
index,
) => (
<ChatActionTooltip
@ -144,6 +158,8 @@ export function ConversationTabs() {
icon={icon}
onClick={onClick}
isActive={isActive}
label={label}
className={className}
/>
</ChatActionTooltip>
),