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
This commit is contained in:
delvh 2020-06-22 20:53:44 +02:00
parent 6eb91244cc
commit 9e886c3f45
6 changed files with 63 additions and 15 deletions

View File

@ -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(
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; }
}

View File

@ -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;

View File

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

View File

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

View File

@ -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 {

View File

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