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

Implemented ProfilePics UI mechanism

Browse Source
This commit is contained in:
DieGurke
2020-07-17 13:56:36 +02:00
parent a3d368762e
commit ef198f653b
6 changed files with 97 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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.getRecipient() instanceof User) {
String status = ((User) currentChat.getRecipient()).getStatus().toString();
topBarStatusLabel.setText(status);
topBarStatusLabel.getStyleClass().add(status.toLowerCase());
}
else topBarStatusLabel.setText(currentChat.getRecipient().getContacts().size() + " members");
if (currentChat != null)
messageSearchButton.setVisible(true);
if (currentChat != null) {
topBarContactLabel.setText(currentChat.getRecipient().getName());
if (currentChat.getRecipient() instanceof User) {
String status = ((User) currentChat.getRecipient()).getStatus().toString();
topBarStatusLabel.setText(status);
topBarStatusLabel.getStyleClass().add(status.toLowerCase());
recipientProfilePic.setImage(IconUtil.loadIconThemeSensitive("user_icon", 43));
} else {
topBarStatusLabel.setText(currentChat.getRecipient().getContacts().size() + " members");
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);
}
}
/**

25
client/src/main/java/envoy/client/ui/listcell/ChatControl.java
View File

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

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

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

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

@@ -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">
<GridPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</GridPane.margin>
<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" GridPane.columnIndex="1">
<GridPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Label>
<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" />
@@ -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" />

BIN
client/src/main/resources/icons/dark/group_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
client/src/main/resources/icons/dark/user_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB