feat(frontend): add tooltips to buttons

graphs4value · Apr 12, 2024 · 82bb6b9 · 82bb6b9
1 parent 8a93e57
commit 82bb6b9
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 194 deletions.
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -7,6 +7,7 @@
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { observer } from 'mobx-react-lite';
 
 import { useRootStore } from './RootStoreProvider';
@@ -16,12 +17,10 @@ export default observer(function ToggleDarkModeButton(): JSX.Element {
   const { darkMode } = themeStore;
 
   return (
-    <IconButton
-      color="inherit"
-      onClick={() => themeStore.toggleDarkMode()}
-      aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
-    >
-      {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
-    </IconButton>
+    <Tooltip title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}>
+      <IconButton color="inherit" onClick={() => themeStore.toggleDarkMode()}>
+        {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
+      </IconButton>
+    </Tooltip>
   );
 });
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
@@ -9,6 +9,7 @@ import AppBar from '@mui/material/AppBar';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -134,7 +135,7 @@ export default observer(function TopBar(): JSX.Element {
           py: 0.5,
         }}
       >
-        <RefineryIcon size={24} />
+        <RefineryIcon size={32} />
         <Typography variant="h6" component="h1" pl={1}>
           Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>}
         </Typography>
@@ -172,14 +173,15 @@ export default observer(function TopBar(): JSX.Element {
         >
           <GenerateButton editorStore={editorStore} hideWarnings={!veryLarge} />
           {large && (
-            <IconButton
-              aria-label="GitHub"
-              href="https://github.com/graphs4value/refinery"
-              target="_blank"
-              color="inherit"
-            >
-              <GitHubIcon />
-            </IconButton>
+            <Tooltip title="Check us out at GitHub">
+              <IconButton
+                href="https://github.com/graphs4value/refinery"
+                target="_blank"
+                color="inherit"
+              >
+                <GitHubIcon />
+              </IconButton>
+            </Tooltip>
           )}
         </Stack>
         <ToggleDarkModeButton />

diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx
@@ -9,6 +9,7 @@ import CloudOffIcon from '@mui/icons-material/CloudOff';
 import SyncIcon from '@mui/icons-material/Sync';
 import SyncProblemIcon from '@mui/icons-material/SyncProblem';
 import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { keyframes, styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 
@@ -37,37 +38,51 @@ export default observer(function ConnectButton({
     (editorStore.opening || editorStore.opened)
   ) {
     return (
-      <IconButton
-        onClick={() => editorStore.disconnect()}
-        aria-label="Disconnect"
-        color="inherit"
+      <Tooltip
+        title={
+          editorStore.opening
+            ? 'Connecting (click to cancel)'
+            : 'Connected (click to disconnect)'
+        }
       >
-        {editorStore.opening ? (
-          <AnimatedSyncIcon fontSize="small" />
-        ) : (
-          <CloudIcon fontSize="small" />
-        )}
-      </IconButton>
+        <IconButton
+          onClick={() => editorStore.disconnect()}
+          aria-label="Disconnect"
+          color="inherit"
+        >
+          {editorStore.opening ? (
+            <AnimatedSyncIcon fontSize="small" />
+          ) : (
+            <CloudIcon fontSize="small" />
+          )}
+        </IconButton>
+      </Tooltip>
     );
   }
 
+  let title: string;
   let disconnectedIcon: JSX.Element;
   if (editorStore === undefined) {
+    title = 'Connecting';
     disconnectedIcon = <SyncIcon fontSize="small" />;
   } else if (editorStore.connectionErrors.length > 0) {
+    title = 'Connection error (click to retry)';
     disconnectedIcon = <SyncProblemIcon fontSize="small" />;
   } else {
+    title = 'Disconnected (click to connect)';
     disconnectedIcon = <CloudOffIcon fontSize="small" />;
   }
 
   return (
-    <IconButton
-      disabled={editorStore === undefined}
-      onClick={() => editorStore?.connect()}
-      aria-label="Connect"
-      color="inherit"
-    >
-      {disconnectedIcon}
-    </IconButton>
+    <Tooltip title={title}>
+      <IconButton
+        disabled={editorStore === undefined}
+        onClick={() => editorStore?.connect()}
+        aria-label="Connect"
+        color="inherit"
+      >
+        {disconnectedIcon}
+      </IconButton>
+    </Tooltip>
   );
 });
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -22,6 +22,7 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Tooltip from '@mui/material/Tooltip';
 import { observer } from 'mobx-react-lite';
 
 import ConnectButton from './ConnectButton';
@@ -49,103 +50,113 @@ export default observer(function EditorButtons({
 }): JSX.Element {
   return (
     <Stack direction="row" flexGrow={1}>
-      <IconButton
-        disabled={editorStore === undefined}
-        onClick={() => editorStore?.openFile()}
-        aria-label="Open"
-        color="inherit"
-      >
-        <FileOpenIcon fontSize="small" />
-      </IconButton>
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.unsavedChanges}
-        onClick={() => editorStore?.saveFile()}
-        aria-label="Save"
-        color="inherit"
-      >
-        <SaveIcon fontSize="small" />
-      </IconButton>
-      {'showSaveFilePicker' in window && (
+      <Tooltip title="Open">
         <IconButton
           disabled={editorStore === undefined}
-          onClick={() => editorStore?.saveFileAs()}
-          aria-label="Save as"
+          onClick={() => editorStore?.openFile()}
           color="inherit"
         >
-          <SaveAsIcon fontSize="small" />
+          <FileOpenIcon fontSize="small" />
         </IconButton>
-      )}
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.canUndo}
-        onClick={() => editorStore?.undo()}
-        aria-label="Undo"
-        color="inherit"
-        sx={{ ml: 1 }}
-      >
-        <UndoIcon fontSize="small" />
-      </IconButton>
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.canRedo}
-        onClick={() => editorStore?.redo()}
-        aria-label="Redo"
-        color="inherit"
-      >
-        <RedoIcon fontSize="small" />
-      </IconButton>
-      <ToggleButtonGroup size="small" className="rounded" sx={{ mx: 1 }}>
-        <ToggleButton
-          selected={editorStore?.showLineNumbers ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.toggleLineNumbers()}
-          aria-label="Show line numbers"
-          value="show-line-numbers"
-        >
-          <FormatListNumberedIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
-          selected={editorStore?.colorIdentifiers ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.toggleColorIdentifiers()}
-          aria-label="Color identifiers"
-          value="color-identifiers"
+      </Tooltip>
+      <Tooltip title="Save">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.unsavedChanges}
+          onClick={() => editorStore?.saveFile()}
+          color="inherit"
         >
-          <LooksIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
-          selected={editorStore?.searchPanel?.state ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.searchPanel?.toggle()}
-          aria-label="Show find/replace"
-          {...(editorStore !== undefined &&
-            editorStore.searchPanel.state && {
-              'aria-controls': editorStore.searchPanel.id,
-            })}
-          value="show-search-panel"
+          <SaveIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      {'showSaveFilePicker' in window && (
+        <Tooltip title={`Save as\u2026`}>
+          <IconButton
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.saveFileAs()}
+            color="inherit"
+          >
+            <SaveAsIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      )}
+      <Tooltip title="Undo">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.canUndo}
+          onClick={() => editorStore?.undo()}
+          color="inherit"
+          sx={{ ml: 1 }}
         >
