Add Gallery & Settings to menu and start layouts

This commit is contained in:
bryce
2024-10-29 11:01:59 +13:00
parent 5b618916b1
commit 58f3773392
16 changed files with 290 additions and 139 deletions

2
.vscode/launch.json vendored
View File

@@ -7,7 +7,7 @@
"name": "Launch BrickLog Client",
"mainClass": "com.example.bricklog.BrickLogClient",
"projectName": "bricklog-client",
"vmArgs": "--module-path C:/javafx-sdk-21.0.5 --add-modules javafx.controls,javafx.fxml"
"vmArgs": "--module-path \"C:/javafx-sdk-21.0.5/lib\" --add-modules javafx.controls,javafx.fxml"
}
]
}

View File

@@ -1,3 +1,4 @@
{
"java.compile.nullAnalysis.mode": "automatic"
"java.compile.nullAnalysis.mode": "automatic",
"java.configuration.updateBuildConfiguration": "automatic"
}

View File

@@ -42,7 +42,7 @@
<plugin>
<groupId>org.openjfx</groupId>
<artifactId>javafx-maven-plugin</artifactId>
<version>0.0.5</version>
<version>0.0.8</version>
<executions>
<execution>
<goals>

View File

@@ -1,49 +1,21 @@
package com.example.bricklog;
import com.example.bricklog.view.MainLayout;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class BrickLogClientApplication extends Application {
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Brick Log");
primaryStage.setTitle("Brick Log Client");
// Create layout
VBox layout = new VBox(10); // Vertical box with spacing of 10 pixels
// Use MainLayout as the root layout
MainLayout mainLayout = new MainLayout();
Scene scene = new Scene(mainLayout, 1024, 720); // Set the desired width and height
// Search Box
TextField searchBox = new TextField();
searchBox.setPromptText("Search for builds...");
// Add Button
Button addButton = new Button("+");
addButton.setStyle("-fx-background-color: lightblue; -fx-font-size: 18px; -fx-padding: 10px; -fx-font-weight: bold;");
addButton.setPrefSize(50, 50);
// Animation Effect on Click
addButton.setOnMouseClicked(e -> {
addButton.setScaleX(1.2);
addButton.setScaleY(1.2);
// You may want to add logic for adding a new build here
// For example, opening a new window to add a build
});
// Reset size after animation
addButton.setOnMouseReleased(e -> {
addButton.setScaleX(1.0);
addButton.setScaleY(1.0);
});
// Add components to layout
layout.getChildren().addAll(searchBox, addButton);
// Create a scene and set it to the stage
Scene scene = new Scene(layout, 400, 300); // Set the width and height as per your need
primaryStage.setScene(scene);
primaryStage.show();
}

View File

@@ -0,0 +1,113 @@
package com.example.bricklog.view;
import javafx.geometry.Insets;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
public class GalleryLayout extends BorderPane {
private final GridPane gridView;
private final ListView<String> listView;
private boolean isGridView;
public GalleryLayout() {
// Create a ToggleGroup for the layout options
ToggleGroup toggleGroup = new ToggleGroup();
// Create toggle buttons for layout options
ToggleButton gridButton = new ToggleButton("Grid");
ToggleButton listButton = new ToggleButton("List");
gridButton.setToggleGroup(toggleGroup);
listButton.setToggleGroup(toggleGroup);
// Set the default selected button
gridButton.setSelected(true);
isGridView = true;
HBox toggleBox = new HBox(gridButton, listButton);
toggleBox.setSpacing(10);
toggleBox.setPadding(new Insets(10));
this.setTop(toggleBox);
// Create both views
gridView = createGridView();
listView = createListView();
// Start with the grid view
isGridView = true;
this.setCenter(gridView);
// Add listener to the toggle group to switch layouts
toggleGroup.selectedToggleProperty().addListener((observable, oldValue, newValue) -> {
if (newValue == gridButton) {
isGridView = true; // Update the variable
toggleLayout(isGridView); // Use the variable
} else if (newValue == listButton) {
isGridView = false; // Update the variable
toggleLayout(isGridView); // Use the variable
}
});
}
private GridPane createGridView() {
GridPane grid = new GridPane();
grid.setPadding(new Insets(10));
grid.setHgap(10);
grid.setVgap(10);
// Example data - replace with your actual data retrieval logic
String[] buildTypes = {"Kitset", "MoC", "Kitset", "MoC"};
String[] imageUrls = {
"path/to/image1.jpg",
"path/to/image2.jpg",
"path/to/image3.jpg",
"path/to/image4.jpg"
};
for (int i = 0; i < buildTypes.length; i++) {
VBox vbox = new VBox();
ImageView imageView = new ImageView(new Image(imageUrls[i]));
imageView.setFitWidth(150);
imageView.setFitHeight(150);
imageView.setPreserveRatio(true);
vbox.getChildren().addAll(imageView, new Label(buildTypes[i]));
grid.add(vbox, i % 3, i / 3); // Adjust to layout items in a grid
}
return grid;
}
private ListView<String> createListView() {
ListView<String> list = new ListView<>();
// Example data - replace with your actual data retrieval logic
String[] details = {
"Build 1: Builder Name, 100 Pieces, 20x30x10 cm, Kitset",
"Build 2: Builder Name, 150 Pieces, 25x35x15 cm, MoC",
// Add more entries as needed...
};
list.getItems().addAll(details);
return list;
}
// Method to toggle layout and print the current state
private void toggleLayout(boolean isGrid) {
if (isGrid) {
System.out.println("Current layout: Grid View");
this.setCenter(gridView);
} else {
System.out.println("Current layout: List View");
this.setCenter(listView);
}
}
}

