Initial commit

.gitignore

@@ -0,0 +1,6 @@
+.gradle/
+.idea/
+
+*.iml
+*/out
+*/build/

build.gradle

@@ -0,0 +1,15 @@
+buildscript {
+    dependencies {
+        classpath group: 'de.dynamicfiles.projects.gradle.plugins', name: 'javafx-gradle-plugin', version: '8.8.2'
+    }
+    repositories {
+        mavenLocal()
+        mavenCentral()
+
+    }
+}
+
+allprojects {
+
+}
+apply plugin: 'java'

fasel-jfx/build.gradle

@@ -0,0 +1,26 @@
+apply plugin: 'java'
+apply plugin: 'javafx-gradle-plugin'
+
+repositories {
+    mavenLocal()
+    mavenCentral()
+}
+
+// Note that the test dependencies (junit, …) are inferred from the
+// sourceSet.test of the core subproject
+dependencies {
+    implementation 'com.jfoenix:jfoenix:8.0.7'
+}
+
+repositories {
+    mavenLocal()
+    mavenCentral()
+}
+
+jfx {
+    // minimal requirement for jfxJar-task
+    mainClass = 'de.vanitasvitae.fasel.sample.Main'
+
+    // minimal requirement for jfxNative-task
+    vendor = 'vanitasvitae'
+}

fasel-jfx/src/main/java/de/vanitasvitae/fasel/sample/Controller.java

@@ -0,0 +1,4 @@
+package de.vanitasvitae.fasel.sample;
+
+public class Controller {
+}

fasel-jfx/src/main/java/de/vanitasvitae/fasel/sample/JavaFXTrayIconSample.java

@@ -0,0 +1,180 @@
+package de.vanitasvitae.fasel.sample;
+import javafx.application.*;
+import javafx.geometry.Pos;
+import javafx.scene.*;
+import javafx.scene.control.Label;
+import javafx.scene.layout.*;
+import javafx.scene.paint.Color;
+import javafx.stage.*;
+
+import javax.imageio.ImageIO;
+import java.io.IOException;
+import java.net.URL;
+import java.text.*;
+import java.util.*;
+
+// Java 8 code
+public class JavaFXTrayIconSample extends Application {
+
+    // one icon location is shared between the application tray icon and task bar icon.
+    // you could also use multiple icons to allow for clean display of tray icons on hi-dpi devices.
+    private static final String iconImageLoc =
+            "http://icons.iconarchive.com/icons/scafer31000/bubble-circle-3/16/GameCenter-icon.png";
+
+    // application stage is stored so that it can be shown and hidden based on system tray icon operations.
+    private Stage stage;
+
+    // a timer allowing the tray icon to provide a periodic notification event.
+    private Timer notificationTimer = new Timer();
+
+    // format used to display the current time in a tray icon notification.
+    private DateFormat timeFormat = SimpleDateFormat.getTimeInstance();
+
+    // sets up the javafx application.
+    // a tray icon is setup for the icon, but the main stage remains invisible until the user
+    // interacts with the tray icon.
+    @Override public void start(final Stage stage) {
+        // stores a reference to the stage.
+        this.stage = stage;
+
+        // instructs the javafx system not to exit implicitly when the last application window is shut.
+        Platform.setImplicitExit(false);
+
+        // sets up the tray icon (using awt code run on the swing thread).
+        javax.swing.SwingUtilities.invokeLater(this::addAppToTray);
+
+        // out stage will be translucent, so give it a transparent style.
+        stage.initStyle(StageStyle.TRANSPARENT);
+
+        // create the layout for the javafx stage.
+        StackPane layout = new StackPane(createContent());
+        layout.setStyle(
+                "-fx-background-color: rgba(255, 255, 255, 0.5);"
+        );
+        layout.setPrefSize(300, 200);
+
+        // this dummy app just hides itself when the app screen is clicked.
+        // a real app might have some interactive UI and a separate icon which hides the app window.
+        layout.setOnMouseClicked(event -> stage.hide());
+
+        // a scene with a transparent fill is necessary to implement the translucent app window.
+        Scene scene = new Scene(layout);
+        scene.setFill(Color.TRANSPARENT);
+
+        stage.setScene(scene);
+    }
+
+    /**
+     * For this dummy app, the (JavaFX scenegraph) content, just says "hello, world".
+     * A real app, might load an FXML or something like that.
+     *
+     * @return the main window application content.
+     */
+    private Node createContent() {
+        Label hello = new Label("hello, world");
+        hello.setStyle("-fx-font-size: 40px; -fx-text-fill: forestgreen;");
+        Label instructions = new Label("(click to hide)");
+        instructions.setStyle("-fx-font-size: 12px; -fx-text-fill: orange;");
+
+        VBox content = new VBox(10, hello, instructions);
+        content.setAlignment(Pos.CENTER);
+
+        return content;
+    }
+
+    /**
+     * Sets up a system tray icon for the application.
+     */
+    private void addAppToTray() {
+        try {
+            // ensure awt toolkit is initialized.
+            java.awt.Toolkit.getDefaultToolkit();
+
+            // app requires system tray support, just exit if there is no support.
+            if (!java.awt.SystemTray.isSupported()) {
+                System.out.println("No system tray support, application exiting.");
+                Platform.exit();
+            }
+
+            // set up a system tray icon.
+            java.awt.SystemTray tray = java.awt.SystemTray.getSystemTray();
+            URL imageLoc = new URL(
+                    iconImageLoc
+            );
+            java.awt.Image image = ImageIO.read(imageLoc);
+            java.awt.TrayIcon trayIcon = new java.awt.TrayIcon(image);
+
+            // if the user double-clicks on the tray icon, show the main app stage.
+            trayIcon.addActionListener(event -> Platform.runLater(this::showStage));
+
+            // if the user selects the default menu item (which includes the app name), 
+            // show the main app stage.
+            java.awt.MenuItem openItem = new java.awt.MenuItem("hello, world");
+            openItem.addActionListener(event -> Platform.runLater(this::showStage));
+
+            // the convention for tray icons seems to be to set the default icon for opening
+            // the application stage in a bold font.
+            java.awt.Font defaultFont = java.awt.Font.decode(null);
+            java.awt.Font boldFont = defaultFont.deriveFont(java.awt.Font.BOLD);
+            openItem.setFont(boldFont);
+
+            // to really exit the application, the user must go to the system tray icon
+            // and select the exit option, this will shutdown JavaFX and remove the
+            // tray icon (removing the tray icon will also shut down AWT).
+            java.awt.MenuItem exitItem = new java.awt.MenuItem("Exit");
+            exitItem.addActionListener(event -> {
+                notificationTimer.cancel();
+                Platform.exit();
+                tray.remove(trayIcon);
+            });
+
+            // setup the popup menu for the application.
+            final java.awt.PopupMenu popup = new java.awt.PopupMenu();
+            popup.add(openItem);
+            popup.addSeparator();
+            popup.add(exitItem);
+            trayIcon.setPopupMenu(popup);
+
+            // create a timer which periodically displays a notification message.
+            notificationTimer.schedule(
+                    new TimerTask() {
+                        @Override
+                        public void run() {
+                            javax.swing.SwingUtilities.invokeLater(() ->
+                                trayIcon.displayMessage(
+                                        "hello",
+                                        "The time is now " + timeFormat.format(new Date()),
+                                        java.awt.TrayIcon.MessageType.INFO
+                                )
+                            );
+                        }
+                    },
+                    5_000,
+                    60_000
+            );
+
+            // add the application tray icon to the system tray.
+            tray.add(trayIcon);
+        } catch (java.awt.AWTException | IOException e) {
+            System.out.println("Unable to init system tray");
+            e.printStackTrace();
+        }
+    }
+
+    /**
+     * Shows the application stage and ensures that it is brought ot the front of all stages.
+     */
+    private void showStage() {
+        if (stage != null) {
+            stage.show();
+            stage.toFront();
+        }
+    }
+
+    public static void main(String[] args) throws IOException, java.awt.AWTException {
+        // Just launches the JavaFX application.
+        // Due to way the application is coded, the application will remain running
+        // until the user selects the Exit menu option from the tray icon.
+        launch(args);
+    }
+}

