From fb1163e27f3bfd103c435ebb1fa1b6a4017f36b9 Mon Sep 17 00:00:00 2001 From: Dessalines <tyhou13@gmx.com> Date: Wed, 23 Sep 2020 18:01:45 -0500 Subject: [PATCH] Re-arranging subscribed. Removing transparent cards. Fixes #38" --- src/shared/components/community.tsx | 2 +- src/shared/components/iframely-card.tsx | 2 +- src/shared/components/main.tsx | 95 +++++++++++---------- src/shared/components/markdown-textarea.tsx | 2 +- src/shared/components/sidebar.tsx | 77 ++++++++++------- src/shared/components/user.tsx | 12 +-- 6 files changed, 102 insertions(+), 88 deletions(-) diff --git a/src/shared/components/community.tsx b/src/shared/components/community.tsx index b76a216..e994d0b 100644 --- a/src/shared/components/community.tsx +++ b/src/shared/components/community.tsx @@ -243,7 +243,7 @@ export class Community extends Component<any, State> { <HtmlTags title={this.documentTitle} 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} /> {this.communityInfo()} diff --git a/src/shared/components/iframely-card.tsx b/src/shared/components/iframely-card.tsx index 6a604f7..c62bf3d 100644 --- a/src/shared/components/iframely-card.tsx +++ b/src/shared/components/iframely-card.tsx @@ -29,7 +29,7 @@ export class IFramelyCard extends Component< return ( <> {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="col-12"> <div class="card-body"> diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx index 54bb66b..7a5f814 100644 --- a/src/shared/components/main.tsx +++ b/src/shared/components/main.tsx @@ -274,28 +274,25 @@ export class Main extends Component<any, MainState> { <div> {!this.state.loading && ( <div> - <div class="card bg-transparent 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 border-secondary mb-3"> <div class="card-body"> {this.trendingCommunities()} {this.createCommunityButton()} - {/* TODO - {this.subscribedCommunities()} - */} </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> - <div class="card bg-transparent border-secondary"> + <div class="card border-secondary"> <div class="card-body">{this.landing()}</div> </div> </div> @@ -336,34 +333,31 @@ export class Main extends Component<any, MainState> { subscribedCommunities() { return ( - UserService.Instance.user && - this.state.subscribedCommunities.length > 0 && ( - <div> - <h5> - <T i18nKey="subscribed_to_communities"> + <div> + <h5> + <T i18nKey="subscribed_to_communities"> + # + <Link className="text-body" to="/communities"> # - <Link className="text-body" to="/communities"> - # - </Link> - </T> - </h5> - <ul class="list-inline"> - {this.state.subscribedCommunities.map(community => ( - <li class="list-inline-item"> - <CommunityLink - community={{ - name: community.community_name, - id: community.community_id, - local: community.community_local, - actor_id: community.community_actor_id, - icon: community.community_icon, - }} - /> - </li> - ))} - </ul> - </div> - ) + </Link> + </T> + </h5> + <ul class="list-inline mb-0"> + {this.state.subscribedCommunities.map(community => ( + <li class="list-inline-item"> + <CommunityLink + community={{ + name: community.community_name, + id: community.community_id, + local: community.community_local, + actor_id: community.community_actor_id, + icon: community.community_icon, + }} + /> + </li> + ))} + </ul> + </div> ); } @@ -371,7 +365,14 @@ export class Main extends Component<any, MainState> { return ( <div> {!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 site={this.state.siteRes.site} @@ -431,31 +432,31 @@ export class Main extends Component<any, MainState> { badges() { return ( <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 })} </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> {i18n.t('number_of_users', { count: this.state.siteRes.site.number_of_users, })} </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> {i18n.t('number_of_communities', { count: this.state.siteRes.site.number_of_communities, })} </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> {i18n.t('number_of_posts', { count: this.state.siteRes.site.number_of_posts, })} </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> {i18n.t('number_of_comments', { count: this.state.siteRes.site.number_of_comments, })} </li> <li className="list-inline-item"> - <Link className="badge badge-light" to="/modlog"> + <Link className="badge badge-secondary" to="/modlog"> {i18n.t('modlog')} </Link> </li> diff --git a/src/shared/components/markdown-textarea.tsx b/src/shared/components/markdown-textarea.tsx index a14ca5c..792107b 100644 --- a/src/shared/components/markdown-textarea.tsx +++ b/src/shared/components/markdown-textarea.tsx @@ -133,7 +133,7 @@ export class MarkdownTextArea extends Component< /> {this.state.previewMode && ( <div - className="card bg-transparent border-secondary card-body md-div" + className="card border-secondary card-body md-div" dangerouslySetInnerHTML={mdToHtml(this.state.content)} /> )} diff --git a/src/shared/components/sidebar.tsx b/src/shared/components/sidebar.tsx index 60f7d79..65ef707 100644 --- a/src/shared/components/sidebar.tsx +++ b/src/shared/components/sidebar.tsx @@ -73,14 +73,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { sidebar() { return ( <div> - <div class="card bg-transparent border-secondary mb-3"> - <div class="card-header bg-transparent border-secondary"> + <div class="card border-secondary mb-3"> + <div class="card-body"> {this.communityTitle()} {this.adminButtons()} + {this.subscribe()} + {this.createPost()} </div> - <div class="card-body">{this.subscribes()}</div> </div> - <div class="card bg-transparent border-secondary mb-3"> + <div class="card border-secondary mb-3"> <div class="card-body"> {this.description()} {this.badges()} @@ -99,19 +100,31 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { {this.props.showIcon && ( <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 && ( - <small className="ml-2 text-muted font-italic"> + <small className="mr-2 text-muted font-italic"> {i18n.t('removed')} </small> )} {community.deleted && ( - <small className="ml-2 text-muted font-italic"> + <small className="mr-2 text-muted font-italic"> {i18n.t('deleted')} </small> )} {community.nsfw && ( - <small className="ml-2 text-muted font-italic"> + <small className="mr-2 text-muted font-italic"> {i18n.t('nsfw')} </small> )} @@ -131,38 +144,38 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { let community = this.props.community; return ( <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 })} </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> {i18n.t('number_of_subscribers', { count: community.number_of_subscribers, })} </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> {i18n.t('number_of_posts', { count: community.number_of_posts, })} </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> {i18n.t('number_of_comments', { count: community.number_of_comments, })} </li> <li className="list-inline-item"> - <Link className="badge badge-light" to="/communities"> + <Link className="badge badge-secondary" to="/communities"> {community.category_name} </Link> </li> <li className="list-inline-item"> <Link - className="badge badge-light" + className="badge badge-secondary" to={`/modlog/community/${this.props.community.id}`} > {i18n.t('modlog')} </Link> </li> - <li className="list-inline-item badge badge-light"> + <li className="list-inline-item badge badge-secondary"> <CommunityLink community={community} realLink /> </li> </ul> @@ -191,29 +204,29 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { ); } - subscribes() { + createPost() { let community = this.props.community; return ( - <div class="d-flex flex-wrap"> + community.subscribed && ( <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' : '' }`} to={`/create_post?community=${community.name}`} > {i18n.t('create_a_post')} </Link> - {community.subscribed ? ( - <a - class="btn btn-secondary flex-fill mb-2" - href="#" - onClick={linkEvent(community.id, this.handleUnsubscribe)} - > - {i18n.t('unsubscribe')} - </a> - ) : ( + ) + ); + } + + subscribe() { + let community = this.props.community; + return ( + <div class="mb-2"> + {!community.subscribed && ( <a - class="btn btn-secondary flex-fill mb-2" + class="btn btn-secondary btn-block" href="#" onClick={linkEvent(community.id, this.handleSubscribe)} > @@ -380,7 +393,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { this.setState(this.state); } - handleDeleteClick(i: Sidebar) { + handleDeleteClick(i: Sidebar, event: any) { event.preventDefault(); let deleteForm: DeleteCommunityForm = { edit_id: i.props.community.id, @@ -410,7 +423,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { i.setState(i.state); } - handleUnsubscribe(communityId: number) { + handleUnsubscribe(communityId: number, event: any) { event.preventDefault(); let form: FollowCommunityForm = { community_id: communityId, @@ -419,7 +432,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { WebSocketService.Instance.followCommunity(form); } - handleSubscribe(communityId: number) { + handleSubscribe(communityId: number, event: any) { event.preventDefault(); let form: FollowCommunityForm = { community_id: communityId, @@ -464,7 +477,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { i.setState(i.state); } - handleModRemoveSubmit(i: Sidebar) { + handleModRemoveSubmit(i: Sidebar, event: any) { event.preventDefault(); let removeForm: RemoveCommunityForm = { edit_id: i.props.community.id, diff --git a/src/shared/components/user.tsx b/src/shared/components/user.tsx index 9febcd8..665b035 100644 --- a/src/shared/components/user.tsx +++ b/src/shared/components/user.tsx @@ -422,7 +422,7 @@ export class User extends Component<any, UserState> { <div className="flex-grow-1 unselectable pointer mx-2"></div> {this.isCurrentUser ? ( <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)} > {i18n.t('logout')} @@ -430,7 +430,7 @@ export class User extends Component<any, UserState> { ) : ( <> <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' }`} target="_blank" @@ -440,7 +440,7 @@ export class User extends Component<any, UserState> { {i18n.t('send_secure_message')} </a> <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}`} > {i18n.t('send_message')} @@ -489,7 +489,7 @@ export class User extends Component<any, UserState> { userSettings() { return ( <div> - <div class="card bg-transparent border-secondary mb-3"> + <div class="card border-secondary mb-3"> <div class="card-body"> <h5>{i18n.t('settings')}</h5> <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}> @@ -834,7 +834,7 @@ export class User extends Component<any, UserState> { return ( <div> {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"> <h5>{i18n.t('moderates')}</h5> <ul class="list-unstyled mb-0"> @@ -857,7 +857,7 @@ export class User extends Component<any, UserState> { return ( <div> {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"> <h5>{i18n.t('subscribed')}</h5> <ul class="list-unstyled mb-0"> -- 2.44.1