mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
feat: Global nav menus open on hover (#12025)
* hover opens menus * hover opens menus * linting, removing some styles I added * moving useState up (non-conditional) * just a tweak to prevent a conflict.
This commit is contained in:
parent
148a0017b7
commit
9be9034f1a
@ -16,7 +16,7 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Menu } from 'src/common/components';
|
||||
import NavDropdown from 'src/components/NavDropdown';
|
||||
|
||||
@ -37,8 +37,13 @@ export default function LanguagePicker({
|
||||
locale,
|
||||
languages,
|
||||
}: LanguagePickerProps) {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<NavDropdown
|
||||
onMouseEnter={() => setDropdownOpen(true)}
|
||||
onMouseLeave={() => setDropdownOpen(false)}
|
||||
open={dropdownOpen}
|
||||
id="locale-dropdown"
|
||||
title={
|
||||
<span className="f16">
|
||||
|
@ -16,7 +16,7 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import { Nav, Navbar, NavItem } from 'react-bootstrap';
|
||||
import NavDropdown from 'src/components/NavDropdown';
|
||||
@ -154,6 +154,8 @@ const StyledHeader = styled.header`
|
||||
export function Menu({
|
||||
data: { menu, brand, navbar_right: navbarRight, settings },
|
||||
}: MenuProps) {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<StyledHeader className="top" id="main-menu">
|
||||
<Navbar inverse fluid staticTop role="navigation">
|
||||
@ -173,7 +175,13 @@ export function Menu({
|
||||
<Nav className="navbar-right">
|
||||
{!navbarRight.user_is_anonymous && <NewMenu />}
|
||||
{settings && settings.length > 0 && (
|
||||
<NavDropdown id="settings-dropdown" title={t('Settings')}>
|
||||
<NavDropdown
|
||||
id="settings-dropdown"
|
||||
title={t('Settings')}
|
||||
onMouseEnter={() => setDropdownOpen(true)}
|
||||
onMouseLeave={() => setDropdownOpen(false)}
|
||||
open={dropdownOpen}
|
||||
>
|
||||
<DropdownMenu>
|
||||
{settings.map((section, index) => [
|
||||
<DropdownMenu.ItemGroup
|
||||
|
@ -16,7 +16,7 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { NavItem } from 'react-bootstrap';
|
||||
import { Menu } from 'src/common/components';
|
||||
import NavDropdown from '../NavDropdown';
|
||||
@ -44,6 +44,8 @@ export default function MenuObject({
|
||||
url,
|
||||
index,
|
||||
}: MenuObjectProps) {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
if (url) {
|
||||
return (
|
||||
<NavItem eventKey={index} href={url}>
|
||||
@ -53,7 +55,13 @@ export default function MenuObject({
|
||||
}
|
||||
|
||||
return (
|
||||
<NavDropdown id={`menu-dropdown-${label}`} title={label}>
|
||||
<NavDropdown
|
||||
id={`menu-dropdown-${label}`}
|
||||
title={label}
|
||||
onMouseEnter={() => setDropdownOpen(true)}
|
||||
onMouseLeave={() => setDropdownOpen(false)}
|
||||
open={dropdownOpen}
|
||||
>
|
||||
<Menu>
|
||||
{childs?.map((child: MenuObjectChildProps | string, index1: number) => {
|
||||
if (typeof child === 'string' && child === '-') {
|
||||
|
@ -16,7 +16,7 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { t, styled } from '@superset-ui/core';
|
||||
import { Menu } from 'src/common/components';
|
||||
import NavDropdown from 'src/components/NavDropdown';
|
||||
@ -43,8 +43,16 @@ const StyledI = styled.div`
|
||||
`;
|
||||
|
||||
export default function NewMenu() {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<NavDropdown id="new-dropdown" title={<StyledI className="fa fa-plus" />}>
|
||||
<NavDropdown
|
||||
id="new-dropdown"
|
||||
title={<StyledI className="fa fa-plus" />}
|
||||
onMouseEnter={() => setDropdownOpen(true)}
|
||||
onMouseLeave={() => setDropdownOpen(false)}
|
||||
open={dropdownOpen}
|
||||
>
|
||||
<Menu>
|
||||
{dropdownItems.map((menu, i) => (
|
||||
<Menu.Item key={i}>
|
||||
|
Loading…
Reference in New Issue
Block a user