Chapter Table UI Improvements #403
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Changes the column checkbox to select rows in the current page rather than all rows. This will reduce clicks from users when marking large series that aren't fully completed.
*Moved marked buttons into dropdown, seperating operations for all rows and selected rows *Moved Download chapters into dropdown, also seperated for all and selected *Moved back the selected buttons back into the main buttons rows using outline variant
*consolidated group and language filters under the filter dropdown
*Removed filter logo *Swap popover trigger style from button to div *Have popover show to the right *Conditionally render chevron
*Added read filter component to filter dropdown *Modified library state to filter read chapters
✅ Deploy Preview for houdoku ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
xgi
reviewed
Feb 18, 2025
Owner
xgi
left a comment
xgi
left a comment
There was a problem hiding this comment.
A few minor comments but this looks great. Thanks!
| <span>Read</span> | ||
| </div> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> |
| <span>All Chapters</span> | ||
| </div> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> |
Comment on lines
8
to
26
| const toggleReadChapters = () => { | ||
| setHideReadChapters(!hideReadChapters); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className="flex items-center space-x-2 cursor-pointer" | ||
| onClick={toggleReadChapters} | ||
| > | ||
| {hideReadChapters ? ( | ||
| <Check className="h-5 w-5 text-blue-500" /> | ||
| ) : ( | ||
| <Square className="h-5 w-5 text-gray-500" /> | ||
| )} | ||
| <span className="text-sm"> | ||
| Hide Read | ||
| </span> | ||
| </div> | ||
| ); |
Owner
There was a problem hiding this comment.
- change to "Hide read"
- I think the check option is better as an actual checkbox, although it's fine to have the click event on the container div. Also would prefer to not have the menu close when toggling this option
return (
<div
className="flex items-center space-x-2 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
setHideReadChapters(!hideReadChapters);
}}
>
<Checkbox checked={hideReadChapters} />
<span className="text-sm">Hide read</span>
</div>
);
Comment on lines
353
to
356
| <Button variant="outline"> | ||
| <Filter className="w-4 h-4" /> | ||
| Filters | ||
| </Button> |
Owner
There was a problem hiding this comment.
doesn't need to be part of this PR, but I think it would be good to have a badge with X selected on the button when either language/group filters are applied.
| }; | ||
|
|
||
| const getAllChapters = (): Chapter[] => { | ||
| console.log(table.getCoreRowModel()) |
Comment on lines
475
to
382
| {table.getIsSomeRowsSelected() && ( | ||
| <div className="flex space-x-2 items-end"> | ||
| <Button variant="outline" className="ml-auto" onClick={() => setSelectedRead(true)}> | ||
| <Eye className="w-4 h-4" /> | ||
| Mark selected read | ||
| </Button> | ||
| <Button variant="outline" className="ml-auto" onClick={() => setSelectedRead(false)}> | ||
| <EyeOff className="w-4 h-4" /> | ||
| Mark selected unread | ||
| </Button> | ||
| </div> | ||
| </> | ||
| )} |
Owner
There was a problem hiding this comment.
You can just get rid of these buttons
| const chapterListChOrder = get(chapterListChOrderState); | ||
|
|
||
| const uniqueChapters = new Map(); | ||
| const toggleReadChapters = get(ReadChaptersState); |
Owner
There was a problem hiding this comment.
toggleReadChapters doesn't make sense, this is a boolean. Maybe also change ReadChaptersState to something like hideUnreadChaptersState and adjust accordingly?
*filters badge indicator that will also clear filters *change hide read filter to use actual checkbox *clean up
Author
|
Thanks for the feedback xgi. This commit should do it, cheers! |
purpxd
force-pushed
the
ui-improvement/library-chaptertable
branch
from
a7a7d11 to
8598129
Compare
*removed overflow class in table div, it prevented sticky table headers
purpxd
force-pushed
the
ui-improvement/library-chaptertable
branch
from
8598129 to
88dc464
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Chapter Table Checkbox Column
Before: Checkbox selects all rows in the table
After: Checkbox selects all rows in current page
I figured maybe it wasn't intended to do that since there was pagination for the tables that the checkbox should only select only the chapters in the current page. Anyway if it was then I added the select all in the options dropdown.
Options Dropdown
Moved the download and marking operations into the options dropdown. I think you wanted some confirmation for the downloads, this solves that. The mark selected operations I moved into the dropdown might be a little redundant since I kept the previous buttons where they were. But included mark all chapters which can be useful
Filter Dropdown
The buttons row was getting too packed and with the addition of the read chapters filter I figured it would be appropriate to move it to a dropdown
Hide Read Filter
This filter solves #326