LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 03:11:25 +00:00
Code Issues Projects Releases Wiki Activity

Re-arranging subscribed. Removing transparent cards. Fixes #38"

Browse source
This commit is contained in:
Dessalines 2020-09-23 18:01:45 -05:00
parent f9c0c72bb9
commit fb1163e27f
6 changed files with 102 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/shared/components/community.tsx
View file

@ -243,7 +243,7 @@ export class Community extends Component<any, State> {
<HtmlTags <HtmlTags
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
description={this.state.communityRes.community.title} description={this.state.communityRes.community.description}
image={this.state.communityRes.community.icon} image={this.state.communityRes.community.icon}
/> />
{this.communityInfo()} {this.communityInfo()}

2
src/shared/components/iframely-card.tsx
View file

@ -29,7 +29,7 @@ export class IFramelyCard extends Component<
return ( return (
<> <>
{post.embed_title && !this.state.expanded && ( {post.embed_title && !this.state.expanded && (
<div class="card bg-transparent border-secondary mt-3 mb-2"> <div class="card border-secondary mt-3 mb-2">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card-body"> <div class="card-body">

49
src/shared/components/main.tsx
View file

@ -274,28 +274,25 @@ export class Main extends Component<any, MainState> {
<div> <div>
{!this.state.loading && ( {!this.state.loading && (
<div> <div>
<div class="card bg-transparent border-secondary mb-3"> <div class="card border-secondary mb-3">
<div class="card-header bg-transparent border-secondary">
<div class="mb-2">
{this.siteName()}
{this.adminButtons()}
</div>
<BannerIconHeader banner={this.state.siteRes.site.banner} />
</div>
<div class="card-body"> <div class="card-body">
{this.trendingCommunities()} {this.trendingCommunities()}
{this.createCommunityButton()} {this.createCommunityButton()}
{/* TODO
{this.subscribedCommunities()}
*/}
</div> </div>
</div> </div>
<div class="card bg-transparent border-secondary mb-3"> {UserService.Instance.user &&
this.state.subscribedCommunities.length > 0 && (
<div class="card border-secondary mb-3">
<div class="card-body">{this.subscribedCommunities()}</div>
</div>
)}
<div class="card border-secondary mb-3">
<div class="card-body">{this.sidebar()}</div> <div class="card-body">{this.sidebar()}</div>
</div> </div>
<div class="card bg-transparent border-secondary"> <div class="card border-secondary">
<div class="card-body">{this.landing()}</div> <div class="card-body">{this.landing()}</div>
</div> </div>
</div> </div>
@ -336,8 +333,6 @@ export class Main extends Component<any, MainState> {
subscribedCommunities() { subscribedCommunities() {
return ( return (
UserService.Instance.user &&
this.state.subscribedCommunities.length > 0 && (
<div> <div>
<h5> <h5>
<T i18nKey="subscribed_to_communities"> <T i18nKey="subscribed_to_communities">
@ -347,7 +342,7 @@ export class Main extends Component<any, MainState> {
</Link> </Link>
</T> </T>
</h5> </h5>
<ul class="list-inline"> <ul class="list-inline mb-0">
{this.state.subscribedCommunities.map(community => ( {this.state.subscribedCommunities.map(community => (
<li class="list-inline-item"> <li class="list-inline-item">
<CommunityLink <CommunityLink
@ -363,7 +358,6 @@ export class Main extends Component<any, MainState> {
))} ))}
</ul> </ul>
</div> </div>
)
); );
} }
@ -371,7 +365,14 @@ export class Main extends Component<any, MainState> {
return ( return (
<div> <div>
{!this.state.showEditSite ? ( {!this.state.showEditSite ? (
this.siteInfo() <div>
<div class="mb-2">
{this.siteName()}
{this.adminButtons()}
</div>
<BannerIconHeader banner={this.state.siteRes.site.banner} />
{this.siteInfo()}
</div>
) : ( ) : (
<SiteForm <SiteForm
site={this.state.siteRes.site} site={this.state.siteRes.site}
@ -431,31 +432,31 @@ export class Main extends Component<any, MainState> {
badges() { badges() {
return ( return (
<ul class="my-2 list-inline"> <ul class="my-2 list-inline">
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_online', { count: this.state.siteRes.online })} {i18n.t('number_online', { count: this.state.siteRes.online })}
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: this.state.siteRes.site.number_of_users, count: this.state.siteRes.site.number_of_users,
})} })}
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_communities', { {i18n.t('number_of_communities', {
count: this.state.siteRes.site.number_of_communities, count: this.state.siteRes.site.number_of_communities,
})} })}
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_posts', { {i18n.t('number_of_posts', {
count: this.state.siteRes.site.number_of_posts, count: this.state.siteRes.site.number_of_posts,
})} })}
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_comments', { {i18n.t('number_of_comments', {
count: this.state.siteRes.site.number_of_comments, count: this.state.siteRes.site.number_of_comments,
})} })}
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link className="badge badge-light" to="/modlog"> <Link className="badge badge-secondary" to="/modlog">
{i18n.t('modlog')} {i18n.t('modlog')}
</Link> </Link>
</li> </li>

2
src/shared/components/markdown-textarea.tsx
View file

@ -133,7 +133,7 @@ export class MarkdownTextArea extends Component<
/> />
{this.state.previewMode && ( {this.state.previewMode && (
<div <div
className="card bg-transparent border-secondary card-body md-div" className="card border-secondary card-body md-div"
dangerouslySetInnerHTML={mdToHtml(this.state.content)} dangerouslySetInnerHTML={mdToHtml(this.state.content)}
/> />
)} )}

77
src/shared/components/sidebar.tsx
View file

@ -73,14 +73,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
sidebar() { sidebar() {
return ( return (
<div> <div>
<div class="card bg-transparent border-secondary mb-3"> <div class="card border-secondary mb-3">
<div class="card-header bg-transparent border-secondary"> <div class="card-body">
{this.communityTitle()} {this.communityTitle()}
{this.adminButtons()} {this.adminButtons()}
{this.subscribe()}
{this.createPost()}
</div> </div>
<div class="card-body">{this.subscribes()}</div>
</div> </div>
<div class="card bg-transparent border-secondary mb-3"> <div class="card border-secondary mb-3">
<div class="card-body"> <div class="card-body">
{this.description()} {this.description()}
{this.badges()} {this.badges()}
@ -99,19 +100,31 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{this.props.showIcon && ( {this.props.showIcon && (
<BannerIconHeader icon={community.icon} banner={community.banner} /> <BannerIconHeader icon={community.icon} banner={community.banner} />
)} )}
<span>{community.title}</span> <span class="mr-2">{community.title}</span>
{community.subscribed && (
<a
class="btn btn-secondary btn-sm mr-2"
href="#"
onClick={linkEvent(community.id, this.handleUnsubscribe)}
>
<svg class="text-success mr-1 icon icon-inline">
<use xlinkHref="#icon-check"></use>
</svg>
{i18n.t('joined')}
</a>
)}
{community.removed && ( {community.removed && (
<small className="ml-2 text-muted font-italic"> <small className="mr-2 text-muted font-italic">
{i18n.t('removed')} {i18n.t('removed')}
</small> </small>
)} )}
{community.deleted && ( {community.deleted && (
<small className="ml-2 text-muted font-italic"> <small className="mr-2 text-muted font-italic">
{i18n.t('deleted')} {i18n.t('deleted')}
</small> </small>
)} )}
{community.nsfw && ( {community.nsfw && (
<small className="ml-2 text-muted font-italic"> <small className="mr-2 text-muted font-italic">
{i18n.t('nsfw')} {i18n.t('nsfw')}
</small> </small>
)} )}
@ -131,38 +144,38 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
let community = this.props.community; let community = this.props.community;
return ( return (
<ul class="my-1 list-inline"> <ul class="my-1 list-inline">
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_online', { count: this.props.online })} {i18n.t('number_online', { count: this.props.online })}
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_subscribers', { {i18n.t('number_of_subscribers', {
count: community.number_of_subscribers, count: community.number_of_subscribers,
})} })}
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_posts', { {i18n.t('number_of_posts', {
count: community.number_of_posts, count: community.number_of_posts,
})} })}
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_comments', { {i18n.t('number_of_comments', {
count: community.number_of_comments, count: community.number_of_comments,
})} })}
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link className="badge badge-light" to="/communities"> <Link className="badge badge-secondary" to="/communities">
{community.category_name} {community.category_name}
</Link> </Link>
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link <Link
className="badge badge-light" className="badge badge-secondary"
to={`/modlog/community/${this.props.community.id}`} to={`/modlog/community/${this.props.community.id}`}
> >
{i18n.t('modlog')} {i18n.t('modlog')}
</Link> </Link>
</li> </li>
<li className="list-inline-item badge badge-light"> <li className="list-inline-item badge badge-secondary">
<CommunityLink community={community} realLink /> <CommunityLink community={community} realLink />
</li> </li>
</ul> </ul>
@ -191,29 +204,29 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
); );
} }
subscribes() { createPost() {
let community = this.props.community; let community = this.props.community;
return ( return (
<div class="d-flex flex-wrap"> community.subscribed && (
<Link <Link
className={`btn btn-secondary flex-fill mr-2 mb-2 ${ className={`btn btn-secondary btn-block mb-2 ${
community.deleted || community.removed ? 'no-click' : '' community.deleted || community.removed ? 'no-click' : ''
}`} }`}
to={`/create_post?community=${community.name}`} to={`/create_post?community=${community.name}`}
> >
{i18n.t('create_a_post')} {i18n.t('create_a_post')}
</Link> </Link>
{community.subscribed ? ( )
);
}
subscribe() {
let community = this.props.community;
return (
<div class="mb-2">
{!community.subscribed && (
<a <a
class="btn btn-secondary flex-fill mb-2" class="btn btn-secondary btn-block"
href="#"
onClick={linkEvent(community.id, this.handleUnsubscribe)}
>
{i18n.t('unsubscribe')}
</a>
) : (
<a
class="btn btn-secondary flex-fill mb-2"
href="#" href="#"
onClick={linkEvent(community.id, this.handleSubscribe)} onClick={linkEvent(community.id, this.handleSubscribe)}
> >
@ -380,7 +393,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
this.setState(this.state); this.setState(this.state);
} }
handleDeleteClick(i: Sidebar) { handleDeleteClick(i: Sidebar, event: any) {
event.preventDefault(); event.preventDefault();
let deleteForm: DeleteCommunityForm = { let deleteForm: DeleteCommunityForm = {
edit_id: i.props.community.id, edit_id: i.props.community.id,
@ -410,7 +423,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
i.setState(i.state); i.setState(i.state);
} }
handleUnsubscribe(communityId: number) { handleUnsubscribe(communityId: number, event: any) {
event.preventDefault(); event.preventDefault();
let form: FollowCommunityForm = { let form: FollowCommunityForm = {
community_id: communityId, community_id: communityId,
@ -419,7 +432,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
WebSocketService.Instance.followCommunity(form); WebSocketService.Instance.followCommunity(form);
} }
handleSubscribe(communityId: number) { handleSubscribe(communityId: number, event: any) {
event.preventDefault(); event.preventDefault();
let form: FollowCommunityForm = { let form: FollowCommunityForm = {
community_id: communityId, community_id: communityId,
@ -464,7 +477,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
i.setState(i.state); i.setState(i.state);
} }
handleModRemoveSubmit(i: Sidebar) { handleModRemoveSubmit(i: Sidebar, event: any) {
event.preventDefault(); event.preventDefault();
let removeForm: RemoveCommunityForm = { let removeForm: RemoveCommunityForm = {
edit_id: i.props.community.id, edit_id: i.props.community.id,

12
src/shared/components/user.tsx
View file

@ -422,7 +422,7 @@ export class User extends Component<any, UserState> {
<div className="flex-grow-1 unselectable pointer mx-2"></div> <div className="flex-grow-1 unselectable pointer mx-2"></div>
{this.isCurrentUser ? ( {this.isCurrentUser ? (
<button <button
class="d-flex align-self-start btn btn-secondary ml-2" class="d-flex align-self-start btn btn-secondary mr-2"
onClick={linkEvent(this, this.handleLogoutClick)} onClick={linkEvent(this, this.handleLogoutClick)}
> >
{i18n.t('logout')} {i18n.t('logout')}
@ -430,7 +430,7 @@ export class User extends Component<any, UserState> {
) : ( ) : (
<> <>
<a <a
className={`d-flex align-self-start btn btn-secondary ml-2 ${ className={`d-flex align-self-start btn btn-secondary mr-2 ${
!user.matrix_user_id && 'invisible' !user.matrix_user_id && 'invisible'
}`} }`}
target="_blank" target="_blank"
@ -440,7 +440,7 @@ export class User extends Component<any, UserState> {
{i18n.t('send_secure_message')} {i18n.t('send_secure_message')}
</a> </a>
<Link <Link
class="d-flex align-self-start btn btn-secondary ml-2" className={'d-flex align-self-start btn btn-secondary'}
to={`/create_private_message/recipient/${user.id}`} to={`/create_private_message/recipient/${user.id}`}
> >
{i18n.t('send_message')} {i18n.t('send_message')}
@ -489,7 +489,7 @@ export class User extends Component<any, UserState> {
userSettings() { userSettings() {
return ( return (
<div> <div>
<div class="card bg-transparent border-secondary mb-3"> <div class="card border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5>{i18n.t('settings')}</h5> <h5>{i18n.t('settings')}</h5>
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}> <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
@ -834,7 +834,7 @@ export class User extends Component<any, UserState> {
return ( return (
<div> <div>
{this.state.userRes.moderates.length > 0 && ( {this.state.userRes.moderates.length > 0 && (
<div class="card bg-transparent border-secondary mb-3"> <div class="card border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5>{i18n.t('moderates')}</h5> <h5>{i18n.t('moderates')}</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">
@ -857,7 +857,7 @@ export class User extends Component<any, UserState> {
return ( return (
<div> <div>
{this.state.userRes.follows.length > 0 && ( {this.state.userRes.follows.length > 0 && (
<div class="card bg-transparent border-secondary mb-3"> <div class="card border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5>{i18n.t('subscribed')}</h5> <h5>{i18n.t('subscribed')}</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">