Implemented ProfilePics UI mechanism

client/src/main/java/envoy/client/ui/controller/ChatScene.java

@@ -23,6 +23,7 @@ import javafx.scene.input.KeyCode;
 import javafx.scene.input.KeyEvent;
 import javafx.scene.layout.GridPane;
 import javafx.scene.paint.Color;
+import javafx.scene.shape.Rectangle;
 import javafx.stage.FileChooser;
 import javafx.util.Duration;
 
@@ -103,6 +104,12 @@ public final class ChatScene implements Restorable {
 	@FXML
 	private Button messageSearchButton;
 
+	@FXML
+	private ImageView clientProfilePic;
+
+	@FXML
+	private ImageView recipientProfilePic;
+
 	private LocalDB			localDB;
 	private Client			client;
 	private WriteProxy		writeProxy;
@@ -140,6 +147,13 @@ public final class ChatScene implements Restorable {
 		attachmentView.setImage(DEFAULT_ATTACHMENT_VIEW_IMAGE);
 		rotateButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("rotate", (int) (DEFAULT_ICON_SIZE * 1.5))));
 		messageSearchButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("search", DEFAULT_ICON_SIZE)));
+		clientProfilePic.setImage(IconUtil.loadIconThemeSensitive("user_icon", 43));
+		Rectangle clip = new Rectangle();
+		clip.setWidth(43);
+		clip.setHeight(43);
+		clip.setArcHeight(43);
+		clip.setArcWidth(43);
+		clientProfilePic.setClip(clip);
 
 		// Listen to received messages
 		eventBus.register(MessageCreationEvent.class, e -> {
@@ -278,16 +292,26 @@ public final class ChatScene implements Restorable {
 		attachmentButton.setDisable(false);
 		chatList.refresh();
 
-		topBarContactLabel.setText(currentChat.getRecipient().getName());
+		if (currentChat != null) {
-		if (currentChat.getRecipient() instanceof User) {
+			topBarContactLabel.setText(currentChat.getRecipient().getName());
-			String status = ((User) currentChat.getRecipient()).getStatus().toString();
+			if (currentChat.getRecipient() instanceof User) {
-			topBarStatusLabel.setText(status);
+				String status = ((User) currentChat.getRecipient()).getStatus().toString();
-			topBarStatusLabel.getStyleClass().add(status.toLowerCase());
+				topBarStatusLabel.setText(status);
-		}
+				topBarStatusLabel.getStyleClass().add(status.toLowerCase());
-		else topBarStatusLabel.setText(currentChat.getRecipient().getContacts().size() + " members");
+				recipientProfilePic.setImage(IconUtil.loadIconThemeSensitive("user_icon", 43));
-		
+			} else {
-		if (currentChat != null)
+				topBarStatusLabel.setText(currentChat.getRecipient().getContacts().size() + " members");
-		messageSearchButton.setVisible(true);
+				recipientProfilePic.setImage(IconUtil.loadIconThemeSensitive("group_icon", 43));
+			}
+			Rectangle clip = new Rectangle();
+			clip.setWidth(43);
+			clip.setHeight(43);
+			clip.setArcHeight(43);
+			clip.setArcWidth(43);
+			recipientProfilePic.setClip(clip);
+
+			messageSearchButton.setVisible(true);
+	}
 	}
 
 	/**

client/src/main/java/envoy/client/ui/listcell/ChatControl.java

@@ -1,10 +1,15 @@
 package envoy.client.ui.listcell;
 
+import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.control.Label;
+import javafx.scene.image.ImageView;
 import javafx.scene.layout.*;
+import javafx.scene.shape.Rectangle;
 
 import envoy.client.data.Chat;
+import envoy.client.ui.IconUtil;
+import envoy.data.Group;
 
 /**
  * Displays a chat using a contact control for the recipient and a label for the
@@ -25,7 +30,25 @@ public class ChatControl extends HBox {
 	 * @since Envoy Client v0.1-beta
 	 */
 	public ChatControl(Chat chat) {
-
+		setAlignment(Pos.CENTER_LEFT);
+		setPadding(new Insets(0, 0, 3, 0));
+		// profile pic
+		ImageView contactProfilePic;
+		if (chat.getRecipient() instanceof Group) contactProfilePic = new ImageView(IconUtil.loadIconThemeSensitive("group_icon", 32));
+		else contactProfilePic = new ImageView(IconUtil.loadIconThemeSensitive("user_icon", 32));
+		Rectangle	clip				= new Rectangle();
+		clip.setWidth(32);
+		clip.setHeight(32);
+		clip.setArcHeight(32);
+		clip.setArcWidth(32);
+		contactProfilePic.setClip(clip);
+		getChildren().add(contactProfilePic);
+		// spacing
+		Region leftSpacing = new Region();
+		leftSpacing.setPrefSize(8, 0);
+		leftSpacing.setMinSize(8, 0);
+		leftSpacing.setMaxSize(8, 0);
+		getChildren().add(leftSpacing);
 		// Contact control
 		getChildren().add(new ContactControl(chat.getRecipient()));
 		// Unread messages

client/src/main/resources/css/base.css

@@ -127,3 +127,7 @@
 #transparentBackground {
 	-fx-background-color: transparent;
 }
+
+#profilePic {
+	-fx-radius: 1em;
+}

client/src/main/resources/fxml/ChatScene.fxml

@@ -48,6 +48,11 @@
 		</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" />
@@ -55,6 +60,9 @@
                <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">
@@ -143,31 +151,29 @@
       		</ButtonBar>
          </children>
          <GridPane.margin>
-            <Insets bottom="40.0" top="10.0" />
+            <Insets bottom="40.0" left="300.0" right="300.0" top="10.0" />
          </GridPane.margin>
       </HBox>
-		<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" GridPane.columnIndex="1" GridPane.rowIndex="2">
+      <HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
-			<GridPane.margin>
+         <children>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+      		<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">
-			</GridPane.margin>
+      			<padding>
-			<padding>
+      				<Insets bottom="5.0" top="5.0" />
-				<Insets bottom="5.0" top="5.0" />
+      			</padding>
-			</padding>
+      			<opaqueInsets>
-			<opaqueInsets>
+      				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+      			</opaqueInsets>
-			</opaqueInsets>
+      			<tooltip>
-			<tooltip>
+      				<Tooltip text="Shows how many chars you can still enter in this message" wrapText="true" />
-				<Tooltip text="Shows how many chars you can still enter in this message" wrapText="true" />
+      			</tooltip>
-			</tooltip>
+      		</Label>
-		</Label>
+      		<Label fx:id="infoLabel" text="Something happened" textFill="#faa007" visible="false" wrapText="true">
-		<Label fx:id="infoLabel" text="Something happened" textFill="#faa007" visible="false" wrapText="true" GridPane.columnIndex="1">
+      			<padding>
-			<GridPane.margin>
+      				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+      			</padding>
-			</GridPane.margin>
+      		</Label>
-			<padding>
+         </children>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+      </HBox>
-			</padding>
-		</Label>
 		<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" />
@@ -178,6 +184,11 @@
 		</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="">
@@ -188,7 +199,7 @@
                   <Label fx:id="topBarStatusLabel" text="" />
                </children>
                <HBox.margin>
-                  <Insets left="20.0" />
+                  <Insets left="15.0" />
                </HBox.margin>
             </VBox>
             <Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />