Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#7864] comments and ratings: small changes following mB redesign #1669

Merged
merged 1 commit into from
Aug 28, 2024
+72 −18
Merged

[#7864] comments and ratings: small changes following mB redesign #1669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions ...cracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
View file
Open in desktop
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
12 changes: 8 additions & 4 deletions ...y4/comments_async/static/comments_async/__tests__/__snapshots__/comment_box.jest.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
<div
class="a4-comments__commentbox__form"
>
<div>
<div
class="a4-comments__alert"
>
The currently active phase doesn't allow to comment.
</div>
</div>
Expand Down Expand Up @@ -133,7 +135,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 All @@ -156,7 +158,9 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
<div
class="a4-comments__commentbox__form"
>
<div>
<div
class="a4-comments__alert"
>
The currently active phase doesn't allow to comment.
</div>
</div>
Expand Down Expand Up @@ -280,7 +284,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
4 changes: 2 additions & 2 deletions adhocracy4/comments_async/static/comments_async/comment_form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,13 +233,13 @@ export default class CommentForm extends React.Component {
)
} else if (!this.props.projectIsPublic && this.state.agreedTermsOfUse) {
return (
<div>
<div className="a4-comments__alert">
{translated.onlyInvited}
</div>
)
} else {
return (
<div>
<div className="a4-comments__alert">
{translated.notAllowedComment}
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion adhocracy4/comments_async/static/comments_async/comment_list.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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'),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when read out by a sr this will say "Click to vote up" but then say "x likes" which doesn't feel very coherent. Do we need a mechanism (flag/prop) to either use a vote terminology (aplus) or a like terminology (mB) ?

Copy link
Contributor Author

@hom3mad3 hom3mad3 Aug 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would suggest this needs to be unified across platforms, otherwise we are adding lots of custom flags and edge cases for the real small stuff when the component has not been designed with this in mind. i would also argue we need to move on with merging this story as not to increase the scope even more, so i can create an issue.

@TeaJayyy @CarolingerSeilchenspringer what do we do? its not so simple as the terminologies are indeed different. On mB we need the text Likes/Dislikes to show, whereas on aplus we dont show anything (which forces us to overengineer things for screen readers and have the hidden message Click to vote). Can we just have both platforms show text and then we can show and hide it visually with css on the respective forks? An idea on how not to add more logic.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added issue: #1673

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