Changed GUI/CSS Styling

- removed the temporary CSS Styling in GUIThemes completely
- changed the position and styling of the layer buttons
- added the metrics table (not linked with an id yet)
- added test.png to test the CSS stylings of the layer buttons

scopviz/src/main/java/de/tu_darmstadt/informatik/tk/scopviz/ui/ButtonManager.java

@@ -295,7 +295,7 @@ public final class ButtonManager {
 		for (Button j : layerButtons) {
 			if (j.equals(currentButton)) {
 				j.setStyle(
-						"-fx-background-color: red, red, red, -fx-faint-focus-color, -fx-body-color; -fx-background-insets: -0.2, 1, 2, -1.4, 2.6; -fx-background-radius: 3, 2, 1, 4, 1;");
+						"-fx-background-color: #039ED3, #039ED3, #039ED3, -fx-faint-focus-color, -fx-body-color; -fx-background-insets: -0.2, 1, 2, -1.4, 2.6; -fx-background-radius: 3, 2, 1, 4, 1;");
 			} else {
 				j.setStyle("-fx-border-width: 0;");
 			}

scopviz/src/main/resources/GUITheme.css

@@ -1,114 +1,23 @@
-.background {
-    -fx-background-color: #FFFFFF;
+.underlayButton{
+	-fx-background-image: url('test.png');
+  -fx-background-repeat: no-repeat;
+  -fx-background-position: center
 }
 
-.label {
-    -fx-font-size: 11pt;
-    -fx-font-family: "Segoe UI Semibold";
-    -fx-text-fill: black;
-    -fx-opacity: 0.6;
+.operatorButton{
+	-fx-background-image: url('test.png');
+  -fx-background-repeat: no-repeat;
+  -fx-background-position: center
 }
 
-.label-bright {
-    -fx-font-size: 11pt;
-    -fx-font-family: "Segoe UI Semibold";
-    -fx-text-fill: black;
-    -fx-opacity: 1;
+.mappingButton{
+	-fx-background-image: url('test.png');
+  -fx-background-repeat: no-repeat;
+  -fx-background-position: center
 }
 
-.label-header {
-    -fx-font-size: 32pt;
-    -fx-font-family: "Segoe UI Light";
-    -fx-text-fill: black;
-    -fx-opacity: 1;
+.symbolRepButton{
+	-fx-background-image: url('test.png');
+  -fx-background-repeat: no-repeat;
+  -fx-background-position: center
 }
-
-.table-view {
-    -fx-base: #708090;
-    -fx-control-inner-background: #708090;
-    -fx-background-color: #708090;
-    -fx-table-cell-border-color: transparent;
-    -fx-table-header-border-color: transparent;
-    -fx-padding: 5;
-}
-
-.table-view .column-header-background {
-    -fx-background-color: transparent;
-}
-
-.table-view .column-header, .table-view .filler {
-    -fx-size: 35;
-    -fx-border-width: 0 0 1 0;
-    -fx-background-color: transparent;
-    -fx-border-color: 
-        transparent
-        transparent
-        derive(-fx-base, 80%) 
-        transparent;
-    -fx-border-insets: 0 10 1 0;
-}
-
-.table-view .column-header .label {
-    -fx-font-size: 20pt;
-    -fx-font-family: "Segoe UI Light";
-    -fx-text-fill: white;
-    -fx-alignment: center-left;
-    -fx-opacity: 1;
-}
-
-.table-view:focused .table-row-cell:filled:focused:selected {
-    -fx-background-color: -fx-focus-color;
-}
-
-.split-pane:horizontal > .split-pane-divider {
-    -fx-border-color: transparent #708090 transparent #708090;
-    -fx-background-color: transparent, derive(#708090,20%);
-}
-
-.split-pane {
-    -fx-padding: 1 0 0 0;
-}
-
-.menu-bar {
-    -fx-background-color: derive(#708090,20%);
-}
-
-.context-menu {
-    -fx-background-color: derive(#708090,50%);
-}
-
-.menu-bar .label {
-    -fx-font-size: 11pt;
-    -fx-font-family: "Segoe UI Light";
-    -fx-text-fill: white;
-    -fx-opacity: 0.9;
-}
-
-.menu .left-container {
-    -fx-background-color: white;
-}
-
-.text-field {
-    -fx-font-size: 11pt;
-    -fx-font-family: "Segoe UI Semibold";
-}
-
-.button {
- 	-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
-    -fx-background-radius: 3px, 3px, 2px, 1px;
-    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-    -fx-text-fill: -fx-text-base-color;
-    -fx-alignment: CENTER;
-    -fx-content-display: LEFT;
-}
-.button:armed{
-	-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
-    -fx-background-radius: 3px, 3px, 2px, 1px;
-    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-    -fx-text-fill: -fx-text-base-color;
-    -fx-alignment: CENTER;
-    -fx-content-display: LEFT;
-}
-

scopviz/src/main/resources/MainWindow.fxml

@@ -5,7 +5,6 @@
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.ChoiceBox?>
-<?import javafx.scene.control.ListView?>
 <?import javafx.scene.control.Menu?>
 <?import javafx.scene.control.MenuBar?>
 <?import javafx.scene.control.MenuItem?>
@@ -18,9 +17,9 @@
 <?import javafx.scene.layout.StackPane?>
 <?import javafx.scene.layout.VBox?>
 
-<VBox minHeight="400.0" minWidth="640.0" prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.tu_darmstadt.informatik.tk.scopviz.ui.GUIController">
+<VBox minHeight="768.0" minWidth="1024.0" prefHeight="768.0" prefWidth="1024.0" stylesheets="@GUITheme.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.tu_darmstadt.informatik.tk.scopviz.ui.GUIController">
   <children>
-    <MenuBar stylesheets="@GUITheme.css" VBox.vgrow="NEVER">
+    <MenuBar VBox.vgrow="NEVER">
       <menus>
         <Menu mnemonicParsing="false" text="File">
           <items>
@@ -57,11 +56,11 @@
               <items>
                 <AnchorPane SplitPane.resizableWithParent="false">
                      <children>
-                        <SplitPane dividerPositions="0.5" orientation="VERTICAL" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                        <SplitPane dividerPositions="0.2" orientation="VERTICAL" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                           <items>
                             <AnchorPane>
                                  <children>
-                                    <TableView fx:id="toolbox" stylesheets="@GUITheme.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                                    <TableView fx:id="toolbox" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                                       <columns>
                                         <TableColumn fx:id="toolboxObjectColumn" editable="false" maxWidth="-1.0" minWidth="90.0" prefWidth="-1.0" sortable="false" />
                                         <TableColumn fx:id="toolboxStringColumn" editable="false" maxWidth="-1.0" minWidth="90.0" prefWidth="-1.0" sortable="false" />
@@ -128,24 +127,31 @@
                               </AnchorPane>
                             <AnchorPane SplitPane.resizableWithParent="false">
                                  <children>
-                                    <SplitPane dividerPositions="0.5" orientation="VERTICAL" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
-                                      <items>
-                                        <AnchorPane stylesheets="@GUITheme.css">
+                                    <VBox prefWidth="100.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                                       <children>
+                                        <AnchorPane minWidth="170.0" VBox.vgrow="NEVER">
                                              <children>
-                                                <ListView fx:id="layerListView" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
-                                                <Button fx:id="underlayButton" mnemonicParsing="false" text="Underlay" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="5.0" />
-                                                <Button fx:id="operatorButton" layoutX="10.0" layoutY="10.0" mnemonicParsing="false" text="Operator" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="35.0" />
-                                                <Button fx:id="mappingButton" layoutX="10.0" layoutY="10.0" mnemonicParsing="false" text="Mapping" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="65.0" />
-                                                <Button fx:id="symbolRepButton" layoutX="10.0" layoutY="10.0" mnemonicParsing="false" text="Symbol Rep." AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="95.0" />
+                                                <Button fx:id="underlayButton" maxHeight="40.0" maxWidth="40.0" minHeight="40.0" minWidth="40.0" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" styleClass="underlayButton" AnchorPane.leftAnchor="5.0" AnchorPane.topAnchor="3.0" />
+                                                <Button fx:id="operatorButton" layoutX="30.0" maxHeight="40.0" maxWidth="40.0" minHeight="40.0" minWidth="30.0" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" styleClass="operatorButton" AnchorPane.leftAnchor="45.0" AnchorPane.topAnchor="3.0" />
+                                                <Button fx:id="mappingButton" layoutX="60.0" maxHeight="40.0" maxWidth="40.0" minHeight="40.0" minWidth="30.0" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" styleClass="mappingButton" AnchorPane.leftAnchor="85.0" AnchorPane.topAnchor="3.0" />
+                                                <Button fx:id="symbolRepButton" layoutX="85.0" maxHeight="40.0" maxWidth="40.0" minHeight="40.0" minWidth="30.0" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" styleClass="symbolRepButton" AnchorPane.leftAnchor="125.0" AnchorPane.topAnchor="3.0" />
                                              </children>
                                           </AnchorPane>
-                                        <AnchorPane>
+                                          <AnchorPane VBox.vgrow="ALWAYS">
                                              <children>
-                                                <ListView fx:id="metricListView" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
+                                                <TableView prefWidth="170.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="3.0">
+                                                  <columns>
+                                                    <TableColumn editable="false" prefWidth="75.0" text="Metric" />
+                                                    <TableColumn editable="false" prefWidth="75.0" text="Value" />
+                                                  </columns>
+                                                   <columnResizePolicy>
+                                                      <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
+                                                   </columnResizePolicy>
+                                                </TableView>
                                              </children>
                                           </AnchorPane>
-                                      </items>
-                                    </SplitPane>
+                                       </children>
+                                    </VBox>
                                  </children>
                               </AnchorPane>
                           </items>