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

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<Message> {
 
 	private static final SimpleDateFormat		dateFormat	= new SimpleDateFormat("dd.MM.yyyy HH:mm");
 	private static Map<MessageStatus, Image>	statusImages;
+	private static User							user;
 
 	static {
 		try {
@@ -52,11 +54,17 @@ public class MessageListCell extends ListCell<Message> {
 			setText(null);
 			setGraphic(null);
 		} else {
-			setGraphic(new HBox(
+			final var cell = new VBox(new Label(dateFormat.format(message.getCreationDate())), new Label(message.getText()),
-					new VBox(
+					new Label("", new ImageView(statusImages.get(message.getStatus()))));
-					 new Label(dateFormat.format(message.getCreationDate())),
+			cell.getStyleClass().add(message.getRecipientID() == user.getID() ? "received-message" : "own-message");
-					 new Label(message.getText())),
+			cell.paddingProperty().setValue(new Insets(5, 20, 5, 20));
-					new Label("", new ImageView(statusImages.get(message.getStatus())))));
+			setGraphic(cell);
 		}
 	}
+
+	/**
+	 * @param user the user to set
+	 * @since Envoy Client v0.1-beta
+	 */
+	public static void setUser(User user) { MessageListCell.user = user; }
 }

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;

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); }
 }

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;
+}

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 {
+.list-cell:selected, .list-cell:selected > * {
-    -fx-background-color:rgb(105.0,0.0,153.0) ;
+    -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 {

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;
+}