header: fixes tooltip issues and refactors the component

This commit is contained in:
@wwwjim 2020-08-03 17:35:27 -07:00
parent 9be49bcd21
commit b70b01641e
3 changed files with 47 additions and 50 deletions

View File

@ -1,18 +1,26 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import * as OldSVG from "~/components/system/svg";
import { css } from "@emotion/react";
import { Tooltip } from "react-tippy";
import Dismissible from "~/components/core/Dismissible";
const STYLES_AVATAR = css`
const STYLES_ANCHOR = css`
position: relative;
`;
const STYLES_BUTTON = css`
background-color: ${Constants.system.black};
color: ${Constants.system.white};
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 36px;
background-size: cover;
background-position: 50% 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
position: relative;
background-color: ${Constants.system.black};
color: ${Constants.system.white};
transition: 100ms ease all;
align-items: center;
justify-content: center;
@ -22,17 +30,6 @@ const STYLES_AVATAR = css`
}
`;
const STYLES_AVATAR_ONLINE = css`
height: 16px;
width: 16px;
background-color: ${Constants.system.green};
border: 2px solid ${Constants.system.white};
position: absolute;
bottom: -4px;
right: -4px;
border-radius: 16px;
`;
export default class ApplicationControlMenu extends React.Component {
state = {};
@ -51,27 +48,32 @@ export default class ApplicationControlMenu extends React.Component {
};
render() {
const title = this.state.visible ? "Close menu" : "Open settings menu";
return (
<Dismissible
css={STYLES_AVATAR}
css={STYLES_ANCHOR}
captureResize={false}
captureScroll={true}
enabled={this.state.visible}
onOutsideRectEvent={this._handleHide}
onClick={this._handleClick}
style={{
...this.props.style,
width: `${this.props.size}px`,
height: `${this.props.size}px`,
borderRadius: `${this.props.size}px`,
backgroundImage: `url('${this.props.url}')`,
cursor: this.props.onClick ? "pointer" : this.props.style,
backgroundColor: this.state.visible ? Constants.system.brand : null,
}}
style={this.props.style}
>
{this.props.icon ? this.props.icon : null}
<Tooltip animation="fade" animateFill={false} title={title}>
<span
onClick={this._handleClick}
css={STYLES_BUTTON}
style={{
backgroundColor: this.state.visible
? Constants.system.brand
: null,
}}
>
<OldSVG.ChevronDown height="20px" />
</span>
</Tooltip>
{this.state.visible ? this.props.popover : null}
{this.props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null}
</Dismissible>
);
}

View File

@ -186,27 +186,22 @@ export default class ApplicationHeader extends React.Component {
</a>
</Tooltip>
<Tooltip animation="fade" animateFill={false} title="Settings Menu">
<ApplicationControlMenu
style={{ marginLeft: 12 }}
onClick={() => {}}
size={36}
icon={<OldSVG.ChevronDown height="20px" />}
popover={
<System.PopoverNavigation
style={{ right: 0, top: "48px", cursor: "pointer" }}
onNavigateTo={this.props.onNavigateTo}
onAction={this.props.onAction}
onSignOut={this.props.onSignOut}
navigation={[
{ text: "Profile & account settings", value: 13 },
{ text: "Filecoin settings", value: 14 },
{ text: "Sign out", value: 0, action: "SIGN_OUT" },
]}
/>
}
/>
</Tooltip>
<ApplicationControlMenu
style={{ marginLeft: 12 }}
popover={
<System.PopoverNavigation
style={{ right: 0, top: "48px", cursor: "pointer" }}
onNavigateTo={this.props.onNavigateTo}
onAction={this.props.onAction}
onSignOut={this.props.onSignOut}
navigation={[
{ text: "Profile & account settings", value: 13 },
{ text: "Filecoin settings", value: 14 },
{ text: "Sign out", value: 0, action: "SIGN_OUT" },
]}
/>
}
/>
</div>
</header>
);

View File

@ -68,7 +68,7 @@ export default class SceneFilesFolder extends React.Component {
const data = {
columns: [
{ key: "name", name: "File", type: "FILE_LINK", width: "328px" },
{ key: "name", name: "Data", type: "FILE_LINK", width: "328px" },
{
key: "size",
name: "Size",