Skip to content

Improve UI for sorting options on comments#13670

Merged
andreslucena merged 22 commits intodecidim:developfrom
i-need-another-coffee:feature/sorting-dropdown-for-comments
Jan 8, 2025
Merged

Improve UI for sorting options on comments#13670
andreslucena merged 22 commits intodecidim:developfrom
i-need-another-coffee:feature/sorting-dropdown-for-comments

Conversation

@andra-panaite
Copy link
Copy Markdown
Contributor

@andra-panaite andra-panaite commented Nov 15, 2024

🎩 What? Why?

I have added a new option, "Sort by," that is disabled within the select. I have also added styling to bold the default option for sorting that is used when the user does not choose from the dropdown.

📌 Related Issues

Link your PR to an issue

Testing

  1. Go on the proposal/ meeting page.
  2. Add a few comments.
  3. Observe the sorting dropdown for comments.

📷 Screenshots

Please add screenshots of the changes you are proposing
comments_sorting

♥️ Thank you!

github-actions[bot]
github-actions bot requested changes Nov 15, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

This pull request does not contain a valid label. Please add one of the following labels: ['type: feature', 'type: change', 'type: fix', 'type: removal', 'target: developer-experience', 'type: internal']

@alecslupu alecslupu self-assigned this Nov 15, 2024
@alecslupu alecslupu added the type: change PRs that implement a change for an existing feature label Nov 15, 2024
github-actions[bot]
github-actions bot previously approved these changes Nov 15, 2024
View reviewed changes
@greenwoodt greenwoodt self-requested a review November 18, 2024 08:06
greenwoodt
greenwoodt requested changes Nov 18, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@greenwoodt greenwoodt left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Nice job! Everything seems to work with the addition of the Order name. If there one change I could request is perhaps making the Sort by: translation slightly lighter shade colour (like grey), rather than the same of the resource names?


Screenshot 2024-11-18 at 09 20 06

github-actions[bot]
github-actions bot previously approved these changes Nov 18, 2024
View reviewed changes
@andra-panaite
Copy link
Copy Markdown
Contributor Author

andra-panaite commented Nov 18, 2024

Hi @greenwoodt!
I have tried to add a lighter color to the "Sort by" option, but it seems that the selected option will take the styling applied to the select, not the one on itself. To have a different color only on the "Sort by" option, we will need some JavaScript to target the select element and change its styling when the page is first loaded. Then, when the user chooses another option from the select, the initial styling will be put back.
Do you think I should do this way?

github-actions[bot]
github-actions bot previously approved these changes Nov 18, 2024
View reviewed changes
@greenwoodt
Copy link
Copy Markdown
Member

greenwoodt commented Nov 19, 2024

Hi @greenwoodt! I have tried to add a lighter color to the "Sort by" option, but it seems that the selected option will take the styling applied to the select, not the one on itself. To have a different color only on the "Sort by" option, we will need some JavaScript to target the select element and change its styling when the page is first loaded. Then, when the user chooses another option from the select, the initial styling will be put back. Do you think I should do this way?

If you have a solution, then yes this method would be fantastic! Thanks @andra-panaite!

@greenwoodt
Copy link
Copy Markdown
Member

greenwoodt commented Nov 19, 2024

@andra-panaite After further internal discussion regarding changes to blend the new Sort By string, removing the bold-font from the selection drop down will be enough to approve the PR to merge!

github-actions[bot]
github-actions bot previously approved these changes Nov 19, 2024
View reviewed changes
@andra-panaite
Copy link
Copy Markdown
Contributor Author

andra-panaite commented Nov 19, 2024

@greenwoodt I have removed the bold font from the select tag and now it looks like this:
comments_sorting

Is this the desired result?

github-actions[bot]
github-actions bot previously approved these changes Nov 19, 2024
View reviewed changes
greenwoodt
greenwoodt previously approved these changes Nov 20, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@greenwoodt greenwoodt left a comment

Choose a reason for hiding this comment

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

👍🏽

@andreslucena
Copy link
Copy Markdown
Member

andreslucena commented Nov 20, 2024

The current behavior is weird, as it isn't the same when going the first time, and when changing it + refreshing it. It's a consistency issue problem at least.

sort-by.webm

@carolromero can you check this out and confirm that this is the intended behavior?

github-actions[bot]
github-actions bot previously approved these changes Dec 17, 2024
View reviewed changes
alecslupu
alecslupu reviewed Dec 18, 2024
View reviewed changes
github-actions[bot]
github-actions bot previously approved these changes Dec 18, 2024
View reviewed changes
github-actions[bot]
github-actions bot previously approved these changes Dec 18, 2024
View reviewed changes
andreslucena
andreslucena requested changes Jan 8, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@andreslucena andreslucena left a comment

Choose a reason for hiding this comment

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

I have some suggestions, can you check them out?

github-actions[bot]
github-actions bot previously approved these changes Jan 8, 2025
View reviewed changes
@alecslupu alecslupu requested a review from andreslucena January 8, 2025 10:53
github-actions[bot]
github-actions bot previously approved these changes Jan 8, 2025
View reviewed changes
@andreslucena andreslucena merged commit 1ef2224 into decidim:develop Jan 8, 2025
mllocs pushed a commit that referenced this pull request Jan 9, 2025
@andra-panaite @alecslupu @mllocs
Improve UI for sorting options on comments (#13670)
f918a2c 
* Added "Sort by" into the select dropdown

* Resolved comment

* Run linter

* Removed bold style  from select

* Resolved comment

* Added changes only to mobile view

* Running linters

* Removed duplicated id

* Fixed accessibility issues

* Apply suggestions from code review

* Apply review recommendation

* Running linters

* Fix accessibility

---------

Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>
entantoencuanto added a commit that referenced this pull request Jan 14, 2025
@entantoencuanto
Merge branch 'develop' into staging-lot2
aeca1f1 
* develop: (27 commits)
  WCAG navigation submenu (#13796)
  Update gem dependencies (part 3) (#13849)
  Prevent notifications for deleted users (#13812)
  Retries NPM installation a couple times to prevent network timeouts (#13831)
  Update gem dependencies (part 2) (#13839)
  Enhance signature pdf export (#13778)
  Fix HexaPDF dependency (#13834)
  Fix flaky spec in authentication (#13827)
  Merge upload field for documents and image on proposal admin form (#13735)
  Update gem dependencies (#13835)
  Upgrade erb_lint to 0.8.0 (#13833)
  Fix flaky spec in geocoder (#13820)
  Refactor modules mounting routes (#13294)
  Upgrade check-spelling action (#13825)
  Add missing images in the custom registration emails from meetings (#13632)
  Add missing translations (#13793)
  Fix proposal map performance with hundreds of markers (#13798)
  Create multiple surveys within same Survey component (#13420)
  Accountability bulk actions (#13730)
  Improve UI for sorting options on comments (#13670)
  ...
@greenwoodt greenwoodt mentioned this pull request Feb 7, 2025
Closed
@alecslupu alecslupu mentioned this pull request Feb 11, 2025
Merged
@alecslupu alecslupu mentioned this pull request Jul 22, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@greenwoodt greenwoodt greenwoodt left review comments

@andreslucena andreslucena andreslucena approved these changes

@github-actions github-actions[bot] github-actions[bot] approved these changes

+1 more reviewer

@alecslupu alecslupu alecslupu left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

@alecslupu alecslupu

@greenwoodt greenwoodt

Labels

module: comments module: core type: change PRs that implement a change for an existing feature

Projects

No open projects
Maintainers' backlog
Archived in project

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

UI Comments Iteration

5 participants

@andra-panaite @greenwoodt @andreslucena @alecslupu @carolromero