* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-.navbar-tabs > li > a.menu-button {
- color: var(--darkBlue);
+.navbar-tabs > li > .menu-button {
+ color: var(--darkBlue) !important;
}
-.navbar-tabs > li > a.menu-button:hover {
- color: var(--blue);
- border-bottom-color: transparent;
+.navbar-tabs > li > .menu-button:hover {
+ color: var(--blue) !important;
+ border-bottom-color: transparent !important;
}
-.navbar-tabs > li > a.disabled-link,
-.navbar-tabs > li > a.disabled-link:hover {
+.navbar-tabs > li > .disabled-link,
+.navbar-tabs > li > .disabled-link:hover {
color: var(--gray71);
cursor: default;
border-bottom-color: transparent;
import classNames from 'classnames';
import * as React from 'react';
import { NavLink } from 'react-router-dom';
+import { ButtonLink } from '../../../../components/controls/buttons';
import Dropdown from '../../../../components/controls/Dropdown';
import Tooltip from '../../../../components/controls/Tooltip';
import BulletListIcon from '../../../../components/icons/BulletListIcon';
type Query = BranchParameters & { id: string };
export class Menu extends React.PureComponent<Props> {
- projectInfoLink = React.createRef<HTMLAnchorElement>();
+ projectInfoLink: HTMLElement | null = null;
componentDidUpdate(prevProps: Props) {
if (
prevProps.projectInfoDisplayed &&
!this.props.projectInfoDisplayed &&
- this.projectInfoLink.current
+ this.projectInfoLink
) {
- this.projectInfoLink.current.focus();
+ this.projectInfoLink.focus();
}
}
overlay={<ul className="menu">{adminLinks}</ul>}
tagName="li">
{({ onToggleClick, open }) => (
- <a
+ <ButtonLink
aria-expanded={open}
aria-haspopup="menu"
- role="button"
className={classNames('dropdown-toggle', { active: isSettingsActive || open })}
- href="#"
id="component-navigation-admin"
onClick={onToggleClick}>
{hasMessage('layout.settings', component.qualifier)
? translate('layout.settings', component.qualifier)
: translate('layout.settings')}
<DropdownIcon className="little-spacer-left" />
- </a>
+ </ButtonLink>
)}
</Dropdown>
);
return (
(isProject || isApplication) && (
<li>
- <a
+ <ButtonLink
className="menu-button"
- onClick={(e: React.SyntheticEvent<HTMLAnchorElement>) => {
- e.preventDefault();
- e.currentTarget.blur();
- this.props.onToggleProjectInfo();
- }}
- href="#"
- role="button"
- tabIndex={0}
- ref={this.projectInfoLink}>
+ onClick={this.props.onToggleProjectInfo}
+ innerRef={node => {
+ this.projectInfoLink = node;
+ }}>
<BulletListIcon className="little-spacer-right" />
{label}
- </a>
+ </ButtonLink>
</li>
)
);
}
tagName="li">
{({ onToggleClick, open }) => (
- <a
+ <ButtonLink
aria-expanded={open}
aria-haspopup="menu"
- role="button"
className={classNames('dropdown-toggle', { active: open })}
- href="#"
id="component-navigation-more"
onClick={onToggleClick}>
{translate('more')}
<DropdownIcon className="little-spacer-left" />
- </a>
+ </ButtonLink>
)}
</Dropdown>
);
margin-left: 20px;
}
-.navbar-tabs > li > a {
+.navbar-tabs > li > a,
+.navbar-tabs > li > button.button-link {
display: block;
height: var(--controlHeight);
line-height: 16px;
.navbar-tabs > li > a.active,
.navbar-tabs > li > a:hover,
-.navbar-tabs > li > a:focus {
+.navbar-tabs > li > a:focus,
+.navbar-tabs > li > button.button-link.active,
+.navbar-tabs > li > button.button-link:hover,
+.navbar-tabs > li > button.button-link:focus {
border-bottom-color: var(--blue);
}