diff --git a/src/main/java/org/cryptomator/ui/controls/FontAwesome5StatusView.java b/src/main/java/org/cryptomator/ui/controls/FontAwesome5StatusView.java new file mode 100644 index 000000000..0298d95f4 --- /dev/null +++ b/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 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 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); + } +} diff --git a/src/main/resources/css/dark_theme.css b/src/main/resources/css/dark_theme.css index 323aeb82c..d44ad968b 100644 --- a/src/main/resources/css/dark_theme.css +++ b/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; } diff --git a/src/main/resources/css/light_theme.css b/src/main/resources/css/light_theme.css index f798dac1e..113cd3e4a 100644 --- a/src/main/resources/css/light_theme.css +++ b/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; } diff --git a/src/main/resources/fxml/vault_list_cell.fxml b/src/main/resources/fxml/vault_list_cell.fxml index ce8664639..f32d0f804 100644 --- a/src/main/resources/fxml/vault_list_cell.fxml +++ b/src/main/resources/fxml/vault_list_cell.fxml @@ -1,11 +1,11 @@ - + - +