Feature/simple spinning (#1728)

* Define discrete rotation animation
* New class FontAwesome5Spinner extending FontAwesome5IconView, animated
* New class AutoAnimator to play Animation on a Node conditionally
* Replace all occurences of Progress Indicator with FontAwesome5Spinner
* Spin spinner icon in processing vault state
* remove undocumented progress indicator styling
This commit is contained in:
Armin Schrenk
2021-07-26 18:40:55 +02:00
committed by GitHub
parent 2aa17edd8c
commit c81ef1c109
21 changed files with 232 additions and 152 deletions
+4 -69
View File
@@ -583,6 +583,10 @@
-fx-fill: white;
}
.button:default:disabled .glyph-icon {
-fx-fill: TEXT_FILL_MUTED;
}
.button:default .label {
-fx-text-fill: white;
}
@@ -803,75 +807,6 @@
-fx-scale-shape: false;
}
/*******************************************************************************
* *
* ProgressIndicator *
* Derived from aquafx-project.com, (C) Claudine Zillmann, see NOTICE.md *
* *
******************************************************************************/
.progress-indicator {
-fx-indeterminate-segment-count: 12;
-fx-spin-enabled: true;
}
.progress-indicator:indeterminate > .spinner {
-fx-padding: 0.083333em;
}
.progress-indicator:indeterminate .segment {
-fx-background-color: PROGRESS_INDICATOR_BEGIN, PROGRESS_INDICATOR_END;
-fx-background-insets: 0, 0.5;
}
.progress-indicator:indeterminate .segment0 {
-fx-shape: "m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z";
}
.progress-indicator:indeterminate .segment1 {
-fx-shape: "m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z";
}
.progress-indicator:indeterminate .segment2 {
-fx-shape: "M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z";
}
.progress-indicator:indeterminate .segment3 {
-fx-shape: "M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z";
}
.progress-indicator:indeterminate .segment4 {
-fx-shape: "m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z";
}
.progress-indicator:indeterminate .segment5 {
-fx-shape: "M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z";
}
.progress-indicator:indeterminate .segment6 {
-fx-shape: "M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z";
}
.progress-indicator:indeterminate .segment7 {
-fx-shape: "m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z";
}
.progress-indicator:indeterminate .segment8 {
-fx-shape: "m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z";
}
.progress-indicator:indeterminate .segment9 {
-fx-shape: "m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z";
}
.progress-indicator:indeterminate .segment10 {
-fx-shape: "m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z";
}
.progress-indicator:indeterminate .segment11 {
-fx-shape: "m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z";
}
/*******************************************************************************
* *
* ProgressBar *
+4 -69
View File
@@ -581,6 +581,10 @@
-fx-fill: white;
}
.button:default:disabled .glyph-icon {
-fx-fill: TEXT_FILL_MUTED;
}
.button:default .label {
-fx-text-fill: white;
}
@@ -801,75 +805,6 @@
-fx-scale-shape: false;
}
/*******************************************************************************
* *
* ProgressIndicator *
* Derived from aquafx-project.com, (C) Claudine Zillmann, see NOTICE.md *
* *
******************************************************************************/
.progress-indicator {
-fx-indeterminate-segment-count: 12;
-fx-spin-enabled: true;
}
.progress-indicator:indeterminate > .spinner {
-fx-padding: 0.083333em;
}
.progress-indicator:indeterminate .segment {
-fx-background-color: PROGRESS_INDICATOR_BEGIN, PROGRESS_INDICATOR_END;
-fx-background-insets: 0, 0.5;
}
.progress-indicator:indeterminate .segment0 {
-fx-shape: "m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z";
}
.progress-indicator:indeterminate .segment1 {
-fx-shape: "m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z";
}
.progress-indicator:indeterminate .segment2 {
-fx-shape: "M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z";
}
.progress-indicator:indeterminate .segment3 {
-fx-shape: "M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z";
}
.progress-indicator:indeterminate .segment4 {
-fx-shape: "m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z";
}
.progress-indicator:indeterminate .segment5 {
-fx-shape: "M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z";
}
.progress-indicator:indeterminate .segment6 {
-fx-shape: "M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z";
}
.progress-indicator:indeterminate .segment7 {
-fx-shape: "m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z";
}
.progress-indicator:indeterminate .segment8 {
-fx-shape: "m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z";
}
.progress-indicator:indeterminate .segment9 {
-fx-shape: "m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z";
}
.progress-indicator:indeterminate .segment10 {
-fx-shape: "m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z";
}
.progress-indicator:indeterminate .segment11 {
-fx-shape: "m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z";
}
/*******************************************************************************
* *
* ProgressBar *
@@ -4,11 +4,11 @@
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>
<?import org.cryptomator.ui.controls.FontAwesome5Spinner?>
<VBox xmlns:fx="http://javafx.com/fxml"
xmlns="http://javafx.com/javafx"
fx:controller="org.cryptomator.ui.addvaultwizard.CreateNewVaultPasswordController"
@@ -41,7 +41,7 @@
<Button text="%addvaultwizard.new.createVaultBtn" ButtonBar.buttonData="NEXT_FORWARD" onAction="#next" defaultButton="true" disable="${!controller.readyToCreateVault}"
contentDisplay="${controller.createVaultButtonState}">
<graphic>
<ProgressIndicator progress="-1" prefWidth="12" prefHeight="12"/>
<FontAwesome5Spinner fx:id="spinner" glyphSize="12" />
</graphic>
</Button>
</buttons>
+2 -2
View File
@@ -7,8 +7,8 @@
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.layout.VBox?>
<?import org.cryptomator.ui.controls.FontAwesome5Spinner?>
<VBox xmlns:fx="http://javafx.com/fxml"
xmlns="http://javafx.com/javafx"
fx:controller="org.cryptomator.ui.migration.MigrationRunController"
@@ -37,7 +37,7 @@
<Button text="%migration.run.startMigrationBtn" ButtonBar.buttonData="NEXT_FORWARD" defaultButton="true" onAction="#migrate" contentDisplay="${controller.migrateButtonContentDisplay}"
disable="${controller.migrationButtonDisabled}">
<graphic>
<ProgressIndicator progress="-1" prefWidth="12" prefHeight="12"/>
<FontAwesome5Spinner glyphSize="12" />
</graphic>
</Button>
</buttons>
@@ -6,8 +6,8 @@
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Hyperlink?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.layout.VBox?>
<?import org.cryptomator.ui.controls.FontAwesome5Spinner?>
<VBox xmlns:fx="http://javafx.com/fxml"
xmlns="http://javafx.com/javafx"
fx:controller="org.cryptomator.ui.preferences.UpdatesPreferencesController"
@@ -26,7 +26,7 @@
<VBox alignment="CENTER" spacing="6">
<Button text="%preferences.updates.checkNowBtn" defaultButton="true" onAction="#checkNow" contentDisplay="${controller.checkForUpdatesButtonState}">
<graphic>
<ProgressIndicator progress="-1" prefWidth="12" prefHeight="12"/>
<FontAwesome5Spinner fx:id="spinner" glyphSize="12"/>
</graphic>
</Button>
+2 -2
View File
@@ -1,11 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
<?import org.cryptomator.ui.controls.FontAwesome5Spinner?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
@@ -35,7 +35,7 @@
<Button text="%generic.button.cancel" ButtonBar.buttonData="CANCEL_CLOSE" defaultButton="true" cancelButton="true" onAction="#cancel"/>
<Button fx:id="lockAndQuitButton" text="%quit.lockAndQuit" ButtonBar.buttonData="FINISH" onAction="#lockAndQuit" contentDisplay="TEXT_ONLY">
<graphic>
<ProgressIndicator progress="-1" prefWidth="12" prefHeight="12"/>
<FontAwesome5Spinner glyphSize="12"/>
</graphic>
</Button>
</buttons>
@@ -6,12 +6,12 @@
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import org.cryptomator.ui.controls.FontAwesome5Spinner?>
<VBox xmlns:fx="http://javafx.com/fxml"
xmlns="http://javafx.com/javafx"
fx:controller="org.cryptomator.ui.keyloading.masterkeyfile.PassphraseEntryController"
@@ -58,7 +58,7 @@
<Button text="%generic.button.cancel" ButtonBar.buttonData="CANCEL_CLOSE" cancelButton="true" onAction="#cancel" disable="${controller.userInteractionDisabled}"/>
<Button text="%unlock.unlockBtn" ButtonBar.buttonData="FINISH" defaultButton="true" onAction="#unlock" contentDisplay="${controller.unlockButtonContentDisplay}" disable="${controller.unlockButtonDisabled}">
<graphic>
<ProgressIndicator progress="-1" prefWidth="12" prefHeight="12"/>
<FontAwesome5Spinner glyphSize="12" />
</graphic>
</Button>
</buttons>
+2 -2
View File
@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
<?import org.cryptomator.ui.controls.FontAwesome5Spinner?>
<?import org.cryptomator.ui.controls.FormattedLabel?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
@@ -39,7 +39,7 @@
<Button text="%generic.button.done" ButtonBar.buttonData="CANCEL_CLOSE" cancelButton="true" onAction="#close"/>
<Button text="%unlock.success.revealBtn" ButtonBar.buttonData="FINISH" defaultButton="true" onAction="#revealAndClose" contentDisplay="${controller.revealButtonState}" disable="${controller.revealButtonDisabled}">
<graphic>
<ProgressIndicator progress="-1" prefWidth="12" prefHeight="12"/>
<FontAwesome5Spinner glyphSize="12"/>
</graphic>
</Button>
</buttons>
+1 -1
View File
@@ -22,7 +22,7 @@
<HBox spacing="12" visible="${controller.anyVaultSelected}" managed="${controller.anyVaultSelected}">
<StackPane alignment="CENTER">
<Circle styleClass="glyph-icon-primary" radius="16"/>
<FontAwesome5IconView styleClass="glyph-icon-white" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
<FontAwesome5IconView fx:id="vaultStateView" styleClass="glyph-icon-white" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
</StackPane>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<HBox spacing="12">
+1 -1
View File
@@ -19,7 +19,7 @@
</padding>
<children>
<VBox alignment="CENTER" minWidth="20">
<FontAwesome5IconView glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
<FontAwesome5IconView fx:id="vaultStateView" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
</VBox>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<Label styleClass="header-label" text="${controller.vault.displayName}"/>