aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/components/Header
diff options
context:
space:
mode:
authorSascha <GlancingMind@outlook.com>2021-03-21 13:46:49 +0100
committerSascha <GlancingMind@outlook.com>2021-03-21 17:46:15 +0100
commit9fa40d3d0819aaa27a055ebb51ebdccd83bf1dfd (patch)
tree234733af6a7c069b9870d5cb397a4d60ad9dd629 /webui/src/components/Header
parenta332c085f82ddfc32adf581b0c907db6f2202d19 (diff)
downloadgit-bug-9fa40d3d0819aaa27a055ebb51ebdccd83bf1dfd.tar.gz
Add tooltip to unimplemented navigations
Diffstat (limited to 'webui/src/components/Header')
-rw-r--r--webui/src/components/Header/Header.tsx55
1 files changed, 40 insertions, 15 deletions
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 1fe7504f..dc649cb4 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -5,6 +5,7 @@ import AppBar from '@material-ui/core/AppBar';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import Toolbar from '@material-ui/core/Toolbar';
+import Tooltip from '@material-ui/core/Tooltip/Tooltip';
import { makeStyles } from '@material-ui/core/styles';
import { LightSwitch } from '../../components/Themer';
@@ -53,6 +54,12 @@ function NavTabs() {
setValue(newValue);
};
+ const tooltipMsg = `This feature doesn't exist yet. Come help us build it.`;
+
+ /*The span elements around disabled tabs are needed, as the tooltip
+ * won't be triggered by disabled elements.
+ * See: https://material-ui.com/components/tooltips/#disabled-elements
+ */
return (
<Tabs
centered
@@ -60,22 +67,40 @@ function NavTabs() {
onChange={handleChange}
aria-label="nav tabs example"
>
- <Tab disabled label="Code" component="a" href="/code" {...a11yProps(0)} />
+ <Tooltip title={tooltipMsg}>
+ <span>
+ <Tab
+ disabled
+ label="Code"
+ component="a"
+ href="/code"
+ {...a11yProps(0)}
+ />
+ </span>
+ </Tooltip>
<Tab label="Bugs" component="a" href="/" {...a11yProps(1)} />
- <Tab
- disabled
- label="Pull Requests"
- component="a"
- href="/pulls"
- {...a11yProps(2)}
- />
- <Tab
- disabled
- label="Settings"
- component="a"
- href="/settings"
- {...a11yProps(3)}
- />
+ <Tooltip title={tooltipMsg}>
+ <span>
+ <Tab
+ disabled
+ label="Pull Requests"
+ component="a"
+ href="/pulls"
+ {...a11yProps(2)}
+ />
+ </span>
+ </Tooltip>
+ <Tooltip title={tooltipMsg}>
+ <span>
+ <Tab
+ disabled
+ label="Settings"
+ component="a"
+ href="/settings"
+ {...a11yProps(3)}
+ />
+ </span>
+ </Tooltip>
</Tabs>
);
}