Skip to content

Dark mode feature#16

Merged
tehelsper merged 21 commits intomynodebtc:masterfrom
abhiShandy:master
Nov 9, 2019
Merged

Dark mode feature#16
tehelsper merged 21 commits intomynodebtc:masterfrom
abhiShandy:master

Conversation

@abhiShandy
Copy link
Contributor

Addresses #6

  • used orange shade of Mynode logo (not the bitcoin one)
  • added darkmode file just like quicksync
  • changed the black parts of logo to orange
  • cloned mynode.css to mynode_dark.css with modified font and background colors

Right now it works only for the settings page.

PFA the screenshot of the page
Screen Shot 2019-10-16 at 10 06 48 PM

@abhiShandy
Copy link
Contributor Author

Now, it works for other pages too, but I haven't tested every page. (we need testing framework)

I created a include html for both logo_header and mynode_css, but I had to copy-paste it to every template html :/

I took the long road of using a function in device_info.py and then passing it through templateData for render_template function, but I hope we refactor the code later to use some kind of global variable.
Screen Shot 2019-10-17 at 12 59 06 AM

@tehelsper
Copy link
Collaborator

Thanks for your work so far!

Instead of having one toggle for dark mode, could you change it to get a general UI settings object with dark mode being one setting within the object? That way, we can more easily expand UI settings without needing to continue adding more settings to each of the template parameters.

Other comments:

  • Can the button text be a darker color similar to the background?
  • Instead of orange text, could it be a bit lighter - like closer to a white or off-white? I'm just wondering how that would look.

@tehelsper
Copy link
Collaborator

Not yet, just looked at screenshots.

@abhiShandy
Copy link
Contributor Author

Screen Shot 2019-10-17 at 10 58 20 PM

check out the colors

@abhiShandy
Copy link
Contributor Author

I'll save all the UI settings in one file: /mnt/hdd/mynode/settings/ui.json

@abhiShandy
Copy link
Contributor Author

You might not like this level of refactoring but

  • I'm using ui.json to save UI settings
  • I moved the links to CSS and JS files to includes/head.html
  • changed colors of elements in cli and bitcoind pages, like tables, search fields and cli contents
  • tested all pages manually (is there a automated test?)
  • couldn't import ui_settings into electrum_server.py, so that page is stuck in lightmode

@tehelsper
Copy link
Collaborator

The latest screenshot looks great! Most of those changes sound fine, but I'll have to take a look once I get a bit more time.

Any idea what the issue is on the electrum page?

I don't have any automated tests yet, but I'd like to add some. I'm working on a VM that's in beta which I'm hoping will help automate testing since it can easily be spun up from scratch.

@abhiShandy abhiShandy mentioned this pull request Oct 20, 2019
@abhiShandy
Copy link
Contributor Author

Changes made:

  • merged all changes since 0.1.58
  • removed repeated CSS code for dark mode
  • change colors of login and config pages for dark mode
  • moved contents of bitcoin_cli.css to mynode.css, and deleted bitcoin_cli.css

Unable to import read_ui_settings from settings into electrum_server.py, I can't imagine the reason behind this since the same import line works in other .py files.
Right now the electrum page is stuck in light mode

@abhiShandy
Copy link
Contributor Author

Screen Shot 2019-11-05 at 9 27 02 PM

@Amiga500
Copy link
Contributor

Amiga500 commented Nov 6, 2019

I like it a lot!

@tehelsper tehelsper merged commit b09d322 into mynodebtc:master Nov 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants