From 15d6aa085cd5bc90aa8e3e6af681c6d31d5f9cd0 Mon Sep 17 00:00:00 2001
From: DieGurke <55625494+DieGurke@users.noreply.github.com>
Date: Thu, 16 Jul 2020 21:13:46 +0200
Subject: [PATCH] Improved top bar

---
 .../envoy/client/ui/controller/ChatScene.java |  21 ++++
 client/src/main/resources/css/base.css        |   6 +-
 client/src/main/resources/css/dark.css        |   2 +-
 client/src/main/resources/fxml/ChatScene.fxml | 105 ++++++++++++------
 4 files changed, 100 insertions(+), 34 deletions(-)

diff --git a/client/src/main/java/envoy/client/ui/controller/ChatScene.java b/client/src/main/java/envoy/client/ui/controller/ChatScene.java
index e5c1931..34d424f 100644
--- a/client/src/main/java/envoy/client/ui/controller/ChatScene.java
+++ b/client/src/main/java/envoy/client/ui/controller/ChatScene.java
@@ -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);
 	}
 
 	/**
diff --git a/client/src/main/resources/css/base.css b/client/src/main/resources/css/base.css
index 5c1027d..cbfd244 100644
--- a/client/src/main/resources/css/base.css
+++ b/client/src/main/resources/css/base.css
@@ -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;
+}
diff --git a/client/src/main/resources/css/dark.css b/client/src/main/resources/css/dark.css
index 7cbc145..0db8841 100644
--- a/client/src/main/resources/css/dark.css
+++ b/client/src/main/resources/css/dark.css
@@ -46,7 +46,7 @@
 	-fx-background-color: rgb(25, 25, 25);
 }
 
-#chatList {
+#chatList, #topBar {
 	-fx-background-color: #303030;
 }
 
diff --git a/client/src/main/resources/fxml/ChatScene.fxml b/client/src/main/resources/fxml/ChatScene.fxml
index 29d9f08..068927a 100644
--- a/client/src/main/resources/fxml/ChatScene.fxml
+++ b/client/src/main/resources/fxml/ChatScene.fxml
@@ -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>