mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-12-01 11:41:20 +01:00
Code Issues Releases Wiki Activity

Support right-click and middle-click interactions with sidebar links

Browse Source
This commit is contained in:
Thibaud Colas 2022-01-10 13:06:31 +00:00 committed by Karl Hobley
parent 1543c1c68e
commit 5718dab4de
3 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/Sidebar/menu/LinkMenuItem.tsx
View File

@ -11,6 +11,16 @@ export const LinkMenuItem: React.FunctionComponent<MenuItemProps<LinkMenuItemDef
const isInSubMenu = path.split('.').length > 2;
const onClick = (e: React.MouseEvent) => {
// Do not capture click events with modifier keys or non-main buttons.
if (
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
(e.button && e.button !== 0)
) {
return;
}
e.preventDefault();
navigate(item.url).then(() => {
@ -67,7 +77,11 @@ export const LinkMenuItem: React.FunctionComponent<MenuItemProps<LinkMenuItemDef
return (
<li className={className} ref={wrapperRef}>
<a href="#" onClick={onClick} className={`sidebar-menu-item__link ${item.classNames}`}>
<a
href={item.url}
onClick={onClick}
className={`sidebar-menu-item__link ${item.classNames}`}
>
{item.iconName && <Icon name={item.iconName} className="icon--menuitem" />}
<span className="menuitem-label">{item.label}</span>
<div className={'menuitem-tooltip' + (peeking ? ' menuitem-tooltip--visible' : '')}>

12
client/src/components/Sidebar/modules/CustomBranding.tsx
View File

@ -12,6 +12,16 @@ interface CustomBrandingProps {
const CustomBranding: React.FunctionComponent<CustomBrandingProps> = ({ homeUrl, html, strings, navigate }) => {
const onClick = (e: React.MouseEvent) => {
// Do not capture click events with modifier keys or non-main buttons.
if (
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
(e.button && e.button !== 0)
) {
return;
}
e.preventDefault();
navigate(homeUrl);
};
@ -19,7 +29,7 @@ const CustomBranding: React.FunctionComponent<CustomBrandingProps> = ({ homeUrl,
return (
<a
className="sidebar-custom-branding"
href="#"
href={homeUrl}
onClick={onClick}
aria-label={strings.DASHBOARD}
dangerouslySetInnerHTML={{ __html: html }}

12
client/src/components/Sidebar/modules/WagtailBranding.tsx
View File

@ -28,6 +28,16 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({ homeUr
const onClick = (e: React.MouseEvent) => {
// Do not capture click events with modifier keys or non-main buttons.
if (
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
(e.button && e.button !== 0)
) {
return;
}
e.preventDefault();
navigate(homeUrl);
};
@ -60,7 +70,7 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({ homeUr
return (
<a
className={desktopClassName} href="#" aria-label={strings.DASHBOARD}
className={desktopClassName} href={homeUrl} aria-label={strings.DASHBOARD}
onClick={onClick} onMouseMove={onMouseMove} onMouseLeave={onMouseLeave}
>
<div className="sidebar-wagtail-branding__icon-wrapper">