Better Crowdin Darkmode - Building an GUI

in #utopian-io2 years ago

betterbanner.png

Better Crowdin Darkmode

Publisher - Jestemkioskiem
repository

You can install the addon directly from the Chrome App Store!

If the addon didn't work, try reloading the page after enabling Darkmode on Crowdin.

Version 0.2.1

As per @amosbastian's request, now submitted as a Pull Request!

Firefox support!

The initial, basic 0.1.0 version of the extension is now available for Firefox browsers through github and the firefox addon store (which I sadly can't link right now because the website is down...).

The port skipped the 0.2.1 version, since it isn't fundamental to the app's mission. Furthermore, the 0.3.0 version will introduce just as many problems, and it'll be easier to tackle them all at once.

A pop up has joined the battle!

This time, there's an UI!

This basic UI opens up when you click on the logo, and in the next version will refresh the CSS changes in case your page loaded too fast for the CSS to take effect.

When it opens up, you're presented with a color picker that allows you to choose any color you want for the text. In 0.3.0, this color picker will have the option to change all of the editor-related colors.

There's a small sneak peak of what it looks like!

popupsmall.gif

Code Clarity

Unfortunately the tips I've received from @amosbastian were not applied to this version of the app yet, as 0.3.0 was already in development by the time I've received them. Because of that, you'll see the same artifacts in 0.2.1, but won't see them in future releases.

What's in the (new) code:

src/popup

This dictionary contains 3 crucial files: popup.js, popup.html and popup.css that make the GUI work! While popup.js focuses mostly on altering the HTML and CSS of the popup itself, it does also communicate with script.js - the content file - to alter the CSS of the crowdin page itself.

src/script.js

The script.js file went through a bunch of changes to allow for communication between itself and popup.js. For now, only the text color is editable (which will change in 0.3.0).

src/third_party

This dictionary contains third party open source scripts that make my life a whole lot easier.

Technology Stack

Roadmap

Firefox Support

I wish to maintain Firefox support for every future version. This is unfortunately not an easy port because Mozilla, for whatever reason, fires iframe onload events immediately after the Document Object Model is loaded. There's currently no workaround (other than delaying the app's functionality by a few seconds) to this issue in the newest version of the browser.

It is also, unfortunately, different in the content - popup communication, so that will need to change a lot as well.

GUI & Customizability

I wish to further improve on the GUI & customizability of the app.

Extend out of the Editor

Even though Crowdin has a darkmode for the editor (although a terrible one), they don't offer such thing for the main website. Because of that, I'll be looking to introduce the darkmode to as many parts of Crowdin as possible.

How to contribute?

Submit all the Issues & Pull Requests directly to the project repository.

GitHub Information

my github account

Sort:  

Looks good! Personally, not a fan of the plugins changing the original behaviour, but sometimes it's unresistable to do it.


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Thank you for your review, @emrebeyler!

So far this week you've reviewed 8 contributions. Keep up the good work!

Hi @jestemkioskiem!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @jestemkioskiem!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.16
TRX 0.03
JST 0.021
BTC 16828.64
ETH 507.21
SBD 1.13