Implemented ProfilePics UI mechanism
This commit is contained in:
DieGurke
parent
62d9df7ae8
commit
b4225b0d80
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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
|
||||
|
||||
@ -127,3 +127,7 @@
|
||||
#transparentBackground {
|
||||
-fx-background-color: transparent;
|
||||
}
|
||||
|
||||
#profilePic {
|
||||
-fx-radius: 1em;
|
||||
}
|
||||
|
||||
@ -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
BIN
client/src/main/resources/icons/dark/group_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
client/src/main/resources/icons/dark/user_icon.png
Normal file
BIN
client/src/main/resources/icons/dark/user_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Reference in New Issue
Block a user