LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 14:21:13 +00:00
Code Issues Projects Releases Wiki Activity

Adding sidebar and subscribed collapse. Fixes #609 (#622)

Browse source
This commit is contained in:
Dessalines 2022-04-15 12:21:57 -04:00 committed by GitHub
parent 35f1e06222
commit 47a0b8d4b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/shared/components/home/home.tsx
View file

@ -78,6 +78,8 @@ interface HomeState {
showSubscribedMobile: boolean; showSubscribedMobile: boolean;
showTrendingMobile: boolean; showTrendingMobile: boolean;
showSidebarMobile: boolean; showSidebarMobile: boolean;
sidebarCollapsed: boolean;
subscribedCollapsed: boolean;
loading: boolean; loading: boolean;
posts: PostView[]; posts: PostView[];
comments: CommentView[]; comments: CommentView[];
@ -111,6 +113,8 @@ export class Home extends Component<any, HomeState> {
showSubscribedMobile: false, showSubscribedMobile: false,
showTrendingMobile: false, showTrendingMobile: false,
showSidebarMobile: false, showSidebarMobile: false,
subscribedCollapsed: false,
sidebarCollapsed: false,
loading: true, loading: true,
posts: [], posts: [],
comments: [], comments: [],
@ -366,16 +370,16 @@ export class Home extends Component<any, HomeState> {
</div> </div>
</div> </div>
<div class="card border-secondary mb-3">
<div class="card-body">{this.sidebar()}</div>
</div>
{UserService.Instance.myUserInfo && {UserService.Instance.myUserInfo &&
UserService.Instance.myUserInfo.follows.length > 0 && ( UserService.Instance.myUserInfo.follows.length > 0 && (
<div class="card border-secondary mb-3"> <div class="card border-secondary mb-3">
<div class="card-body">{this.subscribedCommunities()}</div> <div class="card-body">{this.subscribedCommunities()}</div>
</div> </div>
)} )}
<div class="card border-secondary mb-3">
<div class="card-body">{this.sidebar()}</div>
</div>
</div> </div>
)} )}
</div> </div>
@ -424,13 +428,26 @@ export class Home extends Component<any, HomeState> {
return ( return (
<div> <div>
<h5> <h5>
<T i18nKey="subscribed_to_communities"> <T class="d-inline" i18nKey="subscribed_to_communities">
# #
<Link className="text-body" to="/communities"> <Link className="text-body" to="/communities">
# #
</Link> </Link>
</T> </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> </h5>
{!this.state.subscribedCollapsed && (
<ul class="list-inline mb-0"> <ul class="list-inline mb-0">
{UserService.Instance.myUserInfo.follows.map(cfv => ( {UserService.Instance.myUserInfo.follows.map(cfv => (
<li class="list-inline-item d-inline-block"> <li class="list-inline-item d-inline-block">
@ -438,6 +455,7 @@ export class Home extends Component<any, HomeState> {
</li> </li>
))} ))}
</ul> </ul>
)}
</div> </div>
); );
} }
@ -452,8 +470,12 @@ export class Home extends Component<any, HomeState> {
{this.siteName()} {this.siteName()}
{this.adminButtons()} {this.adminButtons()}
</div> </div>
{!this.state.sidebarCollapsed && (
<>
<BannerIconHeader banner={site.banner} /> <BannerIconHeader banner={site.banner} />
{this.siteInfo()} {this.siteInfo()}
</>
)}
</div> </div>
) : ( ) : (
<SiteForm site={site} onCancel={this.handleEditCancel} /> <SiteForm site={site} onCancel={this.handleEditCancel} />
@ -486,7 +508,25 @@ export class Home extends Component<any, HomeState> {
siteName() { siteName() {
let site = this.state.siteRes.site_view.site; 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() { admins() {
@ -761,6 +801,16 @@ export class Home extends Component<any, HomeState> {
i.setState(i.state); 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) { handlePageChange(page: number) {
this.updateUrl({ page }); this.updateUrl({ page });
window.scrollTo(0, 0); window.scrollTo(0, 0);