Prettied up the statistics window for both Ui Themes

main/ui/src/main/java/org/cryptomator/ui/vaultstatistics/VaultStatisticsController.java

@@ -18,6 +18,7 @@ import org.cryptomator.ui.common.FxController;
 import org.cryptomator.ui.common.WeakBindings;
 
 import javax.inject.Inject;
+import java.util.ResourceBundle;
 
 @VaultStatisticsScoped
 public class VaultStatisticsController implements FxController {
@@ -35,17 +36,15 @@ public class VaultStatisticsController implements FxController {
 	public LineChart<Number, Number> lineGraph;
 
 	@Inject
-	public VaultStatisticsController(@VaultStatisticsWindow Stage window, @VaultStatisticsWindow Vault vault) {
+	public VaultStatisticsController(@VaultStatisticsWindow Stage window, @VaultStatisticsWindow Vault vault, ResourceBundle resourceBundle) {
 		this.stats = vault.getStats();
 		this.bpsRead = WeakBindings.bindLong(stats.bytesPerSecondReadProperty());
 		this.bpsWritten = WeakBindings.bindLong(stats.bytesPerSecondWrittenProperty());
 
 		this.readData = new Series<>();
-		readData.setName("Read Data"); // For Legend
-		//TODO Add Name to strings.properties
+		readData.setName(resourceBundle.getString("vaultstatistics.readDataLabel"));
 		this.writeData = new Series<>();
-		writeData.setName("Write Data");
-		//TODO Add Name to strings.properties
+		writeData.setName(resourceBundle.getString("vaultstatistics.writtenDataLabel"));
 
 		this.ioAnimation = new Timeline(); //TODO Research better timer
 		ioAnimation.getKeyFrames().add(new KeyFrame(Duration.seconds(IO_SAMPLING_INTERVAL), new IoSamplingAnimationHandler(readData, writeData)));

main/ui/src/main/resources/css/dark_theme.css

@@ -882,43 +882,51 @@
 	-fx-background-color: MAIN_BG;
 	-fx-padding: 20px;
 }
-/*
-.default-color0.chart-line-symbol { -fx-background-color: #00FFFF; }
-.default-color1.chart-line-symbol { -fx-background-color: #00FF00; }
-*/
+
 /* content */
 
 .chart-content {
 	-fx-padding: 10px;
+	-fx-text-fill: TEXT_FILL;
+	-fx-tick-label-fill: GRAY_3;
+	-fx-minor-tick-visible: false
 }
 .chart-horizontal-grid-lines {
-	-fx-stroke: #FFFFFF;
+	-fx-stroke: PRIMARY_L2;
 }
 .chart-vertical-zero-line,
 .chart-horizontal-zero-line {
-	-fx-stroke: #FFFFFF;
+	-fx-stroke: PRIMARY_L2;
 }
 .chart-series-line {
 	-fx-stroke-width: 2px;
 }
 .chart-alternative-row-fill {
-	-fx-fill: #E1E1E1;
+	-fx-fill: GRAY_3;
 	-fx-stroke: transparent;
 	-fx-stroke-width: 0;
 }
+.axis {
+	-fx-tick-label-fill: TEXT_FILL;
+	-fx-tick-length: 20;
+	-fx-minor-tick-length: 10;
+}
+.axis-label {
+	-fx-text-fill: TEXT_FILL;
+}
+.default-color0.chart-series-line { -fx-stroke: PRIMARY; }
+.default-color1.chart-series-line { -fx-stroke: RED_5 ; }
 
-.default-color0.chart-series-line { -fx-stroke: #FF0000; }
-.default-color1.chart-series-line { -fx-stroke: #00FF00 ; }
+/* legend */
 
 .chart-legend {
-	-fx-background-color:  transparent;
-	-fx-padding: 20px;
-}
-
-.chart-legend-item-symbol{
-	-fx-background-radius: 10;
+	-fx-text-fill: TEXT_FILL;
+	-fx-background-color: transparent;
+	-fx-padding: 0.4em;
 }
-
-.chart-legend-item{
-	-fx-text-fill: #FFFFFF;
+.chart-line-symbol {
+	-fx-background-radius: 5px;
+	-fx-padding: 5px;
 }
+.default-color0.chart-line-symbol { -fx-background-color: PRIMARY; }
+.default-color1.chart-line-symbol { -fx-background-color: RED_5; }

main/ui/src/main/resources/css/light_theme.css

@@ -881,43 +881,51 @@
 	-fx-background-color: MAIN_BG;
 	-fx-padding: 20px;
 }
-/*
-.default-color0.chart-line-symbol { -fx-background-color: #00FFFF; }
-.default-color1.chart-line-symbol { -fx-background-color: #00FF00; }
-*/
+
 /* content */
 
 .chart-content {
 	-fx-padding: 10px;
+	-fx-text-fill: TEXT_FILL;
+	-fx-tick-label-fill: GRAY_3;
+	-fx-minor-tick-visible: false
 }
 .chart-horizontal-grid-lines {
-	-fx-stroke: #000000;
+	-fx-stroke: PRIMARY_D2;
 }
 .chart-vertical-zero-line,
 .chart-horizontal-zero-line {
-	-fx-stroke: #000000;
+	-fx-stroke: PRIMARY_D2;
 }
 .chart-series-line {
 	-fx-stroke-width: 2px;
 }
 .chart-alternative-row-fill {
-	-fx-fill: #E1E1E1;
+	-fx-fill: GRAY_8;
 	-fx-stroke: transparent;
 	-fx-stroke-width: 0;
 }
+.axis {
+	-fx-tick-label-fill: TEXT_FILL;
+	-fx-tick-length: 20;
+	-fx-minor-tick-length: 10;
+}
+.axis-label {
+	-fx-text-fill: TEXT_FILL;
+}
+.default-color0.chart-series-line { -fx-stroke: PRIMARY; }
+.default-color1.chart-series-line { -fx-stroke: RED_5 ; }
 
-.default-color0.chart-series-line { -fx-stroke: #FF0000; }
-.default-color1.chart-series-line { -fx-stroke: #00FF00 ; }
+/* legend */
 
 .chart-legend {
-	-fx-background-color:  transparent;
-	-fx-padding: 20px;
-}
-
-.chart-legend-item-symbol{
-	-fx-background-radius: 10;
+	-fx-text-fill: TEXT_FILL;
+	-fx-background-color: transparent;
+	-fx-padding: 0.4em;
 }
-
-.chart-legend-item{
-	-fx-text-fill: #000000;
+.chart-line-symbol {
+	-fx-background-radius: 5px;
+	-fx-padding: 5px;
 }
+.default-color0.chart-line-symbol { -fx-background-color: PRIMARY; }
+.default-color1.chart-line-symbol { -fx-background-color: RED_5; }

main/ui/src/main/resources/fxml/vault_statistics.fxml

@@ -12,21 +12,8 @@
 	  fx:controller="org.cryptomator.ui.vaultstatistics.VaultStatisticsController"
 	  prefHeight="400.0" prefWidth="600.0">
 
-
-	<HBox alignment="CENTER_RIGHT" spacing="6">
-		<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondRead"/>
-		<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
-						mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsRead}"/>
-	</HBox>
-	<HBox alignment="CENTER_RIGHT" spacing="6">
-		<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondWritten"/>
-		<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
-						mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsWritten}"/>
-	</HBox>
-
-	<LineChart
-			styleClass="chart-plot-background, chart-alternative-row-fill, default-color2.chart-series-line"
-			fx:id="lineGraph" createSymbols="true" legendVisible="true" prefHeight="372.0" prefWidth="423.0" visible="true" animated="false" title="%vaultstatistics.throughputTitle" verticalZeroLineVisible="true" verticalGridLinesVisible="false" horizontalGridLinesVisible="true">
+	<LineChart fx:id="lineGraph" VBox.vgrow="ALWAYS" createSymbols="false" legendVisible="true" prefHeight="372.0" prefWidth="423.0" visible="true" animated="false"
+			   title="%vaultstatistics.throughputTitle" verticalZeroLineVisible="true" verticalGridLinesVisible="false" horizontalGridLinesVisible="true">
 		<xAxis>
 			<NumberAxis autoRanging="false" lowerBound="0" side="BOTTOM" tickUnit="5" upperBound="100" label="%vaultstatistics.xAxisTimeLabel"/>
 		</xAxis>
@@ -37,4 +24,14 @@
 			<Cursor fx:constant="DEFAULT"/>
 		</cursor>
 	</LineChart>
+	<HBox alignment="CENTER_RIGHT" spacing="6">
+		<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondRead"/>
+		<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
+						mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsRead}"/>
+	</HBox>
+	<HBox alignment="CENTER_RIGHT" spacing="6">
+		<Label styleClass="label-small,label-muted" text="%main.vaultDetail.bytesPerSecondWritten"/>
+		<ThrougputLabel styleClass="label-small,label-muted" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
+						mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.bpsWritten}"/>
+	</HBox>
 </VBox>

main/ui/src/main/resources/i18n/strings.properties

@@ -165,6 +165,8 @@ vaultstatistics.title=Statistics for %s
 vaultstatistics.xAxisTimeLabel=Seconds
 vaultstatistics.yAxisThroughputLabel=Throughput in KiB/s
 vaultstatistics.throughputTitle=Read and Writes
+vaultstatistics.readDataLabel=Read Data
+vaultstatistics.writtenDataLabel=Written Data
 
 # Main Window
 main.closeBtn.tooltip=Close