reworking the wrong file alert dialogue

main/ui/src/main/java/org/cryptomator/ui/wrongfilealert/WrongFileAlertController.java

@@ -1,5 +1,8 @@
 package org.cryptomator.ui.wrongfilealert;
 
+import javafx.application.Application;
+import javafx.beans.property.StringProperty;
+import javafx.fxml.FXML;
 import javafx.stage.Stage;
 import org.cryptomator.ui.common.FxController;
 
@@ -8,14 +11,23 @@ import javax.inject.Inject;
 @WrongFileAlertScoped
 public class WrongFileAlertController implements FxController {
 
+	private static final String DOCUMENTATION_URI = "https://docs.cryptomator.org";
+
+	private Application app;
 	private final Stage window;
 
 	@Inject
-	public WrongFileAlertController(@WrongFileAlertWindow Stage window) {
+	public WrongFileAlertController(@WrongFileAlertWindow Stage window, Application app) {
 		this.window = window;
+		this.app = app;
 	}
 
 	public void close() {
 		window.close();
 	}
+
+	@FXML
+	public void openDocumentation() {
+		app.getHostServices().showDocument(DOCUMENTATION_URI);
+	}
 }

main/ui/src/main/resources/fxml/wrongfilealert.fxml

@@ -3,35 +3,67 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ButtonBar?>
+<?import javafx.scene.control.Hyperlink?>
 <?import javafx.scene.control.Label?>
+<?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 javafx.scene.shape.Circle?>
+<?import javafx.scene.text.Text?>
+<?import javafx.scene.text.TextFlow?>
 <?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.wrongfilealert.WrongFileAlertController"
-	  minWidth="400"
-	  maxWidth="400"
-	  minHeight="145"
-	  spacing="12">
+	  minWidth="450"
+	  maxWidth="450"
+	  minHeight="-Infinity"
+	  spacing="24"
+	  alignment="CENTER">
 	<padding>
-		<Insets topRightBottomLeft="12"/>
+		<Insets topRightBottomLeft="24"/>
 	</padding>
 	<children>
 		<HBox spacing="12" alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
 			<StackPane alignment="CENTER" HBox.hgrow="NEVER">
 				<Circle styleClass="glyph-icon-primary" radius="24"/>
-				<FontAwesome5IconView styleClass="glyph-icon-white" glyph="QUESTION" glyphSize="24"/>
+				<FontAwesome5IconView styleClass="glyph-icon-white" glyph="INFO" glyphSize="24"/>
 			</StackPane>
-			<Label text="%wrongFileAlert.information" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+			<VBox spacing="6" alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
+				<Label text="%wrongFileAlert.header.title" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+				<Label text="%wrongFileAlert.header.lead" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+			</VBox>
 		</HBox>
 
+		<ImageView VBox.vgrow="ALWAYS" fitHeight="200" preserveRatio="true" smooth="true" cache="true">
+			<Image url="/choose_existing_vault.png"/> <!-- TODO replace mockup -->
+		</ImageView>
+
+		<VBox alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
+			<Label text="%wrongFileAlert.instruction.0" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+			<VBox alignment="CENTER_LEFT" VBox.vgrow="ALWAYS" spacing="6">
+				<padding>
+					<Insets left="12" top="6"/>
+				</padding>
+				<Label text="%wrongFileAlert.instruction.1" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+				<Label text="%wrongFileAlert.instruction.2" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+				<Label text="%wrongFileAlert.instruction.3" wrapText="true" textAlignment="LEFT" HBox.hgrow="ALWAYS"/>
+			</VBox>
+		</VBox>
+
+		<TextFlow>
+			<Text text="%wrongFileAlert.link"/>
+			<Text text=" "/>
+			<Hyperlink styleClass="hyperlink-underline" text="docs.cryptomator.org" onAction="#openDocumentation"/>
+			<Text text="."/>
+		</TextFlow>
+
 		<VBox alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
 			<ButtonBar buttonMinWidth="120" buttonOrder="+CI">
 				<buttons>
-					<Button text="%wrongFileAlert.btn" ButtonBar.buttonData="FINISH" defaultButton="true" cancelButton="true" onAction="#close"/>
+					<Button text="%generic.button.close" ButtonBar.buttonData="CANCEL_CLOSE" defaultButton="true" cancelButton="true" onAction="#close"/>
 				</buttons>
 			</ButtonBar>
 		</VBox>

main/ui/src/main/resources/i18n/strings.properties

@@ -184,9 +184,14 @@ main.vaultDetail.migrateButton=Upgrade Vault
 main.vaultDetail.migratePrompt=Your vault needs to be upgraded to a new format, before you can access it
 
 # Wrong File Alert
-wrongFileAlert.title=Unknown File
-wrongFileAlert.btn=Okay
-wrongFileAlert.information=You have tried to add a file or folder that does not seem to be a Cryptomator vault. To encrypt your data, create and unlock a vault.
+wrongFileAlert.title=Encrypt Files
+wrongFileAlert.header.title=Did you attempt to encrypt these files?
+wrongFileAlert.header.lead=For this purpose, Cryptomator provides a volume in your system file manager.
+wrongFileAlert.instruction.0=To encrypt files, follow these steps:
+wrongFileAlert.instruction.1=1. Unlock your vault.
+wrongFileAlert.instruction.2=2. Click on "Reveal" to open the volume in your file manager.
+wrongFileAlert.instruction.3=3. Add your files to this volume.
+wrongFileAlert.link=For futher assistance, visit
 
 # Vault Options
 ## General