mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-29 15:51:14 +00:00
feat(post): Move post domain beneath post title (#1363)
* feat(post): Move post domain and preview button beneath post title * fix: Move the 'show body' button back to actions line; only show if there is something to show; add 'active' color * fix: Fix some margins
This commit is contained in:
Jay Sitter
GitHub
parent
44c2d8ad5e
commit
94274a1e7f
2 changed files with 127 additions and 108 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -660,15 +653,45 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showPreviewButton() {
|
||||||
|
const post_view = this.postView;
|
||||||
|
const body = post_view.post.body;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className="btn btn-link btn-animate text-muted py-0"
|
||||||
|
data-tippy-content={body && mdNoImages.render(body)}
|
||||||
|
data-tippy-allowHtml={true}
|
||||||
|
onClick={linkEvent(this, this.handleShowBody)}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon="book-open"
|
||||||
|
classes={classNames("icon-inline mr-1", {
|
||||||
|
"text-success": this.state.showBody,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
postActions() {
|
postActions() {
|
||||||
// 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 && (
|
{this.hasAdvancedButtons && (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue