Various fixes to the dark theme (#5764)

* Various fixes to the dark theme * Removed not working fix * CHANGELOG.md * Finetuning groupColumnRegion
JabRef · Dec 18, 2019 · 28d3439 · 28d3439
1 parent 300d13f
commit 28d3439
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,7 +16,7 @@ We refer to [GitHub issues](https://github.com/JabRef/jabref/issues) by using `#
 ### Fixed
 
 - We fixed an issue where the Medline fetcher was only working when JabRef was running from source [#5645](https://github.com/JabRef/jabref/issues/5645)
-
+- We fixed some visual issues in the dark theme [#5764](https://github.com/JabRef/jabref/pull/5764) [#5753](https://github.com/JabRef/jabref/issues/5753)
 
 ### Removed
 

diff --git a/src/main/java/org/jabref/gui/Base.css b/src/main/java/org/jabref/gui/Base.css
@@ -211,6 +211,7 @@
 
     /* The small thin light "shadow" for mark-like objects. Typically used in
      * conjunction with -fx-mark-color with an insets of 1 0 -1 0. */
+    -fx-mark-color: -fx-text-base-color;
     -fx-mark-highlight-color: transparent;
     /*-fx-mark-highlight-color: derive(-fx-color,80%);*/
 
@@ -235,12 +236,16 @@
     /** Focus line for keyboard focus traversal on cell based controls */
     -fx-cell-focus-inner-border: derive(-fx-selection-bar,30%);
 
-    -fx-focused-mark-color : -fx-focused-text-base-color;
+    -fx-focused-mark-color: -fx-focused-text-base-color;
 
     /* Consistent size for headers of tab-pane and side-panels*/
     -jr-header-height: 3em;
 }
 
+#frame {
+    -fx-background-color: -jr-background-alt;
+}
+
 /*
  * The base css file defining the style that is valid for every pane and dialog.
  */
@@ -262,6 +267,9 @@
        the text is always vertically centered within the bounds. Based on
        the cap height of the text. */
     -fx-bounds-type: logical_vertical_center;
+
+    /* The base color of icons should always be the same as the text. */
+    -fx-fill: -fx-text-base-color;
 }
 
 .tooltip {
@@ -385,7 +393,7 @@
 }
 
 .check-box > .box {
-    -fx-border-color: rgba(0, 0, 0, 0.54);
+    -fx-border-color: -fx-outer-border; /* rgba(0, 0, 0, 0.54); */
     -fx-border-width: 2px;
     -fx-border-radius: 1px;
     -fx-padding: 0.1em 0.1em 0.2em 0.2em;
@@ -564,6 +572,10 @@
     -fx-background-insets: 0;
 }
 
+.table-view .groupColumnBackground {
+    -fx-stroke: -jr-gray-2;
+}
+
 .scroll-pane:focused,
 .split-pane:focused,
 .list-view:focused,
@@ -1071,3 +1083,41 @@ We want to have a look that matches our icons in the tool-bar */
 .dialog-pane {
     -fx-background-color: -fx-control-inner-background;
 }
+
+.code-area .text {
+    -fx-fill: -fx-text-background-color;
+}
+
+.code-area .selection {
+    -fx-fill: -jr-accent;
+}
+
+.code-area .caret {
+    -fx-stroke: -fx-text-background-color;
+}
+
+.code-area .context-menu {
+    -fx-font-family: sans-serif;
+}
+
+.citationsList {
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.citationsList .contextBox {
+    -fx-border-color: -fx-outer-border;
+    -fx-border-insets: 5;
+    -fx-border-style: dashed;
+    -fx-border-width: 2;
+    -fx-padding: 12;
+}
+
+.citationsList .contextBox * {
+    -fx-fill: -fx-text-base-color;
+}
+
+.citationsList .label {
+    -fx-font-family: monospace;
+    -fx-font-weight: bold;
+    -fx-label-padding: 5 0 10 10;
+}
diff --git a/src/main/java/org/jabref/gui/Dark.css b/src/main/java/org/jabref/gui/Dark.css
@@ -47,7 +47,7 @@
     -jr-menu-forground-active: derive(-fx-light-text-color, 50%);
 
     -jr-scrollbar-thumb: derive(-fx-outer-border, -30%);
-    -jr-scrollbar-track: derive(-fx-control-inner-background, -90%); 
+    -jr-scrollbar-track: derive(-fx-control-inner-background, -90%);
 
     -fx-focused-text-base-color: -fx-dark-text-color;
 
@@ -59,6 +59,15 @@
     color : #7d8591; /* -fx-mid-text-color*/
 }
 
+.table-view .groupColumnBackground {
+    -fx-stroke: -jr-gray-4;
+}
+
+.code-area .lineno {
+    -fx-background-color: -jr-background-alt;
+    -fx-text-fill: -fx-mid-text-color;
+}
+
 .text-unchanged {
     -fx-fill: -fx-light-text-color;
 }
@@ -73,4 +82,8 @@
 
 .numberColumn > .hits:all-selected {
     -fx-background-color: -jr-gray-3;
-}
+}
+
+#preferencesContainer .tab-pane > .tab-header-area > .tab-header-background {
+    -fx-background-color: -jr-background;
+}
diff --git a/src/main/java/org/jabref/gui/JabRefFrame.java b/src/main/java/org/jabref/gui/JabRefFrame.java
@@ -40,6 +40,7 @@
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Priority;
+import javafx.scene.layout.VBox;
 import javafx.stage.Stage;
 
 import org.jabref.Globals;
