mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 22:12:19 +03:00
header: fixes tooltip issues and refactors the component
This commit is contained in:
parent
9be49bcd21
commit
b70b01641e
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user