filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 17:44:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ApplicationUserControls): update to new styles

Browse Source
This commit is contained in:
Aminejv 2021-08-24 20:30:13 +01:00
parent a45a843282
commit c38f84733d
1 changed files with 210 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

456
components/core/ApplicationUserControls.js
View File

@ -2,18 +2,18 @@ import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import * as Styles from "~/common/styles"; import * as Styles from "~/common/styles";
import * as UserBehaviors from "~/common/user-behaviors"; import * as UserBehaviors from "~/common/user-behaviors";
import * as Strings from "~/common/strings";
import { PopoverNavigation } from "~/components/system"; import { PopoverNavigation } from "~/components/system";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { Link } from "~/components/core/Link"; import { Link } from "~/components/core/Link";
import ProfilePhoto from "~/components/core/ProfilePhoto";
import { Boundary } from "~/components/system/components/fragments/Boundary"; import { Boundary } from "~/components/system/components/fragments/Boundary";
import { useIntercom } from "react-use-intercom"; import { H4, P3 } from "~/components/system/components/Typography";
import ProfilePhoto from "~/components/core/ProfilePhoto";
const STYLES_HEADER = css` const STYLES_HEADER = css`
position: relative; position: relative;
margin-left: 16px;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
padding: 0px; padding: 0px;
@ -21,111 +21,88 @@ const STYLES_HEADER = css`
} }
`; `;
const STYLES_PROFILE = css`
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
min-width: 10%;
width: 204px;
color: ${Constants.system.black};
background-color: ${Constants.system.white};
font-size: 12px;
text-decoration: none;
border-radius: 4px;
min-height: 48px;
cursor: pointer;
border: 1px solid rgba(229, 229, 229, 0.5);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.03);
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_PROFILE_MOBILE = css` const STYLES_PROFILE_MOBILE = css`
display: flex; display: flex;
align-items: center; align-items: center;
`; `;
const STYLES_PROFILE_IMAGE = css` const STYLES_POPOVER_CONTANIER = (theme) => css`
background-color: ${Constants.semantic.bgLight}; padding: 16px 20px;
background-size: cover; border-radius: 16px;
background-position: 50% 50%; border: 1px solid ${theme.semantic.borderGrayLight4};
flex-shrink: 0; box-shadow: ${theme.shadow.lightLarge};
height: 24px;
width: 24px;
border-radius: 8px;
cursor: pointer;
${"" /* @media (max-width: ${Constants.sizes.mobile}px) { @supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
height: 24px; background-color: ${theme.semantic.bgBlurWhite};
width: 24px; -webkit-backdrop-filter: blur(75px);
} */} backdrop-filter: blur(75px);
`;
const STYLES_PROFILE_USERNAME = css`
min-width: 10%;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 12px;
user-select: none;
font-family: ${Constants.font.medium};
font-size: ${Constants.typescale.lvl1};
`;
const STYLES_ITEM_BOX_MOBILE = css`
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
background-color: ${Constants.system.white};
cursor: pointer;
border-radius: 4px;
border-left: 2px solid ${Constants.semantic.bgLight};
`;
const STYLES_ITEM_BOX = css`
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 8px;
padding-right: 9px;
transition: 200ms ease all;
border-left: 2px solid ${Constants.semantic.bgLight};
:hover {
color: ${Constants.system.blue};
} }
`; `;
// const OpenIntercom = ({ user, onTogglePopup }) => { const STYLES_POPOVER_SECTION = (theme) => css`
// const { show, update } = useIntercom(); border-top: 1px solid ${theme.semantic.borderGrayLight4};
padding: 0;
margin: 0;
padding-top: 8px;
padding-bottom: 8px;
// return ( p {
// <span display: block;
// style={{ cursor: "pointer", display: "block" }} width: 100%;
// onClick={() => { }
// onTogglePopup();
// update({ :last-child {
// name: user.data.name, padding-bottom: 0px;
// email: user.email, }
// customAttributes: {
// slate_userid: user.id, * + * {
// username: user.username, margin-top: 4px;
// }, }
// }); `;
// show();
// }} const STYLES_POPOVER_SECTION_ITEM = (theme) => css`
// > position: relative;
// Help width: calc(100% + 16px);
// </span> left: -8px;
// ); padding: 1px 8px 3px;
// }; border-radius: 8px;
&:hover {
background-color: ${theme.system.grayLight4};
}
a {
display: block;
}
`;
const STYLES_DATAMETER_WRAPPER = (theme) => css`
width: 100%;
min-width: 240px;
height: 8px;
background-color: ${theme.semantic.bgBlurWhiteTRN};
border: 1px solid ${theme.semantic.borderGrayLight4};
border-radius: 2px;
overflow: hidden;
`;
const STYLES_DATAMETER = (theme) => css`
height: 100%;
background-color: ${theme.system.blue};
border-radius: 2px;
`;
const DataMeter = ({ bytes = 1000, maximumBytes = 4000, ...props }) => {
const percentage = bytes / maximumBytes;
return (
<div css={STYLES_DATAMETER_WRAPPER} {...props}>
<div
style={{
width: `calc(${percentage} * 100%)`,
}}
css={STYLES_DATAMETER}
/>
</div>
);
};
export class ApplicationUserControlsPopup extends React.Component { export class ApplicationUserControlsPopup extends React.Component {
_handleAction = (props) => { _handleAction = (props) => {
@ -141,153 +118,140 @@ export class ApplicationUserControlsPopup extends React.Component {
}; };
render() { render() {
if (this.props.popup === "profile") { if (this.props.popup !== "profile") return null;
const topSection = (
<div css={Styles.HORIZONTAL_CONTAINER} style={{ marginBottom: 14 }}>
<div style={{ marginRight: "16px", cursor: "default" }}>
<ProfilePhoto user={this.props.viewer} size={46} />
</div>
<div const username = this.props.viewer.data.name || `@${this.props.viewer.username}`;
css={Styles.VERTICAL_CONTAINER} const objectsLength = this.props.viewer.library.length;
style={{ const { stats } = this.props.viewer;
height: 46,
justifyContent: "space-between", const topSection = (
}} <div style={{ marginBottom: 16 }} css={Styles.VERTICAL_CONTAINER_CENTERED}>
> <ProfilePhoto user={this.props.viewer} style={{ borderRadius: "12px" }} size={48} />
<div css={Styles.H4}> <H4 color="textBlack" style={{ marginTop: 10 }}>
{this.props.viewer.data.name || `@${this.props.viewer.username}`} {username}
</div> </H4>
<div css={Styles.HORIZONTAL_CONTAINER}> <div style={{ marginTop: 6 }} css={Styles.HORIZONTAL_CONTAINER}>
<span css={Styles.P3} style={{ marginRight: 8 }}>{`${ <P3 color="textBlack" style={{ marginRight: 8 }}>
this.props.viewer.library.length {objectsLength} {Strings.pluralize("Object", objectsLength)}
} File${this.props.viewer.library.length === 1 ? "" : "s"}`}</span> </P3>
<span css={Styles.P3}>{`${this.props.viewer.slates.length} Collection${ <P3 color="textBlack" style={{ marginLeft: 8 }}>
this.props.viewer.slates.length === 1 ? "" : "s" {Strings.bytesToSize(stats.bytes, 0)} of {Strings.bytesToSize(stats.maximumBytes, 0)}{" "}
}`}</span> Stored
</div> </P3>
</div>
</div> </div>
); <DataMeter bytes={stats.bytes} maximumBytes={stats.maximumBytes} style={{ marginTop: 8 }} />
</div>
);
const navigation = [ const navigation = [
[ [
{ {
text: ( text: (
<Link href={`/$/user/${this.props.viewer.id}`} onAction={this._handleAction}> <Link href={`/$/user/${this.props.viewer.id}`} onAction={this._handleAction}>
Profile Profile
</Link> </Link>
), ),
},
{
text: (
<Link href={"/_/directory"} onAction={this._handleAction}>
Directory
</Link>
),
},
],
[
{
text: (
<Link href={"/_/filecoin"} onAction={this._handleAction}>
Filecoin
</Link>
),
},
{
text: (
<Link href={"/_/storage-deal"} onAction={this._handleAction}>
Storage deal
</Link>
),
},
{
text: (
<Link href={"/_/api"} onAction={this._handleAction}>
API
</Link>
),
},
],
[
{
text: (
<Link href={"/_/settings"} onAction={this._handleAction}>
Settings
</Link>
),
},
{
text: "Sign out",
onClick: (e) => {
this._handleSignOut(e);
}, },
{ },
text: ( ],
<Link href={"/_/directory"} onAction={this._handleAction}> ];
Directory
</Link>
),
},
],
[
{
text: (
<Link href={"/_/filecoin"} onAction={this._handleAction}>
Filecoin
</Link>
),
},
{
text: (
<Link href={"/_/storage-deal"} onAction={this._handleAction}>
Storage deal
</Link>
),
},
{
text: (
<Link href={"/_/api"} onAction={this._handleAction}>
API
</Link>
),
},
],
[
{
text: (
<Link href={"/_/settings"} onAction={this._handleAction}>
Settings
</Link>
),
},
],
[
// {
// text: (
// <OpenIntercom
// style={{ display: "block" }}
// user={this.props.viewer}
// onTogglePopup={this.props.onTogglePopup}
// />
// ),
// },
{
text: "Sign out",
onClick: (e) => {
this._handleSignOut(e);
},
},
],
];
return ( return (
<> <>
<div css={Styles.MOBILE_ONLY}> <div css={Styles.MOBILE_ONLY}>
<Boundary <Boundary
captureResize={true} captureResize={true}
captureScroll={false} captureScroll={false}
enabled={this.props.popup === "profile"} enabled={this.props.popup === "profile"}
onOutsideRectEvent={() => this.props.onTogglePopup()} onOutsideRectEvent={() => this.props.onTogglePopup()}
> >
<PopoverNavigation <PopoverNavigation
style={{ style={{
width: "max-content", position: "relative",
position: "relative", border: "none",
border: "none", boxShadow: "none",
boxShadow: "none", background: "none",
width: "100vw", pointerEvents: "auto",
background: "none", }}
pointerEvents: "auto", containerCss={STYLES_POPOVER_CONTANIER}
}} sectionCss={STYLES_POPOVER_SECTION}
css={Styles.H4} sectionItemCss={STYLES_POPOVER_SECTION_ITEM}
itemStyle={{ fontSize: Constants.typescale.lvl0 }} css={Styles.H4}
topSection={topSection} itemStyle={{ fontSize: Constants.typescale.lvl0 }}
navigation={navigation} topSection={topSection}
/> navigation={navigation}
</Boundary> />
</div> </Boundary>
<div css={Styles.MOBILE_HIDDEN}> </div>
<Boundary <div css={Styles.MOBILE_HIDDEN}>
captureResize={true} <Boundary
captureScroll={false} captureResize={true}
enabled={this.props.popup === "profile"} captureScroll={false}
onOutsideRectEvent={() => this.props.onTogglePopup()} enabled={this.props.popup === "profile"}
> onOutsideRectEvent={() => this.props.onTogglePopup()}
<PopoverNavigation >
style={{ <PopoverNavigation
top: 36, style={{
right: 0, top: 34,
width: "max-content", left: "-12px",
}} width: "max-content",
css={Styles.H4} }}
itemStyle={{ fontSize: Constants.typescale.lvl0 }} containerCss={STYLES_POPOVER_CONTANIER}
topSection={topSection} sectionCss={STYLES_POPOVER_SECTION}
navigation={navigation} sectionItemCss={STYLES_POPOVER_SECTION_ITEM}
/> css={Styles.H4}
</Boundary> itemStyle={{ fontSize: Constants.typescale.lvl0 }}
</div> topSection={topSection}
</> navigation={navigation}
); />
} </Boundary>
return null; </div>
</>
);
} }
} }
@ -296,14 +260,14 @@ export class ApplicationUserControls extends React.Component {
let tooltip = <ApplicationUserControlsPopup {...this.props} />; let tooltip = <ApplicationUserControlsPopup {...this.props} />;
return ( return (
<div css={STYLES_HEADER}> <div css={STYLES_HEADER}>
<div <button
css={STYLES_PROFILE_MOBILE} css={[Styles.BUTTON_RESET, STYLES_PROFILE_MOBILE]}
onClick={() => this.props.onTogglePopup("profile")} onClick={() => this.props.onTogglePopup("profile")}
style={{ position: "relative", cursor: "pointer" }} style={{ position: "relative", cursor: "pointer" }}
> >
<ProfilePhoto user={this.props.viewer} size={24} /> <ProfilePhoto user={this.props.viewer} style={{ borderRadius: "8px" }} size={24} />
{this.props.popup === "profile" ? tooltip : null} </button>
</div> {this.props.popup === "profile" ? tooltip : null}
</div> </div>
); );
} }