sum status indication with icon up in single class and apply proper css

src/main/java/org/cryptomator/ui/controls/FontAwesome5StatusView.java

@@ -0,0 +1,69 @@
+package org.cryptomator.ui.controls;
+
+import com.tobiasdiez.easybind.EasyBind;
+
+import javafx.beans.property.DoubleProperty;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.SimpleDoubleProperty;
+import javafx.beans.property.SimpleObjectProperty;
+import javafx.scene.control.ContentDisplay;
+import javafx.scene.control.Label;
+
+/**
+ * Similar to the {@link FontAwesome5IconView}, except that if the spinner glyph is selected, an animated facsimile is used.
+ */
+public class FontAwesome5StatusView extends Label {
+
+	private static final double DEFAULT_GLYPH_SIZE = 12.0;
+	private static final FontAwesome5Icon DEFAULT_GLYPH = FontAwesome5Icon.ANCHOR;
+
+	private FontAwesome5IconView staticIcon;
+	private FontAwesome5Spinner animatedSpinner;
+
+	private ObjectProperty<FontAwesome5Icon> glyph = new SimpleObjectProperty<>(this, "glyph", DEFAULT_GLYPH);
+	private DoubleProperty glyphSize = new SimpleDoubleProperty(this, "glyphSize", DEFAULT_GLYPH_SIZE);
+
+	public FontAwesome5StatusView() {
+		this.staticIcon = new FontAwesome5IconView();
+		this.animatedSpinner = new FontAwesome5Spinner();
+		setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
+
+		staticIcon.glyphProperty().bind(glyph);
+		staticIcon.glyphSizeProperty().bind(glyphSize);
+		animatedSpinner.glyphSizeProperty().bind(glyphSize);
+
+		EasyBind.subscribe(glyphProperty(), this::spinnerOrIcon);
+	}
+
+	private void spinnerOrIcon(FontAwesome5Icon icon) {
+		if (icon == FontAwesome5Icon.SPINNER) {
+			this.setGraphic(animatedSpinner);
+		} else {
+			this.setGraphic(staticIcon);
+		}
+	}
+
+	public ObjectProperty<FontAwesome5Icon> glyphProperty() {
+		return glyph;
+	}
+
+	public FontAwesome5Icon getGlyph() {
+		return glyph.get();
+	}
+
+	public void setGlyph(FontAwesome5Icon glyph) {
+		this.glyph.set(glyph == null ? DEFAULT_GLYPH : glyph);
+	}
+
+	public DoubleProperty glyphSizeProperty() {
+		return glyphSize;
+	}
+
+	public double getGlyphSize() {
+		return glyphSize.get();
+	}
+
+	public void setGlyphSize(double glyphSize) {
+		this.glyphSize.set(glyphSize);
+	}
+}

src/main/resources/css/dark_theme.css

@@ -285,6 +285,10 @@
 	-fx-fill: TEXT_FILL_MUTED;
 }
 
+.list-cell .progress-indicator .segment {
+	-fx-background-color: TEXT_FILL_MUTED;
+}
+
 .list-cell .header-label {
 	-fx-font-family: 'Open Sans SemiBold';
 	-fx-font-size: 1.0em;
@@ -299,6 +303,10 @@
 	-fx-fill: PRIMARY;
 }
 
+.list-cell:selected .progress-indicator .segment {
+	-fx-background-color: PRIMARY;
+}
+
 .list-cell:selected .header-label {
 	-fx-text-fill: TEXT_FILL_HIGHLIGHTED;
 }
@@ -564,10 +572,18 @@
 	-fx-fill: TEXT_FILL_MUTED;
 }
 
+.button:disabled .progress-indicator .segment {
+	-fx-background-color: TEXT_FILL_MUTED;
+}
+
 .button:default .glyph-icon {
 	-fx-fill: white;
 }
 
+.button:default .progress-indicator .segment {
+ 	-fx-background-color: white;
+}
+
 .button:default .label {
 	-fx-text-fill: white;
 }
@@ -807,7 +823,6 @@
 }
 
 .progress-indicator:indeterminate .segment {
-	-fx-background-color: TEXT_FILL;
 	-fx-background-insets: 0, 0.5;
 }
 
@@ -816,7 +831,7 @@
 }
 
 .progress-indicator:indeterminate .segment7 {
-	-fx-shape: "M 403.07812 60.921875 L 355.07812 108.92188 L 403.07812 156.92188 L 451.07812 108.92188 L 403.07812 60.921875 z";
+	-fx-shape: "M 403.07812 60.921875";
 	-fx-background-color: transparent;
 }
 

src/main/resources/css/light_theme.css

@@ -284,6 +284,10 @@
 	-fx-fill: TEXT_FILL_MUTED;
 }
 
+.list-cell .progress-indicator .segment {
+	-fx-background-color: TEXT_FILL_MUTED;
+}
+
 .list-cell .header-label {
 	-fx-font-family: 'Open Sans SemiBold';
 	-fx-font-size: 1.0em;
@@ -298,6 +302,10 @@
 	-fx-fill: PRIMARY;
 }
 
+.list-cell:selected .progress-indicator .segment {
+	-fx-background-color: PRIMARY;
+}
+
 .list-cell:selected .header-label {
 	-fx-text-fill: TEXT_FILL_HIGHLIGHTED;
 }
@@ -562,10 +570,18 @@
 	-fx-fill: TEXT_FILL_MUTED;
 }
 
+.button:disabled .progress-indicator .segment {
+	-fx-background-color: TEXT_FILL_MUTED;
+}
+
 .button:default .glyph-icon {
 	-fx-fill: white;
 }
 
+.button:default .progress-indicator .segment {
+ 	-fx-background-color: white;
+}
+
 .button:default .label {
 	-fx-text-fill: white;
 }
@@ -805,7 +821,6 @@
 }
 
 .progress-indicator:indeterminate .segment {
-	-fx-background-color: TEXT_FILL;
 	-fx-background-insets: 0, 0.5;
 }
 
@@ -814,7 +829,7 @@
 }
 
 .progress-indicator:indeterminate .segment7 {
-	-fx-shape: "M 403.07812 60.921875 L 355.07812 108.92188 L 403.07812 156.92188 L 451.07812 108.92188 L 403.07812 60.921875 z";
+	-fx-shape: "M 403.07812 60.921875";
 	-fx-background-color: transparent;
 }
 

src/main/resources/fxml/vault_list_cell.fxml

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
+<?import org.cryptomator.ui.controls.FontAwesome5StatusView?>
 <HBox xmlns:fx="http://javafx.com/fxml"
 	  xmlns="http://javafx.com/javafx"
 	  fx:controller="org.cryptomator.ui.mainwindow.VaultListCellController"
@@ -19,7 +19,7 @@
 	</padding>
 	<children>
 		<VBox alignment="CENTER" minWidth="20">
-			<FontAwesome5IconView glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
+			<FontAwesome5StatusView glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
 		</VBox>
 		<VBox spacing="4" HBox.hgrow="ALWAYS">
 			<Label styleClass="header-label" text="${controller.vault.displayName}"/>