mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-30 00:01:15 +00:00
Navbar links (#476)
* Try using navbar links. Not working currently * Updating using touch and mouse up events. - Fixes #475 - Fixes #467
This commit is contained in:
parent
8356ece70e
commit
cd9bd19b7f
1 changed files with 87 additions and 108 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue