From 85d6951e2c4c6697864d7516fd3f56ee781684f4 Mon Sep 17 00:00:00 2001 From: Fredrik Marjoni Date: Thu, 9 Apr 2026 12:01:58 +0200 Subject: [PATCH] update[UserPage]: Update Userpage with more visual appealing Javafx display of user account --- .../app/view/userpage/UserPageView.java | 78 +++++++++++---- src/main/resources/userpage/userpage.css | 94 +++++++++++++++---- 2 files changed, 133 insertions(+), 39 deletions(-) diff --git a/src/main/java/edu/group5/app/view/userpage/UserPageView.java b/src/main/java/edu/group5/app/view/userpage/UserPageView.java index c5d886d..ee5d980 100644 --- a/src/main/java/edu/group5/app/view/userpage/UserPageView.java +++ b/src/main/java/edu/group5/app/view/userpage/UserPageView.java @@ -12,12 +12,16 @@ import javafx.geometry.Pos; import javafx.scene.control.Button; import javafx.scene.control.Label; +import javafx.scene.control.ScrollPane; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.BorderPane; +import javafx.scene.layout.FlowPane; import javafx.scene.layout.HBox; +import javafx.scene.layout.Priority; import javafx.scene.layout.VBox; import javafx.scene.text.Text; +import java.text.SimpleDateFormat; import java.util.*; @@ -78,41 +82,46 @@ private VBox createCausesSection() { Text title = new Text("YOUR SUPPORTED CAUSES"); title.getStyleClass().add("section-title"); - VBox causesBox = new VBox(10); - causesBox.getStyleClass().add("section-box"); - causesBox.setPadding(new Insets(10)); - - User currentUser = appState.getCurrentUser(); + ScrollPane scrollPane = new ScrollPane(); + scrollPane.setFitToWidth(true); + scrollPane.setStyle("-fx-focus-color: transparent; -fx-faint-focus-color: transparent;"); + + FlowPane causesFlow = new FlowPane(10, 10); + causesFlow.setStyle("-fx-padding: 10;"); + causesFlow.getStyleClass().add("section-box"); Set uniqueOrgs = donationController.getUniqueOrgs(); if (uniqueOrgs.isEmpty()) { Label noCauses = new Label("No causes supported yet"); noCauses.setStyle("-fx-text-fill: #999;"); - causesBox.getChildren().add(noCauses); + causesFlow.getChildren().add(noCauses); } else { for (int orgId : uniqueOrgs) { Organization org = organizationController.getOrgById(orgId); if (org != null) { - Label causeLabel = new Label("• " + org.name()); - causesBox.getChildren().add(causeLabel); + causesFlow.getChildren().add(createCauseChip(org)); // SRP: delegate to helper } } } - return new VBox(10, title, causesBox); + scrollPane.setContent(causesFlow); + return new VBox(10, title, scrollPane); } private VBox createDonationsSection() { Text title = new Text("PREVIOUS DONATIONS"); title.getStyleClass().add("section-title"); - VBox donationsBox = new VBox(10); - donationsBox.getStyleClass().add("section-box"); + ScrollPane scrollPane = new ScrollPane(); + scrollPane.setFitToWidth(true); + scrollPane.setStyle("-fx-focus-color: transparent; -fx-faint-focus-color: transparent;"); + + VBox donationsBox = new VBox(12); + donationsBox.getStyleClass().add("donation-list"); donationsBox.setPadding(new Insets(10)); User currentUser = appState.getCurrentUser(); - Map userDonations = donationController.getUserDonations(currentUser.getUserId()); if (userDonations.isEmpty()) { @@ -121,17 +130,46 @@ private VBox createDonationsSection() { donationsBox.getChildren().add(noDonations); } else { for (Donation donation : userDonations.values()) { - Organization org = organizationController.getOrgById(donation.organizationId()); - String orgName = (org != null) ? org.name() : "Unknown Organization"; - - Label donationLabel = new Label( - orgName + " • " + donation.amount() + " kr" + " • " + donation.date() - ); - donationsBox.getChildren().add(donationLabel); + donationsBox.getChildren().add(createDonationCard(donation)); // SRP: delegate to helper } } - return new VBox(10, title, donationsBox); + scrollPane.setContent(donationsBox); + return new VBox(10, title, scrollPane); } + + private Label createCauseChip(Organization org) { + Label chip = new Label(org.name()); + chip.getStyleClass().add("cause-chip"); + return chip; + } + + private HBox createDonationCard(Donation donation) { + Organization org = organizationController.getOrgById(donation.organizationId()); + String orgName = (org != null) ? org.name() : "Unknown Organization"; + + HBox card = new HBox(20); + card.getStyleClass().add("donation-card"); + card.setPadding(new Insets(12, 15, 12, 15)); + card.setAlignment(Pos.CENTER_LEFT); + + Text orgText = new Text(orgName); + orgText.getStyleClass().add("donation-org-name"); + + VBox details = new VBox(4); + details.setAlignment(Pos.CENTER_RIGHT); + Label amountLabel = + new Label(String.format("%.2f", donation.amount()) + " kr"); + amountLabel.getStyleClass().add("donation-amount"); + Label dateLabel = new Label( + new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(donation.date())); + dateLabel.getStyleClass().add("donation-date"); + details.getChildren().addAll(amountLabel, dateLabel); + + card.getChildren().addAll(orgText, details); + HBox.setHgrow(orgText, Priority.ALWAYS); // Org name takes available space + + return card; + } } diff --git a/src/main/resources/userpage/userpage.css b/src/main/resources/userpage/userpage.css index 8401a77..5037280 100644 --- a/src/main/resources/userpage/userpage.css +++ b/src/main/resources/userpage/userpage.css @@ -1,31 +1,87 @@ #profile-name { - -fx-font-size: 28px; - -fx-font-weight: bold; + -fx-font-size: 28px; + -fx-font-weight: bold; } + .profile-info { - -fx-font-size: 16px; - -fx-text-fill: #444; + -fx-font-size: 16px; + -fx-text-fill: #444; } + .section-title { - -fx-font-size: 14px; - -fx-font-weight: bold; - -fx-fill: #888; + -fx-font-size: 14px; + -fx-font-weight: bold; + -fx-fill: #888; } + .section-box { - -fx-background-color: #ddd; - -fx-pref-height: 120px; - -fx-pref-width: 700px; - -fx-background-radius: 6; + -fx-background-color: #ddd; + -fx-pref-height: 200px; + -fx-pref-width: 700px; + -fx-background-radius: 6; } + .logout-button { - -fx-background-color: #e03030; - -fx-text-fill: white; - -fx-font-size: 14px; - -fx-font-weight: bold; - -fx-padding: 8 20; - -fx-background-radius: 4; - -fx-cursor: hand; + -fx-background-color: #e03030; + -fx-text-fill: white; + -fx-font-size: 14px; + -fx-font-weight: bold; + -fx-padding: 8 20; + -fx-background-radius: 4; + -fx-cursor: hand; } + .logout-button:hover { - -fx-background-color: #c02020; + -fx-background-color: #c02020; +} + +.cause-chip { + -fx-background-color: #4CAF50; + -fx-text-fill: white; + -fx-padding: 6 12; + -fx-background-radius: 20; + -fx-font-size: 13px; +} + +.cause-chip:hover { + -fx-background-color: #45a049; + -fx-cursor: hand; +} + +.donation-card { + -fx-background-color: #f5f5f5; + -fx-border-color: #ddd; + -fx-border-radius: 6; + -fx-background-radius: 6; +} + +.donation-card:hover { + -fx-background-color: #efefef; + -fx-border-color: #bbb; +} + +.donation-org-name { + -fx-font-size: 15px; + -fx-font-weight: bold; + -fx-fill: #333; +} + +.donation-amount { + -fx-font-size: 14px; + -fx-font-weight: bold; + -fx-text-fill: #2196F3; +} + +.donation-date { + -fx-font-size: 12px; + -fx-text-fill: #999; +} + +.donation-list { + -fx-pref-height: 400px; +} + +/* ScrollPane styling */ +.scroll-pane { + -fx-control-inner-background: #fafafa; } \ No newline at end of file