From 47a0b8d4b9c38c58744147d75637312651af17c5 Mon Sep 17 00:00:00 2001 From: Dessalines <dessalines@users.noreply.github.com> Date: Fri, 15 Apr 2022 12:21:57 -0400 Subject: [PATCH] Adding sidebar and subscribed collapse. Fixes #609 (#622) --- src/shared/components/home/home.tsx | 80 +++++++++++++++++++++++------ 1 file changed, 65 insertions(+), 15 deletions(-) diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 95c34f0..3f6282a 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -78,6 +78,8 @@ interface HomeState { showSubscribedMobile: boolean; showTrendingMobile: boolean; showSidebarMobile: boolean; + sidebarCollapsed: boolean; + subscribedCollapsed: boolean; loading: boolean; posts: PostView[]; comments: CommentView[]; @@ -111,6 +113,8 @@ export class Home extends Component<any, HomeState> { showSubscribedMobile: false, showTrendingMobile: false, showSidebarMobile: false, + subscribedCollapsed: false, + sidebarCollapsed: false, loading: true, posts: [], comments: [], @@ -366,16 +370,16 @@ export class Home extends Component<any, HomeState> { </div> </div> + <div class="card border-secondary mb-3"> + <div class="card-body">{this.sidebar()}</div> + </div> + {UserService.Instance.myUserInfo && UserService.Instance.myUserInfo.follows.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> )} </div> @@ -424,20 +428,34 @@ export class Home extends Component<any, HomeState> { return ( <div> <h5> - <T i18nKey="subscribed_to_communities"> + <T class="d-inline" i18nKey="subscribed_to_communities"> # <Link className="text-body" to="/communities"> # </Link> </T> + <button + class="btn btn-sm text-muted" + onClick={linkEvent(this, this.handleCollapseSubscribe)} + aria-label={i18n.t("collapse")} + data-tippy-content={i18n.t("collapse")} + > + {this.state.subscribedCollapsed ? ( + <Icon icon="plus-square" classes="icon-inline" /> + ) : ( + <Icon icon="minus-square" classes="icon-inline" /> + )} + </button> </h5> - <ul class="list-inline mb-0"> - {UserService.Instance.myUserInfo.follows.map(cfv => ( - <li class="list-inline-item d-inline-block"> - <CommunityLink community={cfv.community} /> - </li> - ))} - </ul> + {!this.state.subscribedCollapsed && ( + <ul class="list-inline mb-0"> + {UserService.Instance.myUserInfo.follows.map(cfv => ( + <li class="list-inline-item d-inline-block"> + <CommunityLink community={cfv.community} /> + </li> + ))} + </ul> + )} </div> ); } @@ -452,8 +470,12 @@ export class Home extends Component<any, HomeState> { {this.siteName()} {this.adminButtons()} </div> - <BannerIconHeader banner={site.banner} /> - {this.siteInfo()} + {!this.state.sidebarCollapsed && ( + <> + <BannerIconHeader banner={site.banner} /> + {this.siteInfo()} + </> + )} </div> ) : ( <SiteForm site={site} onCancel={this.handleEditCancel} /> @@ -486,7 +508,25 @@ export class Home extends Component<any, HomeState> { siteName() { let site = this.state.siteRes.site_view.site; - return site.name && <h5 class="mb-0">{site.name}</h5>; + return ( + site.name && ( + <h5 class="mb-0 d-inline"> + {site.name} + <button + class="btn btn-sm text-muted" + onClick={linkEvent(this, this.handleCollapseSidebar)} + aria-label={i18n.t("collapse")} + data-tippy-content={i18n.t("collapse")} + > + {this.state.sidebarCollapsed ? ( + <Icon icon="plus-square" classes="icon-inline" /> + ) : ( + <Icon icon="minus-square" classes="icon-inline" /> + )} + </button> + </h5> + ) + ); } admins() { @@ -761,6 +801,16 @@ export class Home extends Component<any, HomeState> { i.setState(i.state); } + handleCollapseSubscribe(i: Home) { + i.state.subscribedCollapsed = !i.state.subscribedCollapsed; + i.setState(i.state); + } + + handleCollapseSidebar(i: Home) { + i.state.sidebarCollapsed = !i.state.sidebarCollapsed; + i.setState(i.state); + } + handlePageChange(page: number) { this.updateUrl({ page }); window.scrollTo(0, 0); -- 2.44.1