Skip to content
Snippets Groups Projects
Unverified Commit 896c4f61 authored by Kyle Doherty's avatar Kyle Doherty
Browse files

refactor profile link to use entity menu

parent 2c6536f5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/css/components/dropdown.css deleted 100644 → 0
+ 0
− 65
View file @ 2c6536f5
:root {
--dropdown-border-color: rgba(0, 0, 0, 0.064);
}
.Dropdown {
position: relative;
}
.Dropdown-content {
opacity: 0; /* start invisible */
pointer-events: none; /* and without any clicks */
z-index: 20;
position: absolute;
top: 40px;
min-width: 200px;
margin-top: 18px;
border: 1px solid var(--dropdown-border-color);
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
background-clip: padding-box;
padding-top: 1em;
padding-bottom: 1em;
}
.Dropdown-content:before {
position: absolute;
top: -20px;
right: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-right: 5px solid red;
content: "";
display: block;
}
/* switching from home rolled to BS logic for dropdowns so we still have both classes */
.Dropdown.open .Dropdown-content,
.Dropdown--showing.Dropdown-content {
opacity: 1;
pointer-events: all;
transition: opacity 0.3s linear, margin 0.2s linear;
margin-top: 0;
}
.Dropdown-item {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
line-height: 1;
}
.Dropdown .Dropdown-item .link:hover {
text-decoration: none;
}
.Dropdown-item:hover {
color: #fff;
background-color: var(--brand-color);
}
.Dropdown .Dropdown-item:hover {
text-decoration: none;
}
frontend/src/metabase/css/index.css
+ 0
− 1
View file @ 896c4f61
......@@ -3,7 +3,6 @@
@import "./core/index.css";
@import "./components/buttons.css";
@import "./components/dropdown.css";
@import "./components/form.css";
@import "./components/header.css";
@import "./components/icons.css";
......
frontend/src/metabase/lib/urls.js
+ 4
− 0
View file @ 896c4f61
......@@ -120,3 +120,7 @@ export function embedDashboard(token) {
export function userCollection(userCollectionId) {
return `/collection/${userCollectionId}/`;
}
export function accountSettings() {
return `/user/edit_current`;
}
frontend/src/metabase/nav/components/ProfileLink.jsx
+ 103
− 107
View file @ 896c4f61
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router";
import { Box } from "grid-styled";
import OnClickOutsideWrapper from "metabase/components/OnClickOutsideWrapper";
import { t } from "c-3po";
import cx from "classnames";
import _ from "underscore";
import { capitalize } from "metabase/lib/formatting";
import MetabaseSettings from "metabase/lib/settings";
import Modal from "metabase/components/Modal.jsx";
import Logs from "metabase/components/Logs.jsx";
import * as Urls from "metabase/lib/urls";
import Modal from "metabase/components/Modal";
import Logs from "metabase/components/Logs";
import UserAvatar from "metabase/components/UserAvatar.jsx";
import Icon from "metabase/components/Icon.jsx";
import LogoIcon from "metabase/components/LogoIcon.jsx";
import LogoIcon from "metabase/components/LogoIcon";
import EntityMenu from "metabase/components/EntityMenu";
export default class ProfileLink extends Component {
constructor(props, context) {
......@@ -57,39 +55,99 @@ export default class ProfileLink extends Component {
render() {
const { user, context } = this.props;
const { modalOpen, dropdownOpen } = this.state;
const { modalOpen } = this.state;
const { tag, date, ...versionExtra } = MetabaseSettings.get("version");
let dropDownClasses = cx({
NavDropdown: true,
"inline-block": true,
"cursor-pointer": true,
open: dropdownOpen,
});
const isRoot = user.is_superuser;
const admin = context === "admin";
return (
<div className={dropDownClasses}>
<a
data-metabase-event={"Navbar;Profile Dropdown;Toggle"}
className="NavDropdown-button NavItem flex align-center p2 transition-background"
onClick={this.toggleDropdown}
>
<div className="NavDropdown-button-layer">
<div className="flex align-center">
<UserAvatar user={user} />
<Icon
name="chevrondown"
className="Dropdown-chevron ml1"
size={8}
/>
<Box>
<EntityMenu
items={[
{
title: t`Account settings`,
icon: null,
link: Urls.accountSettings(),
},
...(!isRoot && {
title: admin ? t`Exit admin` : t`Admin`,
icon: null,
link: admin ? "/" : "/admin",
}),
...(!isRoot && {
title: t`Logs`,
icon: null,
action: () => this.openModal("logs"),
}),
{
title: t`About metabase`,
icon: null,
action: () => this.openModal("about"),
},
{
title: t`Sign out`,
icon: null,
link: "auth/logout",
},
]}
triggerIcon="person"
/>
{modalOpen === "about" ? (
<Modal small onClose={this.closeModal}>
<div className="px4 pt4 pb2 text-centered relative">
<div className="text-brand pb2">
<LogoIcon width={48} height={48} />
</div>
<h2 style={{ fontSize: "1.75em" }} className="text-dark">
{t`Thanks for using`} Metabase!
</h2>
<div className="pt2">
<h3 className="text-dark mb1">
{t`You're on version`} {tag}
</h3>
<p className="text-grey-3 text-bold">
{t`Built on`} {date}
</p>
{!/^v\d+\.\d+\.\d+$/.test(tag) && (
<div>
{_.map(versionExtra, (value, key) => (
<p key={key} className="text-grey-3 text-bold">
{capitalize(key)}: {value}
</p>
))}
</div>
)}
</div>
</div>
</div>
</a>
{dropdownOpen ? (
<OnClickOutsideWrapper handleDismissal={this.closeDropdown}>
<div className="NavDropdown-content right">
<ul className="NavDropdown-content-layer">
<div
style={{ borderWidth: "2px" }}
className="p2 h5 text-centered text-grey-3 border-top"
>
<span className="block">
<span className="text-bold">Metabase</span>{" "}
{t`is a Trademark of`} Metabase, Inc
</span>
<span>{t`and is built with care in San Francisco, CA`}</span>
</div>
</Modal>
) : modalOpen === "logs" ? (
<Modal wide onClose={this.closeModal}>
<Logs onClose={this.closeModal} />
</Modal>
) : null}
</Box>
/*
<PopoverWithTrigger
triggerElement={
<a
data-metabase-event={"Navbar;Profile Dropdown;Toggle"}
className="flex align-center p2 transition-background"
onClick={this.toggleDropdown}
>
</a>
}
>
<div>
<ul>
{!user.google_auth && !user.ldap_auth ? (
<li>
<Link
......@@ -98,7 +156,7 @@ export default class ProfileLink extends Component {
"Navbar;Profile Dropdown;Edit Profile"
}
onClick={this.closeDropdown}
className="Dropdown-item block text-white no-decoration"
className="Dropdown-item block no-decoration"
>
{t`Account Settings`}
</Link>
......@@ -113,7 +171,7 @@ export default class ProfileLink extends Component {
"Navbar;Profile Dropdown;Enter Admin"
}
onClick={this.closeDropdown}
className="Dropdown-item block text-white no-decoration"
className="Dropdown-item block no-decoration"
>
{t`Admin Panel`}
</Link>
......@@ -126,7 +184,7 @@ export default class ProfileLink extends Component {
to="/"
data-metabase-event={"Navbar;Profile Dropdown;Exit Admin"}
onClick={this.closeDropdown}
className="Dropdown-item block text-white no-decoration"
className="Dropdown-item block no-decoration"
>
{t`Exit Admin`}
</Link>
......@@ -136,7 +194,7 @@ export default class ProfileLink extends Component {
<li>
<a
data-metabase-event={"Navbar;Profile Dropdown;Help " + tag}
className="Dropdown-item block text-white no-decoration"
className="Dropdown-item block no-decoration"
href={"http://www.metabase.com/docs/" + tag}
target="_blank"
>
......@@ -145,93 +203,31 @@ export default class ProfileLink extends Component {
</li>
{user.is_superuser && (
<li>
<a
data-metabase-event={
"Navbar;Profile Dropdown;Debugging " + tag
}
onClick={this.openModal.bind(this, "logs")}
className="Dropdown-item block text-white no-decoration"
className="Dropdown-item block no-decoration"
>
{t`Logs`}
</a>
</li>
)}
<li>
<a
data-metabase-event={"Navbar;Profile Dropdown;About " + tag}
onClick={this.openModal.bind(this, "about")}
className="Dropdown-item block text-white no-decoration"
className="Dropdown-item block no-decoration"
>
{t`About Metabase`}
</a>
</li>
<li className="border-top border-light">
<Link
to="/auth/logout"
data-metabase-event={"Navbar;Profile Dropdown;Logout"}
className="Dropdown-item block text-white no-decoration"
>
{t`Sign out`}
</Link>
</li>
</ul>
</div>
</OnClickOutsideWrapper>
) : null}
{modalOpen === "about" ? (
<Modal small onClose={this.closeModal}>
<div className="px4 pt4 pb2 text-centered relative">
<span
className="absolute top right p4 text-normal text-grey-3 cursor-pointer"
onClick={this.closeModal}
>
<Icon name={"close"} size={16} />
</span>
<div className="text-brand pb2">
<LogoIcon width={48} height={48} />
</div>
<h2 style={{ fontSize: "1.75em" }} className="text-dark">
{t`Thanks for using`} Metabase!
</h2>
<div className="pt2">
<h3 className="text-dark mb1">
{t`You're on version`} {tag}
</h3>
<p className="text-grey-3 text-bold">
{t`Built on`} {date}
</p>
{!/^v\d+\.\d+\.\d+$/.test(tag) && (
<div>
{_.map(versionExtra, (value, key) => (
<p key={key} className="text-grey-3 text-bold">
{capitalize(key)}: {value}
</p>
))}
</div>
)}
</div>
</div>
<div
style={{ borderWidth: "2px" }}
className="p2 h5 text-centered text-grey-3 border-top"
>
<span className="block">
<span className="text-bold">Metabase</span>{" "}
{t`is a Trademark of`} Metabase, Inc
</span>
<span>{t`and is built with care in San Francisco, CA`}</span>
</div>
</Modal>
) : modalOpen === "logs" ? (
<Modal wide onClose={this.closeModal}>
<Logs onClose={this.closeModal} />
</Modal>
) : null}
</div>
*/
);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment