zdm/envoy
zdm
/
envoy
Archived
3
Fork 0
Code Issues 22 Pull Requests Releases 1 Wiki Activity

Reworked list cell framework to be more extensible

This commit is contained in:
Kai S. K. Engelbart 2020-07-18 11:50:49 +02:00
parent fa7be8c343
commit 0674035183
8 changed files with 361 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/main/java/envoy/client/ui/controller/ChatScene.java
View File

@ -35,9 +35,7 @@ import envoy.client.event.MessageCreationEvent;
import envoy.client.net.Client;
import envoy.client.net.WriteProxy;
import envoy.client.ui.*;
import envoy.client.ui.listcell.ChatControl;
import envoy.client.ui.listcell.ListCellFactory;
import envoy.client.ui.listcell.MessageControl;
import envoy.client.ui.listcell.*;
import envoy.data.*;
import envoy.data.Attachment.AttachmentType;
import envoy.event.*;
@ -139,7 +137,7 @@ public final class ChatScene implements Restorable {
@FXML
private void initialize() {
// Initialize message and user rendering
messageList.setCellFactory(new ListCellFactory<>(MessageControl::new));
messageList.setCellFactory(MessageListCell::new);
chatList.setCellFactory(new ListCellFactory<>(ChatControl::new));
settingsButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("settings", DEFAULT_ICON_SIZE)));

48
client/src/main/java/envoy/client/ui/listcell/AbstractListCell.java Normal file
View File

@ -0,0 +1,48 @@
package envoy.client.ui.listcell;
import javafx.scene.Node;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
/**
* Provides a convenience frame for list cell creation.
* <p>
* Project: <strong>envoy-client</strong><br>
* File: <strong>AbstractListCell.java</strong><br>
* Created: <strong>18.07.2020</strong><br>
*
* @author Kai S. K. Engelbart
* @param <T> the type of element displayed by the list cell
* @param <U> the type of node as which the list element will be displayed
* @since Envoy Client v0.1-beta
*/
public abstract class AbstractListCell<T, U extends Node> extends ListCell<T> {
protected ListView<? extends T> listView;
/**
* @param listView the list view inside of which the cell will be displayed
* @since Envoy Client v0.1-beta
*/
public AbstractListCell(ListView<? extends T> listView) {
this.listView = listView;
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
getStyleClass().add("listElement");
}
@Override
protected final void updateItem(T item, boolean empty) {
super.updateItem(item, empty);
setGraphic(empty || item == null ? null : renderItem(item));
}
/**
* Converts a list item to a node. This can have side effects on the list cell.
*
* @param item the item to render
* @return a node representing the item
* @since Envoy Client v0.1-beta
*/
protected abstract U renderItem(T item);
}

36
client/src/main/java/envoy/client/ui/listcell/GenericListCell.java Normal file
View File

@ -0,0 +1,36 @@
package envoy.client.ui.listcell;
import java.util.function.Function;
import javafx.scene.Node;
import javafx.scene.control.ListView;
/**
* A generic list cell rendering an item using a provided render function.
* <p>
* Project: <strong>envoy-client</strong><br>
* File: <strong>GenericListCell.java</strong><br>
* Created: <strong>18.07.2020</strong><br>
*
* @author Kai S. K. Engelbart
* @param <T> the type of element displayed by the list cell
* @param <U> the type of node as which the list element will be displayed
* @since Envoy Client v0.2-beta
*/
public final class GenericListCell<T, U extends Node> extends AbstractListCell<T, U> {
private Function<? super T, U> renderer;
/**
* @param listView the list view inside of which the cell will be displayed
* @param renderer a function converting a list item to a node
* @since Envoy Client v0.1-beta
*/
public GenericListCell(ListView<? extends T> listView, Function<? super T, U> renderer) {
super(listView);
this.renderer = renderer;
}
@Override
protected U renderItem(T item) { return renderer.apply(item); }
}

34
client/src/main/java/envoy/client/ui/listcell/ListCellFactory.java
View File

