LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 11:21:26 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into breakout-role-utils

Browse source
This commit is contained in:
Dessalines 2023-06-19 18:48:59 -04:00 committed by GitHub
commit 0c95172993
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 163 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "lemmy-ui", "name": "lemmy-ui",
"version": "0.18.0-rc.1", "version": "0.18.0-rc.2",
"description": "An isomorphic UI for lemmy", "description": "An isomorphic UI for lemmy",
"repository": "https://github.com/LemmyNet/lemmy-ui", "repository": "https://github.com/LemmyNet/lemmy-ui",
"license": "AGPL-3.0", "license": "AGPL-3.0",

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

@ -84,10 +84,6 @@
margin-top: -6.5px; margin-top: -6.5px;
} }
.post-title {
line-height: 1;
}
.post-title a:visited { .post-title a:visited {
color: var(--gray) !important; color: var(--gray) !important;
} }

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

@ -367,10 +367,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
createdLine() { createdLine() {
const post_view = this.postView; const post_view = this.postView;
const url = post_view.post.url;
const body = post_view.post.body;
return ( return (
<ul className="list-inline mb-1 text-muted small"> <ul className="list-inline mb-1 text-muted small mt-2">
<li className="list-inline-item"> <li className="list-inline-item">
<PersonListing person={post_view.creator} /> <PersonListing person={post_view.creator} />
@ -402,21 +400,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</span> </span>
)} )}
<li className="list-inline-item">•</li> <li className="list-inline-item">•</li>
{url && !(hostname(url) === getExternalHost()) && (
<>
<li className="list-inline-item">
<a
className="text-muted font-italic"
href={url}
title={url}
rel={relTags}
>
{hostname(url)}
</a>
</li>
<li className="list-inline-item">•</li>
</>
)}
<li className="list-inline-item"> <li className="list-inline-item">
<span> <span>
<MomentTime <MomentTime
@ -425,21 +408,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
/> />
</span> </span>
</li> </li>
{body && (
<>
<li className="list-inline-item">•</li>
<li className="list-inline-item">
<button
className="text-muted btn btn-sm btn-link p-0"
data-tippy-content={mdNoImages.render(body)}
data-tippy-allowHtml={true}
onClick={linkEvent(this, this.handleShowBody)}
>
<Icon icon="book-open" classes="icon-inline mr-1" />
</button>
</li>
</>
)}
</ul> </ul>
); );
} }
@ -518,80 +486,105 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const url = post.url; const url = post.url;
return ( return (
<div className="post-title overflow-hidden"> <>
<h5 className="d-inline"> <div className="post-title overflow-hidden">
{url && this.props.showBody ? ( <h5 className="d-inline">
<a {url && this.props.showBody ? (
className={ <a
!post.featured_community && !post.featured_local className={
? "text-body" !post.featured_community && !post.featured_local
: "text-primary" ? "text-body"
} : "text-primary"
href={url}
title={url}
rel={relTags}
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
></a>
) : (
this.postLink
)}
</h5>
{(url && isImage(url)) ||
(post.thumbnail_url && (
<button
className="btn btn-link text-monospace text-muted small d-inline-block"
data-tippy-content={i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<Icon
icon={
!this.state.imageExpanded ? "plus-square" : "minus-square"
} }
classes="icon-inline" href={url}
/> title={url}
</button> rel={relTags}
))} dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
{post.removed && ( ></a>
<small className="ml-2 badge text-bg-secondary"> ) : (
{i18n.t("removed")} this.postLink
</small> )}
)} </h5>
{post.deleted && ( {(url && isImage(url)) ||
<small (post.thumbnail_url && (
className="unselectable pointer ml-2 text-muted font-italic" <button
data-tippy-content={i18n.t("deleted")} className="btn btn-link text-monospace text-muted small d-inline-block"
data-tippy-content={i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<Icon
icon={
!this.state.imageExpanded ? "plus-square" : "minus-square"
}
classes="icon-inline"
/>
</button>
))}
{post.removed && (
<small className="ml-2 badge text-bg-secondary">
{i18n.t("removed")}
</small>
)}
{post.deleted && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("deleted")}
>
<Icon icon="trash" classes="icon-inline text-danger" />
</small>
)}
{post.locked && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("locked")}
>
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
)}
{post.featured_community && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("featured")}
>
<Icon icon="pin" classes="icon-inline text-primary" />
</small>
)}
{post.featured_local && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("featured")}
>
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
{post.nsfw && (
<small className="ml-2 badge text-bg-danger">
{i18n.t("nsfw")}
</small>
)}
</div>
{url && this.urlLine()}
</>
);
}
urlLine() {
const post = this.postView.post;
const url = post.url;
return (
<p className="d-flex text-muted align-items-center gap-1 small m-0">
{url && !(hostname(url) === getExternalHost()) && (
<a
className="text-muted font-italic"
href={url}
title={url}
rel={relTags}
> >
<Icon icon="trash" classes="icon-inline text-danger" /> {hostname(url)}
</small> </a>
)} )}
{post.locked && ( </p>
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("locked")}
>
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
)}
{post.featured_community && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("featured")}
>
<Icon icon="pin" classes="icon-inline text-primary" />
</small>
)}
{post.featured_local && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("featured")}
>
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
{post.nsfw && (
<small className="ml-2 badge text-bg-danger">{i18n.t("nsfw")}</small>
)}
</div>
); );
} }
@ -649,14 +642,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
); );
} }
get hasAdvancedButtons() { showPreviewButton() {
const post_view = this.postView;
const body = post_view.post.body;
return ( return (
this.myPost || <button
(this.showBody && this.postView.post.body) || className="btn btn-link btn-animate text-muted py-0"
amMod(this.props.moderators) || data-tippy-content={body && mdNoImages.render(body)}
amAdmin() || data-tippy-allowHtml={true}
this.canMod_ || onClick={linkEvent(this, this.handleShowBody)}
this.canAdmin_ >
<Icon
icon="book-open"
classes={classNames("icon-inline mr-1", {
"text-success": this.state.showBody,
})}
/>
</button>
); );
} }
@ -664,57 +667,64 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button. // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
// Possible enhancement: Make each button a component. // Possible enhancement: Make each button a component.
const post_view = this.postView; const post_view = this.postView;
const post = post_view.post;
return ( return (
<> <>
{this.saveButton} {this.saveButton}
{this.crossPostButton} {this.crossPostButton}
{/**
* If there is a URL, or if the post has a body and we were told not to
* show the body, show the MetadataCard/body toggle.
*/}
{(post.url || (post.body && !this.props.showBody)) &&
this.showPreviewButton()}
{this.showBody && post_view.post.body && this.viewSourceButton} {this.showBody && post_view.post.body && this.viewSourceButton}
{this.hasAdvancedButtons && ( <div className="dropdown">
<div className="dropdown"> <button
<button className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
className="btn btn-link btn-animate text-muted py-0 dropdown-toggle" onClick={linkEvent(this, this.handleShowAdvanced)}
onClick={linkEvent(this, this.handleShowAdvanced)} data-tippy-content={i18n.t("more")}
data-tippy-content={i18n.t("more")} data-bs-toggle="dropdown"
data-bs-toggle="dropdown" aria-expanded="false"
aria-expanded="false" aria-controls="advancedButtonsDropdown"
aria-controls="advancedButtonsDropdown" aria-label={i18n.t("more")}
aria-label={i18n.t("more")} >
> <Icon icon="more-vertical" inline />
<Icon icon="more-vertical" inline /> </button>
</button>
<ul className="dropdown-menu" id="advancedButtonsDropdown"> <ul className="dropdown-menu" id="advancedButtonsDropdown">
{!this.myPost ? ( {!this.myPost ? (
<> <>
<li>{this.reportButton}</li> <li>{this.reportButton}</li>
<li>{this.blockButton}</li> <li>{this.blockButton}</li>
</> </>
) : ( ) : (
<> <>
<li>{this.editButton}</li> <li>{this.editButton}</li>
<li>{this.deleteButton}</li> <li>{this.deleteButton}</li>
</> </>
)} )}
{/* Any mod can do these, not limited to hierarchy*/} {/* Any mod can do these, not limited to hierarchy*/}
{(amMod(this.props.moderators) || amAdmin()) && ( {(amMod(this.props.moderators) || amAdmin()) && (
<> <>
<li> <li>
<hr className="dropdown-divider" /> <hr className="dropdown-divider" />
</li> </li>
<li>{this.lockButton}</li> <li>{this.lockButton}</li>
{this.featureButtons} {this.featureButtons}
</> </>
)} )}
{(this.canMod_ || this.canAdmin_) && ( {(this.canMod_ || this.canAdmin_) && (
<li>{this.modRemoveButton}</li> <li>{this.modRemoveButton}</li>
)} )}
</ul> </ul>
</div> </div>
)}
</> </>
); );
} }