mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-09-06 08:18:39 +00:00
Lots of visual tweaks
This commit is contained in:
Bruno Bergher
parent
bf466b0e25
commit
019f14d5e6
4 changed files with 52 additions and 42 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { X } from "lucide-react"
|
||||
import { Lightbulb, X } from "lucide-react"
|
||||
import { cn } from "@src/lib/utils"
|
||||
|
||||
interface CloudNotificationBannerProps {
|
||||
|
|
@ -36,29 +36,28 @@ export const CloudNotificationBanner = ({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative mx-3 mb-3 transition-all duration-200 ease-in-out",
|
||||
"bg-vscode-badge-background relative z-50 transition-all duration-200 ease-in-out",
|
||||
isAnimating ? "opacity-0 transform scale-95" : "opacity-100 transform scale-100",
|
||||
className,
|
||||
)}>
|
||||
{/* Main notification container with speech bubble */}
|
||||
<div
|
||||
className="relative bg-vscode-charts-blue text-white px-4 py-3 rounded-md cursor-pointer hover:bg-opacity-90 transition-colors"
|
||||
className="relative text-vscode-badge-foreground p-2 rounded-md cursor-pointer transition-colors"
|
||||
onClick={handleClick}>
|
||||
{/* Speech bubble triangle */}
|
||||
<div className="absolute top-1/2 right-0 transform translate-x-full -translate-y-1/2">
|
||||
<div
|
||||
className="w-0 h-0 border-l-[12px] border-r-0 border-t-[8px] border-b-[8px]"
|
||||
style={{
|
||||
borderLeftColor: "var(--vscode-charts-blue)",
|
||||
borderTopColor: "transparent",
|
||||
borderBottomColor: "transparent",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="absolute bg-vscode-badge-background w-3 h-1.5"
|
||||
style={{
|
||||
clipPath: "polygon(50% 0,100% 100%,0 100%)",
|
||||
top: "-6px",
|
||||
right: "15px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium pr-8">{t("chat:cloudNotification.message")}</span>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Lightbulb size={30} />
|
||||
<span className="text-xs">{t("chat:cloudNotification.message")}</span>
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
|
|
@ -66,9 +65,9 @@ export const CloudNotificationBanner = ({
|
|||
e.stopPropagation()
|
||||
handleDismiss()
|
||||
}}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 p-1 hover:bg-white hover:bg-opacity-20 rounded transition-colors"
|
||||
className="cursor-pointer"
|
||||
aria-label="Close notification">
|
||||
<X size={16} className="text-white" />
|
||||
<X size={14} className="text-vscode-badge-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { Cloud } from "lucide-react"
|
||||
import { Router } from "lucide-react"
|
||||
|
||||
import type { HistoryItem } from "@roo-code/types"
|
||||
|
||||
|
|
@ -26,27 +26,6 @@ export const TaskActions = ({ item, buttonsDisabled, showCloudNotification }: Ta
|
|||
|
||||
return (
|
||||
<div className="flex flex-row items-center">
|
||||
{/* Cloud icon button */}
|
||||
<StandardTooltip content="Cloud">
|
||||
<button
|
||||
className={cn(
|
||||
"relative inline-flex items-center justify-center",
|
||||
"bg-transparent border-none p-1.5",
|
||||
"rounded-md min-w-[28px] min-h-[28px]",
|
||||
"transition-all duration-150",
|
||||
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
|
||||
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
|
||||
"active:bg-[rgba(255,255,255,0.1)]",
|
||||
"cursor-pointer",
|
||||
showCloudNotification
|
||||
? "text-vscode-charts-blue opacity-100"
|
||||
: "text-vscode-foreground opacity-85",
|
||||
)}
|
||||
style={{ fontSize: 16.5 }}
|
||||
aria-label="Cloud">
|
||||
<Cloud size={16} />
|
||||
</button>
|
||||
</StandardTooltip>
|
||||
<IconButton
|
||||
iconClass="codicon-desktop-download"
|
||||
title={t("chat:task.export")}
|
||||
|
|
@ -87,6 +66,27 @@ export const TaskActions = ({ item, buttonsDisabled, showCloudNotification }: Ta
|
|||
</>
|
||||
)}
|
||||
<ShareButton item={item} disabled={false} showLabel={false} />
|
||||
|
||||
{/* Cloud icon button */}
|
||||
<div className="flex flex-grow-1 justify-end ml-2">
|
||||
<StandardTooltip content="Continue in Cloud from anywhere">
|
||||
<button
|
||||
onClick={() => console.log("Implement me")}
|
||||
className={cn(
|
||||
"flex gap-2 p-1.5 transition-all duration-150",
|
||||
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
|
||||
"active:bg-[rgba(255,255,255,0.1)]",
|
||||
"cursor-pointer",
|
||||
showCloudNotification
|
||||
? "text-vscode-charts-blue opacity-100"
|
||||
: "text-vscode-foreground opacity-85",
|
||||
)}
|
||||
style={{ fontSize: 16.5 }}>
|
||||
<span className="text-sm">Roomote Control</span>
|
||||
<Router size={14} />
|
||||
</button>
|
||||
</StandardTooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { memo, useRef, useState, useEffect } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { FoldVertical, ChevronUp, ChevronDown } from "lucide-react"
|
||||
import { FoldVertical, ChevronUp, ChevronDown, Router } from "lucide-react"
|
||||
import prettyBytes from "pretty-bytes"
|
||||
|
||||
import type { ClineMessage } from "@roo-code/types"
|
||||
|
|
@ -65,10 +65,12 @@ const TaskHeader = ({
|
|||
|
||||
const interval = setInterval(() => {
|
||||
const duration = Date.now() - task.ts
|
||||
const threshold = 2 * 60 * 1000 // 2 minutes
|
||||
|
||||
// Show notification if task has been running for more than 2 minutes
|
||||
// and hasn't been dismissed for this task
|
||||
const shouldShow = duration > 2 * 60 * 1000 && !dismissedCloudNotifications.has(taskId)
|
||||
|
||||
const shouldShow = duration > threshold && !dismissedCloudNotifications.has(taskId)
|
||||
setShowCloudNotification(shouldShow)
|
||||
}, 1000)
|
||||
|
||||
|
|
@ -198,6 +200,15 @@ const TaskHeader = ({
|
|||
</span>
|
||||
</StandardTooltip>
|
||||
{!!totalCost && <span>${totalCost.toFixed(2)}</span>}
|
||||
<div className="flex flex-grow justify-end gap-1 pr-0">
|
||||
<StandardTooltip content="Continue in Cloud from anywhere">
|
||||
<button
|
||||
onClick={() => console.log("Implement me")}
|
||||
className="shrink-0 min-h-[20px] min-w-[20px] p-[2px] cursor-pointer opacity-85 hover:opacity-100 bg-transparent border-none rounded-md">
|
||||
<Router size={14} />
|
||||
</button>
|
||||
</StandardTooltip>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Expanded state: Show task text and images */}
|
||||
|
|
|
|||
|
|
@ -380,6 +380,6 @@
|
|||
"clickToEdit": "Click to edit message"
|
||||
},
|
||||
"cloudNotification": {
|
||||
"message": "This might take a while. Grab a coffee and continue from anywhere with Cloud."
|
||||
"message": "This might take a while. Want to grab a coffee while Roo works? Get Cloud on your phone and touch grass."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue