mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-08 09:34:16 +00:00
Merge branch 'main' into fix_line_formatting
This commit is contained in:
commit
599798cc62
|
@ -305,16 +305,6 @@ pre {
|
||||||
transition: width 0.2s ease-out 0s !important;
|
transition: width 0.2s ease-out 0s !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-input {
|
|
||||||
width: 13vw !important;
|
|
||||||
}
|
|
||||||
.hide-input {
|
|
||||||
background: transparent !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
width: 0px !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
br.big {
|
br.big {
|
||||||
display: block;
|
display: block;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, createRef, linkEvent, RefObject } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import { NavLink } from "inferno-router";
|
import { NavLink } from "inferno-router";
|
||||||
import {
|
import {
|
||||||
CommentResponse,
|
CommentResponse,
|
||||||
|
@ -44,7 +44,6 @@ interface NavbarState {
|
||||||
unreadReportCount: number;
|
unreadReportCount: number;
|
||||||
unreadApplicationCount: number;
|
unreadApplicationCount: number;
|
||||||
searchParam: string;
|
searchParam: string;
|
||||||
toggleSearch: boolean;
|
|
||||||
showDropdown: boolean;
|
showDropdown: boolean;
|
||||||
onSiteBanner?(url: string): any;
|
onSiteBanner?(url: string): any;
|
||||||
}
|
}
|
||||||
|
@ -55,14 +54,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
private unreadInboxCountSub: Subscription;
|
private unreadInboxCountSub: Subscription;
|
||||||
private unreadReportCountSub: Subscription;
|
private unreadReportCountSub: Subscription;
|
||||||
private unreadApplicationCountSub: Subscription;
|
private unreadApplicationCountSub: Subscription;
|
||||||
private searchTextField: RefObject<HTMLInputElement>;
|
|
||||||
state: NavbarState = {
|
state: NavbarState = {
|
||||||
unreadInboxCount: 0,
|
unreadInboxCount: 0,
|
||||||
unreadReportCount: 0,
|
unreadReportCount: 0,
|
||||||
unreadApplicationCount: 0,
|
unreadApplicationCount: 0,
|
||||||
expanded: false,
|
expanded: false,
|
||||||
searchParam: "",
|
searchParam: "",
|
||||||
toggleSearch: false,
|
|
||||||
showDropdown: false,
|
showDropdown: false,
|
||||||
};
|
};
|
||||||
subscription: any;
|
subscription: any;
|
||||||
|
@ -77,8 +74,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
// Subscribe to jwt changes
|
// Subscribe to jwt changes
|
||||||
if (isBrowser()) {
|
if (isBrowser()) {
|
||||||
this.searchTextField = createRef();
|
|
||||||
|
|
||||||
// On the first load, check the unreads
|
// On the first load, check the unreads
|
||||||
let auth = myAuth(false);
|
let auth = myAuth(false);
|
||||||
if (auth && UserService.Instance.myUserInfo) {
|
if (auth && UserService.Instance.myUserInfo) {
|
||||||
|
@ -123,7 +118,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
updateUrl() {
|
updateUrl() {
|
||||||
const searchParam = this.state.searchParam;
|
const searchParam = this.state.searchParam;
|
||||||
this.setState({ searchParam: "" });
|
this.setState({ searchParam: "" });
|
||||||
this.setState({ toggleSearch: false });
|
|
||||||
this.setState({ showDropdown: false, expanded: false });
|
this.setState({ showDropdown: false, expanded: false });
|
||||||
if (searchParam === "") {
|
if (searchParam === "") {
|
||||||
this.context.router.history.push(`/search/`);
|
this.context.router.history.push(`/search/`);
|
||||||
|
@ -308,35 +302,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
) && (
|
) && (
|
||||||
<ul className="navbar-nav">
|
<ul className="navbar-nav">
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<form
|
<NavLink
|
||||||
className="form-inline mr-1"
|
to="/search"
|
||||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
className="nav-link"
|
||||||
|
title={i18n.t("search")}
|
||||||
>
|
>
|
||||||
<input
|
<Icon icon="search" />
|
||||||
id="search-input"
|
</NavLink>
|
||||||
className={`form-control mr-0 search-input ${
|
|
||||||
this.state.toggleSearch ? "show-input" : "hide-input"
|
|
||||||
}`}
|
|
||||||
onInput={linkEvent(this, this.handleSearchParam)}
|
|
||||||
value={this.state.searchParam}
|
|
||||||
ref={this.searchTextField}
|
|
||||||
disabled={!this.state.toggleSearch}
|
|
||||||
type="text"
|
|
||||||
placeholder={i18n.t("search")}
|
|
||||||
onBlur={linkEvent(this, this.handleSearchBlur)}
|
|
||||||
></input>
|
|
||||||
<label className="sr-only" htmlFor="search-input">
|
|
||||||
{i18n.t("search")}
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
name="search-btn"
|
|
||||||
onClick={linkEvent(this, this.handleSearchBtn)}
|
|
||||||
className="px-1 btn btn-link nav-link"
|
|
||||||
aria-label={i18n.t("search")}
|
|
||||||
>
|
|
||||||
<Icon icon="search" />
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
|
@ -520,28 +492,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
i.setState({ searchParam: event.target.value });
|
i.setState({ searchParam: event.target.value });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSearchSubmit(i: Navbar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
i.updateUrl();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSearchBtn(i: Navbar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
i.setState({ toggleSearch: true });
|
|
||||||
|
|
||||||
i.searchTextField.current?.focus();
|
|
||||||
const offsetWidth = i.searchTextField.current?.offsetWidth;
|
|
||||||
if (i.state.searchParam && offsetWidth && offsetWidth > 100) {
|
|
||||||
i.updateUrl();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSearchBlur(i: Navbar, event: any) {
|
|
||||||
if (!(event.relatedTarget && event.relatedTarget.name !== "search-btn")) {
|
|
||||||
i.setState({ toggleSearch: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleLogoutClick(i: Navbar) {
|
handleLogoutClick(i: Navbar) {
|
||||||
i.setState({ showDropdown: false, expanded: false });
|
i.setState({ showDropdown: false, expanded: false });
|
||||||
UserService.Instance.logout();
|
UserService.Instance.logout();
|
||||||
|
|
|
@ -163,27 +163,29 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
? i18n.t("purge_comment")
|
? i18n.t("purge_comment")
|
||||||
: `${i18n.t("purge")} ${cv.creator.name}`;
|
: `${i18n.t("purge")} ${cv.creator.name}`;
|
||||||
|
|
||||||
let canMod_ = canMod(
|
let canMod_ =
|
||||||
cv.creator.id,
|
canMod(cv.creator.id, this.props.moderators, this.props.admins) &&
|
||||||
this.props.moderators,
|
cv.community.local;
|
||||||
this.props.admins
|
let canModOnSelf =
|
||||||
);
|
canMod(
|
||||||
let canModOnSelf = canMod(
|
cv.creator.id,
|
||||||
cv.creator.id,
|
this.props.moderators,
|
||||||
this.props.moderators,
|
this.props.admins,
|
||||||
this.props.admins,
|
UserService.Instance.myUserInfo,
|
||||||
UserService.Instance.myUserInfo,
|
true
|
||||||
true
|
) && cv.community.local;
|
||||||
);
|
let canAdmin_ =
|
||||||
let canAdmin_ = canAdmin(cv.creator.id, this.props.admins);
|
canAdmin(cv.creator.id, this.props.admins) && cv.community.local;
|
||||||
let canAdminOnSelf = canAdmin(
|
let canAdminOnSelf =
|
||||||
cv.creator.id,
|
canAdmin(
|
||||||
this.props.admins,
|
cv.creator.id,
|
||||||
UserService.Instance.myUserInfo,
|
this.props.admins,
|
||||||
true
|
UserService.Instance.myUserInfo,
|
||||||
);
|
true
|
||||||
|
) && cv.community.local;
|
||||||
let isMod_ = isMod(cv.creator.id, this.props.moderators);
|
let isMod_ = isMod(cv.creator.id, this.props.moderators);
|
||||||
let isAdmin_ = isAdmin(cv.creator.id, this.props.admins);
|
let isAdmin_ =
|
||||||
|
isAdmin(cv.creator.id, this.props.admins) && cv.community.local;
|
||||||
let amCommunityCreator_ = amCommunityCreator(
|
let amCommunityCreator_ = amCommunityCreator(
|
||||||
cv.creator.id,
|
cv.creator.id,
|
||||||
this.props.moderators
|
this.props.moderators
|
||||||
|
|
|
@ -651,6 +651,7 @@ export class Post extends Component<any, PostState> {
|
||||||
data.recipient_ids.length == 0 &&
|
data.recipient_ids.length == 0 &&
|
||||||
!creatorBlocked &&
|
!creatorBlocked &&
|
||||||
postRes &&
|
postRes &&
|
||||||
|
data.comment_view.post.id == postRes.post_view.post.id &&
|
||||||
commentsRes
|
commentsRes
|
||||||
) {
|
) {
|
||||||
commentsRes.comments.unshift(data.comment_view);
|
commentsRes.comments.unshift(data.comment_view);
|
||||||
|
|
|
@ -75,7 +75,7 @@ if (isBrowser()) {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SearchProps {
|
interface SearchProps {
|
||||||
q: string;
|
q?: string;
|
||||||
type_: SearchType;
|
type_: SearchType;
|
||||||
sort: SortType;
|
sort: SortType;
|
||||||
listingType: ListingType;
|
listingType: ListingType;
|
||||||
|
@ -85,7 +85,7 @@ interface SearchProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SearchState {
|
interface SearchState {
|
||||||
q: string;
|
q?: string;
|
||||||
type_: SearchType;
|
type_: SearchType;
|
||||||
sort: SortType;
|
sort: SortType;
|
||||||
listingType: ListingType;
|
listingType: ListingType;
|
||||||
|
@ -97,7 +97,7 @@ interface SearchState {
|
||||||
creatorDetails?: GetPersonDetailsResponse;
|
creatorDetails?: GetPersonDetailsResponse;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
searchText: string;
|
searchText?: string;
|
||||||
resolveObjectResponse?: ResolveObjectResponse;
|
resolveObjectResponse?: ResolveObjectResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -135,13 +135,13 @@ export class Search extends Component<any, SearchState> {
|
||||||
this.props.match.params.community_id
|
this.props.match.params.community_id
|
||||||
),
|
),
|
||||||
creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
|
creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
|
||||||
loading: true,
|
loading: false,
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
communities: [],
|
communities: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
static getSearchQueryFromProps(q: string): string {
|
static getSearchQueryFromProps(q?: string): string | undefined {
|
||||||
return decodeURIComponent(q) || "";
|
return q ? decodeURIComponent(q) : undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
static getSearchTypeFromProps(type_: string): SearchType {
|
static getSearchTypeFromProps(type_: string): SearchType {
|
||||||
|
@ -219,7 +219,10 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.fetchCommunities();
|
this.fetchCommunities();
|
||||||
this.search();
|
|
||||||
|
if (this.state.q) {
|
||||||
|
this.search();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -298,29 +301,33 @@ export class Search extends Component<any, SearchState> {
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve());
|
||||||
}
|
}
|
||||||
|
|
||||||
let form: SearchForm = {
|
let q = this.getSearchQueryFromProps(pathSplit[3]);
|
||||||
q: this.getSearchQueryFromProps(pathSplit[3]),
|
|
||||||
community_id,
|
|
||||||
creator_id,
|
|
||||||
type_: this.getSearchTypeFromProps(pathSplit[5]),
|
|
||||||
sort: this.getSortTypeFromProps(pathSplit[7]),
|
|
||||||
listing_type: this.getListingTypeFromProps(pathSplit[9]),
|
|
||||||
page: this.getPageFromProps(pathSplit[15]),
|
|
||||||
limit: fetchLimit,
|
|
||||||
auth: req.auth,
|
|
||||||
};
|
|
||||||
|
|
||||||
let resolveObjectForm: ResolveObject = {
|
if (q) {
|
||||||
q: this.getSearchQueryFromProps(pathSplit[3]),
|
let form: SearchForm = {
|
||||||
auth: req.auth,
|
q,
|
||||||
};
|
community_id,
|
||||||
|
creator_id,
|
||||||
|
type_: this.getSearchTypeFromProps(pathSplit[5]),
|
||||||
|
sort: this.getSortTypeFromProps(pathSplit[7]),
|
||||||
|
listing_type: this.getListingTypeFromProps(pathSplit[9]),
|
||||||
|
page: this.getPageFromProps(pathSplit[15]),
|
||||||
|
limit: fetchLimit,
|
||||||
|
auth: req.auth,
|
||||||
|
};
|
||||||
|
|
||||||
if (form.q != "") {
|
let resolveObjectForm: ResolveObject = {
|
||||||
promises.push(req.client.search(form));
|
q,
|
||||||
promises.push(req.client.resolveObject(resolveObjectForm));
|
auth: req.auth,
|
||||||
} else {
|
};
|
||||||
promises.push(Promise.resolve());
|
|
||||||
promises.push(Promise.resolve());
|
if (form.q != "") {
|
||||||
|
promises.push(req.client.search(form));
|
||||||
|
promises.push(req.client.resolveObject(resolveObjectForm));
|
||||||
|
} else {
|
||||||
|
promises.push(Promise.resolve());
|
||||||
|
promises.push(Promise.resolve());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return promises;
|
return promises;
|
||||||
|
@ -336,11 +343,13 @@ export class Search extends Component<any, SearchState> {
|
||||||
lastState.creatorId !== this.state.creatorId ||
|
lastState.creatorId !== this.state.creatorId ||
|
||||||
lastState.page !== this.state.page
|
lastState.page !== this.state.page
|
||||||
) {
|
) {
|
||||||
this.setState({
|
if (this.state.q) {
|
||||||
loading: true,
|
this.setState({
|
||||||
searchText: this.state.q,
|
loading: true,
|
||||||
});
|
searchText: this.state.q,
|
||||||
this.search();
|
});
|
||||||
|
this.search();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -779,24 +788,24 @@ export class Search extends Component<any, SearchState> {
|
||||||
this.state.creatorId == 0 ? undefined : this.state.creatorId;
|
this.state.creatorId == 0 ? undefined : this.state.creatorId;
|
||||||
|
|
||||||
let auth = myAuth(false);
|
let auth = myAuth(false);
|
||||||
let form: SearchForm = {
|
if (this.state.q && this.state.q != "") {
|
||||||
q: this.state.q,
|
let form: SearchForm = {
|
||||||
community_id,
|
q: this.state.q,
|
||||||
creator_id,
|
community_id,
|
||||||
type_: this.state.type_,
|
creator_id,
|
||||||
sort: this.state.sort,
|
type_: this.state.type_,
|
||||||
listing_type: this.state.listingType,
|
sort: this.state.sort,
|
||||||
page: this.state.page,
|
listing_type: this.state.listingType,
|
||||||
limit: fetchLimit,
|
page: this.state.page,
|
||||||
auth,
|
limit: fetchLimit,
|
||||||
};
|
auth,
|
||||||
|
};
|
||||||
|
|
||||||
let resolveObjectForm: ResolveObject = {
|
let resolveObjectForm: ResolveObject = {
|
||||||
q: this.state.q,
|
q: this.state.q,
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.state.q != "") {
|
|
||||||
this.setState({
|
this.setState({
|
||||||
searchResponse: undefined,
|
searchResponse: undefined,
|
||||||
resolveObjectResponse: undefined,
|
resolveObjectResponse: undefined,
|
||||||
|
@ -919,7 +928,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
|
|
||||||
updateUrl(paramUpdates: UrlParams) {
|
updateUrl(paramUpdates: UrlParams) {
|
||||||
const qStr = paramUpdates.q || this.state.q;
|
const qStr = paramUpdates.q || this.state.q;
|
||||||
const qStrEncoded = encodeURIComponent(qStr);
|
const qStrEncoded = encodeURIComponent(qStr || "");
|
||||||
const typeStr = paramUpdates.type_ || this.state.type_;
|
const typeStr = paramUpdates.type_ || this.state.type_;
|
||||||
const listingTypeStr = paramUpdates.listingType || this.state.listingType;
|
const listingTypeStr = paramUpdates.listingType || this.state.listingType;
|
||||||
const sortStr = paramUpdates.sort || this.state.sort;
|
const sortStr = paramUpdates.sort || this.state.sort;
|
||||||
|
|
Loading…
Reference in a new issue