fasel-jfx/src/main/java/de/vanitasvitae/fasel/sample/LoginController.java

@@ -0,0 +1,60 @@
+package de.vanitasvitae.fasel.sample;
+
+import java.io.IOException;
+
+import com.jfoenix.controls.JFXButton;
+import com.jfoenix.controls.JFXPasswordField;
+import com.jfoenix.controls.JFXTextField;
+import javafx.event.ActionEvent;
+import javafx.event.EventHandler;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Parent;
+import javafx.scene.Scene;
+import javafx.scene.input.MouseEvent;
+
+public class LoginController {
+
+    @FXML
+    private JFXTextField text_username;
+
+    @FXML
+    private JFXPasswordField text_password;
+
+    @FXML
+    private JFXButton button_login;
+
+    private Main main;
+
+    @FXML
+    private void initialize() {
+        button_login.setOnAction(new EventHandler<ActionEvent>() {
+            @Override
+            public void handle(ActionEvent actionEvent) {
+                String username = text_username.getText();
+                String password = text_password.getText();
+
+                try {
+                    switchToMainScene();
+                } catch (IOException e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
+
+    private void switchToMainScene() throws IOException {
+        FXMLLoader loader = new FXMLLoader();
+        loader.setLocation(getClass().getResource("/fxml/sample.fxml"));
+        Parent root = loader.load();
+
+        Scene scene = new Scene(root, 1200, 741);
+        main.getPrimaryStage().setTitle("Hello World");
+        main.getPrimaryStage().setScene(scene);
+        // primaryStage.show();
+    }
+
+    public void setApplication(Main main) {
+        this.main = main;
+    }
+}

fasel-jfx/src/main/java/de/vanitasvitae/fasel/sample/Main.java

@@ -0,0 +1,36 @@
+package de.vanitasvitae.fasel.sample;
+
+import javafx.application.Application;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Parent;
+import javafx.scene.Scene;
+import javafx.stage.Stage;
+
+public class Main extends Application {
+
+    private Stage primaryStage;
+
+    @Override
+    public void start(Stage primaryStage) throws Exception{
+        this.primaryStage = primaryStage;
+        FXMLLoader loader = new FXMLLoader();
+        loader.setLocation(getClass().getResource("/fxml/layout/login.fxml"));
+
+        Parent root = loader.load();
+        loader.setLocation(getClass().getResource("/fxml/fragment/login.fxml"));
+        LoginController controller = loader.getController();
+        controller.setApplication(this);
+        Scene scene = new Scene(root, 1200, 741);
+        primaryStage.setTitle("Hello World");
+        primaryStage.setScene(scene);
+        primaryStage.show();
+    }
+
+    public Stage getPrimaryStage() {
+        return primaryStage;
+    }
+
+    public static void main(String[] args) {
+        launch(args);
+    }
+}

fasel-jfx/src/main/resources/css/material-fx-v0_3.css

@@ -0,0 +1,801 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - AGIX | Innovative Engineering
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 	SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+
+/*
+ *   This is a Material Design CSS for JavaFX
+ */
+
+/*******************************************************************************
+ *                                                                             *
+ * Root					 				                       				   *
+ *                                                                             *
+ ******************************************************************************/
+.root {
+	/* Swatch Colors - Blue*/
+	-swatch-100: #BBDEFB;
+	-swatch-200: #90CAF9;
+	-swatch-300: #64BEF6;
+	-swatch-400: #42A5F5;
+	-swatch-500: #2196F3;
+	/*default text */
+	-fx-text-base-color: rgb(100.0, 100.0, 100.0);
+	-fx-text-button-normal: -swatch-500;
+	-fx-text-button-colored: rgb(255.0, 255.0, 255.0);
+	-fx-text-button-text: rgb(100.0, 100.0, 100.0);
+	-fx-text-title-color: rgb(45.0, 45.0, 45.0);
+	-fx-text-subtitle-color: rgb(65.0, 65.0, 65.0);
+	-fx-text-control-title-color: rgb(130.0, 130.0, 130.0);
+	-fx-text-fill: -fx-text-base-color;
+	-dark: rgb(47.0, 52.0, 57.0);
+	-fx-background-color: -dark;
+	/*default font */
+	-fx-font-family: 'Roboto Medium';
+	-fx-font-size: 14.0px;
+	-fx-disabled-opacity: 0.6;
+	/*default colors */
+	-swatch-grey: rgb(200.0, 200.0, 200.0);
+	-swatch-dark-grey: rgb(150.0, 150.0, 150.0);
+	-swatch-light-grey: rgb(230.0, 230.0, 230.0);
+	-swatch-toolbar: rgb(245.0, 245.0, 245.0);
+	-swatch-toolbar-selected: rgb(215.0, 215.0, 215.0);
+	/*
+     Modena colors
+     */
+	-fx-dark-text-color: white; /* Text color when selected*/
+	-fx-mid-text-color: -fx-text-base-color;
+	-fx-light-text-color: -swatch-light-grey;
+	-fx-body-color: white;
+	/* A bright blue for the focus indicator of objects. Typically used as the
+     * first color in -fx-background-color for the "focused" pseudo-class. Also
+     * typically used with insets of -1.4 to provide a glowing effect.
+     */
+	-fx-focus-color: -swatch-400;
+	-fx-faint-focus-color: -swatch-200;
+	/* A bright blue for highlighting/accenting objects.  For example: selected
+     * text; selected items in menus, lists, trees, and tables; progress bars */
+	-fx-accent: -swatch-400;
+	-fx-dark-text-color: white;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Material Design - Cards 				                       				   *
+ *                                                                             *
+ ******************************************************************************/
+.card {
+	-fx-background-color: rgb(255.0, 255.0, 255.0);
+	-fx-background-radius: 4.0;
+	-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.15), 6.0, 0.7, 0.0,
+		1.5);
+	-fx-padding: 16 16 16 16;
+}
+
+.card-title {
+	-fx-font-size: 20.0px;
+	-fx-padding: 5 0 5 0;
+}
+
+.card-title .text {
+	-fx-fill: -fx-text-title-color;
+}
+
+.card-subtitle {
+	-fx-font-size: 16.0px;
+	-fx-padding: 5 0 5 0;
+}
+
+.card-subtitle .text {
+	-fx-fill: -fx-text-subtitle-color;
+}
+
+.control-label {
+	-fx-font-size: 12.0px;
+	-fx-padding: 16 0 0 0;
+}
+
+.control-label .text {
+	-fx-fill: -fx-text-control-title-color;
+}
+
+.card-button {
+	-fx-effect: null;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Button & ToggleButton                                                       *
+ *                                                                             *
+ ******************************************************************************/
+.button-raised {
+	-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.30), 6.0, 0.3, 0,
+		1);
+	-fx-background-color: rgb(250, 250, 250);
+}
+
+.button-flat {
+	-fx-effect: null;
+	-fx-background-color: transparent;
+}
+
+.toggle-button, .button {
+	-fx-text-fill: -fx-text-button-normal;
+	-fx-font-family: 'Roboto';
+	-fx-font-weight: bold;
+	-fx-background-insets: 0.0;
+	-fx-background-radius: 4.0;
+	-fx-padding: 0.7em;
+	-fx-alignment: CENTER;
+}
+
+.button-raised .button .text, .button-flat .button .text {
+	-fx-text-weight: Bold;
+}
+
+.button:default {
+	-fx-background-color: -swatch-500;
+	-fx-text-fill: -fx-text-button-colored;
+}
+
+.toggle-button:focused, .button:focused, .button:default:focused {
+	-fx-background-color: -swatch-light-grey;
+}
+
+.toggle-button:focused:selected {
+	-fx-background-color: derive(-swatch-500, 50.0%),
+		derive(-swatch-500, -20.0%);
+	-fx-background-insets: 0.0, 0.2em;
+	-fx-text-fill: -fx-text-button-colored;
+}
+
+.toggle-button:armed, .toggle-button:selected, .button:armed, .button:default:armed
+	{
+	-fx-background-color: -swatch-grey;
+	-fx-text-fill: -fx-text-button-colored;
+}
+
+.icon-button {
+	-fx-background-color: transparent;
+	-fx-pref-height: 42;
+	-fx-pref-width: 42;
+	-fx-min-height: 42;
+	-fx-min-width: 42;
+	-fx-padding: 0;
+}
+
+.icon-button .text {
+	-fx-font-family: 'MaterialDesignIconicFont';
+	-fx-font-size: 24px;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ComboBox, ChoiceBox COMMON                                                 *
+ *                                                                             *
+ ******************************************************************************/
+.combo-box-base, .choice-box {
+	-fx-background-color: transparent;
+	-fx-border-color: -swatch-grey;
+	-fx-border-width: 0 0 2 0;
+	-fx-background-radius: 0;
+	-fx-border-radius: 0;
+}
+
+.combo-box:focused, .choice-box:focused {
+	-fx-border-color: -swatch-500;
+}
+
+.combo-box-base>.label, .choice-box>.label {
+	-fx-padding: 0.7em 0.7em 0.7em 0em;
+}
+
+.combo-box-base>.arrow-button, .choice-box>.open-button {
+	-fx-padding: 1.2em 0.7em 1.2em 0.5em;
+	-fx-background-radius: 0.0 2.0 2.0 0.0;
+}
+
+.combo-box-base>.arrow-button>.arrow, .choice-box>.open-button>.arrow {
+	-fx-background-color: -swatch-grey;
+}
+
+.combo-box-base .arrow-button:hover .arrow, .spinner .increment-arrow-button:hover .increment-arrow,
+	.spinner .decrement-arrow-button:hover .decrement-arrow {
+	-fx-background-color: -swatch-dark-grey;
+}
+
+.menu-item:focused {
+	-fx-background-color: -swatch-light-grey;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * CheckBox                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+.check-box {
+	-fx-padding: 10;
+}
+
+.check-box .text {
+	-fx-fill: -fx-text-base-color;
+}
+
+.check-box>.box, .check-box>.box.unfocused, .check-box:disabled>.box,
+	.check-box:indeterminate>.box {
+	-fx-border-radius: 4.0;
+	-fx-border-color: -swatch-grey;
+	-fx-border-width: 2;
+	-fx-background-radius: 4;
+	-fx-background-color: transparent;
+	-fx-padding: 1;
+}
+
+.check-box:selected>.box {
+	-fx-border-color: -swatch-500;
+	-fx-background-color: -swatch-500;
+}
+
+.check-box:focused>.box {
+	-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.30), 6.0, 0.3, 0,
+		0);
+}
+
+.check-box:selected>.box>.mark {
+	-fx-background-color: white;
+}
+
+.check-box:indeterminate>.box>.mark {
+	-fx-background-color: -swatch-grey;
+	-fx-padding: 0.45em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ChoiceBox                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+.context-menu {
+	-fx-background-color: rgb(255.0, 255.0, 255.0, 0.95);
+	-fx-background-radius: 2.0;
+}
+
+.radio-menu-item, .check-menu-item {
+	-fx-padding: 0.7em 0.7em 0.7em 0em;
+}
+
+.radio-menu-item:checked .label, .check-menu-item:checked .label {
+	-fx-text-fill: -swatch-500;
+}
+
+.radio-menu-item:checked>.left-container>.radio, .check-menu-item:checked>.left-container>.check
+	{
+	-fx-background-color: -swatch-dark-grey;
+	-fx-padding: 0.68em 0.5em 0.0em 0.0em;
+	-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.2), 0.0, 0.0, 0.0,
+		1.0);
+}
+
+.radio-menu-item>.left-container>.radio, .check-menu-item>.left-container>.check
+	{
+	-fx-background-color: transparent;
+	-fx-padding: 0.68em 0.68em 0.0em 0.0em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ComboBox                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+.combo-box .list-cell {
+	-fx-padding: 0.7em 0.7em 0.7em 0em;
+}
+
+.popup-overlay {
+	-fx-background-color: white;
+	-fx-border-color: -swatch-grey;
+	-fx-border-width: 0 0 2 0;
+	-fx-background-radius: 0;
+	-fx-border-radius: 0;
+}
+
+.title-bar {
+	-fx-padding: 10;
+}
+
+.title-bar .icon {
+	-fx-alignment: center-left;
+	-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.2), 0.0, 0.0, 0.0,
+		1.0);
+}
+
+.title-bar .title-label {
+	-fx-padding: 0 10 0 10;
+	-fx-alignment: center;
+	-fx-font-size: 36;
+	-fx-font-weight: bolder;
+}
+
+.content-area {
+	-fx-background-color: -dark;
+}
+
+.content-background {
+	-fx-background-color: white;
+	-fx-background-radius: 0.0 0.0 11.0 11.0;
+	-fx-padding: 0 10 10 10;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Date Picker			                                                       *
+ *                                                                             *
+ ******************************************************************************/
+.date-picker-popup .button {
+	-fx-background-color: -swatch-500;
+}
+
+.date-picker-popup>.month-year-pane {
+	-fx-background-color: -swatch-500;
+}
+
+.date-picker-popup>*>.spinner>.button>.left-arrow, .date-picker-popup>*>.spinner>.button>.right-arrow
+	{
+	-fx-background-color: white;
+}
+
+.date-picker-popup>*>.spinner {
+	-fx-border-width: 0;
+}
+
+.date-picker-popup>*>.spinner>.label {
+	-fx-text-fill: white;
+	-fx-font-weight: bold;
+}
+
+.date-picker-popup>*>.day-name-cell, .date-picker-popup>*>.week-number-cell
+	{
+	-fx-font-weight: normal;
+	-fx-text-fill: -swatch-dark-grey;
+	-fx-font-size: 1em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Date picker						                                           *
+ *                                                                             *
+ ******************************************************************************/
+.date-picker .arrow-button {
+	-fx-background-color: transparent;
+}
+
+.date-picker .arrow-button .arrow {
+	-fx-background-insets: -4;
+}
+
+.date-picker .date-picker-display-node {
+	-fx-border-width: 0;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * HTML Editor 				                       			  				   *
+ *                                                                             *
+ ******************************************************************************/
+.html-editor {
+	-fx-background-color: white;
+	-fx-border-width: 2 0 2 0;
+	-fx-border-color: -swatch-grey;
+}
+
+.html-editor .web-view {
+	-fx-border-color: grey;
+	-fx-border-width: grey;
+}
+
+.web-view {
+	-fx-font-smoothing-type: gray;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Label                                                                       *
+ *                                                                             *
+ ******************************************************************************/
+.label {
+	-fx-text-fill: -fx-text-base-color;
+}
+
+.label:disabled {
+	-fx-opacity: -fx-disabled-opacity;
+}
+
+.label:show-mnemonics>.mnemonic-underline {
+	-fx-stroke: -fx-text-base-color;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * List, Tree, Table COMMON                                                    *
+ *                                                                             *
+ ******************************************************************************/
+.list-view:focused .list-cell:filled:focused:selected {
+	-fx-background-color: -swatch-light-grey;
+	-fx-text-fill: -swatch-500;
+}
+
+.list-view:hover .list-cell:hover {
+	-fx-background-color: -swatch-light-grey;
+	-fx-text-fill: -fx-text-base-color;
+}
+
+.list-cell {
+	-fx-cell-size: 40;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ProgressBar                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+.progress-bar>.track {
+	-fx-background-color: derive(-swatch-grey, 50.0%);
+	-fx-background-radius: 2.0;
+	-fx-padding: 0.0;
+}
+
+.progress-bar>.bar {
+	-fx-background-color: -swatch-500;
+	-fx-background-radius: 2.0;
+	-fx-background-insets: 0.0;
+	-fx-border-width: 0.0;
+	-fx-effect: null;
+}
+
+.progress-bar:indeterminate>.bar {
+	-fx-background-color: derive(-swatch-500, 50.0%);
+	-fx-background-radius: 2.0;
+	-fx-background-insets: 0.0;
+	-fx-border-width: 0.0;
+	-fx-effect: null;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ProgressIndicator                                                           *
+ *                                                                             *
+ ******************************************************************************/
+.progress-indicator>.spinner {
+	-fx-border-width: 0;
+}
+
+.progress-indicator>.determinate-indicator>.indicator {
+	-fx-background-color: rgb(255.0, 255.0, 255.0, 0.5);
+	-fx-padding: 0.0;
+}
+
+.progress-indicator>.determinate-indicator>.progress {
+	-fx-background-color: -swatch-500;
+}
+
+.progress-indicator>.determinate-indicator>.percentage {
+	-fx-fill: -fx-text-base-color;
+	-fx-translate-y: 0em;
+	-fx-padding: 0.0;
+	-fx-font-size: 11px;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * RadioButton                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+.radio-button {
+	-fx-padding: 10;
+}
+
+.radio-button .text {
+	-fx-fill: -fx-text-base-color;
+}
+
+.radio-button>.radio, .radio-button>.radio.unfocused, .radio-button:disabled>.radio,
+	.radio-button:selected>.radio {
+	-fx-border-radius: 100.0;
+	-fx-border-color: -swatch-grey;
+	-fx-border-width: 2;
+	-fx-background-radius: 100;
+	-fx-background-color: transparent;
+	-fx-padding: 3 3 3 3;
+}
+
+.radio-button:focused>.radio {
+	-fx-background-color: -swatch-100;
+}
+
+.radio-button:focused:armed>.radio {
+	-fx-background-color: -swatch-100;
+}
+
+.radio-button:selected>.radio>.dot {
+	-fx-background-color: -swatch-500;
+	-fx-background-insets: 0;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Separators		                   	                                       *
+ *                                                                             *
+ ******************************************************************************/
+.separator {
+	-fx-padding: 16 -16 16 -16;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Scroll Bar			                                                       *
+ *                                                                             *
+ ******************************************************************************/
+.scroll-bar:vertical>.track-background, .scroll-bar:horizontal>.track-background
+	{
+	-fx-background-color: -swatch-light-grey;
+	-fx-background-insets: 0.0;
+}
+
+.scroll-bar:vertical>.thumb, .scroll-bar:horizontal>.thumb {
+	-fx-background-color: -swatch-grey;
+	-fx-background-insets: 0.0;
+	-fx-background-radius: 4.0;
+}
+
+.scroll-bar>.increment-button, .scroll-bar>.decrement-button,
+	.scroll-bar:hover>.increment-button, .scroll-bar:hover>.decrement-button
+	{
+	-fx-background-color: transparent;
+}
+
+.scroll-bar>.increment-button>.increment-arrow, .scroll-bar>.decrement-button>.decrement-arrow
+	{
+	-fx-background-color: -swatch-dark-grey;
+}
+
+.scroll-bar>.track-background {
+	-fx-background-color: transparent;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Slider                                                                      *
+ *                                                                             *
+ ******************************************************************************/
+.slider {
+	-fx-padding: 10 0 10 0;
+}
+
+.slider:vertical {
+	-fx-padding: 0 10 0 10;
+}
+
+.slider>.track {
+	-fx-background-color: -swatch-grey;
+	-fx-background-insets: 1.5;
+}
+
+.slider>.thumb {
+	-fx-background-color: -swatch-500;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Spinner                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+.spinner {
+	-fx-background-color: transparent;
+	-fx-border-width: 0 0 2 0;
+	-fx-border-color: -swatch-grey;
+}
+
+.spinner:focused {
+	-fx-border-color: -swatch-500;
+}
+
+.spinner .text-field {
+	-fx-background-color: transparent;
+	-fx-background-radius: 0;
+	-fx-border-width: 0;
+	-fx-padding: 0.5em 0.5em 0.5em 0.1em;
+	-fx-prompt-text-fill: derive(-dark, 50.0%);
+	-fx-highlight-fill: rgb(94.0, 203.0, 234.0);
+}
+
+.spinner .increment-arrow-button, .spinner .decrement-arrow-button {
+	-fx-background-color: transparent;
+	-fx-fill: swatch-500;
+}
+
+.spinner .increment-arrow-button .increment-arrow, .spinner .decrement-arrow-button .decrement-arrow
+	{
+	-fx-background-color: -swatch-grey;
+}
+
+.spinner .increment-arrow-button, .spinner .decrement-arrow-button {
+	-fx-background-color: transparent;
+	-fx-fill: swatch-500;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Tables								                       				   *
+ *                                                                             *
+ ******************************************************************************/
+.table-view, .tree-table-view {
+	/* Constants used throughout the tableview. */
+	-fx-table-header-border-color: transparent;
+	-fx-table-cell-border-color: -fx-box-border; /* Horizontal Lines*/
+	-fx-background-color: transparent;
+}
+
+/* The column header row is made up of a number of column-header, one for each
+   TableColumn, and a 'filler' area that extends from the right-most column
+   to the edge of the tableview, or up to the 'column control' button. */
+.table-view .filler, .tree-table-view .filler, .table-view .column-header,
+	.tree-table-view .column-header {
+	-fx-size: 65;
+	-fx-border-style: null;
+	-fx-border-color: -swatch-grey;
+	-fx-border-width: 0 0 2 0;
+	-fx-background-color: transparent;
+}
+
+.table-view .show-hide-columns-button, .tree-table-view .show-hide-columns-button
+	{
+	-fx-background-color: transparent;
+}
+
+.table-view .column-header .label, .table-view .filler .label,
+	.table-view .column-drag-header .label, .tree-table-view .column-header .label,
+	.tree-table-view .filler .label, .tree-table-view .column-drag-header .label
+	{
+	-fx-alignment: CENTER_LEFT;
+}
+
+.table-view .column-header-background, .tree-table-view .column-header-background
+	{
+	-fx-background-color: transparent;
+}
+
+.table-row-cell, .tree-table-row-cell {
+	-fx-cell-size: 40px;
+}
+
+.table-cell {
+	-fx-border-color: transparent; /* Vertical Lines*/
+	-fx-border-width: 1;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Text, Text field & Text area                                                *
+ *                                                                             *
+ ******************************************************************************/
+.text {
+	-fx-font-smoothing-type: gray;
+}
+
+.text-area, .text-field {
+	-fx-background-color: transparent;
+	-fx-background-radius: 2.0;
+	-fx-padding: 0.5em 0.5em 0.5em 0.1em;
+	-fx-border-color: -swatch-grey;
+	-fx-border-width: 0 0 2 0;
+	-fx-prompt-text-fill: derive(-dark, 50.0%);
+	-fx-highlight-fill: rgb(94.0, 203.0, 234.0);
+}
+
+.text-area .text, .text-field>*>.text {
+	-fx-effect: null;
+	-fx-fill: -dark;
+}
+
+.text-area {
+	-fx-padding: 0.15em;
+}
+
+.text-area .content {
+	-fx-padding: 0.7em;
+	-fx-border-width: 0.0;
+	-fx-background-color: transparent;
+}
+
+.text-area:focused  .content {
+	-fx-background-color: transparent;
+}
+
+.text-area:focused, .text-field:focused {
+	-fx-border-color: -swatch-500;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Tool bar	& Menu bar		                       			  				   *
+ *                                                                             *
+ ******************************************************************************/
+.tool-bar, .menu-bar { /* top */
+	-fx-background-color: -swatch-toolbar;
+	-fx-border-width: 0 0 2 0;
+	-fx-border-color: -swatch-grey;
+	-fx-min-height: 48;
+	-fx-alignment: CENTER_LEFT;
+}
+
+.tool-bar .label {
+	-fx-font-size: 18;
+}
+
+.tool-bar .combo-box-base, .menu-bar .combo-base {
+	-fx-border-width: 0;
+}
+
+.tool-bar .button, .tool-bar .toggle-button {
+	-fx-background-color: -swatch-toolbar;
+	-fx-text-fill: -fx-text-base-color;
+	-fx-pref-height: 42;
+	-fx-pref-width: 42;
+	-fx-min-height: 42;
+	-fx-min-width: 42;
+	-fx-padding: 0;
+	-fx-background-radius: 0;
+}
+
+.tool-bar .button:pressed, .tool-bar .toggle-button:pressed, .tool-bar .toggle-button:selected
+	{
+	-fx-background-color: -swatch-grey;
+}
+
+.tool-bar .toggle-button {
+	-fx-background-color: -swatch-toolbar;
+}
+
+.tool-bar .separator {
+	-fx-padding: 5 10 5 10;
+}
+
+.toolbar-colored {
+	-fx-background-color: -swatch-500;
+	-fx-border-width: 0 0 2 0;
+	-fx-border-color: -swatch-grey;
+}
+
+.toolbar-colored .button, .toolbar-colored .toggle-button {
+	-fx-background-color: -swatch-500;
+	-fx-text-fill: white;
+}
+
+.toolbar-colored .button:pressed, .toolbar-colored .toggle-button:pressed,
+	.toolbar-colored .toggle-button:selected {
+	-fx-background-color: -swatch-200;
+}
+
+.toolbar-colored .text {
+	-fx-fill: white;
+}

fasel-jfx/src/main/resources/css/material/cards.css

@@ -0,0 +1,25 @@
+.card {
+	-fx-background-color: rgb(255.0, 255.0, 255.0);
+	-fx-background-radius: 4.0;
+	-fx-effect: dropshadow(gaussian, rgb(0.0, 0.0, 0.0, 0.15), 6.0, 0.7, 0.0,
+		1.5);
+	-fx-padding: 16 16 16 16;
+}
+
+.card-title {
+	-fx-font-size: 20.0px;
+	-fx-padding: 5 0 5 0;
+}
+
+.card-title .text {
+	-fx-fill: -fx-text-title-color;
+}
+
+.card-subtitle {
+	-fx-font-size: 16.0px;
+	-fx-padding: 5 0 5 0;
+}
+
+.card-subtitle .text {
+	-fx-fill: -fx-text-subtitle-color;
+}

fasel-jfx/src/main/resources/css/send_button.css

@@ -0,0 +1,11 @@
+.toggle-button {
+  -fx-graphic: url('/img/icons/baseline_send_black_18dp.png');
+  -fx-effect: null;
+  -fx-background-color: transparent;
+}
+
+.toggle-button:selected {
+  -fx-graphic: url('/img/icons/baseline_send_black_18dp.png');
+  -fx-effect: null;
+  -fx-background-color: transparent;
+}

fasel-jfx/src/main/resources/css/share_button.css

@@ -0,0 +1,11 @@
+.toggle-button {
+  -fx-graphic: url('/img/icons/baseline_attach_file_black_18dp.png');
+  -fx-effect: null;
+  -fx-background-color: transparent;
+}
+
+.toggle-button:selected {
+  -fx-graphic: url('/img/icons/baseline_attach_file_black_18dp.png');
+  -fx-effect: null;
+  -fx-background-color: transparent;
+}

fasel-jfx/src/main/resources/fxml/fragment/login.fxml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXPasswordField?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.layout.VBox?>
+<VBox prefWidth="300.0" prefHeight="150.0" minWidth="300.0" minHeight="150.0" maxWidth="300.0" maxHeight="150.0" fx:controller="de.vanitasvitae.fasel.sample.LoginController"
+      alignment="CENTER" spacing="8.0" styleClass="card" stylesheets="@../../css/material/cards.css" xmlns="http://javafx.com/javafx/8.0.162-ea" xmlns:fx="http://javafx.com/fxml/1">
+    <children>
+        <JFXTextField fx:id="text_username" promptText="Username" />
+        <JFXPasswordField fx:id="text_password" promptText="Password" />
+        <JFXButton fx:id="button_login" mnemonicParsing="false" styleClass="card-button" text="Login" />
+    </children>
+    <padding>
+        <Insets bottom="16.0" left="16.0" right="16.0" top="16.0" />
+    </padding>
+</VBox>

fasel-jfx/src/main/resources/fxml/layout/chat_input_toolbar.fxml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXTextArea?>
+<?import javafx.scene.control.ToggleButton?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.geometry.Insets?>
+<BorderPane xmlns="http://javafx.com/javafx"
+            xmlns:fx="http://javafx.com/fxml"
+            fx:controller="de.vanitasvitae.fasel.sample.Controller"
+            prefHeight="45.0" prefWidth="200.0">
+        <left>
+            <ToggleButton mnemonicParsing="false" stylesheets="@../../css/share_button.css" />
+        </left>
+        <center>
+            <JFXTextArea BorderPane.alignment="CENTER" promptText="Type here">
+                <padding>
+                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+                </padding>
+            </JFXTextArea>
+        </center>
+        <right>
+            <ToggleButton mnemonicParsing="false" stylesheets="@../../css/send_button.css" />
+        </right>
+</BorderPane>

fasel-jfx/src/main/resources/fxml/layout/login.fxml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
+
+<VBox alignment="CENTER" style="-fx-background-color: lightgrey;" xmlns="http://javafx.com/javafx/8.0.162-ea" xmlns:fx="http://javafx.com/fxml/1" >
+    <HBox alignment="CENTER" style="-fx-background-color: transparent;">
+        <fx:include source="../fragment/login.fxml" />
+    </HBox>
+</VBox>

fasel-jfx/src/main/resources/fxml/main_headerbar.fxml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXHamburger?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.BorderPane?>
+
+<AnchorPane prefHeight="45.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.162-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.vanitasvitae.fasel.sample.Controller">
+   <children>
+      <BorderPane prefHeight="45.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+         <left>
+            <JFXHamburger fx:id="main_headerbar_menu" prefHeight="45.0" prefWidth="45.0" BorderPane.alignment="CENTER">
+               <padding>
+                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+               </padding></JFXHamburger>
+         </left>
+         <center>
+            <JFXTextField fx:id="main_headerbar_search" promptText="Search..." BorderPane.alignment="CENTER">
+               <padding>
+                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+               </padding></JFXTextField>
+         </center>
+      </BorderPane>
+   </children>
+</AnchorPane>

fasel-jfx/src/main/resources/fxml/sample.fxml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXListView?>
+<?import javafx.scene.control.SplitPane?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.HBox?>
+<SplitPane dividerPositions="0.2993311036789298" prefHeight="314.0" prefWidth="657.0" BorderPane.alignment="CENTER" xmlns="http://javafx.com/javafx/8.0.162-ea" xmlns:fx="http://javafx.com/fxml/1">
+    <items>
+        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
+            <children>
+                <BorderPane prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                    <top>
+                        <fx:include source="main_headerbar.fxml" />
+                    </top>
+                    <center>
+                        <JFXListView prefHeight="355.0" prefWidth="177.0" />
+                    </center>
+                </BorderPane>
+            </children></AnchorPane>
+        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
+            <children>
+                <BorderPane prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                    <top>
+                        <HBox prefHeight="45.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
+                    </top>
+                    <center>
+                        <JFXListView prefHeight="355.0" prefWidth="177.0" />
+                    </center>
+                    <bottom>
+                        <fx:include source="layout/chat_input_toolbar.fxml" />
+                    </bottom>
+                </BorderPane>
+            </children>
+        </AnchorPane>
+    </items>
+</SplitPane>

settings.gradle

@@ -0,0 +1 @@
+include 'fasel-jfx'