@@ -405,9 +406,10 @@ public boolean quit() {
     private void initLayout() {
         setProgressBarVisible(false);
 
-        BorderPane head = new BorderPane();
-        head.setTop(createMenu());
-        head.setCenter(createToolbar());
+        setId("frame");
+
+        VBox head = new VBox(createMenu(),createToolbar());
+        head.setSpacing(0d);
         setTop(head);
 
         splitPane.getItems().addAll(sidePane, tabbedPane);

diff --git a/src/main/java/org/jabref/gui/entryeditor/EntryEditor.css b/src/main/java/org/jabref/gui/entryeditor/EntryEditor.css
@@ -41,10 +41,6 @@
     -fx-font-weight: normal;
 }
 
-.code-area .context-menu {
-    -fx-font-family: sans-serif;
-}
-
 .icon-button.narrow {
     -fx-padding: 0.1em;
 }
@@ -90,35 +86,59 @@
     -fx-background-color: -jr-error;
 }
 
-.code-area .text {
-    -fx-fill: -fx-text-background-color;
+.code-area .context-menu {
+    -fx-font-family: sans-serif;
 }
 
-.gdpr-dialog {
-    -fx-font-size: 14pt;
+#related-articles-tab {
+    -fx-padding: 20 20 20 20;
+    -fx-background-color: -fx-control-inner-background;
 }
 
-.related-articles-tab {
-    -fx-padding: 20 20 20 20;
+#related-articles-tab * {
+    -fx-fill: -fx-text-background-color;
 }
 
-.recommendation-heading {
-    -fx-font-size: 14pt;
-    -fx-font-weight: bold;
+#gdpr-dialog {
+    -fx-border-color: -jr-warn;
+    -fx-border-insets: 5;
+    -fx-border-style: dashed;
+    -fx-border-width: 2;
+    -fx-padding: 12;
+    -fx-font-size: 1.3em;
 }
 
-.recommendation-description {
-    -fx-font-style: italic;
+#gdpr-dialog * {
+    -fx-fill: -fx-text-background-color;
 }
 
 .recommendation-item {
     -fx-padding: 0 0 0 20;
 }
 
+#bibtexSourceCodeArea {
+    -fx-padding: 4 4 4 4;
+    -fx-background-color: -fx-control-inner-background;
+}
+
 #bibtexSourceCodeArea .search {
     -fx-fill: red;
 }
 
-.bibtexSourceCodeArea .text {
+#citationsPane {
+    -fx-padding: 0;
+    -fx-background-color: -fx-control-inner-background;
+}
+
+#citationsPane * {
     -fx-fill: -fx-text-background-color;
 }