@ -17,41 +17,19 @@ import javafx.util.Callback;
*
* @author Kai S. K. Engelbart
* @param <T> the type of object to display
* @param <U> the type of node displayed
* @since Envoy Client v0.1-beta
*/
public final class ListCellFactory<T> implements Callback<ListView<T>, ListCell<T>> {
public final class ListCellFactory<T, U extends Node> implements Callback<ListView<T>, ListCell<T>> {
private final class GenericListCell extends ListCell<T> {
private ListView<? extends T> listView;
private GenericListCell(ListView<? extends T> listView) {
this.listView = listView;
getStyleClass().add("listElement");
}
@Override
protected void updateItem(T item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
final var control = converter.apply(item);
prefWidthProperty().bind(listView.widthProperty().subtract(40));
setGraphic(control);
}
}
}
private final Function<? super T, ? extends Node> converter;
private final Function<? super T, U> renderer;
/**
* @param converter a function converting the type to display into a node
* @param renderer a function converting the type to display into a node
* @since Envoy Client v0.1-beta
*/
public ListCellFactory(Function<? super T, ? extends Node> converter) { this.converter = converter; }
public ListCellFactory(Function<? super T, U> renderer) { this.renderer = renderer; }
@Override
public ListCell<T> call(ListView<T> listView) { return new GenericListCell(listView); }
public ListCell<T> call(ListView<T> listView) { return new GenericListCell<>(listView, renderer); }
}

31
client/src/main/java/envoy/client/ui/listcell/MessageListCell.java Normal file
View File

@ -0,0 +1,31 @@
package envoy.client.ui.listcell;
import javafx.scene.control.ListView;
import envoy.data.Message;
/**
* A list cell containing messages represented as message controls.
* <p>
* Project: <strong>envoy-client</strong><br>
* File: <strong>MessageListCell.java</strong><br>
* Created: <strong>18.07.2020</strong><br>
*
* @author Kai S. K. Engelbart
* @since Envoy Client v0.1-beta
*/
public final class MessageListCell extends AbstractListCell<Message, MessageControl> {
/**
* @param listView the list view inside of which the cell will be displayed
* @since Envoy Client v0.1-beta
*/
public MessageListCell(ListView<? extends Message> listView) { super(listView); }
@Override
protected MessageControl renderItem(Message message) {
final var control = new MessageControl(message);
prefWidthProperty().bind(listView.widthProperty().multiply(0.6));
return control;
}
}

18
client/src/main/resources/css/base.css
View File

@ -9,11 +9,11 @@
}
#messageEnterContainer {
-fx-background-radius: 5em;
-fx-background-radius: 5.0em;
}
#roundButton {
-fx-background-radius: 5em;
-fx-background-radius: 5.0em;
}
.text-area {
@ -88,7 +88,7 @@
}
#loginButton {
-fx-background-radius: 1em;
-fx-background-radius: 1.0em;
}
#registerSwitch {
@ -99,7 +99,7 @@
#loginInputField {
-fx-background-color: transparent;
-fx-border: solid;
-fx-border-width: 0 0 1 0;
-fx-border-width: 0.0 0.0 1.0 0.0;
}
@ -129,5 +129,13 @@
}
#profilePic {
-fx-radius: 1em;
-fx-radius: 1.0em;
}
.listElement {
-fx-background-color: transparent;
}
.listElement {
-fx-background-color: transparent;
}

4
client/src/main/resources/css/dark.css
View File

@ -50,10 +50,6 @@
-fx-background-color: #303030;
}
.listElement {
-fx-background-color: transparent;
}
#messageEnterContainer {
-fx-background-color: #363636;
}

388
client/src/main/resources/fxml/ChatScene.fxml
View File

