Skip to content
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

[WIP] Feature dark mode #2414

Open
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
2 participants
@peterzen
Copy link

commented Feb 12, 2019

Dark mode implementation (#2286 )

(For testing, use Ctrl+D to quickly cycle through the light/dark themes)

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from ced78d0 to d6c971e Feb 12, 2019

@ripcurlx ripcurlx self-assigned this Feb 13, 2019

@ripcurlx ripcurlx added the in:gui label Feb 13, 2019

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Feb 13, 2019

I'm not able to give proper feedback before the next release, but I quickly tried to build your PR (because I'm just to curious 😉). ATM it looks like something is not configured properly out of the box. Is there some manual setup involved for building the application with the new sass structured css?
bildschirmfoto 2019-02-13 um 10 47 19

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Feb 13, 2019

The css resources are not build automatically.

Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/theme-light.css" not found.
Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/bisq.css" not found.
Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/images.css" not found.
Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/CandleStickChart.css" not found.
@peterzen

This comment has been minimized.

Copy link
Author

commented Feb 13, 2019

Looks like the compass build doesn't work correctly - I've added in the generated CSS files which is a good idea anyhow. The SASS build should probably not be on the build critical path anyway.

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from fbad804 to 7dbc99a Feb 13, 2019

@peterzen peterzen changed the title [WIP] Feature dark mode Feature dark mode Feb 13, 2019

@ManfredKarrer ManfredKarrer changed the title Feature dark mode [WIP] Feature dark mode Feb 13, 2019

@peterzen

This comment has been minimized.

Copy link
Author

commented Feb 14, 2019

@ripcurlx did you get a chance to fire this up?

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Feb 14, 2019

Looks like the compass build doesn't work correctly - I've added in the generated CSS files which is a good idea anyhow. The SASS build should probably not be on the build critical path anyway.

I'm not sure if it is a good idea to put precompiled files in the project, as this might cause confusion if someone changes the css code and later the sass files are processed and overwrite the changes. I think it should work that if someone runs gradle build also the required css files should be generated. The same goes with Intellij. If I change code in the SASS file and run the app I expect the changes to be reflected in the app without doing manual processing of the SASS files.

Is there a reason why it is not working like that?

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Feb 14, 2019

@ripcurlx did you get a chance to fire this up?

Works for me now with the pre-compiled css files.
bildschirmfoto 2019-02-14 um 16 22 45

As mentioned before I'll give a more in-depth review as soon as the new release is out. Should be mid/end of next weeks.
I like the direction the dark mode is going, but I guess we'll need to get @pedromvpg involved for the final color codes 😄

@peterzen

This comment has been minimized.

Copy link
Author

commented Feb 14, 2019

Thanks for the feedback.

Indeed, it would be good to coordinate with the color code update effort. As part of this CSS refactoring I consolidated the colors into one place, it should be more straightforward to change them:

https://github.com/peterzen/bisq/blob/feature-dark-mode/desktop/src/main/java/bisq/desktop/styles/base-colors.scss

@pedromvpg please let me know if I can help.

In the meantime I'll fix the remaining couple issues like the tooltip background so that all of the palette can be controlled from the main configuration SASS file.

@peterzen

This comment has been minimized.

Copy link
Author

commented Feb 14, 2019

Looks like the compass build doesn't work correctly - I've added in the generated CSS files which is a good idea anyhow. The SASS build should probably not be on the build critical path anyway.

I'm not sure if it is a good idea to put precompiled files in the project, as this might cause confusion if someone changes the css code and later the sass files are processed and overwrite the changes. I think it should work that if someone runs gradle build also the required css files should be generated. The same goes with Intellij. If I change code in the SASS file and run the app I expect the changes to be reflected in the app without doing manual processing of the SASS files.

Agreed, that would be the way most devs expect it to work. (Though it can be argued that the SASS files are not likely to change very often, and the Compass build step does add a few seconds to the build. Maybe a separate build step and a "this file is generated from..." warning at the top of the CSS files is a decent compromise?)

Is there a reason why it is not working like that?

I couldn't replicate the issue in a fresh environment, am getting the com.github.anbuck.compass gradle plugin to load correctly. Could you look out for this as part of your review next week?

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch 2 times, most recently from 93b87c8 to 0c1d6b6 Feb 15, 2019

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Feb 27, 2019

@peterzen Just wanted to let you know, that I'm looking into your PR right now. Feedback should be available soon.

@peterzen

This comment has been minimized.

Copy link
Author

commented Feb 27, 2019

Thanks, please let me know if anything is unclear or wrong :)

@ripcurlx
Copy link
Member

left a comment

I left a couple of first remarks. In general I like the new structure a lot as it makes it easier to maintain, but I still have issues getting it to run on my local setup. Compass compile is running and I have the main css and themes css in my bisq/desktop/styles dir, but it seems to have issues loading them during startup:

Feb. 28, 2019 5:10:50 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/theme-light.css" not found.
Feb. 28, 2019 5:10:51 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/bisq.css" not found.

No idea why it uses the german locale just for this block log outpout. I'll see if I find the issue regarding the css loading. For you it works out-of-the-box?

@@ -281,6 +287,7 @@ configure(project(':desktop')) {
compile project(':p2p')
compile project(':core')
compile project(':common')

This comment has been minimized.

Copy link
@ripcurlx

ripcurlx Feb 28, 2019

Member

No need for the extra new line.

@@ -1292,6 +1292,7 @@ message PreferencesPayload {
string rpc_user = 47;
string rpc_pw = 48;
string take_offer_selected_payment_account_id = 49;
bool use_dark_theme = 50;

This comment has been minimized.

Copy link
@ripcurlx

ripcurlx Feb 28, 2019

Member

Not sure if we should use a boolean or if we want to have it more future proof if more themes are created over time?

This comment has been minimized.

Copy link
@peterzen

peterzen Mar 1, 2019

Author

It's indeed more future proof to use a string so that this file and the settings object won't require changing later.

@@ -25,6 +25,7 @@

public class GlobalSettings {
private static boolean useAnimations = true;
private static boolean useDarkTheme = false;

This comment has been minimized.

Copy link
@ripcurlx

ripcurlx Feb 28, 2019

Member

Is there a reason why we need it in the GlobalSettings object?

This comment has been minimized.

Copy link
@peterzen

peterzen Mar 2, 2019

Author

No, this was an oversight on my part -- thanks for catching it.

@@ -0,0 +1,108 @@

@import "_variables.scss";

This comment has been minimized.

Copy link
@ripcurlx

ripcurlx Feb 28, 2019

Member

Is it necessary to import it here as well, as it is already imported in _base-colors?

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from 237a0aa to e4bb301 Mar 2, 2019

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

@ripcurlx The changes you requested are now done, thanks for the review.

Instead of the boolean type light/dark switcher there's now a drop-down menu in the Settings that, as you point out, is more flexible when it comes to additional themes. Please let me know what you think of this solution.

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

I left a couple of first remarks. In general I like the new structure a lot as it makes it easier to maintain, but I still have issues getting it to run on my local setup. Compass compile is running and I have the main css and themes css in my bisq/desktop/styles dir, but it seems to have issues loading them during startup:

Feb. 28, 2019 5:10:50 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/theme-light.css" not found.
Feb. 28, 2019 5:10:51 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/bisq.css" not found.

No idea why it uses the german locale just for this block log outpout. I'll see if I find the issue regarding the css loading. For you it works out-of-the-box?

Those messages seem to indicate that the CSS files were not generated in the compassCompile step. Are the files there though, after the build?

I'm getting a clean build when running on a fresh system (Ubuntu 18.04) with openjdk-11-jdk installed, and the resulting binary starts up correctly with no CSS related error messages. The theme switching works as well.

> Task :desktop:compassCompile
unsupported Java version "10", defaulting to 1.7
WARNING: An illegal reflective access operation has occurred
WARNING: Illegal reflective access by org.jruby.util.SecurityHelper (file:/home/peter/.gradle/caches/modules-2/files-2.1/org.jruby/jruby-complete/9.1.14.0/953b0ecf50980a4112fd0a2cd1dec1225b93c529/jruby-complete-9.1.14.0.jar) to field java.lang.reflect.Field.modifiers
WARNING: Please consider reporting this to the maintainers of org.jruby.util.SecurityHelper
WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations
WARNING: All illegal access operations will be denied in a future release
    write build/resources/main/bisq/desktop/styles/bisq.css
    write build/resources/main/bisq/desktop/styles/theme-dark.css
    write build/resources/main/bisq/desktop/styles/theme-light.css

Are you running the build in an existing local copy? Perhaps Maven is caching its dependencies and doesn't pick up the Compass dependency properly - unfortunately I'm not well versed enough with Gradle/Maven but it sounds like the problem might be there somewhere. Could you perhaps try running the build on a clean working copy or maybe a fresh system inside Docker and see if it works that way?

Another idea to try would be to move away $HOME/.gradle to clean the gradle cache - that should force it to start with a clean sheet.

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from e4bb301 to bc7c082 Mar 8, 2019

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 8, 2019

Rebased onto master

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

@peterzen Sorry again for the delayed response. We just have too many releases recently 😉. I'll try and response in more detail this afternoon.

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

The files are compiled for me as well and are in the defined build directory

WARNING: All illegal access operations will be denied in a future release
    write build/resources/main/bisq/desktop/styles/bisq.css
    write build/resources/main/bisq/desktop/styles/theme-dark.css
    write build/resources/main/bisq/desktop/styles/theme-light.css

But still when running the application they are not found and loaded. Maybe there is a classpath issue or something like that. I'll see if I'm able to figure it out, why it is not working for me.

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 8, 2019

What system/JDK version are you running? I'll spin up a similar environment and see if I can replicate the problem.

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

What system/JDK version are you running? I'll spin up a similar environment and see if I can replicate the problem.

I'm running macOS 10.13.6 with OpenJDK Runtime Environment 18.3 (build 10.0.2+13)

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

Atm moment I've an issue to startup a local seednode as some program arguments were changed recently on master. So I wasn't able to continue with testing right now.

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

@peterzen Just to be sure: Are you running the client from command line or are you running it from within IntelliJ?

// https://github.com/anbuck/gradle-compass
compass {
sassDir = file("src/main/resources/styles")
cssDir = file("build/resources/main/bisq/desktop/styles")

This comment has been minimized.

Copy link
@ripcurlx

ripcurlx Mar 8, 2019

Member

changing that path to cssDir = file("src/main/java/bisq/desktop/styles") solves my problems locally. Now I can build/run it from commandline and from within IntelliJ.

This comment has been minimized.

Copy link
@peterzen

peterzen Mar 8, 2019

Author

I've tested this in Linux environments, it works correctly both with the src/ being around and without it so the CSS gets properly compiled into the jar file. I've added this fix to the PR.

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

@peterzen One step further 👍

Could you please have a look at the differences between your version
bildschirmfoto 2019-03-08 um 17 50 37
and the current one
bildschirmfoto 2019-03-08 um 17 54 46
so that they match.

I'm on vacation next week, so I can't give further feedback until then.
Thanks so far for your work!

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

Another thing we need to solve is, that there is no need to manually run the compile compass command after a change in the scss within IntelliJ. So developers who are working on the UI don't need to do anything manual that needs to be communicated.

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 8, 2019

@peterzen Just to be sure: Are you running the client from command line or are you running it from within IntelliJ?

I'm running it from the CLI most of the time, but sometimes also from within the IntelliJ debugger.

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 8, 2019

Another thing we need to solve is, that there is no need to manually run the compile compass command after a change in the scss within IntelliJ. So developers who are working on the UI don't need to do anything manual that needs to be communicated.

./gradlew -t compassCompile runs the compile task in continuous mode. That, along with the CSS reload in Scenic View the app reloads the changes automatically.

https://github.com/peterzen/bisq/blob/aedbbe6c24cfe1b09acf6d09acfb0b6992303898/desktop/src/main/resources/styles/README.md

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from bc7c082 to 12e65ea Mar 8, 2019

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 8, 2019

@peterzen One step further

Could you please have a look at the differences between your version
bildschirmfoto 2019-03-08 um 17 50 37
and the current one
bildschirmfoto 2019-03-08 um 17 54 46
so that they match.

I'm on vacation next week, so I can't give further feedback until then.
Thanks so far for your work!

This came out by accident - the white panel that's between the gradient background (which is actually invisible ATM as the white panel is opaque) is transparent. I thought this looked rather cool so left it as transparent but it can of course be colored. I'll fix the other items (buttons, nav etc)

I'll wait for all of your comments to come in as it's less work to do them all at once.

Are there any other GUI related items currently in the PR pipeline that are worked on currently and may get merged in the coming weeks? If so, it would be good to coordinate them with this PR - possibly even work on them on top of this refactored CSS because in case there are larger changes in the current bisq.css it's quite a lot of work to manually rebase this one.

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

Are there any other GUI related items currently in the PR pipeline that are worked on currently and may get merged in the coming weeks? If so, it would be good to coordinate them with this PR - possibly even work on them on top of this refactored CSS because in case there are larger changes in the current bisq.css it's quite a lot of work to manually rebase this one.

All redesign tasks are on hold until the DAO launch. So now would be a good to get this finished and into master before any further design work will happen. I think it also makes sense to merge this PR first without the dark mode, so there is more time to make it perfect, but still have this structural changes in asap.

Unfortunately I won't be able to look at every screen for differences to the current state. Maybe you could do this and I'll have another look at it when you're done. Would this work for you?

@peterzen

This comment has been minimized.

Copy link
Author

commented Mar 8, 2019

Are there any other GUI related items currently in the PR pipeline that are worked on currently and may get merged in the coming weeks? If so, it would be good to coordinate them with this PR - possibly even work on them on top of this refactored CSS because in case there are larger changes in the current bisq.css it's quite a lot of work to manually rebase this one.

All redesign tasks are on hold until the DAO launch. So now would be a good to get this finished and into master before any further design work will happen. I think it also makes sense to merge this PR first without the dark mode, so there is more time to make it perfect, but still have this structural changes in asap.

Unfortunately I won't be able to look at every screen for differences to the current state. Maybe you could do this and I'll have another look at it when you're done. Would this work for you?

I've been looking at the screens for a little too long to spot small differences so input from a fresh set of eyeballs would be great ;) I'll have a go and go through them again, now after not having worked on them intensively for a couple weeks I'm noticing some differences which I'll fix for sure.

@ripcurlx

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

Yes, you get colorblind after some time 😉. Maybe you could use some image diff tool to help you out like: https://www.diffchecker.com/image-diff.

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from aedbbe6 to 085ede7 Mar 8, 2019

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from 085ede7 to 8ed3629 Mar 23, 2019

@ripcurlx ripcurlx referenced this pull request Mar 28, 2019

Closed

For March 2019 #247

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from 1b7b591 to bc0958f Apr 8, 2019

@peterzen

This comment has been minimized.

Copy link
Author

commented Apr 8, 2019

Rebased onto master

@peterzen

This comment has been minimized.

Copy link
Author

commented Apr 16, 2019

@ripcurlx What is the plan for integrating this PR? There are some new conflicts now due to the DAO changes - I wonder what would be an appropriate time for doing a final rebase to add any other UI changes that might be in the pipeline.

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from bc0958f to f35a0d5 Apr 16, 2019

@peterzen peterzen force-pushed the peterzen:feature-dark-mode branch from f35a0d5 to c575210 Apr 28, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.