Skip to content

Commit

Permalink
comments and ratings: small changes following mB redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@hom3mad3
hom3mad3 committed Aug 19, 2024
1 parent c00f5f5 commit 68d89e8
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 40 deletions.
40 changes: 40 additions & 0 deletions ...cracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
class="fa fa-chevron-up"
/>
10
<span
class="rating__label"
>
Likes
</span>
</button>
<button
aria-label="Click to vote down"
Expand All @@ -93,6 +98,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
class="fa fa-chevron-down"
/>
2
<span
class="rating__label"
>
Dislikes
</span>
</button>
</div>
<div
Expand Down Expand Up @@ -346,6 +356,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
class="fa fa-chevron-up"
/>
10
<span
class="rating__label"
>
Likes
</span>
</button>
<button
aria-label="Click to vote down"
Expand All @@ -357,6 +372,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
class="fa fa-chevron-down"
/>
2
<span
class="rating__label"
>
Dislikes
</span>
</button>
</div>
<div
Expand Down Expand Up @@ -672,6 +692,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
class="fa fa-chevron-up"
/>
10
<span
class="rating__label"
>
Likes
</span>
</button>
<button
aria-label="Click to vote down"
Expand All @@ -683,6 +708,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
class="fa fa-chevron-down"
/>
2
<span
class="rating__label"
>
Dislikes
</span>
</button>
</div>
<div
Expand Down Expand Up @@ -941,6 +971,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
class="fa fa-chevron-up"
/>
10
<span
class="rating__label"
>
Likes
</span>
</button>
<button
aria-label="Click to vote down"
Expand All @@ -952,6 +987,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
class="fa fa-chevron-down"
/>
2
<span
class="rating__label"
>
Dislikes
</span>
</button>
</div>
<div
Expand Down
4 changes: 2 additions & 2 deletions ...y4/comments_async/static/comments_async/__tests__/__snapshots__/comment_box.jest.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
</div>
</div>
<ul
class="u-list-reset"
class="u-list-reset a4-comments"
/>
<div
class="d-none"
Expand Down Expand Up @@ -280,7 +280,7 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
</div>
</div>
<ul
class="u-list-reset"
class="u-list-reset a4-comments"
/>
<div
class="d-none"
Expand Down
53 changes: 27 additions & 26 deletions adhocracy4/comments_async/static/comments_async/comment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,33 +380,34 @@ export default class Comment extends React.Component {
/>}
<div className="a4-comments__action">
<div className="row">
<div className="col-12 a4-comments__action-bar-container">
{this.renderRatingBox()}

<div className="a4-comments__action-bar">
{((this.allowForm() && !this.props.is_deleted) || (this.props.child_comments && this.props.child_comments.length > 0)) &&
<button className="btn btn--no-border a4-comments__action-bar__btn" type="button" onClick={this.toggleShowComments.bind(this)}>
<a href="#child-comment-form">
<i className={this.state.showChildComments ? 'fa fa-minus' : 'far fa-comment'} aria-hidden="true" /> {getAnswerForm(this.state.showChildComments, this.props.child_comments.length)}
</a>
</button>}

{!this.props.is_deleted &&
<a
className="btn btn--no-border a4-comments__action-bar__btn" href={'?comment_' + this.props.id}
data-bs-toggle="modal" data-bs-target={'#share_comment_' + this.props.id}
><i className="fas fa-share" aria-hidden="true" /> {translated.share}
</a>}

{!this.props.is_deleted && this.props.authenticated_user_pk && !this.props.is_users_own_comment &&
<a
className="btn btn--no-border a4-comments__action-bar__btn" href={'#report_comment_' + this.props.id}
data-bs-toggle="modal"
><i className="fas fa-exclamation-triangle" aria-hidden="true" />{translated.report}
</a>}
{!this.props.is_deleted &&
<div className="col-12 a4-comments__action-bar-container">
{this.renderRatingBox()}

<div className="a4-comments__action-bar">
{((this.allowForm() && !this.props.is_deleted) || (this.props.child_comments && this.props.child_comments.length > 0)) &&
<button className="btn btn--no-border a4-comments__action-bar__btn" type="button" onClick={this.toggleShowComments.bind(this)}>
<a href="#child-comment-form">
<i className={this.state.showChildComments ? 'fa fa-minus' : 'far fa-comment'} aria-hidden="true" /> {getAnswerForm(this.state.showChildComments, this.props.child_comments.length)}
</a>
</button>}

{!this.props.is_deleted &&
<a
className="btn btn--no-border a4-comments__action-bar__btn" href={'?comment_' + this.props.id}
data-bs-toggle="modal" data-bs-target={'#share_comment_' + this.props.id}
><i className="fas fa-share" aria-hidden="true" /> {translated.share}
</a>}

{!this.props.is_deleted && this.props.authenticated_user_pk && !this.props.is_users_own_comment &&
<a
className="btn btn--no-border a4-comments__action-bar__btn" href={'#report_comment_' + this.props.id}
data-bs-toggle="modal"
><i className="fas fa-exclamation-triangle" aria-hidden="true" />{translated.report}
</a>}

</div>
</div>
</div>
</div>}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion adhocracy4/comments_async/static/comments_async/comment_list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Comment from './comment'

const CommentList = (props) => {
return (
<ul className="u-list-reset">
<ul className="u-list-reset a4-comments">
{
props.comments.map((comment, index) => {
return (
Expand Down
26 changes: 16 additions & 10 deletions adhocracy4/comments_async/static/comments_async/comment_manage_dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,22 @@ const CommentManageDropdown = (props) => {
>
<i className="fas fa-ellipsis-h" aria-hidden="true" />
</button>
<div className="dropdown-menu dropdown-menu-end">
{props.has_changing_permission && [
<button key="1" className="dropdown-item" type="button" onClick={props.handleToggleEdit}>{translated.edit}</button>,
<div className="divider" key="2" />
]}
{props.has_deleting_permission && [
<a key="3" className="dropdown-item" href={'#comment_delete_' + props.id} data-bs-toggle="modal">{translated.delete}</a>,
<div className="divider" key="4" />
]}
</div>
<ul className="dropdown-menu dropdown-menu-end">
{props.has_changing_permission && (
<li className="dropdown-item">
<button type="button" onClick={props.handleToggleEdit}>
{translated.edit}
</button>
</li>
)}
{props.has_deleting_permission && (
<li className="dropdown-item">
<a href={'#comment_delete_' + props.id} data-bs-toggle="modal">
{translated.delete}
</a>
</li>
)}
</ul>
</div>
)
}
Expand Down
6 changes: 5 additions & 1 deletion adhocracy4/ratings/static/ratings/react_ratings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import config from '../../../static/config'

const translations = {
upvote: django.gettext('Click to vote up'),
downvote: django.gettext('Click to vote down')
downvote: django.gettext('Click to vote down'),
likes: django.gettext('Likes'),
dislikes: django.gettext('Dislikes')
}

class RatingBox extends React.Component {
Expand Down Expand Up @@ -133,6 +135,7 @@ class RatingBox extends React.Component {
>
<i className="fa fa-chevron-up" aria-hidden="true" />
{this.state.positiveRatings}
<span className="rating__label">{translations.likes}</span>
</button>
<button
aria-label={translations.downvote}
Expand All @@ -142,6 +145,7 @@ class RatingBox extends React.Component {
>
<i className="fa fa-chevron-down" aria-hidden="true" />
{this.state.negativeRatings}
<span className="rating__label">{translations.dislikes}</span>
</button>
</div>
)
Expand Down

0 comments on commit 68d89e8

Please sign in to comment.