View File

@@ -0,0 +1,137 @@
package com.example.bricklog.view;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonType;
import javafx.scene.control.Dialog;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
// import javafx.scene.layout.StackPane;
public class MainLayout extends BorderPane {
private VBox menu; // makes menu accessible for updates
public MainLayout() {
// Title & Coppyright
Label title = new Label("BRICK LOG Client");
title.setStyle("-fx-font-size: 24px; -fx-font-weight: bold;");
Label copyright = new Label("built by Bryce © 2024");
copyright.setStyle("-fx-font-size: 14px;");
VBox titleBox = new VBox(title, copyright);
titleBox.setAlignment(Pos.CENTER);
titleBox.setPadding(new Insets(10));
// Set title at the top
VBox topContainer = new VBox(titleBox);
this.setTop(topContainer);
menu = new VBox();
menu.setSpacing(10);
menu.setPadding(new Insets(10));
menu.setStyle("-fx-background-color: #f0f0f0;"); // Optional: Background color for the menu
// Search Bar
TextField searchField = new TextField();
searchField.setPromptText("Search...");
// Set up the menu
menu = new VBox();
menu.setSpacing(10);
menu.setPadding(new Insets(10));
menu.setStyle("-fx-background-color: #f0f0f0;"); // Optional: Background color for the menu
// Add the Gallery menu item
Label galleryLabel = new Label("Gallery");
galleryLabel.setStyle("-fx-font-weight: bold; cursor: hand;"); // Make it look interactive
galleryLabel.setOnMouseClicked(event -> switchToGalleryLayout()); // Switch layout on click
Label settingsLabel = new Label("Settings");
settingsLabel.setStyle("-fx-font-weight: bold; cursor: hand;");
settingsLabel.setOnMouseClicked(event -> switchToSettingsLayout());
// Add menu items
menu.getChildren().addAll(new Label("Menu"), galleryLabel, settingsLabel);
this.setLeft(menu); // Set the menu on the left side
// Set up the '+' button
Button addButton = new Button("+");
addButton.setStyle("-fx-font-size: 24px; -fx-background-color: lightblue;");
// Set up the action for the '+' button to show the add dialog
addButton.setOnAction(e -> showAddDialog());
// Create an HBox to hold the button and align it to the bottom right
HBox buttonContainer = new HBox(addButton);
buttonContainer.setAlignment(Pos.BOTTOM_RIGHT);
buttonContainer.setPadding(new Insets(10)); // Optional padding
// Add the buttonContainer to the bottom of the layout
this.setBottom(buttonContainer);
// Optionally, set the center to another pane or leave it empty
// this.setCenter(someOtherPane);
}
private void showAddDialog() {
Dialog<ButtonType> dialog = new Dialog<>();
dialog.setTitle("Add Build");
// Create the dialog layout
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(20));
TextField nameField = new TextField();
nameField.setPromptText("Build Name");
TextField builderField = new TextField();
builderField.setPromptText("Builder Name");
// Add more fields as needed...
grid.add(new Label("Name:"), 0, 0);
grid.add(nameField, 1, 0);
grid.add(new Label("Builder:"), 0, 1);
grid.add(builderField, 1, 1);
// Add more fields to the grid as needed...
dialog.getDialogPane().setContent(grid);
// Add buttons for adding and canceling
dialog.getDialogPane().getButtonTypes().addAll(ButtonType.OK, ButtonType.CANCEL);
// Show dialog and handle button events
dialog.setResultConverter(button -> {
if (button == ButtonType.OK) {
// Insert data into the database and handle image upload
String name = nameField.getText();
String builder = builderField.getText();
// Handle database insert...
System.out.println("Name: " + name + ", Builder: " + builder); // Debugging line
}
return null;
});
dialog.showAndWait();
}
// This method is essential for switching to the GalleryLayout
private void switchToGalleryLayout() {
// Create an instance of GalleryLayout
GalleryLayout galleryLayout = new GalleryLayout();
// Set the center of the MainLayout to the GalleryLayout
this.setCenter(galleryLayout);
}
private void switchToSettingsLayout() {
SettingsLayout settingsLayout = new SettingsLayout();
this.setCenter(settingsLayout);
}
}

