Merge pull request #149 from informatik-ag-ngl/f/visually_pleasing_experience

Improved general appearance of Envoy, both in FXML and CSS

src/main/java/envoy/client/ui/ContactListCell.java

@@ -3,7 +3,6 @@ package envoy.client.ui;
 import javafx.scene.control.Label;
 import javafx.scene.control.ListCell;
 import javafx.scene.layout.VBox;
-import javafx.scene.paint.Color;
 
 import envoy.data.Contact;
 import envoy.data.Group;
@@ -32,32 +31,19 @@ public class ContactListCell extends ListCell<Contact> {
 			setText(null);
 			setGraphic(null);
 		} else {
-			// the infoLabel displays specific contact info, i.e. status of a user or amount
-			// of members in a group
-			Label infoLabel = null;
+			// Container with contact name
+			final var vbox = new VBox(new Label(contact.getName()));
 			if (contact instanceof User) {
-				// user specific info
-				infoLabel = new Label(((User) contact).getStatus().toString());
-				Color textColor = null;
-				switch (((User) contact).getStatus()) {
-					case ONLINE:
-						textColor = Color.LIMEGREEN;
-						break;
-					case AWAY:
-						textColor = Color.ORANGERED;
-						break;
-					case BUSY:
-						textColor = Color.RED;
-						break;
-					case OFFLINE:
-						textColor = Color.GRAY;
-						break;
-				}
-				infoLabel.setTextFill(textColor);
-			} else
-				// group specific infos
-				infoLabel = new Label(String.valueOf(((Group) contact).getContacts().size()) + " members");
-			setGraphic(new VBox(new Label(contact.getName()), infoLabel));
+				// Online status
+				final var user = (User) contact;
+				final var	statusLabel	= new Label(user.getStatus().toString());
+				statusLabel.getStyleClass().add(user.getStatus().toString().toLowerCase());
+				vbox.getChildren().add(statusLabel);
+			} else {
+				// Member count
+				vbox.getChildren().add(new Label(((Group) contact).getContacts().size() + " members"));
+			}
+			setGraphic(vbox);
 		}
 	}
 }

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

