diff --git a/page/src/components/folder.tsx b/page/src/components/folder.tsx index bb3abf17..a5f5681d 100644 --- a/page/src/components/folder.tsx +++ b/page/src/components/folder.tsx @@ -14,12 +14,7 @@ import { ContextMenuSeparator, ContextMenuLabel, } from "@/components/ui/context-menu"; - -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip"; +import { TextTooltip } from "./text-tooltip"; export enum FolderElementType { Folder = 0, @@ -131,14 +126,9 @@ function renderElementWithContext(element: FolderElement, props: FolderProps) { return ( - - - {renderElement(element, props)} - - -

{element.name}

-
-
+ + {renderElement(element, props)} +
{trimFilename(element.name)} diff --git a/page/src/components/settings-menu.tsx b/page/src/components/settings-menu.tsx index a82f6478..5ff10b12 100644 --- a/page/src/components/settings-menu.tsx +++ b/page/src/components/settings-menu.tsx @@ -3,6 +3,7 @@ import { Checkbox } from "./ui/checkbox"; import { Label } from "./ui/label"; import { Settings } from "@/settings"; +import { TextTooltip } from "./text-tooltip"; interface SettingsMenuProps { settings: Settings; @@ -10,6 +11,20 @@ interface SettingsMenuProps { onChange: (settings: Settings) => void; } +interface SettingsLabelProps { + htmlFor?: string | undefined; + text: React.ReactNode; + tooltip: React.ReactNode; +} + +function SettingsLabel(props: SettingsLabelProps) { + return ( + + ); +} + export class SettingsMenu extends React.Component { constructor(props: SettingsMenuProps) { super(props); @@ -49,7 +64,11 @@ export class SettingsMenu extends React.Component { this.setState({ verbose: checked }); }} /> - +
@@ -60,7 +79,11 @@ export class SettingsMenu extends React.Component { this.setState({ concise: checked }); }} /> - +
@@ -71,7 +94,11 @@ export class SettingsMenu extends React.Component { this.setState({ silent: checked }); }} /> - +
@@ -82,7 +109,13 @@ export class SettingsMenu extends React.Component { this.setState({ bufferStdout: checked }); }} /> - +
@@ -93,7 +126,11 @@ export class SettingsMenu extends React.Component { this.setState({ execAccess: checked }); }} /> - +
@@ -104,7 +141,13 @@ export class SettingsMenu extends React.Component { this.setState({ persist: checked }); }} /> - +
@@ -116,7 +159,13 @@ export class SettingsMenu extends React.Component { this.setState({ wasm64: checked }); }} /> - +
); diff --git a/page/src/components/text-tooltip.tsx b/page/src/components/text-tooltip.tsx new file mode 100644 index 00000000..43f2c2d3 --- /dev/null +++ b/page/src/components/text-tooltip.tsx @@ -0,0 +1,21 @@ +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +export interface TextTooltipProps { + children?: React.ReactNode; + tooltip: React.ReactNode; +} + +export function TextTooltip(props: TextTooltipProps) { + return ( + + + {props.children} + + {props.tooltip} + + ); +} diff --git a/page/src/playground.tsx b/page/src/playground.tsx index bd0abdfe..c9e620a6 100644 --- a/page/src/playground.tsx +++ b/page/src/playground.tsx @@ -41,6 +41,7 @@ import { } from "@/components/ui/drawer"; import { FilesystemExplorer } from "./filesystem-explorer"; import { EmulationStatus } from "./emulator"; +import { TextTooltip } from "./components/text-tooltip"; interface PlaygroundProps {} interface PlaygroundState { @@ -344,16 +345,20 @@ export class Playground extends React.Component<
-
+
{!this.state.emulationStatus ? ( <> ) : ( <> - {this.state.emulationStatus.activeThreads} - + + {this.state.emulationStatus.activeThreads} + +
- {this.state.emulationStatus.executedInstructions.toLocaleString()} - + + {this.state.emulationStatus.executedInstructions.toLocaleString()} + + )}