Loading circle, better loading colors.

This commit is contained in:
lieght
2025-12-03 23:55:12 +01:00
parent 8ca2399e6a
commit f60df73b66
7 changed files with 115 additions and 78 deletions

View File

@@ -83,7 +83,7 @@ public final class App extends Application {
AppSettings.applySettings(); AppSettings.applySettings();
LoadingWidget loading = new LoadingWidget(Primitive.text( LoadingWidget loading = new LoadingWidget(Primitive.text(
"Loading...", false), 0, 0, Integer.MAX_VALUE, false // Just set a high default "Loading...", false), 0, 0, Integer.MAX_VALUE, false, false // Just set a high default
); );
WidgetContainer.setCurrentView(loading); WidgetContainer.setCurrentView(loading);

View File

@@ -86,7 +86,7 @@ public final class Server {
final int reconnectAttempts = 10; final int reconnectAttempts = 10;
LoadingWidget loading = new LoadingWidget( LoadingWidget loading = new LoadingWidget(
Primitive.text("connecting"), 0, 0, reconnectAttempts, true Primitive.text("connecting"), 0, 0, reconnectAttempts, true, true
); );
WidgetContainer.getCurrentView().transitionNext(loading); WidgetContainer.getCurrentView().transitionNext(loading);

View File

@@ -2,7 +2,9 @@ package org.toop.app.widget.complex;
import javafx.application.Platform; import javafx.application.Platform;
import javafx.geometry.Pos; import javafx.geometry.Pos;
import javafx.scene.control.Control;
import javafx.scene.control.ProgressBar; import javafx.scene.control.ProgressBar;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.layout.VBox; import javafx.scene.layout.VBox;
import javafx.scene.text.Text; import javafx.scene.text.Text;
import org.toop.app.widget.Primitive; import org.toop.app.widget.Primitive;
@@ -12,7 +14,7 @@ import java.util.concurrent.atomic.AtomicBoolean;
public class LoadingWidget extends ViewWidget implements Update { // TODO make of widget type public class LoadingWidget extends ViewWidget implements Update { // TODO make of widget type
private final Text loadingText; // TODO Make changeable private final Text loadingText; // TODO Make changeable
private final ProgressBar progressBar; private final ProgressIndicator progressBar;
private final AtomicBoolean successTriggered = new AtomicBoolean(false); private final AtomicBoolean successTriggered = new AtomicBoolean(false);
private final AtomicBoolean failureTriggered = new AtomicBoolean(false); private final AtomicBoolean failureTriggered = new AtomicBoolean(false);
@@ -25,7 +27,7 @@ public class LoadingWidget extends ViewWidget implements Update { // TODO make o
private Callable<Boolean> failureTrigger = () -> (amount < minAmount); private Callable<Boolean> failureTrigger = () -> (amount < minAmount);
private float percentage = 0.0f; private float percentage = 0.0f;
private boolean isInfiniteBar = false; private boolean isInfinite = false;
/** /**
* *
@@ -36,17 +38,18 @@ public class LoadingWidget extends ViewWidget implements Update { // TODO make o
* @param startAmount The starting amount. * @param startAmount The starting amount.
* @param maxAmount The max amount. * @param maxAmount The max amount.
*/ */
public LoadingWidget(Text loadingText, int minAmount, int startAmount, int maxAmount, boolean infiniteBar) { public LoadingWidget(Text loadingText, int minAmount, int startAmount, int maxAmount, boolean infinite, boolean circle) {
isInfiniteBar = infiniteBar; isInfinite = infinite;
this.maxAmount = maxAmount; this.maxAmount = maxAmount;
this.minAmount = minAmount; this.minAmount = minAmount;
amount = startAmount; amount = startAmount;
this.loadingText = loadingText; this.loadingText = loadingText;
progressBar = new ProgressBar(); progressBar = circle ? new ProgressIndicator() : new ProgressBar();
VBox box = Primitive.vbox(this.loadingText, progressBar); VBox box = Primitive.vbox(this.loadingText, progressBar);
progressBar.getStyleClass().add("loading-progress-bar");
add(Pos.CENTER, box); add(Pos.CENTER, box);
} }
@@ -75,6 +78,10 @@ public class LoadingWidget extends ViewWidget implements Update { // TODO make o
return (failureTriggered.get() || successTriggered.get()); return (failureTriggered.get() || successTriggered.get());
} }
public ProgressIndicator getProgressBar() {
return progressBar;
}
/** /**
* What to do when success is triggered. * What to do when success is triggered.
* @param onSuccess The lambda that gets run on success. * @param onSuccess The lambda that gets run on success.
@@ -148,7 +155,7 @@ public class LoadingWidget extends ViewWidget implements Update { // TODO make o
if (maxAmount != 0) { if (maxAmount != 0) {
percentage = (float) amount / maxAmount; percentage = (float) amount / maxAmount;
} }
if (!isInfiniteBar) { if (!isInfinite) {
progressBar.setProgress(percentage); progressBar.setProgress(percentage);
} }
} }

View File

@@ -33,7 +33,7 @@ public class SongDisplay extends VBox implements Widget {
songTitle.getStyleClass().add("song-title"); songTitle.getStyleClass().add("song-title");
progressBar = new ProgressBar(0); progressBar = new ProgressBar(0);
progressBar.getStyleClass().add("progress-bar"); progressBar.getStyleClass().add("loading-progress-bar");
progressText = new Text("0:00/0:00"); progressText = new Text("0:00/0:00");
progressText.getStyleClass().add("progress-text"); progressText.getStyleClass().add("progress-text");

View File

@@ -16,7 +16,6 @@
-fx-padding: 8 12 8 12; -fx-padding: 8 12 8 12;
-fx-spacing: 6px; -fx-spacing: 6px;
-fx-alignment: center; -fx-alignment: center;
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 6, 0.5, 0, 2);
-fx-min-width: 220px; -fx-min-width: 220px;
-fx-max-width: 260px; -fx-max-width: 260px;
} }
@@ -39,6 +38,18 @@
-fx-background-radius: 30px; -fx-background-radius: 30px;
} }
.loading-progress-bar {
-fx-progress-color: #3caf3f;
}
.loading-progress-bar > .bar {
-fx-background-color: #3caf3f;
}
.loading-progress-bar > .track {
-fx-background-color: rgba(0,0,0,0.15);
}
.progress-text { .progress-text {
-fx-font-size: 11px; -fx-font-size: 11px;
-fx-fill: white; -fx-fill: white;

View File

@@ -13,68 +13,77 @@
} }
.song-display { .song-display {
-fx-padding: 8 12 8 12; -fx-padding: 8 12 8 12;
-fx-spacing: 6px; -fx-spacing: 6px;
-fx-alignment: center; -fx-alignment: center;
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 6, 0.5, 0, 2); -fx-min-width: 220px;
-fx-min-width: 220px; -fx-max-width: 260px;
-fx-max-width: 260px;
} }
.song-title { .song-title {
-fx-font-size: 14px; -fx-font-size: 14px;
-fx-fill: white; -fx-fill: white;
} }
.progress-bar { .progress-bar {
-fx-pref-width: 200px; -fx-inner-background-color: black;
-fx-accent: red; -fx-pref-width: 200px;
-fx-accent: red;
} }
.progress-bar > .track { .progress-bar > .track {
-fx-background-radius: 30; -fx-background-radius: 30;
} }
.progress-bar > .bar { .progress-bar > .bar {
-fx-background-radius: 30px; -fx-background-radius: 30px;
}
.loading-progress-bar {
-fx-progress-color: #28a428;
}
.loading-progress-bar > .bar {
-fx-background-color: #28a428;
}
.loading-progress-bar > .track {
-fx-background-color: rgba(0,0,0,0.15);
} }
.progress-text { .progress-text {
-fx-font-size: 11px; -fx-font-size: 11px;
-fx-fill: white; -fx-fill: white;
} }
.skip-button { .skip-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-radius: 0; -fx-background-radius: 0;
-fx-cursor: hand; -fx-cursor: hand;
-fx-text-fill: white; }
}
.skip-button .text { .skip-button > .text {
-fx-fill: white; -fx-fill: white;
} }
.pause-button { .pause-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-radius: 0; -fx-background-radius: 0;
-fx-cursor: hand; -fx-cursor: hand;
-fx-text-fill: white; }
}
.pause-button .text { .pause-button > .text {
-fx-fill: white; -fx-fill: white;
} }
.previous-button { .previous-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-radius: 0; -fx-background-radius: 0;
-fx-cursor: hand; -fx-cursor: hand;
-fx-text-fill: white; }
}
.previous-button .text { .previous-button > .text {
-fx-fill: white; -fx-fill: white;
} }
.button { .button {

View File

@@ -13,69 +13,79 @@
} }
.song-display { .song-display {
-fx-padding: 8 12 8 12; -fx-padding: 8 12 8 12;
-fx-spacing: 6px; -fx-spacing: 6px;
-fx-alignment: center; -fx-alignment: center;
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 6, 0.5, 0, 2); -fx-min-width: 220px;
-fx-min-width: 220px; -fx-max-width: 260px;
-fx-max-width: 260px;
} }
.song-title { .song-title {
-fx-font-size: 14px; -fx-font-size: 14px;
-fx-fill: black; -fx-effect: null;
} }
.progress-bar { .progress-bar {
-fx-inner-background-color: black; -fx-inner-background-color: black;
-fx-pref-width: 200px; -fx-pref-width: 200px;
-fx-accent: red; -fx-accent: red;
} }
.progress-bar > .track { .progress-bar > .track {
-fx-background-radius: 30; -fx-background-radius: 30;
} }
.progress-bar > .bar { .progress-bar > .bar {
-fx-background-radius: 30px; -fx-background-radius: 30px;
}
.loading-progress-bar {
-fx-progress-color: #3caf3f;
}
.loading-progress-bar > .bar {
-fx-background-color: linear-gradient(to bottom, #a2d1a1, #b8e3b9);
}
.loading-progress-bar > .track {
-fx-background-color: rgba(0,0,0,0.15);
} }
.progress-text { .progress-text {
-fx-font-size: 11px; -fx-font-size: 11px;
-fx-fill: black; -fx-effect: null;
} }
.skip-button { .skip-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-radius: 0; -fx-background-radius: 0;
-fx-cursor: hand; -fx-cursor: hand;
-fx-text-fill: black; -fx-effect: null;
} }
.skip-button .text { .skip-button .text {
-fx-fill: black;
} }
.pause-button { .pause-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-radius: 0; -fx-background-radius: 0;
-fx-cursor: hand; -fx-cursor: hand;
-fx-text-fill: black; -fx-effect: null;
} }
.pause-button .text { .pause-button .text {
-fx-fill: black; -fx-effect: null;
} }
.previous-button { .previous-button {
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-radius: 0; -fx-background-radius: 0;
-fx-cursor: hand; -fx-cursor: hand;
-fx-text-fill: black; -fx-effect: null;
} }
.previous-button .text { .previous-button .text {
-fx-fill: black; -fx-effect: null;
} }
.button { .button {