feat: improve messages layout

This commit is contained in:
Arnaud Vergnet 2020-12-07 12:46:02 +01:00
parent 7886d72a39
commit 3ed38442dc
7 changed files with 49 additions and 70 deletions

View file

@ -12,7 +12,6 @@ import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import java.io.IOException;
import java.net.URL;

View file

@ -18,17 +18,11 @@ public class MessageListItemCell extends ListCell<Message> {
protected void updateItem(Message item, boolean empty) {
super.updateItem(item, empty);
if (item != null) {
FXMLLoader cellLoader;
final User sender = item.getSender();
if (sender instanceof CurrentUser) {
cellLoader = new FXMLLoader(getClass().getResource("messageListItemSelf.fxml"));
} else {
cellLoader = new FXMLLoader(getClass().getResource("messageListItemOther.fxml"));
}
try {
FXMLLoader cellLoader = new FXMLLoader(getClass().getResource("messageListItem.fxml"));
setGraphic(cellLoader.load());
final MessageListItemController userListItemController = cellLoader.getController();
userListItemController.setMessage(item.getText());
userListItemController.setMessage(item);
} catch (IOException e) {
e.printStackTrace();
}

View file

@ -1,23 +1,40 @@
package fr.insa.clavardator.ui.chat;
import com.jfoenix.controls.JFXButton;
import fr.insa.clavardator.chat.Message;
import fr.insa.clavardator.users.CurrentUser;
import fr.insa.clavardator.users.User;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Pos;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import java.net.URL;
import java.util.ResourceBundle;
public class MessageListItemController implements Initializable {
@FXML
private VBox container;
@FXML
private JFXButton button;
@FXML
private Label timestamp;
@Override
public void initialize(URL url, ResourceBundle rb) {
}
public void setMessage(String text) {
button.setText(text);
public void setMessage(Message message) {
button.setText(message.getText());
if (message.getSender() instanceof CurrentUser) {
container.setAlignment(Pos.CENTER_RIGHT);
button.getStyleClass().add("message-self");
} else {
container.setAlignment(Pos.CENTER_LEFT);
button.getStyleClass().add("message-other");
}
}
}

View file

@ -5,6 +5,7 @@
<!--suppress JavaFxUnresolvedFxIdReference -->
<?import javafx.scene.control.Label?>
<?import com.jfoenix.controls.JFXSpinner?>
<?import javafx.geometry.Insets?>
<AnchorPane xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1" fx:controller="fr.insa.clavardator.ui.chat.ChatController"
stylesheets="@../styles.css" styleClass="container">
@ -13,6 +14,9 @@
<VBox fx:id="chatContainer">
<fx:include source="chatHeader.fxml" fx:id="chatHeader"/>
<StackPane VBox.vgrow="ALWAYS">
<padding>
<Insets left="10" right="10"/>
</padding>
<ListView fx:id="messageList"/>
<fx:include source="../loadingScreen.fxml" fx:id="loading"/>
</StackPane>

View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<VBox xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="fr.insa.clavardator.ui.chat.MessageListItemController"
stylesheets="@../styles.css"
styleClass="inner"
fx:id="container"
spacing="10">
<padding>
<Insets left="50" right="50" top="10" bottom="10"/>
</padding>
<JFXButton fx:id="button"
mnemonicParsing="false"
text="Message"
textAlignment="CENTER"/>
<Label fx:id="timestamp"
text="Timestamp"
styleClass="timestamp"/>
</VBox>

View file

@ -1,29 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<AnchorPane prefHeight="80.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1" fx:controller="fr.insa.clavardator.ui.chat.MessageListItemController"
stylesheets="@../styles.css" styleClass="inner">
<VBox prefHeight="200.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<AnchorPane prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<JFXButton fx:id="button" alignment="CENTER_LEFT" mnemonicParsing="false"
styleClass="message-other" text="Message" textAlignment="CENTER"
AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="50.0"
AnchorPane.topAnchor="10.0"/>
</children>
</AnchorPane>
<AnchorPane prefHeight="200.0" prefWidth="200.0">
<children>
<Label alignment="CENTER_LEFT" prefHeight="35.0" prefWidth="600.0" text="Timestamp" styleClass="timestamp"
AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0"
AnchorPane.topAnchor="0.0"/>
</children>
</AnchorPane>
</children>
</VBox>
</AnchorPane>

View file

@ -1,30 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<AnchorPane prefHeight="80.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1" fx:controller="fr.insa.clavardator.ui.chat.MessageListItemController"
stylesheets="@../styles.css" styleClass="inner">
<VBox prefHeight="200.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<AnchorPane prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<JFXButton fx:id="button" alignment="CENTER_RIGHT" mnemonicParsing="false"
styleClass="message-self" text="Message" textAlignment="CENTER" textFill="WHITE"
AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="50.0" AnchorPane.rightAnchor="10.0"
AnchorPane.topAnchor="10.0"/>
</children>
</AnchorPane>
<AnchorPane prefHeight="200.0" prefWidth="200.0">
<children>
<Label alignment="CENTER_RIGHT" prefHeight="35.0" prefWidth="600.0" text="Timestamp" styleClass="timestamp"
AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0"
AnchorPane.topAnchor="0.0"/>
</children>
</AnchorPane>
</children>
</VBox>
</AnchorPane>