[arvados-workbench2] created: 2.7.0-1-gf79ee597
git repository hosting
git at public.arvados.org
Thu Sep 28 14:30:40 UTC 2023
at f79ee597833b880551baff9aef059919d80d5cd7 (commit)
commit f79ee597833b880551baff9aef059919d80d5cd7
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Thu Sep 28 10:30:25 2023 -0400
21002: fixed tooltip focus on notificatoin icon Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index bb661bc2..39cce048 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -2,11 +2,11 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import React from 'react';
-import Menu from '@material-ui/core/Menu';
-import IconButton from '@material-ui/core/IconButton';
-import { PopoverOrigin } from '@material-ui/core/Popover';
-import { Tooltip } from '@material-ui/core';
+import React from "react";
+import Menu from "@material-ui/core/Menu";
+import IconButton from "@material-ui/core/IconButton";
+import { PopoverOrigin } from "@material-ui/core/Popover";
+import { Tooltip } from "@material-ui/core";
interface DropdownMenuProps {
id: string;
@@ -20,12 +20,12 @@ interface DropdownMenuState {
export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState> {
state = {
- anchorEl: undefined
+ anchorEl: undefined,
};
transformOrigin: PopoverOrigin = {
vertical: -50,
- horizontal: 0
+ horizontal: 0,
};
render() {
@@ -33,7 +33,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMen
const { anchorEl } = this.state;
return (
<div>
- <Tooltip title={title}>
+ <Tooltip
+ title={title}
+ disableFocusListener>
<IconButton
aria-owns={anchorEl ? id : undefined}
aria-haspopup="true"
@@ -57,9 +59,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMen
handleClose = () => {
this.setState({ anchorEl: undefined });
- }
+ };
handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
this.setState({ anchorEl: event.currentTarget });
- }
+ };
}
diff --git a/src/views-components/main-app-bar/notifications-menu.tsx b/src/views-components/main-app-bar/notifications-menu.tsx
index ca97a612..f415c7d5 100644
--- a/src/views-components/main-app-bar/notifications-menu.tsx
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -26,11 +26,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
type NotificationsMenuProps = {
isOpen: boolean;
bannerUUID?: string;
-}
+};
type NotificationsMenuComponentProps = NotificationsMenuProps & {
openBanner: any;
-}
+};
export const NotificationsMenuComponent = (props: NotificationsMenuComponentProps) => {
const { isOpen, openBanner } = props;
@@ -39,41 +39,56 @@ export const NotificationsMenuComponent = (props: NotificationsMenuComponentProp
const menuItems: any[] = [];
if (!isOpen && bannerResult) {
- menuItems.push(<MenuItem><span onClick={openBanner}>Restore Banner</span></MenuItem>);
+ menuItems.push(
+ <MenuItem>
+ <span onClick={openBanner}>Restore Banner</span>
+ </MenuItem>
+ );
}
const toggleTooltips = useCallback(() => {
if (tooltipResult) {
localStorage.removeItem(TOOLTIP_LOCAL_STORAGE_KEY);
} else {
- localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, 'true');
+ localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, "true");
}
window.location.reload();
}, [tooltipResult]);
if (tooltipResult) {
- menuItems.push(<MenuItem><span onClick={toggleTooltips}>Enable tooltips</span></MenuItem>);
+ menuItems.push(
+ <MenuItem>
+ <span onClick={toggleTooltips}>Enable tooltips</span>
+ </MenuItem>
+ );
} else {
- menuItems.push(<MenuItem><span onClick={toggleTooltips}>Disable tooltips</span></MenuItem>);
+ menuItems.push(
+ <MenuItem>
+ <span onClick={toggleTooltips}>Disable tooltips</span>
+ </MenuItem>
+ );
}
if (menuItems.length === 0) {
menuItems.push(<MenuItem>You are up to date</MenuItem>);
}
- return (<DropdownMenu
- icon={
- <Badge
- badgeContent={0}
- color="primary">
- <NotificationIcon />
- </Badge>}
- id="account-menu"
- title="Notifications">
- {
- menuItems.map((item, i) => <div key={i}>{item}</div>)
- }
- </DropdownMenu>);
-}
+ return (
+ <DropdownMenu
+ icon={
+ <Badge
+ badgeContent={0}
+ color="primary">
+ <NotificationIcon />
+ </Badge>
+ }
+ id="account-menu"
+ title="Notifications">
+ {menuItems.map((item, i) => (
+ <div key={i}>{item}</div>
+ ))}
+ </DropdownMenu>
+ );
+};
export const NotificationsMenu = connect(mapStateToProps, mapDispatchToProps)(NotificationsMenuComponent);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list