TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tab scrolling

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-07 00:16:02 -07:00
parent 91feeffc5a
commit beab0f7845
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/globals.css
View File

@ -152,3 +152,7 @@
user-select: none; user-select: none;
z-index: 1000; z-index: 1000;
} }
.tab-scroll::-webkit-scrollbar {
display: none;
}

6
frontend/components/editor/index.tsx
View File

@ -598,7 +598,7 @@ export default function CodeEditor({
minSize={30} minSize={30}
defaultSize={60} defaultSize={60}
> >
<div className="h-10 w-full flex gap-2"> <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
{tabs.map((tab) => ( {tabs.map((tab) => (
<Tab <Tab
key={tab.id} key={tab.id}
@ -712,7 +712,7 @@ export default function CodeEditor({
> >
{isOwner ? ( {isOwner ? (
<> <>
<div className="h-10 w-full flex gap-2 shrink-0"> <div className="h-10 w-full overflow-auto flex gap-2 shrink-0 tab-scroll">
{terminals.map((term) => ( {terminals.map((term) => (
<Tab <Tab
key={term.id} key={term.id}
@ -737,7 +737,7 @@ export default function CodeEditor({
}} }}
size="smIcon" size="smIcon"
variant={"secondary"} variant={"secondary"}
className={`font-normal select-none text-muted-foreground`} className={`font-normal shrink-0 select-none text-muted-foreground`}
> >
{creatingTerminal ? ( {creatingTerminal ? (
<Loader2 className="animate-spin w-4 h-4" /> <Loader2 className="animate-spin w-4 h-4" />

14
frontend/components/editor/live/avatars.tsx
View File

@ -1,6 +1,6 @@
"use client" "use client";
import { useOthers } from "@/liveblocks.config" import { useOthers } from "@/liveblocks.config";
const classNames = { const classNames = {
red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium", red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium",
@ -14,10 +14,10 @@ const classNames = {
purple: purple:
"w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium", "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium",
pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium", pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium",
} };
export function Avatars() { export function Avatars() {
const users = useOthers() const users = useOthers();
return ( return (
<> <>
@ -30,10 +30,12 @@ export function Avatars() {
.slice(0, 2) .slice(0, 2)
.map((letter) => letter[0].toUpperCase())} .map((letter) => letter[0].toUpperCase())}
</div> </div>
) );
})} })}
</div> </div>
{users.length > 0 ? (
<div className="h-full w-[1px] bg-border mx-2" /> <div className="h-full w-[1px] bg-border mx-2" />
) : null}
</> </>
) );
} }