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

peer & file context menu

Browse Source
This commit is contained in:
tarafanlin 2021-01-15 11:00:33 -08:00
parent 79af3e5b9e
commit 77b2346a03
2 changed files with 145 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/core/DataView.js
View File

@ -539,32 +539,52 @@ export default class DataView extends React.Component {
enabled enabled
onOutsideRectEvent={this._handleHide} onOutsideRectEvent={this._handleHide}
> >
<PopoverNavigation {this.props.isOwner ? (
style={{ <PopoverNavigation
top: "32px", style={{
right: "0px", top: "32px",
}} right: "0px",
navigation={[ }}
{ navigation={[
text: "Copy CID", {
onClick: (e) => this._handleCopy(e, cid), text: "Copy CID",
}, onClick: (e) => this._handleCopy(e, cid),
{
text: "Copy link",
onClick: (e) =>
this._handleCopy(e, Strings.getCIDGatewayURL(cid)),
},
{
text: "Delete",
onClick: (e) => {
e.stopPropagation();
this.setState({ menu: null }, () =>
this._handleDelete(cid, each.id)
);
}, },
}, {
]} text: "Copy link",
/> onClick: (e) =>
this._handleCopy(e, Strings.getCIDGatewayURL(cid)),
},
{
text: "Delete",
onClick: (e) => {
e.stopPropagation();
this.setState({ menu: null }, () =>
this._handleDelete(cid, each.id)
);
},
},
]}
/>
) : (
<PopoverNavigation
style={{
top: "32px",
right: "0px",
}}
navigation={[
{
text: "Copy CID",
onClick: (e) => this._handleCopy(e, cid),
},
{
text: "Copy link",
onClick: (e) =>
this._handleCopy(e, Strings.getCIDGatewayURL(cid)),
},
]}
/>
)}
</Boundary> </Boundary>
) : null} ) : null}
</div> </div>

147
components/core/Profile.js
View File

