From 9e886c3f45377351b4e70fdcf8ae5e262550686e Mon Sep 17 00:00:00 2001 From: delvh Date: Mon, 22 Jun 2020 20:53:44 +0200 Subject: [PATCH 1/9] 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; +} From d47a99d637e7776a1fe09abd91515b4bcb9585e7 Mon Sep 17 00:00:00 2001 From: delvh Date: Mon, 22 Jun 2020 22:51:10 +0200 Subject: [PATCH 2/9] Added a context menu to the message list and ability to copy a message context menu contains a few menu items that will be populated with functionality later on. --- .../envoy/client/ui/controller/ChatScene.java | 20 +++++++++++++++++++ src/main/resources/css/base.css | 16 ++++++++++++--- src/main/resources/css/dark.css | 4 ++-- src/main/resources/css/light.css | 2 +- src/main/resources/fxml/ChatScene.fxml | 14 ++++++++++++- 5 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/main/java/envoy/client/ui/controller/ChatScene.java b/src/main/java/envoy/client/ui/controller/ChatScene.java index 992895c..31c2431 100644 --- a/src/main/java/envoy/client/ui/controller/ChatScene.java +++ b/src/main/java/envoy/client/ui/controller/ChatScene.java @@ -1,5 +1,7 @@ package envoy.client.ui.controller; +import java.awt.Toolkit; +import java.awt.datatransfer.StringSelection; import java.io.IOException; import java.util.logging.Level; import java.util.logging.Logger; @@ -310,4 +312,22 @@ public final class ChatScene { * @since Envoy Client v0.1-beta */ private void scrollToMessageListEnd() { messageList.scrollTo(messageList.getItems().size() - 1); } + + // =========== contextMenu actions ========== // + + @FXML + private void copyMessage() { + Toolkit.getDefaultToolkit() + .getSystemClipboard() + .setContents(new StringSelection(messageList.getSelectionModel().getSelectedItem().getText()), null); + } + + @FXML + private void deleteMessage() {} + + @FXML + private void forwardMessage() {} + + @FXML + private void quoteMessage() {} } diff --git a/src/main/resources/css/base.css b/src/main/resources/css/base.css index ff81b44..35094f4 100644 --- a/src/main/resources/css/base.css +++ b/src/main/resources/css/base.css @@ -1,5 +1,15 @@ .button, .list-cell { - -fx-background-radius: 5em; + -fx-background-radius: 5.0em; +} + +.context-menu, .context-menu > * { + -fx-background-radius: 15px; + /*TODO: solution below does not work */ + -fx-background-color: transparent; +} + +.menu-item { + -fx-background-radius: 15.0px; } .button:hover { @@ -34,12 +44,12 @@ .received-message { -fx-alignment: center-left; - -fx-background-radius: 4em; + -fx-background-radius: 4.0em; -fx-text-alignment: right; } .own-message { -fx-alignment: center-right; - -fx-background-radius: 4em; + -fx-background-radius: 4.0em; -fx-text-alignment: left; } diff --git a/src/main/resources/css/dark.css b/src/main/resources/css/dark.css index becc265..75e3bc0 100644 --- a/src/main/resources/css/dark.css +++ b/src/main/resources/css/dark.css @@ -18,11 +18,11 @@ -fx-background-color: lightgray; } -.list-view, .list-cell, .text-area .content, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content { +.list-view, .list-cell, .text-area .content, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item { -fx-background-color: dimgray; } -.list-cell:selected, .list-cell:selected > * { +.list-cell:selected, .list-cell:selected > *, .menu-item:hover { -fx-background-color: darkviolet; } diff --git a/src/main/resources/css/light.css b/src/main/resources/css/light.css index 3362540..96942fd 100644 --- a/src/main/resources/css/light.css +++ b/src/main/resources/css/light.css @@ -11,6 +11,6 @@ -fx-background-color: lightgreen; } -.own-message { +.own-message , .menu-item { -fx-background-color: lightgray; } diff --git a/src/main/resources/fxml/ChatScene.fxml b/src/main/resources/fxml/ChatScene.fxml index 9d95fba..4d7d4f6 100644 --- a/src/main/resources/fxml/ChatScene.fxml +++ b/src/main/resources/fxml/ChatScene.fxml @@ -2,8 +2,10 @@ + + @@ -50,7 +52,17 @@ - + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +