From 9e886c3f45377351b4e70fdcf8ae5e262550686e Mon Sep 17 00:00:00 2001 From: delvh Date: Mon, 22 Jun 2020 20:53:44 +0200 Subject: [PATCH] Added alignment and coloring of messages according to who is the sender additionally added: - the label on top of the ChatScene now displays the own users name - the messageList now scrolls to the bottom when a message is created/received --- .../java/envoy/client/ui/MessageListCell.java | 20 +++++++++++++------ src/main/java/envoy/client/ui/Startup.java | 1 - .../envoy/client/ui/controller/ChatScene.java | 13 ++++++++++-- src/main/resources/css/base.css | 15 ++++++++++++-- src/main/resources/css/dark.css | 14 ++++++++++--- src/main/resources/css/light.css | 15 +++++++++++++- 6 files changed, 63 insertions(+), 15 deletions(-) diff --git a/src/main/java/envoy/client/ui/MessageListCell.java b/src/main/java/envoy/client/ui/MessageListCell.java index 95f9ff2..fe17bd3 100644 --- a/src/main/java/envoy/client/ui/MessageListCell.java +++ b/src/main/java/envoy/client/ui/MessageListCell.java @@ -5,15 +5,16 @@ import java.text.SimpleDateFormat; import java.util.Map; import java.util.logging.Level; +import javafx.geometry.Insets; import javafx.scene.control.Label; import javafx.scene.control.ListCell; import javafx.scene.image.Image; import javafx.scene.image.ImageView; -import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import envoy.data.Message; import envoy.data.Message.MessageStatus; +import envoy.data.User; import envoy.util.EnvoyLog; /** @@ -30,6 +31,7 @@ public class MessageListCell extends ListCell { private static final SimpleDateFormat dateFormat = new SimpleDateFormat("dd.MM.yyyy HH:mm"); private static Map statusImages; + private static User user; static { try { @@ -52,11 +54,17 @@ public class MessageListCell extends ListCell { setText(null); setGraphic(null); } else { - setGraphic(new HBox( - new VBox( - new Label(dateFormat.format(message.getCreationDate())), - new Label(message.getText())), - new Label("", new ImageView(statusImages.get(message.getStatus()))))); + final var cell = new VBox(new Label(dateFormat.format(message.getCreationDate())), new Label(message.getText()), + new Label("", new ImageView(statusImages.get(message.getStatus())))); + cell.getStyleClass().add(message.getRecipientID() == user.getID() ? "received-message" : "own-message"); + cell.paddingProperty().setValue(new Insets(5, 20, 5, 20)); + setGraphic(cell); } } + + /** + * @param user the user to set + * @since Envoy Client v0.1-beta + */ + public static void setUser(User user) { MessageListCell.user = user; } } diff --git a/src/main/java/envoy/client/ui/Startup.java b/src/main/java/envoy/client/ui/Startup.java index 8f00f74..528f727 100644 --- a/src/main/java/envoy/client/ui/Startup.java +++ b/src/main/java/envoy/client/ui/Startup.java @@ -2,7 +2,6 @@ package envoy.client.ui; import java.io.File; import java.io.IOException; -import java.util.Date; import java.util.Properties; import java.util.logging.Level; import java.util.logging.Logger; diff --git a/src/main/java/envoy/client/ui/controller/ChatScene.java b/src/main/java/envoy/client/ui/controller/ChatScene.java index 518b290..992895c 100644 --- a/src/main/java/envoy/client/ui/controller/ChatScene.java +++ b/src/main/java/envoy/client/ui/controller/ChatScene.java @@ -97,7 +97,7 @@ public final class ChatScene { } catch (final IOException e1) { logger.log(Level.WARNING, "Could not read current chat: ", e1); } - Platform.runLater(messageList::refresh); + Platform.runLater(() -> { messageList.refresh(); scrollToMessageListEnd(); }); } }); }); @@ -153,6 +153,8 @@ public final class ChatScene { this.writeProxy = writeProxy; userList.setItems(FXCollections.observableList(localDB.getChats().stream().map(Chat::getRecipient).collect(Collectors.toList()))); + contactLabel.setText(localDB.getUser().getName()); + MessageListCell.setUser(localDB.getUser()); } /** @@ -164,7 +166,6 @@ public final class ChatScene { private void userListClicked() { final Contact user = userList.getSelectionModel().getSelectedItem(); if (user != null && (currentChat == null || !user.equals(currentChat.getRecipient()))) { - contactLabel.setText(user.getName()); // LEON: JFC <===> JAVA FRIED CHICKEN <=/=> Java Foundation Classes @@ -287,6 +288,7 @@ public final class ChatScene { // Add message to LocalDB and update UI messageList.getItems().add(message); + scrollToMessageListEnd(); // Request a new ID generator if all IDs were used if (!localDB.getIDGenerator().hasNext() && client.isOnline()) client.requestIdGenerator(); @@ -301,4 +303,11 @@ public final class ChatScene { postButton.setDisable(true); updateRemainingCharsLabel(); } + + /** + * Scrolls to the bottom of the {@code messageList}. + * + * @since Envoy Client v0.1-beta + */ + private void scrollToMessageListEnd() { messageList.scrollTo(messageList.getItems().size() - 1); } } diff --git a/src/main/resources/css/base.css b/src/main/resources/css/base.css index 4711344..ff81b44 100644 --- a/src/main/resources/css/base.css +++ b/src/main/resources/css/base.css @@ -1,4 +1,4 @@ -.button { +.button, .list-cell { -fx-background-radius: 5em; } @@ -13,7 +13,6 @@ #remainingCharsLabel { -fx-text-fill: #00FF00; - -fx-opacity: 1; -fx-background-color: transparent; } @@ -32,3 +31,15 @@ .offline { -fx-text-fill: gray; } + +.received-message { + -fx-alignment: center-left; + -fx-background-radius: 4em; + -fx-text-alignment: right; +} + +.own-message { + -fx-alignment: center-right; + -fx-background-radius: 4em; + -fx-text-alignment: left; +} diff --git a/src/main/resources/css/dark.css b/src/main/resources/css/dark.css index 60707a4..becc265 100644 --- a/src/main/resources/css/dark.css +++ b/src/main/resources/css/dark.css @@ -7,7 +7,7 @@ } .button { - -fx-background-color: rgb(105.0,0.0,153.0); + -fx-background-color: darkviolet; } .button:pressed { @@ -22,8 +22,16 @@ -fx-background-color: dimgray; } -.list-cell:selected { - -fx-background-color:rgb(105.0,0.0,153.0) ; +.list-cell:selected, .list-cell:selected > * { + -fx-background-color: darkviolet; +} + +.received-message { + -fx-background-color: seagreen; +} + +.own-message { + -fx-background-color: gray; } .alert.information.dialog-pane, .alert.warning.dialog-pane, .alert.error.dialog-pane { diff --git a/src/main/resources/css/light.css b/src/main/resources/css/light.css index bb57c4f..3362540 100644 --- a/src/main/resources/css/light.css +++ b/src/main/resources/css/light.css @@ -1,3 +1,16 @@ -.button, .list-cell:selected{ +.button{ -fx-background-color: orangered; } + +.list-cell:selected, .list-cell:selected > * { + -fx-background-color: orangered; + -fx-text-fill: black; +} + +.received-message { + -fx-background-color: lightgreen; +} + +.own-message { + -fx-background-color: lightgray; +}