feat: add tooltips to sidebar and console

seasick · Jan 30, 2024 · 243884e · 243884e
1 parent b348934
commit 243884e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/src/components/Workspace/Console.tsx b/src/components/Workspace/Console.tsx
@@ -1,5 +1,7 @@
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Box, IconButton } from '@mui/material';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import React, { useEffect } from 'react';
 
 import { useOpenSCADProvider } from '../OpenscadWorkerProvider';
@@ -15,14 +17,20 @@ export default function Console() {
   }, [log]);
 
   return (
-    <Box sx={{ position: 'relative' }} data-testid="console">
-      <IconButton
-        onClick={resetLog}
-        sx={{ position: 'static', top: 5, right: 5 }}
+    <Box sx={{ height: '100%' }} data-testid="console">
+      <div style={{ position: 'fixed', right: 5 }}>
+        <Tooltip title="Clear console" placement="right">
+          <IconButton onClick={resetLog} sx={{ backgroundColor: 'white' }}>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+      <pre
+        style={{
+          padding: 5,
+          margin: 0,
+        }}
       >
-        <DeleteIcon />
-      </IconButton>
-      <pre style={{ padding: 5, margin: 0 }}>
         {log?.join('\n')}
         <span ref={logRef} />
       </pre>

diff --git a/src/components/Workspace/Sidebar.tsx b/src/components/Workspace/Sidebar.tsx
@@ -5,6 +5,7 @@ import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 import TuneIcon from '@mui/icons-material/Tune';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 
 import { EditorMode } from '../Workspace';
@@ -40,18 +41,19 @@ export default function Sidebar({ onChange, mode }: Props) {
       spacing={1}
     >
       {buttons.map((button) => (
-        <IconButton
-          aria-label={button.label}
-          color={mode === button.value ? 'primary' : 'default'}
-          data-value={button.value}
-          key={button.value}
-          onClick={handleMode}
-          sx={{
-            backgroundColor: mode === button.value ? '#e0e0e0' : 'inherit',
-          }}
-        >
-          {button.icon}
-        </IconButton>
+        <Tooltip key={button.value} title={button.label} placement="right">
+          <IconButton
+            aria-label={button.label}
+            color={mode === button.value ? 'primary' : 'default'}
+            data-value={button.value}
+            onClick={handleMode}
+            sx={{
+              backgroundColor: mode === button.value ? '#e0e0e0' : 'inherit',
+            }}
+          >
+            {button.icon}
+          </IconButton>
+        </Tooltip>
       ))}
     </Stack>
   );