Merge branch '106-dark-mode-missing-for-lc-ms-viewer' into 'master'

Resolve "Dark mode missing for LC-MS viewer", Added Darkmode colors to WebViewJPanel Closes #106 See merge request bright-giant/sirius/sirius-frontend!29
sirius-ms · Jan 12, 2024 · 41385a4 · 41385a4
2 parents 0687a8d + 9d34c5d
commit 41385a4
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 13 deletions.
diff --git a/sirius_gui/src/main/java/de/unijena/bioinf/ms/gui/lcms_viewer/LCMSWebview.java b/sirius_gui/src/main/java/de/unijena/bioinf/ms/gui/lcms_viewer/LCMSWebview.java
@@ -4,6 +4,7 @@
 import com.google.common.base.Charsets;
 import com.google.common.io.Resources;
 import de.unijena.bioinf.ChemistryBase.ms.lcms.LCMSPeakInformation;
+import de.unijena.bioinf.ms.frontend.core.SiriusProperties;
 import de.unijena.bioinf.ms.gui.utils.FxTaskList;
 import javafx.concurrent.Worker;
 import javafx.embed.swing.JFXPanel;
@@ -14,6 +15,7 @@
 import java.io.IOException;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Properties;
 import java.util.concurrent.locks.ReentrantLock;
 import java.util.function.Consumer;
 
@@ -38,6 +40,15 @@ public LCMSWebview() {
         this.delayAfterHTMLLoading = new ArrayList<>();
         taskList.runJFXLater(()-> {
             this.webView = new WebView();
+            final Properties props = SiriusProperties.SIRIUS_PROPERTIES_FILE().asProperties();
+            final String theme = props.getProperty("de.unijena.bioinf.sirius.ui.theme", "Light");
+            if (!theme.equals("Dark")) {
+                this.webView.getEngine().setUserStyleSheetLocation(
+                        getClass().getResource("/js/" + "styles.css").toExternalForm());
+            } else {
+                this.webView.getEngine().setUserStyleSheetLocation(
+                        getClass().getResource("/js/" + "styles-dark.css").toExternalForm());
+            }
 //            System.out.println("A");
             setScene(new Scene(webView));
 //            System.out.println("B");
@@ -52,6 +63,11 @@ public LCMSWebview() {
                 if (newState == Worker.State.SUCCEEDED) {
                     lock.lock();
                     ((JSObject)webView.getEngine().executeScript("window")).setMember("console", new Console());
+                    if (!theme.equals("Dark")) {
+                        this.webView.getEngine().executeScript("var fg_color = 'black';");
+                    } else {
+                        this.webView.getEngine().executeScript("var fg_color = 'lightsteelblue';");
+                    }
                     this.lcmsViewer = (JSObject)webView.getEngine().executeScript(
                             "document.lcmsViewer = new LCMSViewer(\"#lcms\", \"#lcms_view\");"
                     );

diff --git a/sirius_gui/src/main/java/de/unijena/bioinf/ms/gui/webView/WebViewJPanel.java b/sirius_gui/src/main/java/de/unijena/bioinf/ms/gui/webView/WebViewJPanel.java
@@ -79,13 +79,12 @@ public void handleEvent(Event evt) {
             });
             final Properties props = SiriusProperties.SIRIUS_PROPERTIES_FILE().asProperties();
             final String theme = props.getProperty("de.unijena.bioinf.sirius.ui.theme", "Light");
-            if (!theme.equals("Dark")) {
-                this.webView.getEngine().setUserStyleSheetLocation(
-                        getClass().getResource("/sirius/" + "style.css").toExternalForm());
-            } else {
-                this.webView.getEngine().setUserStyleSheetLocation(
-                        getClass().getResource("/sirius/" + "style-dark.css").toExternalForm());
-            }
+            final String css = switch (theme) {
+                case "Dark" -> "style-dark.css";
+                case "Classic" -> "style-classic.css";
+                default -> "style-light.css";
+            };
+            this.webView.getEngine().setUserStyleSheetLocation(getClass().getResource("/sirius/" + css).toExternalForm());
             this.setScene(new Scene(this.webView));
         });
     }

diff --git a/sirius_gui/src/main/resources/js/lcms_viewer/lcms_viewer.js b/sirius_gui/src/main/resources/js/lcms_viewer/lcms_viewer.js
@@ -96,7 +96,7 @@ class SampleViewer {
     addDefinitions(svg) {
         svg.append("defs").append("marker").attr("id","arrowhead")
         .attr("markerWidth","10").attr("markerHeight","7").attr("refX","10").attr("refY","3.5").attr("orient","auto")
-        .append("polygon").attr("points", "0 0, 10 3.5, 0 7");
+        .append("polygon").attr("fill", fg_color).attr("points", "0 0, 10 3.5, 0 7");
     }
 
     reload() {
@@ -212,7 +212,7 @@ class SampleViewer {
             .attr("y1", d=>d.orig(xrt,y)[1])
             .attr("x2", d=>d.tx(xrt))
             .attr("y2", d=>d.ty(y))
-            .attr("stroke","black")
+            .attr("stroke", fg_color)
             .attr("marker-end","url(#arrowhead)");
 
         // add marker for average and median
@@ -263,13 +263,13 @@ class SampleViewer {
                             marker.timePoint < retentionTimes[i+1])) ||
                             (marker.timePoint <= retentionTimes[i] && (i==0 || marker.timePoint > retentionTimes[i-1]))) {
                             ms2Text.attr("transform", `translate(${x(self.rt(marker.timePoint))},${y(marker.intensity)})`).attr("display", null);
-                            ms2Text.select("text").text("MS/MS scan");
+                            ms2Text.select("text").text("MS/MS scan").attr("fill", fg_color);
                         }
                     }
                 }
                 path.attr("stroke", d => d.color(d===s || d.main===s || s.main === d, noone)).filter(d => d === s).raise();
