Skip to content

Commit eb6af23

Browse files
krystian50krystian50
authored
Change debugger layout to fit mobile (#331)
* Change colors * Add mobile layout * disable drawer * typo
1 parent 75000d0 commit eb6af23

File tree

17 files changed

+204
-94
lines changed

17 files changed

+204
-94
lines changed

‎src/App.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,20 @@ function App() {
1515
return (
1616
<>
1717
<Header />
18-
<div className="p-3 text-left w-screen">
18+
<div className="text-left w-screen">
1919
<div className="flex flex-col gap-5">
20-
<div className="grid grid-rows md:grid-cols-12 gap-1.5 pt-2">
21-
<div className="col-span-12 flex justify-center"> {pvmInitialized ? <DebuggerControlls /> : null}</div>
22-
23-
<Routes>
24-
<Route index element={pvmInitialized ? <DebuggerContent /> : <Navigate to={"/load"} />} />
25-
<Route path="load" element={<ProgramLoader />} />
26-
</Routes>
20+
<div className="mt-7 mb-3 flex justify-center max-sm:hidden">
21+
{pvmInitialized ? (
22+
<div className="rounded-xl border">
23+
<DebuggerControlls />
24+
</div>
25+
) : null}
2726
</div>
27+
28+
<Routes>
29+
<Route index element={pvmInitialized ? <DebuggerContent /> : <Navigate to={"/load"} />} />
30+
<Route path="load" element={<ProgramLoader />} />
31+
</Routes>
2832
</div>
2933
</div>
3034
<ToastContainer />

‎src/components/DebuggerControlls/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const DebuggerControlls = () => {
9090
};
9191

9292
return (
93-
<div className="flex align-middle max-sm:justify-between mb-3 bg-gray-100 p-2 rounded-xl border border-gray-200">
93+
<div className="flex align-middle max-sm:justify-between bg-gray-100 p-2 w-full">
9494
<div className="md:mr-3">
9595
<ProgramLoader
9696
initialState={initialState}

‎src/components/DebuggerSettings/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const DebuggerSettings = ({ withLabel }: { withLabel?: boolean }) => {
5050
<Dialog>
5151
<DialogTrigger>
5252
<div className="mt-2">
53-
{withLabel ? <span className="mr-2 text-white">Settings</span> : <Settings className="text-gray-400" />}
53+
{withLabel ? <span className="mr-2 text-white">Settings</span> : <Settings className="text-gray-700" />}
5454
</div>
5555
</DialogTrigger>
5656
<DialogContent>

‎src/components/Instructions/InstructionItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const InstructionItem = forwardRef(
9292
return (
9393
<TableRow
9494
ref={ref}
95-
className={classNames("hover:bg-gray-300", { "opacity-50": isLast })}
95+
className={classNames("hover:bg-gray-300", { "opacity-50": isLast }, "overflow-hidden")}
9696
test-id="instruction-item"
9797
style={{
9898
backgroundColor,

‎src/components/MemoryPreview/MemoryInfinite.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -386,21 +386,23 @@ export const MemoryInfinite = () => {
386386

387387
return (
388388
<div className="overflow-auto p-1 h-[62vh] flex flex-col">
389-
<AddressInput
390-
value={selectedAddress !== null ? selectedAddress.toString() : ""}
391-
onChange={async (address: number | null) => {
392-
if (address === null) {
393-
setSelectedAddress(address);
394-
return;
395-
}
396-
397-
await jumpToAddress(address);
398-
setSelectedAddress(address);
399-
}}
400-
placeholder="Jump to address"
401-
/>
402389
<MemoryTable selectedAddress={selectedAddress} hasError={!!error} loadMoreItems={loadMoreItems} />
403390
{error && <div className="text-red-500 mt-3">{error}</div>}
391+
<div className="mt-2">
392+
<AddressInput
393+
value={selectedAddress !== null ? selectedAddress.toString() : ""}
394+
onChange={async (address: number | null) => {
395+
if (address === null) {
396+
setSelectedAddress(address);
397+
return;
398+
}
399+
400+
await jumpToAddress(address);
401+
setSelectedAddress(address);
402+
}}
403+
placeholder="Jump to address"
404+
/>
405+
</div>
404406
</div>
405407
);
406408
};

‎src/components/MobileDebuggerControlls/ControllsDrawer.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Button } from "@/components/ui/button";
2+
import { Drawer, DrawerClose, DrawerContent, DrawerFooter } from "@/components/ui/drawer";
3+
4+
export const ControllsDrawer = () => {
5+
return (
6+
<Drawer defaultOpen handleOnly>
7+
<DrawerContent>
8+
weffrg
9+
<DrawerFooter>
10+
<DrawerClose asChild>
11+
<Button variant="outline">Close</Button>
12+
</DrawerClose>
13+
</DrawerFooter>
14+
</DrawerContent>
15+
</Drawer>
16+
);
17+
};

‎src/components/MobileDebuggerControlls/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { DebuggerControlls } from "../DebuggerControlls";
2+
import { NumeralSystemSwitch } from "../NumeralSystemSwitch";
3+
// import { ControllsDrawer } from "./ControllsDrawer";
4+
5+
export const MobileDebuggerControls = () => {
6+
return (
7+
<div>
8+
{/* <ControllsDrawer /> */}
9+
<div className="flex items-center bg-[#F6F6F6] p-2">
10+
<DebuggerControlls />
11+
<NumeralSystemSwitch className="" />
12+
</div>
13+
</div>
14+
);
15+
};

‎src/components/NumeralSystemSwitch/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import { Switch } from "@/components/ui/switch.tsx";
33
import { useContext } from "react";
44
import { NumeralSystemContext } from "@/context/NumeralSystemContext";
55
import { NumeralSystem } from "@/context/NumeralSystem";
6-
import classNames from "classnames";
76

87
export const NumeralSystemSwitch = ({ className }: { className: string }) => {
98
const { setNumeralSystem, numeralSystem } = useContext(NumeralSystemContext);
109

1110
return (
1211
<div className={`flex items-center space-x-2 ${className}`}>
13-
<Label htmlFor="numerical-system-mode" className={classNames({ "text-gray-500": numeralSystem })}>
12+
<Label htmlFor="numerical-system-mode" className={!numeralSystem ? "text-white" : "text-gray-600"}>
1413
Dec
1514
</Label>
1615
<Switch
16+
className="border-[#3B4040]"
1717
id="numerical-system-mode"
1818
checked={numeralSystem === NumeralSystem.HEXADECIMAL}
1919
onCheckedChange={(checked) => setNumeralSystem(checked ? NumeralSystem.HEXADECIMAL : NumeralSystem.DECIMAL)}
2020
/>
21-
<Label htmlFor="numerical-system-mode" className={classNames({ "text-gray-500": !numeralSystem })}>
21+
<Label htmlFor="numerical-system-mode" className={numeralSystem ? "text-white" : "text-gray-600"}>
2222
Hex
2323
</Label>
2424
</div>

‎src/components/ProgramLoader/Loader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) =
4949
);
5050

5151
return (
52-
<div className="border-2 flex-1 flex flex-col w-full h-full rounded-lg">
53-
<h2 className="text-lg mb-4 bg-[#4BB6AD] text-white font-light p-2 rounded-ss-lg rounded-se-lg">
52+
<div className="flex-1 flex flex-col w-full h-full">
53+
<h2 className="text-lg mb-4 bg-[#4BB6AD] text-white font-light p-2 sm:rounded-ss-lg sm:rounded-se-lg">
5454
Start with an example program or upload your file
5555
</h2>
5656
<div className="flex flex-col p-4 justify-around h-full">

‎src/components/ProgramLoader/index.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
Dialog,
3-
DialogContent,
4-
DialogDescription,
5-
DialogHeader,
6-
DialogTitle,
7-
DialogTrigger,
8-
} from "@/components/ui/dialog";
1+
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
92
import { Button } from "@/components/ui/button.tsx";
103
import { useState } from "react";
114
import { InitialState } from "@/types/pvm";
@@ -26,19 +19,11 @@ export const ProgramLoader = (props: { initialState: InitialState; program: numb
2619
}}
2720
>
2821
<DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
29-
<Button>
30-
<Upload size="12px" className="mr-2" /> Load
22+
<Button className="text-white">
23+
<Upload size="12px" /> <span className="max-sm:hidden ml-2">Load</span>
3124
</Button>
3225
</DialogTrigger>
3326
<DialogContent className="min-h-[500px] max-h-[85vh] flex flex-col overflow-auto m-0 p-0 border-0">
34-
<DialogHeader>
35-
<DialogTitle>
36-
<h2 className="text-lg mb-4 bg-[#4BB6AD] text-white font-light p-2">
37-
Start with an example program or upload your file
38-
</h2>
39-
</DialogTitle>
40-
<DialogDescription></DialogDescription>
41-
</DialogHeader>
4227
<Loader {...props} setIsDialogOpen={setIsDialogOpen} />
4328
</DialogContent>
4429
</Dialog>

0 commit comments

Comments
 (0)