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

Merge branch 'main' into add_ban_from_community_string

Browse source
This commit is contained in:
Dessalines 2023-02-21 15:54:16 -05:00
commit 42bb7a3974
8 changed files with 167 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lemmy-translations

@ -1 +1 @@
Subproject commit 0446b27d493b4f4fb6f227f538e6604860c7fe41
Subproject commit 7379716231b9f7e67f710751c839398b7ab5d65e

10
src/assets/css/main.css
View file

@ -305,16 +305,6 @@ pre {
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 {
display: block;
content: "";

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

@ -1,4 +1,4 @@
import { Component, createRef, linkEvent, RefObject } from "inferno";
import { Component, linkEvent } from "inferno";
import { NavLink } from "inferno-router";
import {
CommentResponse,
@ -44,7 +44,6 @@ interface NavbarState {
unreadReportCount: number;
unreadApplicationCount: number;
searchParam: string;
toggleSearch: boolean;
showDropdown: boolean;
onSiteBanner?(url: string): any;
}
@ -55,14 +54,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
private unreadInboxCountSub: Subscription;
private unreadReportCountSub: Subscription;
private unreadApplicationCountSub: Subscription;
private searchTextField: RefObject<HTMLInputElement>;
state: NavbarState = {
unreadInboxCount: 0,
unreadReportCount: 0,
unreadApplicationCount: 0,
expanded: false,
searchParam: "",
toggleSearch: false,
showDropdown: false,
};
subscription: any;
@ -77,8 +74,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
componentDidMount() {
// Subscribe to jwt changes
if (isBrowser()) {
this.searchTextField = createRef();
// On the first load, check the unreads
let auth = myAuth(false);
if (auth && UserService.Instance.myUserInfo) {
@ -123,7 +118,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
updateUrl() {
const searchParam = this.state.searchParam;
this.setState({ searchParam: "" });
this.setState({ toggleSearch: false });
this.setState({ showDropdown: false, expanded: false });
if (searchParam === "") {
this.context.router.history.push(`/search/`);
@ -308,35 +302,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
) && (
<ul className="navbar-nav">
<li className="nav-item">
<form
className="form-inline mr-1"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
<NavLink
to="/search"
className="nav-link"
title={i18n.t("search")}
>
<input
id="search-input"
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>
<Icon icon="search" />
</NavLink>
</li>
</ul>
)}
@ -520,28 +492,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
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) {
i.setState({ showDropdown: false, expanded: false });
UserService.Instance.logout();

42
src/shared/components/comment/comment-node.tsx
View file

@ -163,27 +163,29 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
? i18n.t("purge_comment")
: `${i18n.t("purge")} ${cv.creator.name}`;
let canMod_ = canMod(
cv.creator.id,
this.props.moderators,
this.props.admins
);
let canModOnSelf = canMod(
cv.creator.id,
this.props.moderators,
this.props.admins,
UserService.Instance.myUserInfo,
true
);
let canAdmin_ = canAdmin(cv.creator.id, this.props.admins);
let canAdminOnSelf = canAdmin(
cv.creator.id,
this.props.admins,
UserService.Instance.myUserInfo,
true
);
let canMod_ =
canMod(cv.creator.id, this.props.moderators, this.props.admins) &&
cv.community.local;
let canModOnSelf =
canMod(
cv.creator.id,
this.props.moderators,
this.props.admins,
UserService.Instance.myUserInfo,
true
) && cv.community.local;
let canAdmin_ =
canAdmin(cv.creator.id, this.props.admins) && cv.community.local;
let canAdminOnSelf =
canAdmin(
cv.creator.id,
this.props.admins,
UserService.Instance.myUserInfo,
true
) && cv.community.local;
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(
cv.creator.id,
this.props.moderators

59
src/shared/components/common/language-select.tsx
View file

@ -47,33 +47,38 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
return this.props.iconVersion ? (
this.selectBtn
) : (
<div className="form-group row">
<label
className={classNames("col-form-label", {
"col-sm-3": this.props.multiple,
"col-sm-2": !this.props.multiple,
})}
htmlFor={this.id}
>
{i18n.t(this.props.multiple ? "language_plural" : "language")}
</label>
<div
className={classNames("input-group", {
"col-sm-9": this.props.multiple,
"col-sm-10": !this.props.multiple,
})}
>
{this.selectBtn}
{this.props.multiple && (
<div className="input-group-append">
<button
className="input-group-text"
onClick={linkEvent(this, this.handleDeselectAll)}
>
<Icon icon="x" />
</button>
</div>
)}
<div>
<div className="alert alert-warning" role="alert">
{i18n.t("undetermined_language_warning")}
</div>
<div className="form-group row">
<label
className={classNames("col-form-label", {
"col-sm-3": this.props.multiple,
"col-sm-2": !this.props.multiple,
})}
htmlFor={this.id}
>
{i18n.t(this.props.multiple ? "language_plural" : "language")}
</label>
<div
className={classNames("input-group", {
"col-sm-9": this.props.multiple,
"col-sm-10": !this.props.multiple,
})}
>
{this.selectBtn}
{this.props.multiple && (
<div className="input-group-append">
<button
className="input-group-text"
onClick={linkEvent(this, this.handleDeselectAll)}
>
<Icon icon="x" />
</button>
</div>
)}
</div>
</div>
</div>
);

77
src/shared/components/post/post-listing.tsx
View file

@ -30,6 +30,7 @@ import { UserService, WebSocketService } from "../../services";
import {
amAdmin,
amCommunityCreator,
amMod,
canAdmin,
canMod,
futureDaysToUnixTime,
@ -434,15 +435,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let post = this.props.post_view.post;
return (
<Link
className={
className={`d-inline-block ${
!post.featured_community && !post.featured_local
? "text-body"
: "text-primary"
}
}`}
to={`/post/${post.id}`}
title={i18n.t("comments")}
>
<div dangerouslySetInnerHTML={mdToHtmlInline(post.name)} />
<div
className="d-inline-block"
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
/>
</Link>
);
}
@ -457,16 +461,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{url ? (
this.props.showBody ? (
<a
className={
className={`d-inline-block ${
!post.featured_community && !post.featured_local
? "text-body"
: "text-primary"
}
}`}
href={url}
title={url}
rel={relTags}
>
<div dangerouslySetInnerHTML={mdToHtmlInline(post.name)} />
<div
className="d-inline-block"
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
/>
</a>
) : (
this.postLink
@ -477,7 +484,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{(url && isImage(url)) ||
(post.thumbnail_url && (
<button
className="btn btn-link text-monospace text-muted small d-inline-block ml-2"
className="btn btn-link text-monospace text-muted small d-inline-block"
data-tippy-content={i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
>
@ -608,7 +615,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.state.showAdvanced && (
<>
{this.showBody && post_view.post.body && this.viewSourceButton}
{this.canModOnSelf_ && (
{/* Any mod can do these, not limited to hierarchy*/}
{(amMod(this.props.moderators) || amAdmin()) && (
<>
{this.lockButton}
{this.featureButton}
@ -842,41 +850,40 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
get featureButton() {
const featured_community = this.props.post_view.post.featured_community;
const label_community = featured_community
const featuredCommunity = this.props.post_view.post.featured_community;
const labelCommunity = featuredCommunity
? i18n.t("unfeature_from_community")
: i18n.t("feature_in_community");
const is_admin = amAdmin();
const featured_local = this.props.post_view.post.featured_local;
const label_local = featured_local
const featuredLocal = this.props.post_view.post.featured_local;
const labelLocal = featuredLocal
? i18n.t("unfeature_from_local")
: i18n.t("feature_in_local");
return (
<span>
<button
className="btn btn-link btn-animate text-muted py-0 pl-0"
onClick={() => this.handleModFeaturePost(this, true)}
data-tippy-content={label_community}
aria-label={label_community}
onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
data-tippy-content={labelCommunity}
aria-label={labelCommunity}
>
<Icon
icon="pin"
classes={classNames({ "text-success": featured_community })}
classes={classNames({ "text-success": featuredCommunity })}
inline
/>{" "}
Community
</button>
{is_admin && (
{amAdmin() && (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={() => this.handleModFeaturePost(this, false)}
data-tippy-content={label_local}
aria-label={label_local}
onClick={linkEvent(this, this.handleModFeaturePostLocal)}
data-tippy-content={labelLocal}
aria-label={labelLocal}
>
<Icon
icon="pin"
classes={classNames({ "text-success": featured_local })}
classes={classNames({ "text-success": featuredLocal })}
inline
/>{" "}
Local
@ -1527,20 +1534,26 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
}
handleModFeaturePost(i: PostListing, is_community: boolean) {
handleModFeaturePostLocal(i: PostListing) {
let auth = myAuth();
if (auth) {
let featured: [PostFeatureType, boolean] = is_community
? [
PostFeatureType.Community,
!i.props.post_view.post.featured_community,
]
: [PostFeatureType.Local, !i.props.post_view.post.featured_local];
let form: FeaturePost = {
post_id: i.props.post_view.post.id,
feature_type: featured[0],
featured: featured[1],
feature_type: PostFeatureType.Local,
featured: !i.props.post_view.post.featured_local,
auth,
};
WebSocketService.Instance.send(wsClient.featurePost(form));
}
}
handleModFeaturePostCommunity(i: PostListing) {
let auth = myAuth();
if (auth) {
let form: FeaturePost = {
post_id: i.props.post_view.post.id,
feature_type: PostFeatureType.Community,
featured: !i.props.post_view.post.featured_community,
auth,
};
WebSocketService.Instance.send(wsClient.featurePost(form));

1
src/shared/components/post/post.tsx
View file

@ -651,6 +651,7 @@ export class Post extends Component<any, PostState> {
data.recipient_ids.length == 0 &&
!creatorBlocked &&
postRes &&
data.comment_view.post.id == postRes.post_view.post.id &&
commentsRes
) {
commentsRes.comments.unshift(data.comment_view);

109
src/shared/components/search.tsx
View file

@ -75,7 +75,7 @@ if (isBrowser()) {
}
interface SearchProps {
q: string;
q?: string;
type_: SearchType;
sort: SortType;
listingType: ListingType;
@ -85,7 +85,7 @@ interface SearchProps {
}
interface SearchState {
q: string;
q?: string;
type_: SearchType;
sort: SortType;
listingType: ListingType;
@ -97,7 +97,7 @@ interface SearchState {
creatorDetails?: GetPersonDetailsResponse;
loading: boolean;
siteRes: GetSiteResponse;
searchText: string;
searchText?: string;
resolveObjectResponse?: ResolveObjectResponse;
}
@ -135,13 +135,13 @@ export class Search extends Component<any, SearchState> {
this.props.match.params.community_id
),
creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
loading: true,
loading: false,
siteRes: this.isoData.site_res,
communities: [],
};
static getSearchQueryFromProps(q: string): string {
return decodeURIComponent(q) || "";
static getSearchQueryFromProps(q?: string): string | undefined {
return q ? decodeURIComponent(q) : undefined;
}
static getSearchTypeFromProps(type_: string): SearchType {
@ -219,7 +219,10 @@ export class Search extends Component<any, SearchState> {
}
} else {
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());
}
let form: SearchForm = {
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 q = this.getSearchQueryFromProps(pathSplit[3]);
let resolveObjectForm: ResolveObject = {
q: this.getSearchQueryFromProps(pathSplit[3]),
auth: req.auth,
};
if (q) {
let form: SearchForm = {
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 != "") {
promises.push(req.client.search(form));
promises.push(req.client.resolveObject(resolveObjectForm));
} else {
promises.push(Promise.resolve());
promises.push(Promise.resolve());
let resolveObjectForm: ResolveObject = {
q,
auth: req.auth,
};
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;
@ -336,11 +343,13 @@ export class Search extends Component<any, SearchState> {
lastState.creatorId !== this.state.creatorId ||
lastState.page !== this.state.page
) {
this.setState({
loading: true,
searchText: this.state.q,
});
this.search();
if (this.state.q) {
this.setState({
loading: true,
searchText: this.state.q,
});
this.search();
}
}
}
@ -779,24 +788,24 @@ export class Search extends Component<any, SearchState> {
this.state.creatorId == 0 ? undefined : this.state.creatorId;
let auth = myAuth(false);
let form: SearchForm = {
q: this.state.q,
community_id,
creator_id,
type_: this.state.type_,
sort: this.state.sort,
listing_type: this.state.listingType,
page: this.state.page,
limit: fetchLimit,
auth,
};
if (this.state.q && this.state.q != "") {
let form: SearchForm = {
q: this.state.q,
community_id,
creator_id,
type_: this.state.type_,
sort: this.state.sort,
listing_type: this.state.listingType,
page: this.state.page,
limit: fetchLimit,
auth,
};
let resolveObjectForm: ResolveObject = {
q: this.state.q,
auth,
};
let resolveObjectForm: ResolveObject = {
q: this.state.q,
auth,
};
if (this.state.q != "") {
this.setState({
searchResponse: undefined,
resolveObjectResponse: undefined,
@ -919,7 +928,7 @@ export class Search extends Component<any, SearchState> {
updateUrl(paramUpdates: UrlParams) {
const qStr = paramUpdates.q || this.state.q;
const qStrEncoded = encodeURIComponent(qStr);
const qStrEncoded = encodeURIComponent(qStr || "");
const typeStr = paramUpdates.type_ || this.state.type_;
const listingTypeStr = paramUpdates.listingType || this.state.listingType;
const sortStr = paramUpdates.sort || this.state.sort;