-          <SearchIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
-          selected={editorStore?.lintPanel?.state ?? false}
-          disabled={editorStore === undefined}
-          onClick={() => editorStore?.lintPanel.toggle()}
-          aria-label="Show diagnostics panel"
-          {...(editorStore !== undefined &&
-            editorStore.lintPanel.state && {
-              'aria-controls': editorStore.lintPanel.id,
-            })}
-          value="show-lint-panel"
+          <UndoIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Redo">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.canRedo}
+          onClick={() => editorStore?.redo()}
+          color="inherit"
         >
-          {getLintIcon(editorStore?.delayedErrors?.highestDiagnosticLevel)}
-        </ToggleButton>
+          <RedoIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <ToggleButtonGroup size="small" className="rounded" sx={{ mx: 1 }}>
+        <Tooltip title="Line numbers">
+          <ToggleButton
+            selected={editorStore?.showLineNumbers ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.toggleLineNumbers()}
+            value="show-line-numbers"
+          >
+            <FormatListNumberedIcon fontSize="small" />
+          </ToggleButton>
+        </Tooltip>
+        <Tooltip title="Color identifiers">
+          <ToggleButton
+            selected={editorStore?.colorIdentifiers ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.toggleColorIdentifiers()}
+            value="color-identifiers"
+          >
+            <LooksIcon fontSize="small" />
+          </ToggleButton>
+        </Tooltip>
+        <Tooltip title="Find and replace">
+          <ToggleButton
+            selected={editorStore?.searchPanel?.state ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.searchPanel?.toggle()}
+            {...(editorStore !== undefined &&
+              editorStore.searchPanel.state && {
+                'aria-controls': editorStore.searchPanel.id,
+              })}
+            value="show-search-panel"
+          >
+            <SearchIcon fontSize="small" />
+          </ToggleButton>
+        </Tooltip>
+        <Tooltip title="Diagnostics panel">
+          <ToggleButton
+            selected={editorStore?.lintPanel?.state ?? false}
+            disabled={editorStore === undefined}
+            onClick={() => editorStore?.lintPanel.toggle()}
+            {...(editorStore !== undefined &&
+              editorStore.lintPanel.state && {
+                'aria-controls': editorStore.lintPanel.id,
+              })}
+            value="show-lint-panel"
+          >
+            {getLintIcon(editorStore?.delayedErrors?.highestDiagnosticLevel)}
+          </ToggleButton>
+        </Tooltip>
       </ToggleButtonGroup>
-      <IconButton
-        disabled={editorStore === undefined || !editorStore.opened}
-        onClick={() => editorStore?.formatText()}
-        aria-label="Automatic format"
-        color="inherit"
-      >
-        <FormatPaintIcon fontSize="small" />
-      </IconButton>
+      <Tooltip title="Automatic format">
+        <IconButton
+          disabled={editorStore === undefined || !editorStore.opened}
+          onClick={() => editorStore?.formatText()}
+          color="inherit"
+        >
+          <FormatPaintIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
       <ConnectButton editorStore={editorStore} />
     </Stack>
   );