-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
Fix #4106: Showing color preview in Edit Profile #4212
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @saurabhdaware, this PR looks great! I played with it and it opens the system color picker on my Mac and I can see the DEV logo change in real time :)
I've added just a small request on grouping the initializing code.
@saurabhdaware can you take a look at the code climate issues as well just in case? I think it's complaining that |
Not sure why it is showing the issue in it. |
@saurabhdaware Let's leave it like this :) for future reference: a possible way would be to pass the elements as arguments to the function and have only one function, since you're basically swapping the values between the |
Cool, thank you @rhymes ! and yeah we can pass parameters and get around code climate I guess. This way just makes it easier for me to update the fields whenever necessary. I'll keep it in mind for the future though. thanks :D |
What type of PR is this? (check all applicable)
Description
Fixes #4106.
The current color-picker does not show a preview so it is hard to guess the color contrast. I added a preview (screenshot added below) which shows your selected colors.
Also, Added a
<input type="color">
which makes it is easy to select the color.Since there are other pages that depend on 'color-picker' class I did not change anything in
colorPicker.js
or any of the styles of current color-picker. I created a new filecolorPreview.js
and some new classes in html.Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Mobile
Desktop
Recording
Added to documentation?
[optional] What gif best describes this PR or how it makes you feel?
My first PR To DEV!
I was not very sure if I could do this or not since DEV's codebase is probably the largest codebase I've ever worked on but now I'm super proud of myself to complete this 🌻
Me showing this code to everyone :