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

Navbar links (#476)

Browse source 
* Try using navbar links. Not working currently

* Updating using touch and mouse up events.

- Fixes #475
- Fixes #467
This commit is contained in:
Dessalines 2021-11-05 16:34:35 -04:00 committed by GitHub
parent 8356ece70e
commit cd9bd19b7f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 87 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
src/shared/components/app/navbar.tsx
View file

@ -155,13 +155,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3"> <nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container"> <div class="container">
{this.props.site_res.site_view && ( {this.props.site_res.site_view && (
<button <Link
to="/"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={ title={
this.props.site_res.site_view.site.description || this.props.site_res.site_view.site.description ||
this.props.site_res.site_view.site.name this.props.site_res.site_view.site.name
} }
className="d-flex align-items-center navbar-brand mr-md-3 btn btn-link" className="d-flex align-items-center navbar-brand mr-md-3"
onClick={linkEvent(this, this.handleGotoHome)}
> >
{this.props.site_res.site_view.site.icon && showAvatars() && ( {this.props.site_res.site_view.site.icon && showAvatars() && (
<PictrsImage <PictrsImage
@ -170,15 +172,17 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
/> />
)} )}
{this.props.site_res.site_view.site.name} {this.props.site_res.site_view.site.name}
</button> </Link>
)} )}
{this.state.isLoggedIn && ( {this.state.isLoggedIn && (
<> <>
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li className="nav-item"> <li className="nav-item">
<button <Link
className="p-1 navbar-toggler nav-link border-0 btn btn-link" to="/inbox"
onClick={linkEvent(this, this.handleGotoInbox)} className="p-1 navbar-toggler nav-link border-0"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_messages", { title={i18n.t("unread_messages", {
count: this.state.unreadInboxCount, count: this.state.unreadInboxCount,
formattedCount: numToSI(this.state.unreadInboxCount), formattedCount: numToSI(this.state.unreadInboxCount),
@ -190,15 +194,17 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{numToSI(this.state.unreadInboxCount)} {numToSI(this.state.unreadInboxCount)}
</span> </span>
)} )}
</button> </Link>
</li> </li>
</ul> </ul>
{UserService.Instance.myUserInfo?.moderates.length > 0 && ( {UserService.Instance.myUserInfo?.moderates.length > 0 && (
<ul class="navbar-nav ml-1"> <ul class="navbar-nav ml-1">
<li className="nav-item"> <li className="nav-item">
<button <Link
className="p-1 navbar-toggler nav-link border-0 btn btn-link" to="/reports"
onClick={linkEvent(this, this.handleGotoReports)} className="p-1 navbar-toggler nav-link border-0"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_reports", { title={i18n.t("unread_reports", {
count: this.state.unreadReportCount, count: this.state.unreadReportCount,
formattedCount: numToSI(this.state.unreadReportCount), formattedCount: numToSI(this.state.unreadReportCount),
@ -210,7 +216,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{numToSI(this.state.unreadReportCount)} {numToSI(this.state.unreadReportCount)}
</span> </span>
)} )}
</button> </Link>
</li> </li>
</ul> </ul>
)} )}
@ -220,7 +226,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
class="navbar-toggler border-0 p-1" class="navbar-toggler border-0 p-1"
type="button" type="button"
aria-label="menu" aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)} onClick={linkEvent(this, this.handleToggleExpandNavbar)}
data-tippy-content={i18n.t("expand_here")} data-tippy-content={i18n.t("expand_here")}
> >
<Icon icon="menu" /> <Icon icon="menu" />
@ -230,32 +236,41 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
> >
<ul class="navbar-nav my-2 mr-auto"> <ul class="navbar-nav my-2 mr-auto">
<li class="nav-item"> <li class="nav-item">
<button <Link
className="nav-link btn btn-link" to="/communities"
onClick={linkEvent(this, this.handleGotoCommunities)} className="nav-link"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("communities")} title={i18n.t("communities")}
> >
{i18n.t("communities")} {i18n.t("communities")}
</button> </Link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<button <Link
className="nav-link btn btn-link" to={{
onClick={linkEvent(this, this.handleGotoCreatePost)} pathname: "/create_post",
prevPath: this.currentLocation,
}}
className="nav-link"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("create_post")} title={i18n.t("create_post")}
> >
{i18n.t("create_post")} {i18n.t("create_post")}
</button> </Link>
</li> </li>
{this.canCreateCommunity && ( {this.canCreateCommunity && (
<li class="nav-item"> <li class="nav-item">
<button <Link
className="nav-link btn btn-link" to="/create_community"
onClick={linkEvent(this, this.handleGotoCreateCommunity)} className="nav-link"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("create_community")} title={i18n.t("create_community")}
> >
{i18n.t("create_community")} {i18n.t("create_community")}
</button> </Link>
</li> </li>
)} )}
<li class="nav-item"> <li class="nav-item">
@ -271,13 +286,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<ul class="navbar-nav my-2"> <ul class="navbar-nav my-2">
{this.canAdmin && ( {this.canAdmin && (
<li className="nav-item"> <li className="nav-item">
<button <Link
className="nav-link btn btn-link" to="/admin"
onClick={linkEvent(this, this.handleGotoAdmin)} className="nav-link"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("admin_settings")} title={i18n.t("admin_settings")}
> >
<Icon icon="settings" /> <Icon icon="settings" />
</button> </Link>
</li> </li>
)} )}
</ul> </ul>
@ -321,6 +338,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
className="nav-link" className="nav-link"
to="/inbox" to="/inbox"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_messages", { title={i18n.t("unread_messages", {
count: this.state.unreadInboxCount, count: this.state.unreadInboxCount,
formattedCount: numToSI(this.state.unreadInboxCount), formattedCount: numToSI(this.state.unreadInboxCount),
@ -341,6 +360,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
className="nav-link" className="nav-link"
to="/reports" to="/reports"
onTouchEnd={linkEvent(
this,
this.handleHideExpandNavbar
)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_reports", { title={i18n.t("unread_reports", {
count: this.state.unreadReportCount, count: this.state.unreadReportCount,
formattedCount: numToSI(this.state.unreadReportCount), formattedCount: numToSI(this.state.unreadReportCount),
@ -360,7 +384,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<button <button
class="nav-link btn btn-link dropdown-toggle" class="nav-link btn btn-link dropdown-toggle"
onClick={linkEvent(this, this.handleShowDropdown)} onClick={linkEvent(this, this.handleToggleDropdown)}
id="navbarDropdown" id="navbarDropdown"
role="button" role="button"
aria-expanded="false" aria-expanded="false"
@ -375,26 +399,32 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</span> </span>
</button> </button>
{this.state.showDropdown && ( {this.state.showDropdown && (
<div class="dropdown-content"> <div
class="dropdown-content"
onMouseLeave={linkEvent(
this,
this.handleToggleDropdown
)}
>
<li className="nav-item"> <li className="nav-item">
<button <Link
className="nav-link btn btn-link" to={`/u/${UserService.Instance.myUserInfo.local_user_view.person.name}`}
onClick={linkEvent(this, this.handleGotoProfile)} className="nav-link"
title={i18n.t("profile")} title={i18n.t("profile")}
> >
<Icon icon="user" classes="mr-1" /> <Icon icon="user" classes="mr-1" />
{i18n.t("profile")} {i18n.t("profile")}
</button> </Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<button <Link
className="nav-link btn btn-link" to="/settings"
onClick={linkEvent(this, this.handleGotoSettings)} className="nav-link"
title={i18n.t("settings")} title={i18n.t("settings")}
> >
<Icon icon="settings" classes="mr-1" /> <Icon icon="settings" classes="mr-1" />
{i18n.t("settings")} {i18n.t("settings")}
</button> </Link>
</li> </li>
<li> <li>
<hr class="dropdown-divider" /> <hr class="dropdown-divider" />
@ -417,22 +447,26 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
) : ( ) : (
<ul class="navbar-nav my-2"> <ul class="navbar-nav my-2">
<li className="nav-item"> <li className="nav-item">
<button <Link
className="nav-link btn btn-link" to="/login"
onClick={linkEvent(this, this.handleGotoLogin)} className="nav-link"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("login")} title={i18n.t("login")}
> >
{i18n.t("login")} {i18n.t("login")}
</button> </Link>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<button <Link
className="nav-link btn btn-link" to="/signup"
onClick={linkEvent(this, this.handleGotoSignup)} className="nav-link"
onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("sign_up")} title={i18n.t("sign_up")}
> >
{i18n.t("sign_up")} {i18n.t("sign_up")}
</button> </Link>
</li> </li>
</ul> </ul>
)} )}
@ -442,11 +476,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
); );
} }
expandNavbar(i: Navbar) { handleToggleExpandNavbar(i: Navbar) {
i.state.expanded = !i.state.expanded; i.state.expanded = !i.state.expanded;
i.setState(i.state); i.setState(i.state);
} }
handleHideExpandNavbar(i: Navbar) {
i.setState({ expanded: false, showDropdown: false });
}
handleSearchParam(i: Navbar, event: any) { handleSearchParam(i: Navbar, event: any) {
i.state.searchParam = event.target.value; i.state.searchParam = event.target.value;
i.setState(i.state); i.setState(i.state);
@ -482,66 +520,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
location.reload(); location.reload();
} }
handleGotoSettings(i: Navbar) { handleToggleDropdown(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push("/settings");
}
handleGotoProfile(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(
`/u/${UserService.Instance.myUserInfo.local_user_view.person.name}`
);
}
handleGotoCreatePost(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push("/create_post", {
prevPath: i.currentLocation,
});
}
handleGotoCreateCommunity(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/create_community`);
}
handleGotoCommunities(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/communities`);
}
handleGotoHome(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/`);
}
handleGotoInbox(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/inbox`);
}
handleGotoReports(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/reports`);
}
handleGotoAdmin(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/admin`);
}
handleGotoLogin(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/login`);
}
handleGotoSignup(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
i.context.router.history.push(`/signup`);
}
handleShowDropdown(i: Navbar) {
i.state.showDropdown = !i.state.showDropdown; i.state.showDropdown = !i.state.showDropdown;
i.setState(i.state); i.setState(i.state);
} }