alt: dialog covers title bar now

This commit is contained in:
huanghongxun 2020-04-07 14:37:56 +08:00
parent 5ed42d1654
commit aee9c9bb32
14 changed files with 131 additions and 110 deletions

View File

@ -110,7 +110,9 @@ public final class Controllers {
Task.runAsync(JavaVersion::initialize).start();
scene = new Scene(decorator.getDecorator(), 800, 480);
scene = new Scene(decorator.getDecorator(), 802, 482);
stage.setMinHeight(482);
stage.setMinWidth(802);
decorator.getDecorator().prefWidthProperty().bind(scene.widthProperty());
decorator.getDecorator().prefHeightProperty().bind(scene.heightProperty());
scene.getStylesheets().setAll(config().getTheme().getStylesheets());

View File

@ -41,8 +41,7 @@ import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
public class InstallerItem extends BorderPane {
public InstallerItem(String libraryId, String libraryVersion, @Nullable Runnable upgrade, @Nullable Consumer<InstallerItem> deleteCallback) {
getStyleClass().add("two-line-list-item");
setStyle("-fx-background-radius: 2; -fx-background-color: white; -fx-padding: 8;");
getStyleClass().addAll("two-line-list-item", "card");
JFXDepthManager.setDepth(this, 1);
String[] urls = new String[]{"/assets/img/grass.png", "/assets/img/fabric.png", "/assets/img/forge.png", "/assets/img/chicken.png", "/assets/img/command.png"};

View File

@ -102,7 +102,7 @@ public class AccountListItemSkin extends SkinBase<AccountListItem> {
root.setRight(right);
root.getStyleClass().add("card");
root.setPadding(new Insets(8, 8, 8, 0));
root.setStyle("-fx-padding: 8 8 8 0;");
JFXDepthManager.setDepth(root, 1);
getChildren().setAll(root);

View File

@ -36,8 +36,7 @@ public abstract class FloatListCell<T> extends ListCell<T> {
pane.getStyleClass().add("card");
pane.setCursor(Cursor.HAND);
pane.setPadding(new Insets(8));
setPadding(new Insets(5));
setPadding(new Insets(9, 9, 0, 9));
JFXDepthManager.setDepth(pane, 1);
FXUtils.onChangeAndOperate(selectedProperty(), selected -> {

View File

@ -30,6 +30,7 @@ import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.control.SkinBase;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
@ -49,7 +50,7 @@ public class DecoratorSkin extends SkinBase<Decorator> {
private static final SVGGlyph minus = Lang.apply(new SVGGlyph(0, "MINUS", "M804.571 420.571v109.714q0 22.857-16 38.857t-38.857 16h-694.857q-22.857 0-38.857-16t-16-38.857v-109.714q0-22.857 16-38.857t38.857-16h694.857q22.857 0 38.857 16t16 38.857z", Color.WHITE),
glyph -> { glyph.setSize(12, 2); glyph.setTranslateY(4); });
private final BorderPane root;
private final StackPane parent;
private final StackPane titleContainer;
private final Stage primaryStage;
private final TransitionPane navBarPane;
@ -72,14 +73,15 @@ public class DecoratorSkin extends SkinBase<Decorator> {
minus.fillProperty().bind(Theme.foregroundFillBinding());
Decorator skinnable = getSkinnable();
StackPane parent = new StackPane();
parent = new StackPane();
parent.getStyleClass().add("window");
parent.backgroundProperty().bind(skinnable.backgroundProperty());
parent.setPickOnBounds(false);
parent.prefHeightProperty().bind(control.prefHeightProperty());
parent.prefWidthProperty().bind(control.prefWidthProperty());
root = new BorderPane();
root.getStyleClass().addAll("jfx-decorator", "resize-border");
parent.setOnMouseReleased(this::onMouseReleased);
parent.setOnMouseDragged(this::onMouseDragged);
parent.setOnMouseMoved(this::onMouseMoved);
// animation layer at bottom
{
@ -89,12 +91,17 @@ public class DecoratorSkin extends SkinBase<Decorator> {
leftPane.getStyleClass().add("jfx-decorator-drawer");
layer.getChildren().setAll(leftPane);
parent.getChildren().add(layer);
parent.getChildren().add(root);
}
StackPane wrapper = new StackPane();
BorderPane root = new BorderPane();
root.getStyleClass().addAll("jfx-decorator");
wrapper.getChildren().setAll(root);
skinnable.setDrawerWrapper(wrapper);
parent.getChildren().add(wrapper);
// center node with a animation layer at bottom, a container layer at middle and a "welcome" layer at top.
StackPane container = new StackPane();
skinnable.setDrawerWrapper(container);
FXUtils.setOverflowHidden(container);
// content layer at middle
@ -128,11 +135,7 @@ public class DecoratorSkin extends SkinBase<Decorator> {
root.setCenter(container);
titleContainer = new StackPane();
root.setOnMouseReleased(this::onMouseReleased);
root.setOnMouseDragged(this::onMouseDragged);
root.setOnMouseMoved(this::onMouseMoved);
titleContainer.setPickOnBounds(false);
titleContainer.setMinHeight(40);
titleContainer.getStyleClass().addAll("jfx-tool-bar");
titleContainer.addEventHandler(MouseEvent.MOUSE_ENTERED, e -> allowMove = true);
titleContainer.addEventHandler(MouseEvent.MOUSE_EXITED, e -> {
@ -151,6 +154,8 @@ public class DecoratorSkin extends SkinBase<Decorator> {
rectangle.widthProperty().bind(titleContainer.widthProperty());
rectangle.heightProperty().bind(titleContainer.heightProperty().add(100));
titleContainer.setClip(rectangle);
Rectangle buttonsContainerPlaceHolder = new Rectangle();
{
navBarPane = new TransitionPane();
FXUtils.onChangeAndOperate(skinnable.stateProperty(), s -> {
@ -170,11 +175,14 @@ public class DecoratorSkin extends SkinBase<Decorator> {
s.isAnimate() ? Duration.millis(160) : null, leftPane.prefWidthProperty(), null, s.getLeftPaneWidth(), FXUtils.SINE);
});
titleBar.setCenter(navBarPane);
titleBar.setRight(buttonsContainerPlaceHolder);
}
root.setTop(titleContainer);
{
HBox buttonsContainer = new HBox();
buttonsContainer.setStyle("-fx-background-color: transparent;");
buttonsContainer.setAlignment(Pos.CENTER_RIGHT);
buttonsContainer.setPadding(new Insets(4));
buttonsContainer.setAlignment(Pos.TOP_RIGHT);
buttonsContainer.setMaxHeight(40);
{
JFXButton btnMin = new JFXButton();
StackPane pane = new StackPane(minus);
@ -190,9 +198,14 @@ public class DecoratorSkin extends SkinBase<Decorator> {
buttonsContainer.getChildren().setAll(btnMin, btnClose);
}
titleBar.setRight(buttonsContainer);
AnchorPane layer = new AnchorPane();
layer.setPickOnBounds(false);
layer.getChildren().add(buttonsContainer);
AnchorPane.setTopAnchor(buttonsContainer, 0.0);
AnchorPane.setRightAnchor(buttonsContainer, 0.0);
buttonsContainerPlaceHolder.widthProperty().bind(buttonsContainer.widthProperty());
parent.getChildren().add(layer);
}
root.setTop(titleContainer);
getChildren().add(parent);
}
@ -277,19 +290,19 @@ public class DecoratorSkin extends SkinBase<Decorator> {
}
private boolean isRightEdge(double x, double y, Bounds boundsInParent) {
return x < root.getWidth() && x >= root.getWidth() - root.snappedLeftInset();
return x < parent.getWidth() && x >= parent.getWidth() - parent.snappedLeftInset();
}
private boolean isTopEdge(double x, double y, Bounds boundsInParent) {
return y >= 0 && y <= root.snappedTopInset();
return y >= 0 && y <= parent.snappedTopInset();
}
private boolean isBottomEdge(double x, double y, Bounds boundsInParent) {
return y < root.getHeight() && y >= root.getHeight() - root.snappedLeftInset();
return y < parent.getHeight() && y >= parent.getHeight() - parent.snappedLeftInset();
}
private boolean isLeftEdge(double x, double y, Bounds boundsInParent) {
return x >= 0 && x <= root.snappedLeftInset();
return x >= 0 && x <= parent.snappedLeftInset();
}
private boolean setStageWidth(double width) {
@ -325,48 +338,48 @@ public class DecoratorSkin extends SkinBase<Decorator> {
updateInitMouseValues(mouseEvent);
if (primaryStage.isResizable()) {
double x = mouseEvent.getX(), y = mouseEvent.getY();
Bounds boundsInParent = root.getBoundsInParent();
if (root.getBorder() != null && root.getBorder().getStrokes().size() > 0) {
double diagonalSize = root.snappedLeftInset() + 10;
Bounds boundsInParent = parent.getBoundsInParent();
if (parent.getBorder() != null && parent.getBorder().getStrokes().size() > 0) {
double diagonalSize = parent.snappedLeftInset() + 10;
if (this.isRightEdge(x, y, boundsInParent)) {
if (y < diagonalSize) {
root.setCursor(Cursor.NE_RESIZE);
} else if (y > root.getHeight() - diagonalSize) {
root.setCursor(Cursor.SE_RESIZE);
parent.setCursor(Cursor.NE_RESIZE);
} else if (y > parent.getHeight() - diagonalSize) {
parent.setCursor(Cursor.SE_RESIZE);
} else {
root.setCursor(Cursor.E_RESIZE);
parent.setCursor(Cursor.E_RESIZE);
}
} else if (this.isLeftEdge(x, y, boundsInParent)) {
if (y < diagonalSize) {
root.setCursor(Cursor.NW_RESIZE);
} else if (y > root.getHeight() - diagonalSize) {
root.setCursor(Cursor.SW_RESIZE);
parent.setCursor(Cursor.NW_RESIZE);
} else if (y > parent.getHeight() - diagonalSize) {
parent.setCursor(Cursor.SW_RESIZE);
} else {
root.setCursor(Cursor.W_RESIZE);
parent.setCursor(Cursor.W_RESIZE);
}
} else if (this.isTopEdge(x, y, boundsInParent)) {
if (x < diagonalSize) {
root.setCursor(Cursor.NW_RESIZE);
} else if (x > root.getWidth() - diagonalSize) {
root.setCursor(Cursor.NE_RESIZE);
parent.setCursor(Cursor.NW_RESIZE);
} else if (x > parent.getWidth() - diagonalSize) {
parent.setCursor(Cursor.NE_RESIZE);
} else {
root.setCursor(Cursor.N_RESIZE);
parent.setCursor(Cursor.N_RESIZE);
}
} else if (this.isBottomEdge(x, y, boundsInParent)) {
if (x < diagonalSize) {
root.setCursor(Cursor.SW_RESIZE);
} else if (x > root.getWidth() - diagonalSize) {
root.setCursor(Cursor.SE_RESIZE);
parent.setCursor(Cursor.SW_RESIZE);
} else if (x > parent.getWidth() - diagonalSize) {
parent.setCursor(Cursor.SE_RESIZE);
} else {
root.setCursor(Cursor.S_RESIZE);
parent.setCursor(Cursor.S_RESIZE);
}
} else {
root.setCursor(Cursor.DEFAULT);
parent.setCursor(Cursor.DEFAULT);
}
}
}
} else {
root.setCursor(Cursor.DEFAULT);
parent.setCursor(Cursor.DEFAULT);
}
}
@ -382,7 +395,7 @@ public class DecoratorSkin extends SkinBase<Decorator> {
this.newY = mouseEvent.getScreenY();
double deltaX = this.newX - this.initX;
double deltaY = this.newY - this.initY;
Cursor cursor = root.getCursor();
Cursor cursor = parent.getCursor();
if (Cursor.E_RESIZE == cursor) {
this.setStageWidth(this.primaryStage.getWidth() + deltaX);
mouseEvent.consume();

View File

@ -153,7 +153,6 @@ public class InstallersPage extends Control implements WizardPage {
final Label label;
InstallersPageItemSkin(String imageUrl, InstallerPageItem item, boolean clickable) {
setPadding(new Insets(8));
getStyleClass().add("card");
setLeft(FXUtils.limitingSize(imageView = new ImageView(new Image(imageUrl, 32, 32, true, true)), 32, 32));
@ -200,7 +199,7 @@ public class InstallersPage extends Control implements WizardPage {
HBox versionNamePane = new HBox(8);
versionNamePane.setAlignment(Pos.CENTER_LEFT);
versionNamePane.getStyleClass().add("card");
versionNamePane.setPadding(new Insets(20, 8, 20, 16));
versionNamePane.setStyle("-fx-padding: 20 8 20 16");
versionNamePane.getChildren().add(new Label(i18n("archive.name")));

View File

@ -115,6 +115,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
}
StackPane launchPane = new StackPane();
launchPane.getStyleClass().add("launch-pane");
launchPane.setMaxWidth(230);
launchPane.setMaxHeight(55);
launchPane.setOnScroll(event -> {
@ -134,8 +135,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
JFXButton launchButton = new JFXButton();
launchButton.setPrefWidth(230);
launchButton.setPrefHeight(55);
launchButton.setButtonType(JFXButton.ButtonType.RAISED);
launchButton.getStyleClass().add("jfx-button-raised");
//launchButton.setButtonType(JFXButton.ButtonType.RAISED);
launchButton.setOnAction(e -> launch());
launchButton.setDefaultButton(true);
launchButton.setClip(new Rectangle(-100, -100, 310, 200));
@ -161,7 +161,6 @@ public final class MainPage extends StackPane implements DecoratorPage {
}
Rectangle separator = new Rectangle();
separator.getStyleClass().add("darker-fill");
separator.setWidth(1);
separator.setHeight(57);
separator.setTranslateX(95);
@ -170,8 +169,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
menuButton = new JFXButton();
menuButton.setPrefHeight(55);
menuButton.setPrefWidth(230);
menuButton.setButtonType(JFXButton.ButtonType.RAISED);
menuButton.getStyleClass().add("jfx-button-raised");
//menuButton.setButtonType(JFXButton.ButtonType.RAISED);
menuButton.setStyle("-fx-font-size: 15px;");
menuButton.setOnMouseClicked(e -> onMenu());
menuButton.setClip(new Rectangle(211, -100, 100, 200));

View File

@ -75,7 +75,7 @@ public class ProfileListItemSkin extends SkinBase<ProfileListItem> {
root.setRight(right);
root.getStyleClass().add("card");
root.setPadding(new Insets(8, 8, 8, 0));
root.setStyle("-fx-padding: 8 8 8 0");
JFXDepthManager.setDepth(root, 1);
item.titleProperty().bind(skinnable.titleProperty());
item.subtitleProperty().bind(skinnable.subtitleProperty());

View File

@ -99,7 +99,7 @@ public class GameListItemSkin extends SkinBase<GameListItem> {
root.setRight(right);
root.getStyleClass().add("card");
root.setPadding(new Insets(8, 8, 8, 0));
root.setStyle("-fx-padding: 8 8 8 0");
JFXDepthManager.setDepth(root, 1);
getChildren().setAll(root);

View File

@ -87,13 +87,12 @@ class ModListPageSkin extends SkinBase<ModListPage> {
BooleanProperty booleanProperty;
{
Region clippedContainer = (Region)listView.lookup(".clipped-container");
setPrefWidth(0);
HBox container = new HBox(8);
container.setPadding(new Insets(0, 0, 0, 6));
container.setAlignment(Pos.CENTER_LEFT);
pane.getChildren().add(container);
pane.setPadding(new Insets(8, 8, 8, 0));
if (clippedContainer != null) {
maxWidthProperty().bind(clippedContainer.widthProperty());
prefWidthProperty().bind(clippedContainer.widthProperty());

View File

@ -318,8 +318,6 @@ public class VersionPage extends Control implements DecoratorPage {
);
JFXButton upgradeButton = new JFXButton();
FXUtils.setLimitWidth(upgradeButton, 40);
FXUtils.setLimitHeight(upgradeButton, 40);
upgradeButton.setGraphic(SVG.update(Theme.whiteFillBinding(), 20, 20));
upgradeButton.getStyleClass().add("jfx-decorator-button");
upgradeButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@ -328,8 +326,6 @@ public class VersionPage extends Control implements DecoratorPage {
FXUtils.installFastTooltip(upgradeButton, i18n("version.update"));
JFXButton testGameButton = new JFXButton();
FXUtils.setLimitWidth(testGameButton, 40);
FXUtils.setLimitHeight(testGameButton, 40);
testGameButton.setGraphic(SVG.launch(Theme.whiteFillBinding(), 20, 20));
testGameButton.getStyleClass().add("jfx-decorator-button");
testGameButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@ -337,8 +333,6 @@ public class VersionPage extends Control implements DecoratorPage {
FXUtils.installFastTooltip(testGameButton, i18n("version.launch.test"));
JFXButton browseMenuButton = new JFXButton();
FXUtils.setLimitWidth(browseMenuButton, 40);
FXUtils.setLimitHeight(browseMenuButton, 40);
browseMenuButton.setGraphic(SVG.folderOpen(Theme.whiteFillBinding(), 20, 20));
browseMenuButton.getStyleClass().add("jfx-decorator-button");
browseMenuButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@ -347,7 +341,7 @@ public class VersionPage extends Control implements DecoratorPage {
JFXButton managementMenuButton = new JFXButton();
FXUtils.setLimitWidth(managementMenuButton, 40);
FXUtils.setLimitHeight(managementMenuButton, 40);;
FXUtils.setLimitHeight(managementMenuButton, 40);
managementMenuButton.setGraphic(SVG.wrench(Theme.whiteFillBinding(), 20, 20));
managementMenuButton.getStyleClass().add("jfx-decorator-button");
managementMenuButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@ -362,11 +356,9 @@ public class VersionPage extends Control implements DecoratorPage {
titleBar.setRight(toolBar);
control.state.set(new State(i18n("version.manage.manage"), titleBar, true, false, true, false, 200));
control.transitionPane.getStyleClass().add("gray-background");
FXUtils.setOverflowHidden(control.transitionPane, 8);
StackPane wrapper = new StackPane(control.transitionPane);
wrapper.setPadding(new Insets(4));
root.setCenter(wrapper);
//control.transitionPane.getStyleClass().add("gray-background");
//FXUtils.setOverflowHidden(control.transitionPane, 8);
root.setCenter(control.transitionPane);
spinnerPane.loadingProperty().bind(control.loading);
spinnerPane.setContent(root);

View File

@ -85,7 +85,7 @@ public class WorldListItemSkin extends SkinBase<WorldListItem> {
root.setRight(right);
root.getStyleClass().add("card");
root.setPadding(new Insets(8, 8, 8, 0));
root.setStyle("-fx-padding: 8 8 8 0");
JFXDepthManager.setDepth(root, 1);
getChildren().setAll(root);

View File

@ -18,22 +18,6 @@
.root {
}
.jfx-list-view .scroll-bar {
-fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
}
.jfx-list-view .scroll-bar .track {
-fx-fill: transparent;
}
.scroll-pane .scroll-bar {
-fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
}
.scroll-pane .scroll-bar .track {
-fx-fill: transparent;
}
.scroll-bar .thumb {
-fx-fill: rgba(255, 255, 255, 0.5);
-fx-arc-width: 5px;
@ -44,13 +28,6 @@
-fx-text-fill: rgba(0, 0, 0, 0.5);
}
.side-menu {
-fx-padding: 20.0, 10.0;
-fx-font-size: 15.0;
-fx-font-weight: NORMAL;
-fx-text-fill: #444;
}
.title-label {
-fx-font-size: 16.0px;
-fx-padding: 14.0px;
@ -153,10 +130,6 @@
-fx-text-fill: white;
}
.darker-fill {
-fx-fill: -fx-base-darker-color;
}
.sponsor-pane {
-fx-padding: 16;
-fx-cursor: hand;
@ -166,6 +139,32 @@
-fx-wrap-text: true;
}
/*******************************************************************************
* *
* Main Page *
* *
******************************************************************************/
.launch-pane .jfx-button {
-fx-background-color: -fx-base-color;
-fx-cursor: hand;
}
.launch-pane .jfx-button .jfx-rippler {
-jfx-rippler-fill: white;
-jfx-mask-type: CIRCLE;
-fx-padding: 0.0;
}
.launch-pane .jfx-button, .jfx-button * {
-fx-text-fill: -fx-base-text-fill;
-fx-font-size: 14px;
}
.launch-pane Rectangle {
-fx-fill: -fx-base-darker-color;
}
/*******************************************************************************
* *
* JFX Tab Pane *
@ -370,7 +369,9 @@
-fx-font-size: 13.0;
-fx-font-weight: BOLD;
-fx-pref-width: 100.0%;
-fx-pref-height: 32.0px;
-fx-min-height: 40px;
-fx-max-height: 40px;
-fx-pref-height: 40px;
}
.jfx-tool-bar .background {
@ -383,6 +384,12 @@
}
.jfx-tool-bar .jfx-decorator-button {
-fx-min-width: 40px;
-fx-max-width: 40px;
-fx-pref-width: 40px;
-fx-min-height: 40px;
-fx-max-height: 40px;
-fx-pref-height: 40px;
-fx-cursor: hand;
}
@ -436,9 +443,9 @@
}
.jfx-decorator-button {
-fx-max-width: 35px;
-fx-max-width: 40px;
-fx-background-radius: 5px;
-fx-max-height: 35px;
-fx-max-height: 40px;
-fx-background-color: transparent;
-jfx-toggle-color: rgba(128, 128, 255, 0.2);
-jfx-untoggle-color: transparent;
@ -671,6 +678,14 @@
-fx-background-color: transparent;
}
.jfx-list-view .scroll-bar {
-fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
}
.jfx-list-view .scroll-bar .track {
-fx-fill: transparent;
}
.jfx-list-view-float {
-fx-padding: 5;
-fx-background-insets: 0.0;
@ -689,6 +704,7 @@
.card {
-fx-background-color: WHITE;
-fx-background-radius: 4;
-fx-padding: 8px;
}
.card:selected {
@ -1097,7 +1113,7 @@
}
.jfx-decorator-drawer {
-fx-background-color: rgba(244, 244, 244, 0.55);
-fx-background-color: rgba(244, 244, 244, 0.5);
}
.jfx-decorator-title {
@ -1118,7 +1134,7 @@
-fx-text-fill: -fx-base-text-fill;
}
.resize-border {
.window {
-fx-border-color: black;
-fx-border-width: 1;
}
@ -1132,10 +1148,6 @@
-fx-background-color: rgba(244, 244, 244, 0.5);
}
.drawer-background {
-fx-background-color: #FAFAFA;
}
.gray-background {
-fx-background-color: rgba(244, 244, 244, 0.5);
}
@ -1325,6 +1337,14 @@
-fx-background-color: null;
}
.scroll-pane .scroll-bar {
-fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
}
.scroll-pane .scroll-bar .track {
-fx-fill: transparent;
}
/*******************************************************************************
* *
* Error Facade *

View File

@ -13,7 +13,7 @@
</fx:define>
<VBox fx:id="list" styleClass="jfx-list-view" maxHeight="150" spacing="8" maxWidth="400">
<Label padding="${insets}" text="%install.modpack" />
<JFXButton fx:id="btnLocal" styleClass="card" style="-fx-padding: 8; -fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseLocalFile">
<JFXButton fx:id="btnLocal" styleClass="card" style="-fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseLocalFile">
<graphic>
<BorderPane mouseTransparent="true">
<left>
@ -25,7 +25,7 @@
</BorderPane>
</graphic>
</JFXButton>
<JFXButton fx:id="btnRemote" styleClass="card" style="-fx-padding: 8; -fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseRemoteFile">
<JFXButton fx:id="btnRemote" styleClass="card" style="-fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseRemoteFile">
<graphic>
<BorderPane mouseTransparent="true">
<left>