+
+.heading {
+    -fx-font-size: 1.5em;
+    -fx-font-weight: bold;
+}
+
+.description {
+    -fx-font-style: italic;
+}
diff --git a/src/main/java/org/jabref/gui/entryeditor/LatexCitationsTab.java b/src/main/java/org/jabref/gui/entryeditor/LatexCitationsTab.java
@@ -62,6 +62,7 @@ private void setSearchPane() {
 
         searchPane.getColumnConstraints().setAll(column);
         searchPane.getRowConstraints().setAll(mainRow, bottomRow);
+        searchPane.setId("citationsPane");
         setContent(searchPane);
 
         EasyBind.subscribe(viewModel.statusProperty(), status -> {
@@ -86,11 +87,9 @@ private void setSearchPane() {
 
     private HBox getLatexDirectoryBox() {
         Text latexDirectoryText = new Text(Localization.lang("Current search directory:"));
-        latexDirectoryText.setStyle("-fx-font-size: 0.9em;-fx-padding: 0;");
         Text latexDirectoryPath = new Text(viewModel.directoryProperty().get().toString());
-        latexDirectoryPath.setStyle("-fx-font-family: 'Courier New', Courier, monospace;-fx-font-size: 0.9em;-fx-font-weight: bold;");
+        latexDirectoryPath.setStyle("-fx-font-family:monospace;-fx-font-weight: bold;");
         Button latexDirectoryButton = new Button(Localization.lang("Set LaTeX file directory"));
-        latexDirectoryButton.setStyle("-fx-border-width: 1;-fx-font-size: 0.85em;-fx-padding: 0.2em;");
         latexDirectoryButton.setGraphic(IconTheme.JabRefIcons.LATEX_FILE_DIRECTORY.getGraphicNode());
         latexDirectoryButton.setOnAction(event -> viewModel.setLatexDirectory());
         HBox latexDirectoryBox = new HBox(10, latexDirectoryText, latexDirectoryPath, latexDirectoryButton);
@@ -106,8 +105,11 @@ private VBox getCitationsPane() {
 
     private VBox getNotFoundPane() {
         Label titleLabel = new Label(Localization.lang("No citations found"));
-        titleLabel.setStyle("-fx-font-size: 1.5em;-fx-font-weight: bold;-fx-text-fill: -jr-theme-text;");
+        titleLabel.getStyleClass().add("heading");
+
         Text notFoundText = new Text(Localization.lang("No LaTeX files containing this entry were found."));
+        notFoundText.getStyleClass().add("description");
+
         VBox notFoundBox = new VBox(30, titleLabel, notFoundText);
         notFoundBox.setStyle("-fx-padding: 30 0 0 30;");
         return notFoundBox;

diff --git a/src/main/java/org/jabref/gui/entryeditor/RelatedArticlesTab.java b/src/main/java/org/jabref/gui/entryeditor/RelatedArticlesTab.java
@@ -3,6 +3,8 @@
 import java.io.IOException;
 import java.util.List;
 
+import javafx.beans.binding.Bindings;
+import javafx.beans.binding.DoubleBinding;
 import javafx.scene.control.Button;
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.Hyperlink;
@@ -54,7 +56,7 @@ public RelatedArticlesTab(EntryEditor entryEditor, EntryEditorPreferences prefer
      */
     private StackPane getRelatedArticlesPane(BibEntry entry) {
         StackPane root = new StackPane();
-        root.getStyleClass().add("related-articles-tab");
+        root.setId("related-articles-tab");
         ProgressIndicator progress = new ProgressIndicator();
         progress.setMaxSize(100, 100);
 
@@ -92,10 +94,10 @@ private ScrollPane getRelatedArticleInfo(List<BibEntry> list, MrDLibFetcher fetc
 
         String heading = fetcher.getHeading();
         Text headingText = new Text(heading);
-        headingText.getStyleClass().add("recommendation-heading");
+        headingText.getStyleClass().add("heading");
         String description = fetcher.getDescription();
         Text descriptionText = new Text(description);
-        descriptionText.getStyleClass().add("recommendation-description");
+        descriptionText.getStyleClass().add("description");
         vBox.getChildren().add(headingText);
         vBox.getChildren().add(descriptionText);
 
@@ -143,7 +145,7 @@ private ScrollPane getErrorInfo() {
         vBox.setSpacing(20.0);
 
         Text descriptionText = new Text(Localization.lang("No recommendations received from Mr. DLib for this entry."));
-        descriptionText.getStyleClass().add("recommendation-description");
+        descriptionText.getStyleClass().add("description");
         vBox.getChildren().add(descriptionText);
         scrollPane.setContent(vBox);
 
@@ -157,20 +159,26 @@ private ScrollPane getErrorInfo() {
      */
     private ScrollPane getPrivacyDialog(BibEntry entry) {
         ScrollPane root = new ScrollPane();
-        root.getStyleClass().add("related-articles-tab");
+        root.setId("related-articles-tab");
         VBox vbox = new VBox();
-        vbox.getStyleClass().add("gdpr-dialog");
+        vbox.setId("gdpr-dialog");
         vbox.setSpacing(20.0);
 
+        Text title = new Text(Localization.lang("Mr. DLib Privacy settings"));
+        title.getStyleClass().add("heading");
+
         Button button = new Button(Localization.lang("I Agree"));
         button.setDefaultButton(true);
 
+        DoubleBinding rootWidth = Bindings.subtract(root.widthProperty(),88d);
+
         Text line1 = new Text(Localization.lang("JabRef requests recommendations from Mr. DLib, which is an external service. To enable Mr. DLib to calculate recommendations, some of your data must be shared with Mr. DLib. Generally, the more data is shared the better recommendations can be calculated. However, we understand that some of your data in JabRef is sensitive, and you may not want to share it. Therefore, Mr. DLib offers a choice of which data you would like to share."));
-        line1.setWrappingWidth(1300.0);
+        line1.wrappingWidthProperty().bind(rootWidth);
         Text line2 = new Text(Localization.lang("Whatever option you choose, Mr. DLib may share its data with research partners to further improve recommendation quality as part of a 'living lab'. Mr. DLib may also release public datasets that may contain anonymized information about you and the recommendations (sensitive information such as metadata of your articles will be anonymised through e.g. hashing). Research partners are obliged to adhere to the same strict data protection policy as Mr. DLib."));
-        line2.setWrappingWidth(1300.0);
+        line2.wrappingWidthProperty().bind(rootWidth);
         Text line3 = new Text(Localization.lang("This setting may be changed in preferences at any time."));
-        Hyperlink mdlLink = new Hyperlink(Localization.lang("Further information about Mr DLib. for JabRef users."));
+        line3.wrappingWidthProperty().bind(rootWidth);
+        Hyperlink mdlLink = new Hyperlink(Localization.lang("Further information about Mr. DLib for JabRef users."));
         mdlLink.setOnAction(event -> {
             try {
                 JabRefDesktop.openBrowser("http://mr-dlib.org/information-for-users/information-about-mr-dlib-for-jabref-users/");
@@ -202,7 +210,7 @@ private ScrollPane getPrivacyDialog(BibEntry entry) {
             setContent(getRelatedArticlesPane(entry));
         });
 
-        vbox.getChildren().addAll(line1, line2, mdlLink, line3, vb, button);
+        vbox.getChildren().addAll(title, line1, line2, mdlLink, line3, vb, button);
         root.setContent(vbox);
 
         return root;

diff --git a/src/main/java/org/jabref/gui/maintable/MainTableColumnFactory.java b/src/main/java/org/jabref/gui/maintable/MainTableColumnFactory.java
@@ -159,10 +159,10 @@ private Node createGroupColorRegion(BibEntryTableViewModel entry, List<AbstractG
 
             for (Color groupColor : groupColors) {
                 Rectangle groupRectangle = new Rectangle();
+                groupRectangle.getStyleClass().add("groupColumnBackground");
                 groupRectangle.setWidth(3);
                 groupRectangle.setHeight(18);
                 groupRectangle.setFill(groupColor);
-                groupRectangle.setStroke(Color.DARKGRAY);
                 groupRectangle.setStrokeWidth(1);
 
                 container.getChildren().add(groupRectangle);