@ -18,19 +18,33 @@
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<GridPane fx:id="scene" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="400.0" minWidth="500.0" prefHeight="1152.0" prefWidth="2042.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.ChatScene">
<GridPane fx:id="scene" maxHeight="-Infinity"
maxWidth="-Infinity" minHeight="400.0" minWidth="500.0"
prefHeight="1152.0" prefWidth="2042.0"
xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="envoy.client.ui.controller.ChatScene">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" maxWidth="327.99997965494794" minWidth="-Infinity" prefWidth="317.0" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" />
<ColumnConstraints hgrow="NEVER"
maxWidth="327.99997965494794" minWidth="-Infinity" prefWidth="317.0" />
<ColumnConstraints hgrow="ALWAYS"
maxWidth="1.7976931348623157E308" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="122.00000508626302" minHeight="-Infinity" prefHeight="96.66666158040364" vgrow="NEVER" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="949.3333384195963" vgrow="ALWAYS" />
<RowConstraints maxHeight="59.3333740234375" minHeight="-Infinity" prefHeight="22.666748046875" vgrow="NEVER" />
<RowConstraints maxHeight="120.0" minHeight="-Infinity" prefHeight="83.333251953125" vgrow="NEVER" />
<RowConstraints maxHeight="122.00000508626302"
minHeight="-Infinity" prefHeight="96.66666158040364" vgrow="NEVER" />
<RowConstraints maxHeight="1.7976931348623157E308"
minHeight="50.0" prefHeight="949.3333384195963" vgrow="ALWAYS" />
<RowConstraints maxHeight="59.3333740234375"
minHeight="-Infinity" prefHeight="22.666748046875" vgrow="NEVER" />
<RowConstraints maxHeight="120.0" minHeight="-Infinity"
prefHeight="83.333251953125" vgrow="NEVER" />
</rowConstraints>
<children>
<ListView id="chatList" fx:id="chatList" focusTraversable="false" onMouseClicked="#chatListClicked" prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1" GridPane.rowSpan="2147483647">
<ListView id="chatList" fx:id="chatList"
focusTraversable="false" onMouseClicked="#chatListClicked"
prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1"
GridPane.rowSpan="2147483647">
<GridPane.margin>
<Insets right="1.0" />
</GridPane.margin>
@ -40,143 +54,184 @@
<contextMenu>
<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
<items>
<MenuItem fx:id="deleteContactMenuItem" mnemonicParsing="false" onAction="#deleteContact" text="Delete" />
<MenuItem fx:id="deleteContactMenuItem"
mnemonicParsing="false" onAction="#deleteContact" text="Delete" />
</items>
</ContextMenu>
</contextMenu>
</ListView>
<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0">
<children>
<ImageView id="profilePic" fx:id="clientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
<HBox.margin>
<Insets left="15.0" top="5.0" />
</HBox.margin>
</ImageView>
<Label id="transparentBackground" fx:id="contactLabel" prefHeight="27.0" prefWidth="134.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font size="18.0" />
</font>
<HBox.margin>
<Insets left="10.0" top="5.0" />
</HBox.margin>
</Label>
<Region id="transparentBackground" prefHeight="77.0" prefWidth="115.0" />
<VBox id="transparentBackground" alignment="CENTER_RIGHT" prefHeight="200.0" prefWidth="100.0" spacing="5.0">
<children>
<Button fx:id="settingsButton" mnemonicParsing="true" onAction="#settingsButtonClicked" text="">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<VBox.margin>
<Insets />
</VBox.margin>
</Button>
<Button mnemonicParsing="true" onAction="#addContactButtonClicked" text=" + ">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
</children>
<HBox.margin>
<Insets right="10.0" />
</HBox.margin>
<opaqueInsets>
<Insets />
</opaqueInsets>
</VBox>
</children>
<GridPane.margin>
<Insets bottom="1.0" right="1.0" />
</GridPane.margin>
</HBox>
<ListView id="messageList" fx:id="messageList" focusTraversable="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" GridPane.rowSpan="2">
<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0">
<children>
<ImageView id="profilePic" fx:id="clientProfilePic"
fitHeight="43.0" fitWidth="43.0" pickOnBounds="true"
preserveRatio="true">
<HBox.margin>
<Insets left="15.0" top="5.0" />
</HBox.margin>
</ImageView>
<Label id="transparentBackground" fx:id="contactLabel"
prefHeight="27.0" prefWidth="134.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font size="18.0" />
</font>
<HBox.margin>
<Insets left="10.0" top="5.0" />
</HBox.margin>
</Label>
<Region id="transparentBackground" prefHeight="77.0"
prefWidth="115.0" />
<VBox id="transparentBackground" alignment="CENTER_RIGHT"
prefHeight="200.0" prefWidth="100.0" spacing="5.0">
<children>
<Button fx:id="settingsButton" mnemonicParsing="true"
onAction="#settingsButtonClicked" text="">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<VBox.margin>
<Insets />
</VBox.margin>
</Button>
<Button mnemonicParsing="true"
onAction="#addContactButtonClicked" text=" + ">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
</children>
<HBox.margin>
<Insets right="10.0" />
</HBox.margin>
<opaqueInsets>
<Insets />
</opaqueInsets>
</VBox>
</children>
<GridPane.margin>
<Insets bottom="1.0" right="1.0" />
</GridPane.margin>
</HBox>
<ListView id="messageList" fx:id="messageList"
focusTraversable="false" GridPane.columnIndex="1"
GridPane.columnSpan="2147483647" GridPane.rowIndex="1"
GridPane.rowSpan="2">
<GridPane.margin>
<Insets />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="300.0" right="300.0" top="5.0" />
<Insets bottom="5.0" top="5.0" />
</padding>
</ListView>
<HBox alignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
<children>
<Label id="messageEnterContainer" alignment="CENTER" minWidth="500.0" prefHeight="100.0" prefWidth="1300.0">
<graphic>
<TextArea id="messageEnter" fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="100.0" prefWidth="1250.0" promptText="Enter Message" wrapText="true">
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<padding>
<Insets left="17.0" right="17.0" />
</padding>
</TextArea>
</graphic>
</Label>
<HBox prefHeight="38.0" prefWidth="100.0" spacing="5.0">
<children>
<Button id="roundButton" fx:id="postButton" defaultButton="true" disable="true" minWidth="40.0" mnemonicParsing="true" onAction="#postMessage" prefHeight="40.0" prefWidth="40.0" text="Post">
<tooltip>
<Tooltip anchorLocation="WINDOW_TOP_LEFT" autoHide="true" maxWidth="350.0" text="Click this button to send the message. If it is disabled, you first have to select a contact to send it to. A message may automatically be sent when you press (Ctrl + ) Enter, according to your preferences. Additionally sends a message when pressing &quot;Alt&quot; + &quot;P&quot;." wrapText="true" />
</tooltip>
<contextMenu>
<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
<items>
<MenuItem mnemonicParsing="false" onAction="#copyAndPostMessage" text="Copy and Send" />
</items>
</ContextMenu>
</contextMenu>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Button id="roundButton" fx:id="voiceButton" disable="true" minWidth="40.0" onAction="#voiceButtonClicked" prefHeight="40.0" prefWidth="40.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Button id="roundButton" fx:id="attachmentButton" disable="true" minWidth="40.0" mnemonicParsing="false" onAction="#attachmentButtonClicked" prefHeight="40.0" prefWidth="40.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Button id="roundButton" fx:id="rotateButton" minWidth="40.0" mnemonicParsing="false" onAction="#doABarrelRoll" prefHeight="40.0" prefWidth="40.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
</children>
<HBox.margin>
<Insets left="5.0" />
</HBox.margin>
</HBox>
</children>
<GridPane.margin>
<Insets bottom="40.0" left="300.0" right="300.0" top="15.0" />
</GridPane.margin>
</HBox>
<HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
<children>
<Label id="remainingCharsLabel" fx:id="remainingChars" ellipsisString="" maxHeight="30.0" maxWidth="180.0" prefHeight="30.0" prefWidth="180.0" text="remaining chars: 0/x" textFill="LIME" textOverrun="LEADING_WORD_ELLIPSIS" visible="false">
<padding>
<Insets bottom="5.0" top="5.0" />
</padding>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<tooltip>
<Tooltip text="Shows how many chars you can still enter in this message" wrapText="true" />
</tooltip>
</Label>
<Label fx:id="infoLabel" text="Something happened" textFill="#faa007" visible="false" wrapText="true">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Label>
</children>
</HBox>
<ImageView fx:id="attachmentView" pickOnBounds="true" preserveRatio="true" visible="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.halignment="RIGHT" GridPane.rowIndex="2">
<HBox alignment="CENTER" GridPane.columnIndex="1"
GridPane.rowIndex="3">
<children>
<Label id="messageEnterContainer" alignment="CENTER"
minWidth="500.0" prefHeight="100.0" prefWidth="1300.0">
<graphic>
<TextArea id="messageEnter" fx:id="messageTextArea"
disable="true" onInputMethodTextChanged="#messageTextUpdated"
onKeyPressed="#checkPostConditions"
onKeyTyped="#checkKeyCombination" prefHeight="100.0"
prefWidth="1250.0" promptText="Enter Message" wrapText="true">
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<padding>
<Insets left="17.0" right="17.0" />
</padding>
</TextArea>
</graphic>
</Label>
<HBox prefHeight="38.0" prefWidth="100.0" spacing="5.0">
<children>
<Button id="roundButton" fx:id="postButton"
defaultButton="true" disable="true" minWidth="40.0"
mnemonicParsing="true" onAction="#postMessage" prefHeight="40.0"
prefWidth="40.0" text="Post">
<tooltip>
<Tooltip anchorLocation="WINDOW_TOP_LEFT"
autoHide="true" maxWidth="350.0"
text="Click this button to send the message. If it is disabled, you first have to select a contact to send it to. A message may automatically be sent when you press (Ctrl + ) Enter, according to your preferences. Additionally sends a message when pressing &quot;Alt&quot; + &quot;P&quot;."
wrapText="true" />
</tooltip>
<contextMenu>
<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
<items>
<MenuItem mnemonicParsing="false"
onAction="#copyAndPostMessage" text="Copy and Send" />
</items>
</ContextMenu>
</contextMenu>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Button id="roundButton" fx:id="voiceButton" disable="true"
minWidth="40.0" onAction="#voiceButtonClicked" prefHeight="40.0"
prefWidth="40.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Button id="roundButton" fx:id="attachmentButton"
disable="true" minWidth="40.0" mnemonicParsing="false"
onAction="#attachmentButtonClicked" prefHeight="40.0"
prefWidth="40.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Button id="roundButton" fx:id="rotateButton"
minWidth="40.0" mnemonicParsing="false" onAction="#doABarrelRoll"
prefHeight="40.0" prefWidth="40.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
</children>
<HBox.margin>
<Insets left="5.0" />
</HBox.margin>
</HBox>
</children>
<GridPane.margin>
<Insets bottom="40.0" left="300.0" right="300.0" top="15.0" />
</GridPane.margin>
</HBox>
<HBox prefHeight="100.0" prefWidth="200.0"
GridPane.columnIndex="1" GridPane.rowIndex="2">
<children>
<Label id="remainingCharsLabel" fx:id="remainingChars"
ellipsisString="" maxHeight="30.0" maxWidth="180.0"
prefHeight="30.0" prefWidth="180.0" text="remaining chars: 0/x"
textFill="LIME" textOverrun="LEADING_WORD_ELLIPSIS" visible="false">
<padding>
<Insets bottom="5.0" top="5.0" />
</padding>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<tooltip>
<Tooltip
text="Shows how many chars you can still enter in this message"
wrapText="true" />
</tooltip>
</Label>
<Label fx:id="infoLabel" text="Something happened"
textFill="#faa007" visible="false" wrapText="true">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Label>
</children>
</HBox>
<ImageView fx:id="attachmentView" pickOnBounds="true"
preserveRatio="true" visible="false" GridPane.columnIndex="1"
GridPane.columnSpan="2147483647" GridPane.halignment="RIGHT"
GridPane.rowIndex="2">
<viewport>
<Rectangle2D height="20.0" width="20.0" />
</viewport>
@ -184,33 +239,40 @@
<Insets bottom="5.0" right="10.0" top="5.0" />
</GridPane.margin>
</ImageView>
<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1">
<children>
<ImageView id="profilePic" fx:id="recipientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
<HBox.margin>
<Insets left="20.0" top="5.0" />
</HBox.margin>
</ImageView>
<VBox alignment="CENTER_LEFT" prefHeight="97.0" prefWidth="316.0">
<children>
<Label fx:id="topBarContactLabel" text="">
<font>
<Font size="18.0" />
</font>
</Label>
<Label fx:id="topBarStatusLabel" text="" />
</children>
<HBox.margin>
<Insets left="15.0" />
</HBox.margin>
</VBox>
<Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
<Button id="roundButton" fx:id="messageSearchButton" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" visible="false">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</Button>
</children>
</HBox>
<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0"
prefWidth="200.0" GridPane.columnIndex="1">
<children>
<ImageView id="profilePic" fx:id="recipientProfilePic"
fitHeight="43.0" fitWidth="43.0" pickOnBounds="true"
preserveRatio="true">
<HBox.margin>
<Insets left="20.0" top="5.0" />
</HBox.margin>
</ImageView>
<VBox alignment="CENTER_LEFT" prefHeight="97.0"
prefWidth="316.0">
<children>
<Label fx:id="topBarContactLabel" text="">
<font>
<Font size="18.0" />
</font>
</Label>
<Label fx:id="topBarStatusLabel" text="" />
</children>
<HBox.margin>
<Insets left="15.0" />
</HBox.margin>
</VBox>
<Region prefHeight="200.0" prefWidth="200.0"
HBox.hgrow="ALWAYS" />
<Button id="roundButton" fx:id="messageSearchButton"
contentDisplay="CENTER" mnemonicParsing="false" prefHeight="40.0"
prefWidth="40.0" visible="false">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</Button>
</children>
</HBox>
</children>
</GridPane>