Added custom color selector for issue #49 #67
Conversation
There was a problem hiding this comment.
Hi! Thanks for implementing this. Please implement the changes as requested from this review. I'll test your changes soon and if everything works as expected, we can merge and do a new release.
it clashes a bit stylistically and doesn't change depending on lightmode/darkmode
This is obvious and isn't something to be concerned about. This app provides a colorscheme that works for both modes. If the user has the choice to select any color, then it's out of our control what the end result will look like, so this is completely fine.
--
EDIT: I have made some changes myself:
- select color on single click
- open color selector on double click
- add tooltip hinting that double click opens selector
- add custom icon to show a visual difference with the color directly on the left
- adjust general color selector tool styling
When hovering:
The reason for using single-click and double-click here, is because when single-clicking, people want to draw, not to first remove the color selector tool.
- select color on single click - open color selector on double click - add tooltip hinting that double click opens selector - add custom icon to show a visual difference with the color directly on the left - adjust general color selector tool styling
This adds a custom color selector, it is draggable and closes when clicked outside.
I used
SketchPickerfromreact-colorfor the color picker andDraggablefromreact-draggableto make it draggable.I'm not sure how styling should best be done but I added new classes to styles.module.css in ./Palette to do it.
I also updated 2 if statements in
src-tauri/src/command.rsto be more concise, mentioned in #66.It can definitely look better, it clashes a bit stylistically and doesn't change depending on lightmode/darkmode but it gets the job done. I don't think it's quite merge ready but a decent place to start. I would like help with the styling if you can find some time.