LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 22:01:13 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into fix/add-aria-label-to-featured-pins

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-19 23:32:00 +00:00 committed by GitHub
commit 13df4b9c56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 204 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE/BUG_REPORT.yml vendored
View file

@ -8,7 +8,7 @@ body:
value: |
Found a bug? Please fill out the sections below. 👍
Thanks for taking the time to fill out this bug report!
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
- type: checkboxes
attributes:
label: Requirements

6
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml vendored
View file

@ -1,16 +1,16 @@
name: "\U0001F680 Feature request"
description: Suggest an idea for improving Lemmy
description: Suggest an idea for improving Lemmy's UI
labels: ["enhancement"]
body:
- type: markdown
attributes:
value: |
Have a suggestion about Lemmy's UI?
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
- type: checkboxes
attributes:
label: Requirements
description: Before you create a bug report please do the following.
description: Before you create a feature request please do the following.
options:
- label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
required: true

3
.prettierignore
View file

@ -1,2 +1,3 @@
src/shared/translations
lemmy-translations
lemmy-translations
src/assets/css/themes/*.css

2
package.json
View file

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

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

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

2
src/assets/css/themes/_variables.darkly.scss
View file

@ -92,6 +92,8 @@ $input-border-color: $body-bg;
$input-group-addon-color: $gray-500;
$input-group-addon-bg: $gray-700;
$hr-border-color: rgba($body-color, 0.25);
$table-accent-bg: $gray-800;
$table-border-color: $gray-700;

2
src/assets/css/themes/_variables.litely.scss
View file

@ -76,3 +76,5 @@ $border-radius: 0.5rem;
$border-radius-lg: 0.5rem;
$border-radius-sm: 1rem;
$rounded-pill: 0.25rem;
$hr-border-color: rgba($body-color, 0.25);

2
src/assets/css/themes/darkly-red.css
View file

@ -450,7 +450,7 @@ hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(222, 226, 230, 0.25);
}
small,

2
src/assets/css/themes/darkly.css
View file

@ -450,7 +450,7 @@ hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(222, 226, 230, 0.25);
}
small,

2
src/assets/css/themes/litely-red.css
View file

@ -450,7 +450,7 @@ hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(222, 226, 230, 0.25);
}
small,

2
src/assets/css/themes/litely.css
View file

@ -449,7 +449,7 @@ hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(34, 34, 34, 0.1);
border-top: 1px solid rgba(73, 80, 87, 0.25);
}
small,

10
src/shared/components/person/person-listing.tsx
View file

@ -1,3 +1,4 @@
import classNames from "classnames";
import { Component } from "inferno";
import { Link } from "inferno-router";
import { Person } from "lemmy-js-client";
@ -48,7 +49,10 @@ export class PersonListing extends Component<PersonListingProps, any> {
{!this.props.realLink ? (
<Link
title={apubName}
className={this.props.muted ? "text-muted" : "text-info"}
className={classNames("d-inline-flex align-items-baseline", {
"text-muted": this.props.muted,
"text-info": !this.props.muted,
})}
to={link}
>
{this.avatarAndName(displayName)}
@ -56,7 +60,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
) : (
<a
title={apubName}
className={this.props.muted ? "text-muted" : "text-info"}
className={`d-inline-flex align-items-baseline ${
this.props.muted ? "text-muted" : "text-info"
}`}
href={link}
rel={relTags}
>

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

@ -201,7 +201,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const post = this.postView.post;
return (
<div className="post-listing">
<div className="post-listing mt-2">
{!this.state.showEdit ? (
<>
{this.listing()}
@ -367,10 +367,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
createdLine() {
const post_view = this.postView;
const url = post_view.post.url;
const body = post_view.post.body;
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">
<PersonListing person={post_view.creator} />
@ -386,10 +384,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</span>
)}
{this.props.showCommunity && (
<span>
<span className="mx-1"> {i18n.t("to")} </span>
<CommunityLink community={post_view.community} />
</span>
<>
{" "}
{i18n.t("to")} <CommunityLink community={post_view.community} />
</>
)}
</li>
{post_view.post.language_id !== 0 && (
@ -402,21 +400,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</span>
)}
<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">
<span>
<MomentTime
@ -425,21 +408,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
/>
</span>
</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>
);
}
@ -518,84 +486,107 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const url = post.url;
return (
<div className="post-title overflow-hidden">
<h5 className="d-inline">
{url && this.props.showBody ? (
<a
className={
!post.featured_community && !post.featured_local
? "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"
<>
<div className="post-title overflow-hidden">
<h5 className="d-inline">
{url && this.props.showBody ? (
<a
className={
!post.featured_community && !post.featured_local
? "text-body"
: "text-primary"
}
classes="icon-inline"
/>
</button>
))}
{post.removed && (
<small className="ml-2 text-muted font-italic">
{i18n.t("removed")}
</small>
)}
{post.deleted && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
data-tippy-content={i18n.t("deleted")}
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"
/>
</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_in_community")}
aria-label={i18n.t("featured_in_community")}
>
<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_in_local")}
aria-label={i18n.t("featured_in_local")}
>
<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" />
</small>
{hostname(url)}
</a>
)}
{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_in_community")}
aria-label={i18n.t("featured_in_community")}
>
<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_in_local")}
aria-label={i18n.t("featured_in_local")}
>
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
{post.nsfw && (
<small className="ml-2 text-muted font-italic">
{i18n.t("nsfw")}
</small>
)}
</div>
</p>
);
}
@ -625,11 +616,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const post = this.postView.post;
return (
<div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold mb-1">
<div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold">
{this.commentsButton}
{canShare() && (
<button
className="btn btn-link"
className="btn btn-sm btn-link"
onClick={linkEvent(this, this.handleShare)}
type="button"
>
@ -653,14 +644,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
);
}
get hasAdvancedButtons() {
showPreviewButton() {
const post_view = this.postView;
const body = post_view.post.body;
return (
this.myPost ||
(this.showBody && this.postView.post.body) ||
amMod(this.props.moderators) ||
amAdmin() ||
this.canMod_ ||
this.canAdmin_
<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>
);
}
@ -668,57 +669,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: Make each button a component.
const post_view = this.postView;
const post = post_view.post;
return (
<>
{this.saveButton}
{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.hasAdvancedButtons && (
<div className="dropdown">
<button
className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t("more")}
data-bs-toggle="dropdown"
aria-expanded="false"
aria-controls="advancedButtonsDropdown"
aria-label={i18n.t("more")}
>
<Icon icon="more-vertical" inline />
</button>
<div className="dropdown">
<button
className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t("more")}
data-bs-toggle="dropdown"
aria-expanded="false"
aria-controls="advancedButtonsDropdown"
aria-label={i18n.t("more")}
>
<Icon icon="more-vertical" inline />
</button>
<ul className="dropdown-menu" id="advancedButtonsDropdown">
{!this.myPost ? (
<>
<li>{this.reportButton}</li>
<li>{this.blockButton}</li>
</>
) : (
<>
<li>{this.editButton}</li>
<li>{this.deleteButton}</li>
</>
)}
<ul className="dropdown-menu" id="advancedButtonsDropdown">
{!this.myPost ? (
<>
<li>{this.reportButton}</li>
<li>{this.blockButton}</li>
</>
) : (
<>
<li>{this.editButton}</li>
<li>{this.deleteButton}</li>
</>
)}
{/* Any mod can do these, not limited to hierarchy*/}
{(amMod(this.props.moderators) || amAdmin()) && (
<>
<li>
<hr className="dropdown-divider" />
</li>
<li>{this.lockButton}</li>
{this.featureButtons}
</>
)}
{/* Any mod can do these, not limited to hierarchy*/}
{(amMod(this.props.moderators) || amAdmin()) && (
<>
<li>
<hr className="dropdown-divider" />
</li>
<li>{this.lockButton}</li>
{this.featureButtons}
</>
)}
{(this.canMod_ || this.canAdmin_) && (
<li>{this.modRemoveButton}</li>
)}
</ul>
</div>
)}
{(this.canMod_ || this.canAdmin_) && (
<li>{this.modRemoveButton}</li>
)}
</ul>
</div>
</>
);
}
@ -727,7 +735,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const post_view = this.postView;
return (
<Link
className="btn btn-link text-muted py-0 pl-0 text-muted"
className="btn btn-link text-muted pl-0 text-muted"
title={i18n.t("number_of_comments", {
count: Number(post_view.counts.comments),
formattedCount: Number(post_view.counts.comments),
@ -869,10 +877,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleShowReportDialog)}
data-tippy-content={i18n.t("show_report_dialog")}
aria-label={i18n.t("show_report_dialog")}
>
<Icon icon="flag" inline />
<Icon classes="mr-1" icon="flag" inline />
{i18n.t("create_report")}
</button>
);
}
@ -882,10 +890,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleBlockPersonClick)}
data-tippy-content={i18n.t("block_user")}
aria-label={i18n.t("block_user")}
>
{this.state.blockLoading ? <Spinner /> : <Icon icon="slash" inline />}
{this.state.blockLoading ? (
<Spinner />
) : (
<Icon classes="mr-1" icon="slash" inline />
)}
{i18n.t("block_user")}
</button>
);
}

4
src/shared/components/post/post-listings.tsx
View file

@ -96,9 +96,7 @@ export class PostListings extends Component<PostListingsProps, any> {
onAddAdmin={this.props.onAddAdmin}
onTransferCommunity={this.props.onTransferCommunity}
/>
{idx + 1 !== this.posts.length && (
<hr className="my-3 border border-primary" />
)}
{idx + 1 !== this.posts.length && <hr className="my-3" />}
</>
))
) : (