Replace X button with dropdown menu in CollectionItemRow#4078
Conversation
|
Thanks so much for the quick turnaround on this! I think the changes here overall look awesome! I think the only suggested changes I have here are UI-based:
Please let me know if you have any other thoughts on this as well! |
hey! i can definitely explore both options here either shortening the label or increasing the dropdown width slightly (and adjusting its position) so the text fits on a single line |
hey @raclim, please do let me know which one you like more, thanks! |
|
Thanks so much for the update! I think I personally like the bottom one better, with the text "Remove from Collection", but please let me know if you might feel otherwise! |
i do like that too one, its looks small and better, will push the code for that, thanks! |
|
done |
| "DeleteFromCollection": "Are you sure you want to remove {{name_sketch}} from this collection?", | ||
| "SketchDeleted": "Sketch deleted", | ||
| "SketchRemoveARIA": "Remove sketch from collection", | ||
| "SketchRemoveLabel": "Remove from Collection", |
There was a problem hiding this comment.
Sorry I think these are the last few changes—since this is a new translation key, would you be able to add this to the other translation files to help with tracking changes? You can add in their English translation as a placeholder!
There was a problem hiding this comment.
thank you for the heads up! added the SketchRemoveLabel key to all locale files as a placeholder with the english value
| import { Link } from 'react-router-dom'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import styled from 'styled-components'; |
There was a problem hiding this comment.
I also should've caught this earlier, but would you be able to actually revert the styled-components changes? Since styled-components is currently in maintenance mode, we decided to work towards removing it from the repo.
There was a problem hiding this comment.
sorry about that! removed WiderTableDropdown and SketchlistDropdownColumn and replaced them with css classes in _collection.scss and the existing sketch-list dropdown-column class instead
raclim
left a comment
raclim
left a comment
There was a problem hiding this comment.
Thanks for the quick follow up! This looks good to me.
2 participants
Issue:
Fixes #3883
Fixes #3881
The "X" button in the Collection sketch list view was confusing — it wasn't clear whether it removed the sketch from the collection or deleted it entirely. This PR replaces it with a dropdown menu consistent with the rest of the editor's UI (e.g., My Sketches, My Collections pages).
Demo:
After: A dropdown menu (▾) matching the style used on the My Sketches and My Collections pages, with a "Remove sketch from collection" option.
Changes:
RemoveIconbutton andTooltipwithTableDropdownandMenuItemcomponents inCollectionItemRow.jsxSketchlistDropdownColumnstyled component for consistent positioning with other table dropdownsoverflow: hiddenfrom.collection-containerand.collection-contentto prevent the dropdown from being clipped.collection-row__action-columnand.collection-row__remove-buttonstyles from_collection.scssI have verified that this pull request:
npm run lint)npm run test)npm run typecheck)developbranch.Fixes #123