Optimize GUI to work with big font sizes

client/src/main/java/ctbrec/ui/settings/ColorSettingsPane.java

@@ -28,12 +28,10 @@ public class ColorSettingsPane extends HBox {
 
         baseColor.setValue(Color.web(config.getSettings().colorBase));
         baseColor.setTooltip(new Tooltip("Base Color"));
-        baseColor.setMaxSize(44, 25);
+        baseColor.setPrefWidth(100);
         accentColor.setValue(Color.web(config.getSettings().colorAccent));
         accentColor.setTooltip(new Tooltip("Accent Color"));
-        accentColor.setMaxSize(44, 25);
+        accentColor.setPrefWidth(100);
-        reset.setMinSize(60, 25);
-        reset.setMaxSize(60, 25);
 
         baseColor.setOnAction(evt -> {
             config.getSettings().colorBase = toWeb(baseColor.getValue());

client/src/main/java/ctbrec/ui/settings/PostProcessingStepPanel.java

@@ -20,6 +20,7 @@ import ctbrec.ui.controls.Dialogs;
 import javafx.collections.FXCollections;
 import javafx.collections.ListChangeListener;
 import javafx.collections.ObservableList;
+import javafx.geometry.Insets;
 import javafx.scene.control.Button;
 import javafx.scene.control.ChoiceDialog;
 import javafx.scene.control.ListView;
@@ -82,6 +83,7 @@ public class PostProcessingStepPanel extends GridPane {
         });
         stepListView = new ListView<>(stepList);
         GridPane.setHgrow(stepListView, Priority.ALWAYS);
+        GridPane.setFillWidth(stepListView, true);
 
         add(stepListView, 0, 0);
         add(buttons, 1, 0);
@@ -94,6 +96,8 @@ public class PostProcessingStepPanel extends GridPane {
             edit.setDisable(noSelection);
             remove.setDisable(noSelection);
         });
+
+        setPadding(new Insets(10));
     }
 
     private Button createUpButton() {

client/src/main/java/ctbrec/ui/settings/SettingsTab.java

@@ -55,7 +55,6 @@ import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
-import javafx.scene.control.ScrollPane;
 import javafx.scene.control.Tab;
 import javafx.scene.control.TextInputDialog;
 import javafx.scene.layout.Background;
@@ -66,7 +65,6 @@ import javafx.scene.layout.BorderStrokeStyle;
 import javafx.scene.layout.BorderWidths;
 import javafx.scene.layout.CornerRadii;
 import javafx.scene.layout.GridPane;
-import javafx.scene.layout.Priority;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
 import javafx.scene.paint.Color;
@@ -302,18 +300,9 @@ public class SettingsTab extends Tab implements TabSelectionListener {
         Region preferencesView = prefs.getView();
         prefs.onRestartRequired(this::showRestartRequired);
         storage.setPreferences(prefs);
-        preferencesView.setMinSize(800, 400);
-        preferencesView.setPrefSize(1280, 960);
-        var scrollPane = new ScrollPane(preferencesView);
-        var container = new GridPane();
-        container.add(scrollPane, 0, 0);
-        GridPane.setFillWidth(scrollPane, true);
-        GridPane.setFillHeight(scrollPane, true);
-        GridPane.setHgrow(scrollPane, Priority.ALWAYS);
-        GridPane.setVgrow(scrollPane, Priority.ALWAYS);
 
         var stackPane = new StackPane();
-        stackPane.getChildren().add(container);
+        stackPane.getChildren().add(preferencesView);
         restartNotification = new Label("Restart Required");
         restartNotification.setVisible(false);
         restartNotification.setOpacity(0);

client/src/main/java/ctbrec/ui/settings/api/Preferences.java

@@ -16,6 +16,8 @@ import javafx.geometry.Insets;
 import javafx.geometry.VPos;
 import javafx.scene.Node;
 import javafx.scene.control.Label;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.control.ScrollPane.ScrollBarPolicy;
 import javafx.scene.control.Tooltip;
 import javafx.scene.control.TreeItem;
 import javafx.scene.control.TreeView;
@@ -88,13 +90,16 @@ public class Preferences {
         }
         main.setCenter(new Label("Center"));
         BorderPane.setMargin(leftSide, new Insets(2));
-
         categoryTree.getSelectionModel().selectedItemProperty().addListener((obs, oldV, newV) -> {
             if (newV != null) {
                 Category cat = newV.getValue();
                 Node gui = cat.getGuiOrElse(() -> createGui(cat));
-                BorderPane.setMargin(gui, new Insets(10));
+                ScrollPane scrollPane = new ScrollPane(gui);
-                main.setCenter(gui);
+                scrollPane.setPadding(new Insets(20));
+                scrollPane.setHbarPolicy(ScrollBarPolicy.NEVER);
+                scrollPane.setFitToWidth(true);
+                scrollPane.setFitToHeight(true);
+                main.setCenter(scrollPane);
             }
         });
         categoryTree.getSelectionModel().select(0);

client/src/main/java/ctbrec/ui/tabs/ThumbCell.css

@@ -1,4 +1,7 @@
-.selection-background {
+.thumbcell-selection-background {
-	/*-fx-fill: #0096C9;*/
 	-fx-fill: -fx-accent;
 } 
+
+.thumbcell-name {
+	-fx-font: normal bold 1.2em 'sans-serif';
+}

client/src/main/java/ctbrec/ui/tabs/ThumbCell.java

@@ -97,8 +97,8 @@ public class ThumbCell extends StackPane {
     private RecordingIndicator recordingIndicator;
     private Tooltip recordingIndicatorTooltip;
     private StackPane previewTrigger;
+    private StackPane groupIndicator;
     private Label groupIndicatorTooltipTrigger;
-    private ImageView groupIndicator;
     private int index = 0;
     ContextMenu popup;
     private static final Color colorNormal = Color.BLACK;
@@ -138,7 +138,6 @@ public class ThumbCell extends StackPane {
         iv.setPreserveRatio(true);
         getChildren().add(iv);
 
-
         topicBackground = new Rectangle();
         topicBackground.setFill(Color.BLACK);
         topicBackground.setOpacity(0);
@@ -154,7 +153,6 @@ public class ThumbCell extends StackPane {
         StackPane.setMargin(resolutionBackground, new Insets(2));
         getChildren().add(resolutionBackground);
 
-
         topic = new Text();
         String txt = recording ? "    " : "";
         txt += model.getDescription();
@@ -177,7 +175,7 @@ public class ThumbCell extends StackPane {
         name = new Text(model.getDisplayName());
         name.setFill(Color.WHITE);
         name.setTextAlignment(TextAlignment.CENTER);
-        name.prefHeight(25);
+        name.getStyleClass().add("thumbcell-name");
         StackPane.setAlignment(name, Pos.BOTTOM_CENTER);
         getChildren().add(name);
 
@@ -197,20 +195,23 @@ public class ThumbCell extends StackPane {
         StackPane.setAlignment(recordingIndicator, Pos.TOP_LEFT);
         getChildren().add(recordingIndicator);
 
-        groupIndicator = new ImageView(imgGroupIndicator);
+        groupIndicator = new StackPane();
-        groupIndicator.setVisible(false);
+        groupIndicator.setMaxSize(24, 24);
+        var groupIndicatorImg = new ImageView(imgGroupIndicator);
+        groupIndicatorImg.setVisible(false);
+        groupIndicatorImg.visibleProperty().bind(groupIndicator.visibleProperty());
         groupIndicatorTooltipTrigger = new Label();
         groupIndicatorTooltipTrigger.setPrefSize(16, 16);
         groupIndicatorTooltipTrigger.setMinSize(16, 16);
         groupIndicatorTooltipTrigger.visibleProperty().bind(groupIndicator.visibleProperty());
         groupIndicatorTooltipTrigger.setCursor(Cursor.HAND);
         groupIndicatorTooltipTrigger.setOnMouseClicked(e -> new EditGroupAction(this, recorder, model).execute());
-        StackPane.setMargin(groupIndicatorTooltipTrigger, new Insets(0, 3, 23, 0));
+        var groupIndicatorBackground = new Circle(12, Color.WHITE);
-        StackPane.setAlignment(groupIndicatorTooltipTrigger, Pos.BOTTOM_RIGHT);
+        groupIndicatorBackground.visibleProperty().bind(groupIndicator.visibleProperty());
-        StackPane.setMargin(groupIndicator, new Insets(0, 3, 23, 0));
+        groupIndicatorBackground.setOpacity(0.7);
+        groupIndicator.getChildren().addAll(groupIndicatorBackground, groupIndicatorImg, groupIndicatorTooltipTrigger);
         StackPane.setAlignment(groupIndicator, Pos.BOTTOM_RIGHT);
         getChildren().add(groupIndicator);
-        getChildren().add(groupIndicatorTooltipTrigger);
 
         if (Config.getInstance().getSettings().livePreviews) {
             getChildren().add(createPreviewTrigger());
@@ -267,7 +268,7 @@ public class ThumbCell extends StackPane {
     }
 
     private Node createPreviewTrigger() {
-        var s = 32;
+        var s = 24;
         previewTrigger = new StackPane();
         previewTrigger.setStyle("-fx-background-color: white;");
         previewTrigger.setOpacity(.8);
@@ -338,9 +339,9 @@ public class ThumbCell extends StackPane {
         selectionProperty.set(selected);
         selectionOverlay.setOpacity(selected ? .75 : 0);
         if (selected) {
-            selectionOverlay.getStyleClass().add("selection-background");
+            selectionOverlay.getStyleClass().add("thumbcell-selection-background");
         } else {
-            selectionOverlay.getStyleClass().remove("selection-background");
+            selectionOverlay.getStyleClass().remove("thumbcell-selection-background");
         }
     }
 
@@ -760,8 +761,14 @@ public class ThumbCell extends StackPane {
 
     @Override
     protected void layoutChildren() {
-        super.layoutChildren();
         nameBackground.setHeight(name.getLayoutBounds().getHeight());
         resolutionBackground.setHeight(resolutionTag.getLayoutBounds().getHeight());
+        topicBackground.setHeight(getHeight() - nameBackground.getHeight());
+
+        StackPane.setMargin(groupIndicator, new Insets(0, 3, nameBackground.getHeight() + 4, 0));
+        if (Config.getInstance().getSettings().livePreviews) {
+            StackPane.setMargin(previewTrigger, new Insets(0, 0, nameBackground.getHeight() + 4, 4));
+        }
+        super.layoutChildren();
     }
 }