@@ -94,7 +94,7 @@ public final class ChatScene {
 				if (chat.equals(currentChat)) {
 					try {
 						currentChat.read(writeProxy);
-					} catch (IOException e1) {
+					} catch (final IOException e1) {
 						logger.log(Level.WARNING, "Could not read current chat: ", e1);
 					}
 					Platform.runLater(messageList::refresh);
@@ -177,7 +177,7 @@ public final class ChatScene {
 			// Read the current chat
 			try {
 				currentChat.read(writeProxy);
-			} catch (IOException e) {
+			} catch (final IOException e) {
 				logger.log(Level.WARNING, "Could not read current chat.", e);
 			}
 

src/main/resources/css/base.css

@@ -1,3 +1,34 @@
 .button {
 	-fx-background-radius: 5em;
 }
+
+.button:hover {
+	-fx-scale-x: 1.05;
+	-fx-scale-y: 1.05;
+}
+
+.label {
+	-fx-background-color: transparent;
+}
+
+#remainingCharsLabel {
+	-fx-text-fill: #00FF00;
+	-fx-opacity: 1;
+	-fx-background-color: transparent;
+}
+
+.online {
+	-fx-text-fill: limegreen;
+}
+
+.away {
+	-fx-text-fill: orangered;
+}
+
+.busy {
+	-fx-text-fill: red;
+}
+
+.offline {
+	-fx-text-fill: gray;
+}

src/main/resources/css/dark.css

@@ -1,4 +1,31 @@
-.button{
-	-fx-background-color: rgb(105,0,153);
+* {
 	-fx-text-fill: white;
 }
+
+.root {
+	-fx-background-color: black;
+}
+
+.button {
+	-fx-background-color: rgb(105.0,0.0,153.0);
+}
+
+.button:pressed {
+	-fx-background-color: darkgray;
+}
+
+.button:disabled {
+	-fx-background-color: lightgray;
+}
+
+.list-view, .list-cell, .text-area .content, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content {
+	-fx-background-color: dimgray;
+}
+
+.list-cell:selected {
+    -fx-background-color:rgb(105.0,0.0,153.0) ;
+}
+
+.alert.information.dialog-pane, .alert.warning.dialog-pane, .alert.error.dialog-pane {
+	-fx-background-color: black;
+}

src/main/resources/css/light.css

@@ -1,3 +1,3 @@
-.button{
-	-fx-background-color: snow;
+.button, .list-cell:selected{
+	-fx-background-color: orangered;
 }

src/main/resources/fxml/ChatScene.fxml

@@ -5,6 +5,7 @@
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ListView?>
 <?import javafx.scene.control.TextArea?>
+<?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.RowConstraints?>
@@ -22,12 +23,51 @@
 		<RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="15.0" prefHeight="100.0" vgrow="SOMETIMES" />
 	</rowConstraints>
 	<children>
-		<ListView fx:id="userList" onMouseClicked="#userListClicked" prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1" GridPane.rowSpan="2147483647" />
-		<Label fx:id="contactLabel" prefHeight="16.0" prefWidth="250.0" text="Select a contact to chat with" GridPane.columnSpan="2" />
-		<Button fx:id="settingsButton" mnemonicParsing="true" onAction="#settingsButtonClicked" text="_Settings" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-		<ListView fx:id="messageList" prefHeight="257.0" prefWidth="155.0" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="1" GridPane.rowSpan="2" />
-		<Button fx:id="postButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#postMessage" prefHeight="10.0" prefWidth="65.0" text="_Post" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
-      	<TextArea fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="200.0" prefWidth="200.0" wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="3" />
+		<ListView fx:id="userList" onMouseClicked="#userListClicked" prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1" GridPane.rowSpan="2147483647">
+         <GridPane.margin>
+            <Insets bottom="10.0" left="10.0" right="5.0" top="5.0" />
+         </GridPane.margin>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding></ListView>
+		<Label fx:id="contactLabel" prefHeight="16.0" prefWidth="250.0" text="Select a contact to chat with" GridPane.columnSpan="2">
+         <GridPane.margin>
+            <Insets bottom="5.0" left="10.0" right="5.0" top="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="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+         <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></Button>
+		<ListView fx:id="messageList" prefHeight="257.0" prefWidth="155.0" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="1" GridPane.rowSpan="2">
+         <GridPane.margin>
+            <Insets bottom="5.0" left="5.0" right="10.0" top="5.0" />
+         </GridPane.margin>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding></ListView>
+		<Button fx:id="postButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#postMessage" prefHeight="10.0" prefWidth="65.0" text="_Post" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER">
+         <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>
+         <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></Button>
+      	<TextArea fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="200.0" prefWidth="200.0" wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="3">
+         <GridPane.margin>
+            <Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
+         </GridPane.margin>
+         <opaqueInsets>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </opaqueInsets></TextArea>
       <Button mnemonicParsing="true" onAction="#addContactButtonClicked" text="_Add Contacts" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER">
          <padding>
             <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -36,13 +76,19 @@
             <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
          </GridPane.margin>
       </Button>
-      <Label fx:id="remainingChars" disable="true" 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">
+      <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" left="5.0" right="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>
 	</children>
 </GridPane>

src/main/resources/fxml/ContactSearchScene.fxml

@@ -23,30 +23,45 @@
                   <Tooltip text="Enter a name. If an account by that name exists, it will be displayed below." wrapText="true" />
                </tooltip>
             </TextField>
-            <Button fx:id="clearButton" disable="true" mnemonicParsing="true" onAction="#clear" text="Clea_r">
+            <Button fx:id="clearButton" disable="true" mnemonicParsing="true" onAction="#clear" prefHeight="26.0" prefWidth="110.0" text="Clea_r">
                <tooltip>
                   <Tooltip autoHide="true" text="Clears the text to the left and the elements below" wrapText="true" />
                </tooltip>
+               <HBox.margin>
+                  <Insets bottom="5.0" left="5.0" right="10.0" top="5.0" />
+               </HBox.margin>
+               <padding>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </padding>
             </Button>
-            <Button fx:id="searchButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#suggestContacts" prefHeight="26.0" prefWidth="71.0" text="_Search" textOverrun="LEADING_WORD_ELLIPSIS">
+            <Button fx:id="searchButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#suggestContacts" prefHeight="26.0" prefWidth="124.0" text="_Search" textOverrun="LEADING_WORD_ELLIPSIS">
                <padding>
                   <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                </padding>
                <HBox.margin>
-                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+                  <Insets bottom="5.0" right="20.0" top="5.0" />
                </HBox.margin>
                <tooltip>
                   <Tooltip autoHide="true" text="Search for accounts with the name entered to the left" wrapText="true" />
                </tooltip>
             </Button>
-            <Button mnemonicParsing="false" onAction="#newGroupButtonClicked" text="New Group">
+            <Button mnemonicParsing="false" onAction="#newGroupButtonClicked" prefHeight="26.0" prefWidth="139.0" text="New Group">
                <HBox.margin>
-                  <Insets left="100.0" />
+                  <Insets bottom="5.0" left="20.0" right="5.0" top="5.0" />
                </HBox.margin>
+               <padding>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </padding>
             </Button>
          </children>
       </HBox>
-      <ListView fx:id="contactList" onMouseClicked="#contactListClicked" prefHeight="314.0" prefWidth="600.0" />
+      <ListView fx:id="contactList" onMouseClicked="#contactListClicked" prefHeight="314.0" prefWidth="600.0">
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding>
+         <VBox.margin>
+            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+         </VBox.margin></ListView>
       <Button fx:id="backButton" cancelButton="true" mnemonicParsing="true" onAction="#backButtonClicked" text="_Back">
          <VBox.margin>
             <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />

src/main/resources/fxml/GroupCreationScene.fxml

@@ -31,9 +31,27 @@
          <font>
             <Font size="16.0" />
          </font>
+         <VBox.margin>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </VBox.margin>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding>
       </Label>
-      <ListView fx:id="contactList" prefHeight="314.0" prefWidth="600.0" />
-      <Button mnemonicParsing="false" onAction="#sendGroupObject" text="Create" />
+      <ListView fx:id="contactList" prefHeight="314.0" prefWidth="600.0">
+         <VBox.margin>
+            <Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
+         </VBox.margin>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding></ListView>
+      <Button mnemonicParsing="false" onAction="#sendGroupObject" text="Create">
+         <VBox.margin>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </VBox.margin>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding></Button>
       <Button fx:id="backButton" cancelButton="true" mnemonicParsing="true" onAction="#backButtonClicked" text="_Back">
          <VBox.margin>
             <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />

src/main/resources/fxml/LoginScene.fxml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ButtonBar?>
 <?import javafx.scene.control.CheckBox?>
@@ -12,13 +13,18 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-
 <VBox prefHeight="206.0" prefWidth="440.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.LoginScene">
    <children>
 				<Label text="User Login">
 					<font>
 						<Font size="26.0" />
 					</font>
+         <VBox.margin>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </VBox.margin>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding>
 				</Label>
 				<GridPane>
 					<columnConstraints>
@@ -31,19 +37,65 @@
 						<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 					</rowConstraints>
 					<children>
-						<Label text="User Name:" />
-						<Label text="Password" GridPane.rowIndex="1" />
-						<Label fx:id="repeatPasswordLabel" text="Repeat Password:" visible="false" GridPane.rowIndex="2" />
-						<TextField fx:id="userTextField" GridPane.columnIndex="1" />
-						<PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="1" />
-						<PasswordField fx:id="repeatPasswordField" promptText="Repeat the chosen password" visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2" />
+						<Label text="User Name:">
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </GridPane.margin>
+               <padding>
+                  <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
+               </padding></Label>
+						<Label text="Password" GridPane.rowIndex="1">
+               <padding>
+                  <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
+               </padding>
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </GridPane.margin></Label>
+						<Label fx:id="repeatPasswordLabel" text="Repeat Password:" visible="false" GridPane.rowIndex="2">
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </GridPane.margin>
+               <padding>
+                  <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
+               </padding></Label>
+						<TextField fx:id="userTextField" GridPane.columnIndex="1">
+               <GridPane.margin>
+                  <Insets bottom="10.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></TextField>
+						<PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets bottom="10.0" left="5.0" right="5.0" top="10.0" />
+               </GridPane.margin>
+               <padding>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </padding></PasswordField>
+						<PasswordField fx:id="repeatPasswordField" promptText="Repeat the chosen password" visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="10.0" />
+               </GridPane.margin>
+               <padding>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </padding></PasswordField>
 					</children>
 				</GridPane>
-				<CheckBox fx:id="registerCheckBox" mnemonicParsing="true" onAction="#registerCheckboxChanged" prefHeight="17.0" prefWidth="181.0" text="_Register" />
+				<CheckBox fx:id="registerCheckBox" mnemonicParsing="true" onAction="#registerCheckboxChanged" prefHeight="17.0" prefWidth="181.0" text="_Register">
+         <padding>
+            <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
+         </padding>
+         <VBox.margin>
+            <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
+         </VBox.margin></CheckBox>
       <Label fx:id="connectionLabel" />
       <ButtonBar prefHeight="40.0" prefWidth="200.0">
         <buttons>
-            <Button mnemonicParsing="false" onAction="#abortLogin" text="Close" />
+            <Button mnemonicParsing="false" onAction="#abortLogin" text="Close">
+               <padding>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </padding>
+            </Button>
             <Button mnemonicParsing="false" onAction="#offlineModeButtonPressed" text="Offline mode" />
           <Button defaultButton="true" mnemonicParsing="false" onAction="#loginButtonPressed" text="Login" />
         </buttons>

src/main/resources/fxml/SettingsScene.fxml

@@ -9,16 +9,37 @@
 
 <VBox alignment="TOP_RIGHT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.SettingsScene">
 	<children>
-		<HBox prefHeight="100.0" prefWidth="200.0">
+		<HBox prefHeight="389.0" prefWidth="600.0">
          <children>
-            <ListView fx:id="settingsList" onMouseClicked="#settingsListClicked" prefHeight="200.0" prefWidth="200.0" />
-            <TitledPane fx:id="titledPane" collapsible="false" prefHeight="200.0" prefWidth="200.0" />
+            <ListView fx:id="settingsList" onMouseClicked="#settingsListClicked" prefHeight="200.0" prefWidth="200.0">
+               <opaqueInsets>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </opaqueInsets>
+               <HBox.margin>
+                  <Insets bottom="10.0" left="10.0" right="5.0" top="10.0" />
+               </HBox.margin>
+               <padding>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </padding></ListView>
+            <TitledPane fx:id="titledPane" collapsible="false" prefHeight="325.0" prefWidth="300.0">
+               <HBox.margin>
+                  <Insets bottom="10.0" left="5.0" right="10.0" top="10.0" />
+               </HBox.margin>
+               <padding>
+                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+               </padding></TitledPane>
          </children>
 		</HBox>
       <Button defaultButton="true" mnemonicParsing="true" onMouseClicked="#backButtonClicked" text="_Back">
          <opaqueInsets>
             <Insets />
          </opaqueInsets>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding>
+         <VBox.margin>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </VBox.margin>
       </Button>
 	</children>
 </VBox>