vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Make scrollable areas more consistent (#952)

Browse Source 
Co-authored-by: wintonzheng <null>
This commit is contained in:
Shuchang Zheng
2024-10-10 06:59:03 -07:00
committed by GitHub
parent 39776842f3
commit 267adea411
4 changed files with 154 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
View File

@@ -10,7 +10,11 @@ import { AxiosError } from "axios";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { stringify as convertToYAML } from "yaml";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import {
ScrollArea,
ScrollAreaViewport,
ScrollBar,
} from "@/components/ui/scroll-area";
function createTaskFromTaskGenerationParameters(
values: TaskGenerationApiResponse,
@@ -178,21 +182,23 @@ function PromptBox() {
</div>
</div>
<ScrollArea>
<div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
{examplePrompts.map((examplePrompt) => {
return (
<div
key={examplePrompt}
className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
onClick={() => {
setPrompt(examplePrompt);
}}
>
{examplePrompt}
</div>
);
})}
</div>
<ScrollAreaViewport className="h-full w-full rounded-[inherit]">
<div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
{examplePrompts.map((examplePrompt) => {
return (
<div
key={examplePrompt}
className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
onClick={() => {
setPrompt(examplePrompt);
}}
>
{examplePrompt}
</div>
);
})}
</div>
</ScrollAreaViewport>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>

47
skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
View File

@@ -2,6 +2,7 @@ import { getClient } from "@/api/AxiosClient";
import { Action, ActionTypes, ReadableActionTypes } from "@/api/types";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import {
Tooltip,
@@ -155,29 +156,33 @@ function ScrollableActionList({
<ArrowDownIcon />
</Button>
</div>
<div className="w-full space-y-4 overflow-y-scroll px-4 pb-4">
{showStreamOption && (
<div
key="stream"
ref={(element) => {
refs.current[data.length] = element;
}}
className={cn(
"flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
{
"border-slate-300": activeIndex === "stream",
},
<ScrollArea>
<ScrollAreaViewport className="h-full w-full rounded-[inherit]">
<div className="w-full space-y-4 px-4 pb-4">
{showStreamOption && (
<div
key="stream"
ref={(element) => {
refs.current[data.length] = element;
}}
className={cn(
"flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
{
"border-slate-300": activeIndex === "stream",
},
)}
onClick={() => onActiveIndexChange("stream")}
>
<div className="flex items-center gap-2 text-lg">
<DotFilledIcon className="h-6 w-6 text-red-500" />
Live
</div>
</div>
)}
onClick={() => onActiveIndexChange("stream")}
>
<div className="flex items-center gap-2 text-lg">
<DotFilledIcon className="h-6 w-6 text-red-500" />
Live
</div>
{getReverseActions()}
</div>
)}
{getReverseActions()}
</div>
</ScrollAreaViewport>
</ScrollArea>
</div>
);
}