LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-01 16:51:13 +00:00
Code Issues Projects Releases Wiki Activity

Updating using touch and mouse up events.

Browse source 
- Fixes #475
- Fixes #467
This commit is contained in:
Dessalines 2021-11-04 11:33:31 -04:00
parent 1734656ba3
commit 7b9f4afe24
1 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -157,12 +157,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{this.props.site_res.site_view && ( {this.props.site_res.site_view && (
<Link <Link
to="/" 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" className="d-flex align-items-center navbar-brand mr-md-3"
onClick={linkEvent(this, this.handleUnExpand)}
> >
{this.props.site_res.site_view.site.icon && showAvatars() && ( {this.props.site_res.site_view.site.icon && showAvatars() && (
<PictrsImage <PictrsImage
@ -180,7 +181,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/inbox" to="/inbox"
className="p-1 navbar-toggler nav-link border-0" className="p-1 navbar-toggler nav-link border-0"
onClick={linkEvent(this, this.handleUnExpand)} 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),
@ -201,7 +203,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/reports" to="/reports"
className="p-1 navbar-toggler nav-link border-0" className="p-1 navbar-toggler nav-link border-0"
onClick={linkEvent(this, this.handleUnExpand)} 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),
@ -223,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" />
@ -236,7 +239,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/communities" to="/communities"
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)} onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("communities")} title={i18n.t("communities")}
> >
{i18n.t("communities")} {i18n.t("communities")}
@ -249,7 +253,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
prevPath: this.currentLocation, prevPath: this.currentLocation,
}} }}
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)} 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")}
@ -260,7 +265,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/create_community" to="/create_community"
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)} 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")}
@ -283,7 +289,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/admin" to="/admin"
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)} 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" />
@ -331,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),
@ -351,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),
@ -370,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"
@ -385,12 +399,17 @@ 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">
<Link <Link
to={`/u/${UserService.Instance.myUserInfo.local_user_view.person.name}`} to={`/u/${UserService.Instance.myUserInfo.local_user_view.person.name}`}
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)}
title={i18n.t("profile")} title={i18n.t("profile")}
> >
<Icon icon="user" classes="mr-1" /> <Icon icon="user" classes="mr-1" />
@ -401,7 +420,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/settings" to="/settings"
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)}
title={i18n.t("settings")} title={i18n.t("settings")}
> >
<Icon icon="settings" classes="mr-1" /> <Icon icon="settings" classes="mr-1" />
@ -432,7 +450,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/login" to="/login"
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)} onTouchEnd={linkEvent(this, this.handleHideExpandNavbar)}
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("login")} title={i18n.t("login")}
> >
{i18n.t("login")} {i18n.t("login")}
@ -442,7 +461,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<Link <Link
to="/signup" to="/signup"
className="nav-link" className="nav-link"
onClick={linkEvent(this, this.handleUnExpand)} 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")}
@ -456,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);
@ -496,11 +520,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
location.reload(); location.reload();
} }
handleUnExpand(i: Navbar) { handleToggleDropdown(i: Navbar) {
i.setState({ showDropdown: false, expanded: false });
}
handleShowDropdown(i: Navbar) {
i.state.showDropdown = !i.state.showDropdown; i.state.showDropdown = !i.state.showDropdown;
i.setState(i.state); i.setState(i.state);
} }