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

Improved general appearance of Envoy, both in FXML and CSS
This commit is contained in:
delvh 2020-06-21 17:40:57 +02:00 committed by GitHub
commit 1387a3f81c
10 changed files with 255 additions and 59 deletions

View File

@ -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);
}
}
}

View File

@ -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);
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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