Improved top bar

This commit is contained in:
DieGurke 2020-07-16 21:13:46 +02:00
parent c71c038317
commit a21a5c8588
4 changed files with 100 additions and 34 deletions

View File

@ -96,6 +96,15 @@ public final class ChatScene implements Restorable {
@FXML
private ImageView attachmentView;
@FXML
private Label topBarContactLabel;
@FXML
private Label topBarStatusLabel;
@FXML
private Button messageSearchButton;
private LocalDB localDB;
private Client client;
private WriteProxy writeProxy;
@ -132,6 +141,7 @@ public final class ChatScene implements Restorable {
attachmentButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("attachment", DEFAULT_ICON_SIZE)));
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)));
// Listen to received messages
eventBus.register(MessageCreationEvent.class, e -> {
@ -268,6 +278,17 @@ public final class ChatScene implements Restorable {
voiceButton.setDisable(!recorder.isSupported());
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);
}
/**

View File

@ -12,7 +12,7 @@
-fx-background-radius: 5em;
}
#bottomButton {
#roundButton {
-fx-background-radius: 5em;
}
@ -123,3 +123,7 @@
#infoLabel-error {
-fx-text-fill: red;
}
#transparentBackground {
-fx-background-color: transparent;
}

View File

@ -46,7 +46,7 @@
-fx-background-color: rgb(25, 25, 25);
}
#chatList {
#chatList, #topBar {
-fx-background-color: #303030;
}

View File

@ -14,7 +14,10 @@
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<GridPane fx:id="scene" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="400.0" minWidth="350.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>
@ -22,15 +25,15 @@
<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="1567.3333740234375" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="76.66667175292969" minHeight="-Infinity" prefHeight="76.66667175292969" vgrow="NEVER" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="969.3332926432291" vgrow="ALWAYS" />
<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="40.0" prefHeight="83.333251953125" vgrow="NEVER" />
</rowConstraints>
<children>
<ListView id="chatList" fx:id="chatList" onMouseClicked="#chatListClicked" prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1" GridPane.rowSpan="2147483647">
<GridPane.margin>
<Insets right="2.0" top="1.0" />
<Insets right="2.0" />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="2.0" top="5.0" />
@ -43,28 +46,51 @@
</ContextMenu>
</contextMenu>
</ListView>
<Label fx:id="contactLabel" prefHeight="27.0" prefWidth="134.0" GridPane.columnSpan="2">
<GridPane.margin>
<Insets left="10.0" />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Label>
<Button fx:id="settingsButton" mnemonicParsing="true" onAction="#settingsButtonClicked" text="_Settings" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
<GridPane.margin>
<Insets bottom="10.0" right="10.0" top="10.0" />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0">
<children>
<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>
</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="2.0" right="2.0" />
</GridPane.margin>
</HBox>
<ListView id="messageList" fx:id="messageList" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" GridPane.rowSpan="2">
<GridPane.margin>
<Insets />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="2.0" top="5.0" />
<Insets bottom="5.0" left="300.0" right="300.0" top="5.0" />
</padding>
</ListView>
<HBox alignment="CENTER" spacing="4.0" GridPane.columnIndex="1" GridPane.rowIndex="3">
@ -83,7 +109,7 @@
</Label>
<ButtonBar buttonMinWidth="40.0">
<buttons>
<Button id="bottomButton" fx:id="postButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#postMessage" prefHeight="40.0" prefWidth="40.0" text="Post">
<Button id="roundButton" fx:id="postButton" defaultButton="true" disable="true" 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>
@ -98,17 +124,17 @@
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Button id="bottomButton" fx:id="voiceButton" disable="true" onAction="#voiceButtonClicked" prefHeight="40.0" prefWidth="40.0">
<Button id="roundButton" fx:id="voiceButton" disable="true" 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="bottomButton" fx:id="attachmentButton" disable="true" mnemonicParsing="false" onAction="#attachmentButtonClicked" prefHeight="40.0" prefWidth="40.0">
<Button id="roundButton" fx:id="attachmentButton" disable="true" 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="bottomButton" fx:id="rotateButton" mnemonicParsing="false" onAction="#doABarrelRoll" prefHeight="40.0" prefWidth="40.0">
<Button id="roundButton" fx:id="rotateButton" 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>
@ -120,14 +146,6 @@
<Insets bottom="40.0" top="10.0" />
</GridPane.margin>
</HBox>
<Button mnemonicParsing="true" onAction="#addContactButtonClicked" text="_Add Contacts" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<GridPane.margin>
<Insets bottom="10.0" left="10.0" right="5.0" />
</GridPane.margin>
</Button>
<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" />
@ -158,5 +176,28 @@
<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>
<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="20.0" />
</HBox.margin>
</VBox>
<Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
<Button fx:id="messageSearchButton" id="roundButton" 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>