-                dot.attr("transform", `translate(${x(self.rt(retentionTimes[i]))},${y(s.values[i-s.trace.indexOffset].intensity)})`);
-                dot.select("text").text(s.description(K));
+                dot.attr("transform", `translate(${x(self.rt(retentionTimes[i]))},${y(s.values[i-s.trace.indexOffset].intensity)})`).attr("fill", fg_color);
+                dot.select("text").text(s.description(K)).attr("fill", fg_color);
             }
 
             const entered = function() {

diff --git a/...s_gui/src/main/resources/sirius/style.css → ...c/main/resources/sirius/style-classic.css b/...s_gui/src/main/resources/sirius/style.css → ...c/main/resources/sirius/style-classic.css
@@ -12,4 +12,5 @@ html {
 
 body {
     font-size: 0.85em; /* That is your text's default font size. Here i chose 12px */
+    background-color: #d6d9df;
 }
diff --git a/sirius_gui/src/main/resources/sirius/style-light.css b/sirius_gui/src/main/resources/sirius/style-light.css
@@ -0,0 +1,16 @@
+.floatImg {
+    float: right;
+}
+
+* {
+    font-family: "DejaVu Sans", Arial, Helvetica, sans-serif;
+}
+
+html {
+    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
+}
+
+body {
+    font-size: 0.85em; /* That is your text's default font size. Here i chose 12px */
+    background-color: #f2f2f2;
+}
diff --git a/sirius_gui/src/main/resources/sirius/text.html b/sirius_gui/src/main/resources/sirius/text.html
@@ -36,7 +36,7 @@
     </style>
     <ScrollPane styleClass="edge-to-edge"/>
 </head>
-<body style="background-color:#d6d9df;" oncontextmenu="return false;">
+<body oncontextmenu="return false;">
 
 <div id="box1" style="margin: 0 15px 0 0">
     <p>