Page MenuHomePhabricator

Implement Dark mode in the tool
Closed, ResolvedPublic

Assigned To
Authored By
Gopavasanth
Dec 26 2020, 6:23 AM
Referenced Files
F34103682: 1613279128885.png
Feb 14 2021, 5:13 AM
F34103684: 1613279315601.png
Feb 14 2021, 5:13 AM
F34103686: 1613279431846.png
Feb 14 2021, 5:13 AM
F34103115: image.png
Feb 13 2021, 6:02 PM
F34102828: screenshot.png
Feb 13 2021, 9:34 AM

Description

VideoCutTool is a tool to trim, crop, rotate on-the-fly videos in Wikimedia Commons and can be found at https://videocuttool.wmflabs.org/

Task:

  • Learn about VideoCutTool from Commons: VideoCutTool
  • Using react antd's Customize Theme implement the dark mode in the tool so users can toggle their loved themes from light mode to dark mode and vice versa.

Code repos:

If you need any help, please feel free to comment here, happy to help you!

Details

Related Changes in Gerrit:

Event Timeline

Hi,
I am new to open source and would like to work on this issue.

Hey Gopavasanth!
I would like to work on this issue!

Hi and welcome everyone, and thanks for your interest. Also see https://www.mediawiki.org/wiki/New_Developers/Communication_tips - thanks!

@Dhairya3124: Hi! This task has been assigned to you a while ago. Could you maybe share an update? Do you still plan to work on this task, or do you need any help?

@Aklapper I tried upon this but failed it seems like I need to work more upon React JS so you can assign this issue to anyone else :)

Hi @Bharatkhatri351 Are you still working on this task? Can you please share your progress? Thanks!!

@Gopavasanth yes i was working on this project but as i mentioned you before we can't add dynamic themes directly on ant design we need some external predefined libraries or dependencies.
after doing lots of research i was working on this approach
( https://dev.to/chrsi/switching-themes-in-a-react-app-with-ant-design-p8m )
i succesfully used this approach on my app but the problem with this approach is it require ejection of app
"Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself."
Which i think is not good approach for this project.it will add so much of extra files and webpack file which will be not easy to maintain in future.

I am currently working on another approach to solve this issue which require three to four dependicies for conversion(less to css) and switching it dynamically.

I will surely inform you if i will get some progress on this.
thank you:}

Hi @Khr2003, Welcome to Wikimedia! Please feel free to claim the task :)

Thanks.

I have few questions:
1- Prettier config was rejected in this commit: https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/569593. Is there a possibly to revisit this as it will help with consistent coding style and auto format in vscode.
2- This what I have so far. I chose dark blue. I was wondering if you have any input on the colors.

screenshot.png (956×1 px, 47 KB)

3- There is an empty space at the bottom. I can fix this by making the main div full height. This will be universal not just part of dark theme. Should I add in this change (with a separate commit) or create a separate task for it?

Hi @Khr2003

  • We didn't configure a fixed standard format for now, yeah that is always a plan to do, for now, you can make a patch as such :)
  • Your opted color dark blue seems good too, For other ideas, @Bharatkhatri351 proposed another style of colors, I'm attaching the picture here, how does that look like?
    image.png (638×1 px, 121 KB)
  • This is a great idea and I would suggest creating a new ticket for that so we can see how the other style looks like.

Also, to make this clear we are expecting the toggle button b/w light mode and the dark mode in the header, So I hope you already included the toggle button? if not see resource-1 and resource-2 for some inspiration :)

Hi @Gopavasanth
Thanks. I completed the design and I will add tasks later for the other issues.
Here are the screenshots. If they look ok I will push the commit.

1613279128885.png (956×1 px, 47 KB)

1613279315601.png (882×1 px, 70 KB)

1613279431846.png (899×1 px, 62 KB)

Hey @Khr2003 That was quick! I have a quick suggestion in the third image T270832#6828723 The default text in the upload comment/text is not visible due to the colors or you removed it? The rest seems to be great! Please create a patch-set in gerrit and set to review :)

@Gopavasanth It was mostly CSS and that a strong area for me. There is no text in textarea and that is why nothing is shwoing.

I finally was able to push the changes.

https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/664048

Change 664048 had a related patch set uploaded (by Khr2003; owner: Khr2003):
[labs/tools/VideoCutTool@master] Added dark theme

https://gerrit.wikimedia.org/r/664048

Change 664048 merged by jenkins-bot:
[labs/tools/VideoCutTool@master] Added dark theme

https://gerrit.wikimedia.org/r/664048

@Khr2003 Kudos for amazing work! The dark mode is live now: https://videocuttool.wmflabs.org/