View File

@@ -0,0 +1,26 @@
package com.example.bricklog.view;
import javafx.geometry.Insets;
//import javafx.geometry.Pos;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
public class SettingsLayout extends VBox {
public SettingsLayout() {
this.setSpacing(10);
this.setPadding(new Insets(20));
Label settingsTitle = new Label("Settings");
settingsTitle.setStyle("-fx-font-size: 20px; -fx-font-weight: bold;");
// Example settings: toggle for sound, username input
CheckBox soundToggle = new CheckBox("Enable Sound");
TextField usernameField = new TextField();
usernameField.setPromptText("Enter your username");
this.getChildren().addAll(settingsTitle, soundToggle, usernameField);
}
}

View File

@@ -1,101 +0,0 @@
package com.example.bricklog.view;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.RadioButton;
import javafx.scene.control.Slider;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class SettingsWindow extends Application {
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Settings");
// Create a TabPane for organizing settings
TabPane tabPane = new TabPane();
// Tab 1: Display Settings
Tab displayTab = new Tab("Display Settings");
displayTab.setContent(createDisplaySettingsContent());
displayTab.setClosable(false);
// Tab 2: Server Settings
Tab serverTab = new Tab("Server Settings");
serverTab.setContent(createServerSettingsContent());
serverTab.setClosable(false);
tabPane.getTabs().addAll(displayTab, serverTab);
// Set up the scene
VBox vbox = new VBox(tabPane);
Scene scene = new Scene(vbox, 400, 300);
primaryStage.setScene(scene);
primaryStage.show();
}
private GridPane createDisplaySettingsContent() {
GridPane grid = new GridPane();
grid.setPadding(new Insets(10));
grid.setVgap(10);
grid.setHgap(10);
// Font Size Adjuster
Label fontSizeLabel = new Label("Font Size:");
Slider fontSizeSlider = new Slider(10, 30, 14);
fontSizeSlider.setShowTickLabels(true);
fontSizeSlider.setShowTickMarks(true);
// Dark/Light Mode Toggle
Label themeLabel = new Label("Theme:");
ToggleGroup themeGroup = new ToggleGroup();
RadioButton lightMode = new RadioButton("Light");
RadioButton darkMode = new RadioButton("Dark");
lightMode.setToggleGroup(themeGroup);
darkMode.setToggleGroup(themeGroup);
lightMode.setSelected(true);
grid.add(fontSizeLabel, 0, 0);
grid.add(fontSizeSlider, 1, 0);
grid.add(themeLabel, 0, 1);
grid.add(lightMode, 1, 1);
grid.add(darkMode, 2, 1);
return grid;
}
private GridPane createServerSettingsContent() {
GridPane grid = new GridPane();
grid.setPadding(new Insets(10));
grid.setVgap(10);
grid.setHgap(10);
// Server IP
Label ipLabel = new Label("Server IP:");
TextField ipField = new TextField();
// Authentication Token
Label authLabel = new Label("Auth Token:");
PasswordField authField = new PasswordField();
grid.add(ipLabel, 0, 0);
grid.add(ipField, 1, 0);
grid.add(authLabel, 0, 1);
grid.add(authField, 1, 1);
return grid;
}
public static void main(String[] args) {
launch(args);
}
}

View File

@@ -1,2 +1,3 @@
com\example\bricklog\BrickLogClientApplication.class
com\example\bricklog\view\SettingsWindow.class
com\example\bricklog\view\MainLayout.class
com\example\bricklog\view\GalleryLayout.class

View File

@@ -1,3 +1,5 @@
C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\BrickLogClientApplication.java
C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\controller\SettingsController.java
C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\view\MainLayout.java
C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\view\SettingsWindow.java
C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\view\GalleryLayout.java