From 50d1725e59e1860d268b0887ea2fbca58bbe2034 Mon Sep 17 00:00:00 2001 From: 0xb00bface <0xboobface@gmail.com> Date: Sat, 21 Aug 2021 20:16:38 +0200 Subject: [PATCH] Optimize GUI to work with big font sizes --- .../ctbrec/ui/settings/ColorSettingsPane.java | 6 ++-- .../ui/settings/PostProcessingStepPanel.java | 4 +++ .../java/ctbrec/ui/settings/SettingsTab.java | 13 +------ .../ctbrec/ui/settings/api/Preferences.java | 11 ++++-- .../main/java/ctbrec/ui/tabs/ThumbCell.css | 9 +++-- .../main/java/ctbrec/ui/tabs/ThumbCell.java | 35 +++++++++++-------- 6 files changed, 42 insertions(+), 36 deletions(-) diff --git a/client/src/main/java/ctbrec/ui/settings/ColorSettingsPane.java b/client/src/main/java/ctbrec/ui/settings/ColorSettingsPane.java index 9f8b2cf5..db441d7e 100644 --- a/client/src/main/java/ctbrec/ui/settings/ColorSettingsPane.java +++ b/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); - reset.setMinSize(60, 25); - reset.setMaxSize(60, 25); + accentColor.setPrefWidth(100); baseColor.setOnAction(evt -> { config.getSettings().colorBase = toWeb(baseColor.getValue()); diff --git a/client/src/main/java/ctbrec/ui/settings/PostProcessingStepPanel.java b/client/src/main/java/ctbrec/ui/settings/PostProcessingStepPanel.java index d976a1d6..70c7d124 100644 --- a/client/src/main/java/ctbrec/ui/settings/PostProcessingStepPanel.java +++ b/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() { diff --git a/client/src/main/java/ctbrec/ui/settings/SettingsTab.java b/client/src/main/java/ctbrec/ui/settings/SettingsTab.java index 37eaeeed..d3d692f9 100644 --- a/client/src/main/java/ctbrec/ui/settings/SettingsTab.java +++ b/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); diff --git a/client/src/main/java/ctbrec/ui/settings/api/Preferences.java b/client/src/main/java/ctbrec/ui/settings/api/Preferences.java index 66b3ef3a..69bde937 100644 --- a/client/src/main/java/ctbrec/ui/settings/api/Preferences.java +++ b/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)); - main.setCenter(gui); + ScrollPane scrollPane = new ScrollPane(gui); + scrollPane.setPadding(new Insets(20)); + scrollPane.setHbarPolicy(ScrollBarPolicy.NEVER); + scrollPane.setFitToWidth(true); + scrollPane.setFitToHeight(true); + main.setCenter(scrollPane); } }); categoryTree.getSelectionModel().select(0); diff --git a/client/src/main/java/ctbrec/ui/tabs/ThumbCell.css b/client/src/main/java/ctbrec/ui/tabs/ThumbCell.css index 2ed299ba..4e239d7c 100644 --- a/client/src/main/java/ctbrec/ui/tabs/ThumbCell.css +++ b/client/src/main/java/ctbrec/ui/tabs/ThumbCell.css @@ -1,4 +1,7 @@ -.selection-background { - /*-fx-fill: #0096C9;*/ +.thumbcell-selection-background { -fx-fill: -fx-accent; -} \ No newline at end of file +} + +.thumbcell-name { + -fx-font: normal bold 1.2em 'sans-serif'; +} \ No newline at end of file diff --git a/client/src/main/java/ctbrec/ui/tabs/ThumbCell.java b/client/src/main/java/ctbrec/ui/tabs/ThumbCell.java index 661d72ba..5ff46b11 100644 --- a/client/src/main/java/ctbrec/ui/tabs/ThumbCell.java +++ b/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.setVisible(false); + groupIndicator = new StackPane(); + 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)); - StackPane.setAlignment(groupIndicatorTooltipTrigger, Pos.BOTTOM_RIGHT); - StackPane.setMargin(groupIndicator, new Insets(0, 3, 23, 0)); + var groupIndicatorBackground = new Circle(12, Color.WHITE); + groupIndicatorBackground.visibleProperty().bind(groupIndicator.visibleProperty()); + 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(); } }