LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-29 15:51:14 +00:00
Code Issues Projects Releases Wiki Activity

fix: Small cleanup to search/inbox controls

Browse source
This commit is contained in:
Jay Sitter 2023-07-02 12:31:56 -04:00
parent 6a62d48257
commit d258edfbaf
3 changed files with 90 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/shared/components/common/searchable-select.tsx
View file

@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
const { searchText, selectedIndex, loadingEllipses } = this.state; const { searchText, selectedIndex, loadingEllipses } = this.state;
return ( return (
<div className="searchable-select dropdown"> <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
<button <button
id={id} id={id}
type="button" type="button"

40
src/shared/components/person/inbox.tsx
View file

@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5 className="mb-2"> <h1 className="h4 mb-4">
{I18NextService.i18n.t("inbox")} {I18NextService.i18n.t("inbox")}
{inboxRss && ( {inboxRss && (
<small> <small>
@ -235,7 +235,7 @@ export class Inbox extends Component<any, InboxState> {
/> />
</small> </small>
)} )}
</h5> </h1>
{this.hasUnreads && ( {this.hasUnreads && (
<button <button
className="btn btn-secondary mb-2" className="btn btn-secondary mb-2"
@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
unreadOrAllRadios() { unreadOrAllRadios() {
return ( return (
<div className="btn-group btn-group-toggle flex-wrap mb-2"> <div className="btn-group btn-group-toggle flex-wrap">
<label <label
className={`btn btn-outline-secondary pointer className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"} ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
messageTypeRadios() { messageTypeRadios() {
return ( return (
<div className="btn-group btn-group-toggle flex-wrap mb-2"> <div className="btn-group btn-group-toggle flex-wrap">
<label <label
className={`btn btn-outline-secondary pointer className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && "active"} ${this.state.messageType == MessageType.All && "active"}
@ -382,13 +382,15 @@ export class Inbox extends Component<any, InboxState> {
selects() { selects() {
return ( return (
<div className="mb-2"> <div className="row g-2">
<span className="me-3">{this.unreadOrAllRadios()}</span> <div className="col-auto">{this.unreadOrAllRadios()}</div>
<span className="me-3">{this.messageTypeRadios()}</span> <div className="col-auto">{this.messageTypeRadios()}</div>
<CommentSortSelect <div className="col-auto">
sort={this.state.sort} <CommentSortSelect
onChange={this.handleSortChange} sort={this.state.sort}
/> onChange={this.handleSortChange}
/>
</div>
</div> </div>
); );
} }
@ -541,9 +543,9 @@ export class Inbox extends Component<any, InboxState> {
this.state.messagesRes.state == "loading" this.state.messagesRes.state == "loading"
) { ) {
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
} else { } else {
return ( return (
@ -556,9 +558,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.repliesRes.state) { switch (this.state.repliesRes.state) {
case "loading": case "loading":
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
case "success": { case "success": {
const replies = this.state.repliesRes.data.replies; const replies = this.state.repliesRes.data.replies;
@ -603,9 +605,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.mentionsRes.state) { switch (this.state.mentionsRes.state) {
case "loading": case "loading":
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
case "success": { case "success": {
const mentions = this.state.mentionsRes.data.mentions; const mentions = this.state.mentionsRes.data.mentions;
@ -653,9 +655,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.messagesRes.state) { switch (this.state.messagesRes.state) {
case "loading": case "loading":
return ( return (
<h5> <h1 className="h4">
<Spinner large /> <Spinner large />
</h5> </h1>
); );
case "success": { case "success": {
const messages = this.state.messagesRes.data.private_messages; const messages = this.state.messagesRes.data.private_messages;

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

@ -181,23 +181,28 @@ const Filter = ({
loading: boolean; loading: boolean;
}) => { }) => {
return ( return (
<div className="mb-3 col-sm-6"> <div className="col-sm-6">
<label className="col-form-label me-2" htmlFor={`${filterType}-filter`}> <div className="row gx-2">
{capitalizeFirstLetter(I18NextService.i18n.t(filterType))} <label
</label> className="col-12 col-sm-auto col-form-label flex-grow-0"
<SearchableSelect htmlFor={`${filterType}-filter`}
id={`${filterType}-filter`} >
options={[ {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
{ </label>
label: I18NextService.i18n.t("all"), <SearchableSelect
value: "0", id={`${filterType}-filter`}
}, options={[
].concat(options)} {
value={value ?? 0} label: I18NextService.i18n.t("all"),
onSearch={onSearch} value: "0",
onChange={onChange} },
loading={loading} ].concat(options)}
/> value={value ?? 0}
onSearch={onSearch}
onChange={onChange}
loading={loading}
/>
</div>
</div> </div>
); );
}; };
@ -467,7 +472,7 @@ export class Search extends Component<any, SearchState> {
title={this.documentTitle} title={this.documentTitle}
path={this.context.router.route.match.url} path={this.context.router.route.match.url}
/> />
<h5>{I18NextService.i18n.t("search")}</h5> <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
{this.selects} {this.selects}
{this.searchForm} {this.searchForm}
{this.displayResults(type)} {this.displayResults(type)}
@ -500,8 +505,11 @@ export class Search extends Component<any, SearchState> {
get searchForm() { get searchForm() {
return ( return (
<form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}> <form
<div className="col-auto"> className="row gx-2 gy-3"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<div className="col-auto flex-grow-1 flex-sm-grow-0">
<input <input
type="text" type="text"
className="form-control me-2 mb-2 col-sm-8" className="form-control me-2 mb-2 col-sm-8"
@ -542,41 +550,45 @@ export class Search extends Component<any, SearchState> {
communitiesRes.data.communities.length > 0; communitiesRes.data.communities.length > 0;
return ( return (
<div className="mb-2"> <>
<select <div className="row gx-2 gy-3 mb-2 mb-sm-3">
value={type} <div className="col-auto">
onChange={linkEvent(this, this.handleTypeChange)} <select
className="form-select d-inline-block w-auto mb-2" value={type}
aria-label={I18NextService.i18n.t("type")} onChange={linkEvent(this, this.handleTypeChange)}
> className="form-select d-inline-block w-auto"
<option disabled aria-hidden="true"> aria-label={I18NextService.i18n.t("type")}
{I18NextService.i18n.t("type")} >
</option> <option disabled aria-hidden="true">
{searchTypes.map(option => ( {I18NextService.i18n.t("type")}
<option value={option} key={option}> </option>
{I18NextService.i18n.t( {searchTypes.map(option => (
option.toString().toLowerCase() as NoOptionI18nKeys <option value={option} key={option}>
)} {I18NextService.i18n.t(
</option> option.toString().toLowerCase() as NoOptionI18nKeys
))} )}
</select> </option>
<span className="ms-2"> ))}
<ListingTypeSelect </select>
type_={listingType} </div>
showLocal={showLocal(this.isoData)} <div className="col-auto">
showSubscribed <ListingTypeSelect
onChange={this.handleListingTypeChange} type_={listingType}
/> showLocal={showLocal(this.isoData)}
</span> showSubscribed
<span className="ms-2"> onChange={this.handleListingTypeChange}
<SortSelect />
sort={sort} </div>
onChange={this.handleSortChange} <div className="col-auto">
hideHot <SortSelect
hideMostComments sort={sort}
/> onChange={this.handleSortChange}
</span> hideHot
<div className="row"> hideMostComments
/>
</div>
</div>
<div className="row gx-5 gy-2 mb-3">
{hasCommunities && ( {hasCommunities && (
<Filter <Filter
filterType="community" filterType="community"
@ -596,7 +608,7 @@ export class Search extends Component<any, SearchState> {
loading={searchCreatorLoading} loading={searchCreatorLoading}
/> />
</div> </div>
</div> </>
); );
} }