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

feat: online status indicator

Browse Source
This commit is contained in:
Akuoko Daniel Jnr 2021-02-04 19:16:24 +00:00
parent 04ae35f149
commit eebff2b798
No known key found for this signature in database
GPG Key ID: 1C95803CACD3E9DC
2 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/constants.js
View File

@ -57,6 +57,7 @@ export const system = {
white: "#FFFFFF", white: "#FFFFFF",
bgBlurGrayBlack: "rgba(15, 14, 18, 0.8)", bgBlurGrayBlack: "rgba(15, 14, 18, 0.8)",
bgBlurBlack: "rgba(15, 14, 18, 0.9)", bgBlurBlack: "rgba(15, 14, 18, 0.9)",
active: "#00BB00",
}; };
export const shadow = { export const shadow = {

43
components/core/Profile.js
View File

@ -71,13 +71,24 @@ const STYLES_PROFILE_IMAGE = css`
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px; border-radius: 4px;
margin: 0 auto; margin: 0 auto;
border: 2px solid transparent; position: relative;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
`; `;
const STYLES_STATUS_INDICATOR = css`
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid ${Constants.system.gray50};
background-color: ${Constants.system.white};
`;
const STYLES_NAME = css` const STYLES_NAME = css`
font-size: ${Constants.typescale.lvl4}; font-size: ${Constants.typescale.lvl4};
font-family: ${Constants.font.semiBold}; font-family: ${Constants.font.semiBold};
@ -184,6 +195,18 @@ const STYLES_DIRECTORY_PROFILE_IMAGE = css`
width: 24px; width: 24px;
margin-right: 16px; margin-right: 16px;
border-radius: 4px; border-radius: 4px;
position: relative;
`;
const STYLES_DIRECTORY_STATUS_INDICATOR = css`
position: absolute;
bottom: 0;
right: 0;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.2px solid ${Constants.system.gray50};
background-color: ${Constants.system.white};
`; `;
const STYLES_MESSAGE = css` const STYLES_MESSAGE = css`
@ -217,7 +240,9 @@ function UserEntry({ user, button, onClick, message, external, url }) {
<div <div
css={STYLES_DIRECTORY_PROFILE_IMAGE} css={STYLES_DIRECTORY_PROFILE_IMAGE}
style={{ backgroundImage: `url(${user.data.photo})` }} style={{ backgroundImage: `url(${user.data.photo})` }}
/> >
<div css={STYLES_DIRECTORY_STATUS_INDICATOR} />
</div>
<span css={STYLES_DIRECTORY_NAME}> <span css={STYLES_DIRECTORY_NAME}>
{user.data.name || `@${user.username}`} {user.data.name || `@${user.username}`}
{message ? <span css={STYLES_MESSAGE}>{message}</span> : null} {message ? <span css={STYLES_MESSAGE}>{message}</span> : null}
@ -357,13 +382,12 @@ export default class Profile extends React.Component {
checkStatus = () => { checkStatus = () => {
const activeUsers = this.props.activeUsers; const activeUsers = this.props.activeUsers;
const userId = this.props.data.id; const userId = this.props.data?.id;
this.setState({ isOnline: activeUsers && activeUsers.includes(userId) }); this.setState({ isOnline: activeUsers && activeUsers.includes(userId) });
}; };
render() { render() {
console.log(this.state.isOnline);
let tab = typeof this.state.tab === "undefined" || this.state.tab === null ? 1 : this.state.tab; let tab = typeof this.state.tab === "undefined" || this.state.tab === null ? 1 : this.state.tab;
let isOwner = this.props.isOwner; let isOwner = this.props.isOwner;
let creator = this.props.creator; let creator = this.props.creator;
@ -521,11 +545,16 @@ export default class Profile extends React.Component {
css={STYLES_PROFILE_IMAGE} css={STYLES_PROFILE_IMAGE}
style={{ style={{
backgroundImage: `url('${creator.data.photo}')`, backgroundImage: `url('${creator.data.photo}')`,
borderColor: this.state.isOnline }}
? Constants.system.newGreen >
: Constants.system.white, <div
css={STYLES_STATUS_INDICATOR}
style={{
borderColor: this.state.isOnline && `${Constants.system.active}`,
backgroundColor: this.state.isOnline && `${Constants.system.active}`,
}} }}
/> />
</div>
<div css={STYLES_INFO}> <div css={STYLES_INFO}>
<div css={STYLES_NAME}>{Strings.getPresentationName(creator)}</div> <div css={STYLES_NAME}>{Strings.getPresentationName(creator)}</div>
{!isOwner && ( {!isOwner && (