@ -195,6 +195,12 @@ const STYLES_DIRECTORY_NAME = css`
text-overflow: ellipsis; text-overflow: ellipsis;
`; `;
const STYLES_COPY_INPUT = css`
pointer-events: none;
position: absolute;
opacity: 0;
`;
function UserEntry({ user, button, onClick, message }) { function UserEntry({ user, button, onClick, message }) {
return ( return (
<div key={user.username} css={STYLES_USER_ENTRY}> <div key={user.username} css={STYLES_USER_ENTRY}>
@ -214,7 +220,7 @@ function UserEntry({ user, button, onClick, message }) {
} }
export default class Profile extends React.Component { export default class Profile extends React.Component {
_ref; _ref = null;
state = { state = {
exploreSlates: [], exploreSlates: [],
@ -330,7 +336,6 @@ export default class Profile extends React.Component {
let isOwner = this.props.creator.username === this.props.viewer?.username; let isOwner = this.props.creator.username === this.props.viewer?.username;
console.log(this.props); console.log(this.props);
console.log(this.state.publicSlates);
let following = subscriptions let following = subscriptions
.filter((relation) => { .filter((relation) => {
return !!relation.target_user_id; return !!relation.target_user_id;
@ -346,27 +351,45 @@ export default class Profile extends React.Component {
enabled enabled
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)} onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
> >
<PopoverNavigation {relation.target_user_id === this.props.viewer?.id ? (
style={{ <PopoverNavigation
top: "40px", style={{
right: "0px", top: "40px",
}} right: "0px",
navigation={[ }}
{ navigation={[
text: "Copy profile URL", {
onClick: (e) => text: "Copy profile URL",
this._handleCopy(e, `https://slate.host/${relation.user.username}`), onClick: (e) =>
}, this._handleCopy(e, `https://slate.host/${relation.user.username}`),
{ },
text: this.props.viewer?.subscriptions.filter((subscription) => { ]}
return subscription.target_user_id === relation.target_user_id; />
}).length ) : (
? "Unfollow" <PopoverNavigation
: "Follow", style={{
onClick: (e) => this._handleFollow(e, relation.owner.id), top: "40px",
}, right: "0px",
]} }}
/> navigation={[
{
text: "Copy profile URL",
onClick: (e) =>
this._handleCopy(e, `https://slate.host/${relation.user.username}`),
},
{
text: this.props.viewer?.subscriptions.filter((subscription) => {
return subscription.target_user_id === relation.target_user_id;
}).length
? "Unfollow"
: "Follow",
onClick: this.props.viewer
? (e) => this._handleFollow(e, relation.target_user_id)
: () => this.setState({ visible: true }),
},
]}
/>
)}
</Boundary> </Boundary>
) : null} ) : null}
</div> </div>
@ -399,27 +422,45 @@ export default class Profile extends React.Component {
enabled enabled
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)} onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
> >
<PopoverNavigation {relation.owner_user_id === this.props.viewer?.id ? (
style={{ <PopoverNavigation
top: "40px", style={{
right: "0px", top: "40px",
}} right: "0px",
navigation={[ }}
{ navigation={[
text: "Copy profile URL", {
onClick: (e) => text: "Copy profile URL",
this._handleCopy(e, `https://slate.host/${relation.owner.username}`), onClick: (e) =>
}, this._handleCopy(e, `https://slate.host/${relation.owner.username}`),
{ },
text: this.props.viewer?.subscriptions.filter((subscription) => { ]}
return subscription.target_user_id === relation.owner_user_id; />
}).length ) : (
? "Unfollow" <PopoverNavigation
: "Follow", style={{
onClick: (e) => this._handleFollow(e, relation.owner.id), top: "40px",
}, right: "0px",
]} }}
/> navigation={[
{
text: "Copy profile URL",
onClick: (e) =>
this._handleCopy(e, `https://slate.host/${relation.owner.username}`),
},
{
text: subscriptions.filter((subscription) => {
return subscription.target_user_id === relation.owner_user_id;
}).length
? "Unfollow"
: "Follow",
onClick: this.props.viewer
? (e) => this._handleFollow(e, relation.owner_user_id)
: () => this.setState({ visible: true }),
},
]}
/>
)}
</Boundary> </Boundary>
) : null} ) : null}
</div> </div>
@ -525,6 +566,7 @@ export default class Profile extends React.Component {
<DataView <DataView
onAction={this.props.onAction} onAction={this.props.onAction}
viewer={this.props.viewer} viewer={this.props.viewer}
isOwner={isOwner}
items={this.props.creator.library[0].children} items={this.props.creator.library[0].children}
onUpdateViewer={this.props.onUpdateViewer} onUpdateViewer={this.props.onUpdateViewer}
view={this.state.view} view={this.state.view}
@ -544,6 +586,7 @@ export default class Profile extends React.Component {
<DataView <DataView
onAction={this.props.onAction} onAction={this.props.onAction}
viewer={this.props.viewer} viewer={this.props.viewer}
isOwner={isOwner}
items={this.state.publicFiles} items={this.state.publicFiles}
onUpdateViewer={this.props.onUpdateViewer} onUpdateViewer={this.props.onUpdateViewer}
view={this.state.view} view={this.state.view}
@ -563,6 +606,7 @@ export default class Profile extends React.Component {
<DataView <DataView
onAction={this.props.onAction} onAction={this.props.onAction}
viewer={this.props.viewer} viewer={this.props.viewer}
isOwner={isOwner}
items={this.state.pseudoPrivateFiles} items={this.state.pseudoPrivateFiles}
onUpdateViewer={this.props.onUpdateViewer} onUpdateViewer={this.props.onUpdateViewer}
view={this.state.view} view={this.state.view}
@ -583,6 +627,7 @@ export default class Profile extends React.Component {
<DataView <DataView
onAction={this.props.onAction} onAction={this.props.onAction}
viewer={this.props.viewer} viewer={this.props.viewer}
isOwner={isOwner}
items={this.state.publicFiles} items={this.state.publicFiles}
onUpdateViewer={this.props.onUpdateViewer} onUpdateViewer={this.props.onUpdateViewer}
view={this.state.view} view={this.state.view}
@ -646,8 +691,7 @@ export default class Profile extends React.Component {
) : ( ) : (
<EmptyState> <EmptyState>
<SVG.Users height="24px" style={{ marginBottom: 24 }} /> <SVG.Users height="24px" style={{ marginBottom: 24 }} />
You can follow any user on the network to be updated on their new uploads and Follow any user on the network to be updated on their new uploads and slates.
slates.
</EmptyState> </EmptyState>
)} )}
</div> </div>
@ -659,11 +703,20 @@ export default class Profile extends React.Component {
) : ( ) : (
<EmptyState> <EmptyState>
<SVG.Users height="24px" style={{ marginBottom: 24 }} /> <SVG.Users height="24px" style={{ marginBottom: 24 }} />
You don't have any followers yet. There aren't any followers yet.
</EmptyState> </EmptyState>
)} )}
</div> </div>
) : null} ) : null}
<input
readOnly
ref={(c) => {
this._ref = c;
}}
value={this.state.copyValue}
tabIndex="-1"
css={STYLES_COPY_INPUT}
/>
</div> </div>
) : null} ) : null}
</div> </div>