updated vault detail layout, moved change password button to vault options, updated other minor stylings

main/ui/src/main/java/org/cryptomator/ui/mainwindow/VaultDetailController.java

@@ -1,5 +1,6 @@
 package org.cryptomator.ui.mainwindow;
 
+import javafx.beans.binding.Binding;
 import javafx.beans.binding.BooleanBinding;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.ReadOnlyObjectProperty;
@@ -8,8 +9,10 @@ import org.cryptomator.common.vaults.Vault;
 import org.cryptomator.ui.changepassword.ChangePasswordComponent;
 import org.cryptomator.ui.common.FxController;
 import org.cryptomator.ui.common.Tasks;
+import org.cryptomator.ui.controls.FontAwesome5Icon;
 import org.cryptomator.ui.fxapp.FxApplication;
 import org.cryptomator.ui.vaultoptions.VaultOptionsComponent;
+import org.fxmisc.easybind.EasyBind;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
@@ -22,6 +25,7 @@ public class VaultDetailController implements FxController {
 	private static final Logger LOG = LoggerFactory.getLogger(VaultDetailController.class);
 
 	private final ReadOnlyObjectProperty<Vault> vault;
+	private final Binding<FontAwesome5Icon> glyph;
 	private final BooleanBinding anyVaultSelected;
 	private final ExecutorService executor;
 	private final FxApplication application;
@@ -31,6 +35,7 @@ public class VaultDetailController implements FxController {
 	@Inject
 	VaultDetailController(ObjectProperty<Vault> vault, ExecutorService executor, FxApplication application, VaultOptionsComponent.Builder vaultOptionsWindow, ChangePasswordComponent.Builder changePasswordWindow) {
 		this.vault = vault;
+		this.glyph = EasyBind.select(vault).selectObject(Vault::stateProperty).map(this::getGlyphForVaultState).orElse(FontAwesome5Icon.EXCLAMATION_TRIANGLE);
 		this.executor = executor;
 		this.application = application;
 		this.vaultOptionsWindow = vaultOptionsWindow;
@@ -38,6 +43,19 @@ public class VaultDetailController implements FxController {
 		this.anyVaultSelected = vault.isNotNull();
 	}
 
+	private FontAwesome5Icon getGlyphForVaultState(Vault.State state) {
+		switch (state) {
+			case LOCKED:
+				return FontAwesome5Icon.LOCK_ALT;
+			case PROCESSING:
+				return FontAwesome5Icon.SPINNER;
+			case UNLOCKED:
+				return FontAwesome5Icon.LOCK_OPEN_ALT;
+			default:
+				return FontAwesome5Icon.EXCLAMATION_TRIANGLE;
+		}
+	}
+
 	@FXML
 	public void unlock() {
 		application.showUnlockWindow(vault.get());
@@ -77,6 +95,14 @@ public class VaultDetailController implements FxController {
 		return vault.get();
 	}
 
+	public Binding<FontAwesome5Icon> glyphProperty() {
+		return glyph;
+	}
+
+	public FontAwesome5Icon getGlyph() {
+		return glyph.getValue();
+	}
+
 	public BooleanBinding anyVaultSelectedProperty() {
 		return anyVaultSelected;
 	}

main/ui/src/main/java/org/cryptomator/ui/vaultoptions/GeneralVaultOptionsController.java

@@ -1,5 +1,8 @@
 package org.cryptomator.ui.vaultoptions;
 
+import javafx.fxml.FXML;
+import org.cryptomator.common.vaults.Vault;
+import org.cryptomator.ui.changepassword.ChangePasswordComponent;
 import org.cryptomator.ui.common.FxController;
 
 import javax.inject.Inject;
@@ -7,7 +10,18 @@ import javax.inject.Inject;
 @VaultOptionsScoped
 public class GeneralVaultOptionsController implements FxController {
 
+	private final Vault vault;
+	private final ChangePasswordComponent.Builder changePasswordWindow;
+
 	@Inject
-	GeneralVaultOptionsController(){}
+	GeneralVaultOptionsController(@VaultOptionsWindow Vault vault, ChangePasswordComponent.Builder changePasswordWindow) {
+		this.vault = vault;
+		this.changePasswordWindow = changePasswordWindow;
+	}
+
+	@FXML
+	public void changePassword() {
+		changePasswordWindow.vault(vault).build().showChangePasswordWindow();
+	}
 
 }

main/ui/src/main/resources/css/dark_theme.css

@@ -113,9 +113,9 @@
 }
 
 .main-window .update-indicator {
-	-fx-background-color: PRIMARY_BG, INDICATOR_BG;
-	-fx-background-insets: 0, 1px;
-	-fx-background-radius: 5px, 4px;
+	-fx-background-color: PRIMARY_BG, white, INDICATOR_BG;
+	-fx-background-insets: 0, 1px, 2px;
+	-fx-background-radius: 6px, 5px, 4px;
 	-fx-translate-x: -1px;
 	-fx-translate-y: 1px;
 }
@@ -180,7 +180,7 @@
 
 /*******************************************************************************
  *                                                                             *
- * Vault List                                                                   *
+ * Vault List                                                                  *
  *                                                                             *
  ******************************************************************************/
 
@@ -234,6 +234,7 @@
 }
 
 .toolbar-container {
+	-fx-min-height: 31px;
 	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
 	-fx-border-width: 1px 0 0 0;
 }
@@ -284,6 +285,48 @@
 	-fx-padding: 0 3 0 3;
 }
 
+
+/*******************************************************************************
+ *                                                                             *
+ * Vault Detail                                                                *
+ *                                                                             *
+ ******************************************************************************/
+
+.vault-detail .vault-status-icon {
+	-fx-fill: SECONDARY;
+}
+
+.vault-detail .vault-name {
+	-fx-font-size: 2em;
+}
+
+.list-group-item-heading {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-font-size: 0.8em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * List Group                                                                  *
+ *                                                                             *
+ ******************************************************************************/
+
+.list-group {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+}
+
+.list-group-item {
+	-fx-padding: 1em;
+	-fx-spacing: 0.25em;
+}
+
+.list-group-separator {
+	-fx-background-color: CONTROL_BORDER_NORMAL;
+	-fx-pref-height: 1px;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Tooltip                                                                     *
@@ -370,6 +413,15 @@
 	-fx-background-color: CONTROL_PRIMARY_BORDER_DISABLED, CONTROL_PRIMARY_BG_DISABLED;
 }
 
+.button:default .glyph-icon {
+	-fx-fill: TEXT_FILL_WHITE;
+}
+
+.button-large {
+	-fx-font-size: 1.25em;
+	-fx-padding: 0.25em 1.25em 0.25em 1.25em;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Checkbox                                                                    *
@@ -414,6 +466,7 @@
 	-fx-label-padding: 0 0 0 6px;
 	-fx-padding: 4px;
 }
+
 .radio-button > .radio {
 	-fx-border-color: CONTROL_BORDER_NORMAL;
 	-fx-border-radius: 1em; /* large value to make sure this remains circular */
@@ -421,18 +474,22 @@
 	-fx-background-radius: 1em;
 	-fx-padding: 4px; /* padding from outside edge to the inner black dot */
 }
+
 .radio-button:focused > .radio {
 	-fx-border-color: CONTROL_BORDER_FOCUSED;
 }
+
 .text-input:disabled > .radio {
 	-fx-border-color: CONTROL_BORDER_DISABLED;
 	-fx-background-color: CONTROL_BG_DISABLED;
 }
+
 .radio-button > .radio > .dot {
 	-fx-background-color: transparent;
 	-fx-background-radius: 1.0em; /* large value to make sure this remains circular */
 	-fx-padding: 3px; /* radius of the inner black dot when selected */
 }
+
 .radio-button:selected > .radio > .dot {
 	-fx-background-color: TEXT_FILL;
 }

main/ui/src/main/resources/css/light_theme.css

@@ -113,9 +113,9 @@
 }
 
 .main-window .update-indicator {
-	-fx-background-color: PRIMARY_BG, INDICATOR_BG;
-	-fx-background-insets: 0, 1px;
-	-fx-background-radius: 5px, 4px;
+	-fx-background-color: PRIMARY_BG, white, INDICATOR_BG;
+	-fx-background-insets: 0, 1px, 2px;
+	-fx-background-radius: 6px, 5px, 4px;
 	-fx-translate-x: -1px;
 	-fx-translate-y: 1px;
 }
@@ -180,7 +180,7 @@
 
 /*******************************************************************************
  *                                                                             *
- * Vault List                                                                   *
+ * Vault List                                                                  *
  *                                                                             *
  ******************************************************************************/
 
@@ -234,6 +234,7 @@
 }
 
 .toolbar-container {
+	-fx-min-height: 31px;
 	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
 	-fx-border-width: 1px 0 0 0;
 }
@@ -284,6 +285,48 @@
 	-fx-padding: 0 3 0 3;
 }
 
+
+/*******************************************************************************
+ *                                                                             *
+ * Vault Detail                                                                *
+ *                                                                             *
+ ******************************************************************************/
+
+.vault-detail .vault-status-icon {
+	-fx-fill: SECONDARY;
+}
+
+.vault-detail .vault-name {
+	-fx-font-size: 2em;
+}
+
+.list-group-item-heading {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-font-size: 0.8em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * List Group                                                                  *
+ *                                                                             *
+ ******************************************************************************/
+
+.list-group {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+}
+
+.list-group-item {
+	-fx-padding: 1em;
+	-fx-spacing: 0.25em;
+}
+
+.list-group-separator {
+	-fx-background-color: CONTROL_BORDER_NORMAL;
+	-fx-pref-height: 1px;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Tooltip                                                                     *
@@ -370,6 +413,15 @@
 	-fx-background-color: CONTROL_PRIMARY_BORDER_DISABLED, CONTROL_PRIMARY_BG_DISABLED;
 }
 
+.button:default .glyph-icon {
+	-fx-fill: TEXT_FILL_WHITE;
+}
+
+.button-large {
+	-fx-font-size: 1.25em;
+	-fx-padding: 0.25em 1.25em 0.25em 1.25em;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Checkbox                                                                    *
@@ -414,6 +466,7 @@
 	-fx-label-padding: 0 0 0 6px;
 	-fx-padding: 4px;
 }
+
 .radio-button > .radio {
 	-fx-border-color: CONTROL_BORDER_NORMAL;
 	-fx-border-radius: 1em; /* large value to make sure this remains circular */
@@ -421,18 +474,22 @@
 	-fx-background-radius: 1em;
 	-fx-padding: 4px; /* padding from outside edge to the inner black dot */
 }
+
 .radio-button:focused > .radio {
 	-fx-border-color: CONTROL_BORDER_FOCUSED;
 }
+
 .text-input:disabled > .radio {
 	-fx-border-color: CONTROL_BORDER_DISABLED;
 	-fx-background-color: CONTROL_BG_DISABLED;
 }
+
 .radio-button > .radio > .dot {
 	-fx-background-color: transparent;
 	-fx-background-radius: 1.0em; /* large value to make sure this remains circular */
 	-fx-padding: 3px; /* radius of the inner black dot when selected */
 }
+
 .radio-button:selected > .radio > .dot {
 	-fx-background-color: TEXT_FILL;
 }

main/ui/src/main/resources/fxml/vault_detail.fxml

@@ -3,40 +3,58 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
-<?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.mainwindow.VaultDetailController"
-	  minWidth="300">
+	  styleClass="vault-detail"
+	  minWidth="300"
+	  spacing="12">
 	<padding>
-		<Insets bottom="6.0" left="6.0" right="6.0" top="6.0"/>
+		<Insets bottom="12.0" left="12.0" right="12.0" top="12.0"/>
 	</padding>
 	<children>
-		<!--TODO: add caption style class -->
-		<Label text="${controller.vault.displayableName}"/>
-		<TextFlow styleClass="text-flow" visible="${controller.anyVaultSelected}"><!--TODO: add visibility of the textflows -->
-			<Text text="%vaultDetail.info.storageLocation"/>
-			<Text text="&quot;"/>
-			<Text text="${controller.vault.displayablePath}"/>
-			<Text text="&quot;"/>
-		</TextFlow>
-		<TextFlow styleClass="text-flow" visible="${controller.anyVaultSelected}">
-			<Text text="%vaultDetail.info.accessLocation"/>
-			<Text text="&quot;"/>
-			<Text text="${controller.vault.customMountPath}"/>
-			<Text text="&quot;"/>
-		</TextFlow>
-		<TextFlow styleClass="text-flow" visible="${controller.anyVaultSelected}">
-			<Text text="%vaultDetail.info.currentState"/>
-			<Text text="LOCKED" visible="${controller.vault.locked}" managed="${controller.vault.locked}"/><!-- hacky but working -->
-			<Text text="UNLOCKED" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}"/>
-		</TextFlow>
+		<HBox alignment="BOTTOM_LEFT" spacing="6" visible="${controller.anyVaultSelected}">
+			<padding>
+				<Insets left="6"/>
+			</padding>
+			<children>
+				<VBox alignment="CENTER" minWidth="22.5">
+					<FontAwesome5IconView styleClass="vault-status-icon" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="18"/>
+				</VBox>
+				<Label styleClass="vault-name" text="${controller.vault.displayableName}"/>
+				<Region HBox.hgrow="ALWAYS"/>
+				<Button text="%vaultDetail.optionsBtn" onAction="#showVaultOptions" visible="${controller.vault.locked}" managed="${controller.vault.locked}">
+					<graphic>
+						<FontAwesome5IconView glyph="COGS"/>
+					</graphic>
+				</Button>
+			</children>
+		</HBox>
+		<VBox styleClass="list-group" visible="${controller.anyVaultSelected}">
+			<VBox styleClass="list-group-item">
+				<Label styleClass="list-group-item-heading" text="storage location"/>
+				<Label text="${controller.vault.displayablePath}"/>
+			</VBox>
+			<Region styleClass="list-group-separator" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}"/>
+			<VBox styleClass="list-group-item" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
+				<Label styleClass="list-group-item-heading" text="access location" visible="${controller.vault.unlocked}"/>
+				<Label text="${controller.vault.customMountPath}"/>
+			</VBox>
+		</VBox>
 
-		<Button text="TODO unlock" onAction="#unlock" visible="${controller.vault.locked}" defaultButton="${controller.vault.locked}"/>
-		<Button text="TODO lock" onAction="#lock" visible="${controller.vault.unlocked}" defaultButton="${controller.vault.unlocked}"/>
-		<Button text="TODO options" onAction="#showVaultOptions" visible="${controller.vault.locked}"/>
-		<Button text="TODO change password" onAction="#changePassword" visible="${controller.vault.locked}"/>
+		<Button styleClass="button-large" text="%vaultDetail.unlockBtn" onAction="#unlock" visible="${controller.vault.locked}" managed="${controller.vault.locked}" defaultButton="${controller.vault.locked}">
+			<graphic>
+				<FontAwesome5IconView glyph="LOCK_OPEN_ALT" glyphSize="15"/>
+			</graphic>
+		</Button>
+		<Button styleClass="button-large" text="%vaultDetail.lockBtn" onAction="#lock" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}" defaultButton="${controller.vault.unlocked}">
+			<graphic>
+				<FontAwesome5IconView glyph="LOCK_ALT" glyphSize="15"/>
+			</graphic>
+		</Button>
 	</children>
 </VBox>

main/ui/src/main/resources/fxml/vault_options.fxml

@@ -11,7 +11,7 @@
 		 tabClosingPolicy="UNAVAILABLE"
 		 tabDragPolicy="FIXED">
 	<tabs>
-		<Tab fx:id="generalTab" text="TODO General">
+		<Tab fx:id="generalTab" text="%vaultOptions.general">
 			<graphic>
 				<FontAwesome5IconView glyph="COGS"/>
 			</graphic>
@@ -19,7 +19,7 @@
 				<fx:include source="/fxml/vault_options_general.fxml"/>
 			</content>
 		</Tab>
-		<Tab fx:id="mountTab" text="TODO Mounting">
+		<Tab fx:id="mountTab" text="%vaultOptions.mount">
 			<graphic>
 				<FontAwesome5IconView glyph="HDD"/>
 			</graphic>

main/ui/src/main/resources/fxml/vault_options_general.fxml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Button?>
 <?import javafx.scene.layout.VBox?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
@@ -11,6 +11,6 @@
 		<Insets bottom="12" left="12" right="12" top="12"/>
 	</padding>
 	<children>
-		<Label text="todo general options"/>
+		<Button text="%vaultOptions.general.changePasswordBtn" onAction="#changePassword"/>
 	</children>
 </VBox>

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

@@ -1,5 +1,5 @@
-#Generics
-##Button
+# Generics
+## Button
 generic.button.back=Back
 generic.button.cancel=Cancel
 generic.button.change=Change
@@ -7,17 +7,17 @@ generic.button.create=Create
 generic.button.next=Next
 generic.button.open=Open
 
-#Add Vault Dialogs
-##Welcome
+# Add Vault Wizard
+## Welcome
 addvaultwizard.welcome.instruction=TODO new vault or existing vault?
 addvaultwizard.welcome.newButton=TODO new vault
 addvaultwizard.welcome.existingButton=TODO exising vault
-##Existing
+## Existing
 addvaultwizard.existing.promptText=TODO prompt
 addvaultwizard.existing.filePickerButton=TODO Filepicker
 addvaultwizard.existing.instruction=Please choose the masterkey.cryptomator file of your existing vault.The path to the vault will be displayed.
 addvaultwizard.existing.filePickerTitle=Open Masterkey File
-##New
+## New
 addvaultwizard.new.nameInstruction=Please enter a name for the vault:
 addvaultwizard.new.namePrompt=TODO vault name
 addvaultwizard.new.locationInstruction=Please pick a directory where your vault will be stored:
@@ -29,51 +29,55 @@ addvaultwizard.new.reenterPassword=Please enter the password again:
 addvaultwizard.new.passwordsMatch=Passwords match!
 addvaultwizard.new.passwordsDoNotMatch=Passwords do not match.
 
-#ChangePassword
+# Change Password
 changepassword.title=Change Password
 changepassword.enterOldPassword=To change the password, please enter the current password for
 changepassword.enterNewPassword=Please enter a new password:
 changepassword.reenterNewPassword=Please reenter the new password:
 
-#Unlock
+# Unlock
 unlock.title=Unlock Vault
 unlock.passwordPrompt=Enter Password for
 unlock.savePassword=Save Password
 unlock.unlockBtn=Unlock
-##Delete Saved Password Dialog
+## Delete Saved Password Dialog
 unlock.deleteSavedPasswordDialog.title=Delete Saved Password
 unlock.deleteSavedPasswordDialog.header=Do you really want to delete the saved password of this vault?
 unlock.deleteSavedPasswordDialog.content=The saved password of this vault will be immediately deleted from your system keychain. If you'd like to save your password again, you'd have to unlock your vault with the "Save Password" option enabled.
 
-#Preferences
+# Preferences
 preferences.title=Preferences
-##General
+## General
 preferences.general=General
 preferences.general.theme=Look & Feel
 preferences.general.startHidden=Hide window when starting Cryptomator
 preferences.general.debugLogging=Enable debug logging
 preferences.general.volumeType=Volume Type
-##Updates
+## Updates
 preferences.updates=Updates
 preferences.updates.autoUpdateCheck=Check for updates automatically
 preferences.updates.checkNowBtn=Check Now
-##Volume
+## Volume
 preferences.volume=Virtual Drive
 
-# Main window
+# Main Window
 main.closeBtn.tooltip=Close
 main.settingsBtn.tooltip=Settings
 vaultlist.emptyList.onboardingInstruction=Click here to add a vault
-## Vault detail
-vaultDetail.info.storageLocation=Stored at 
-vaultDetail.info.accessLocation=Accesssible at
-vaultDetail.info.currentState=Currently 
+## Vault Detail
+vaultDetail.unlockBtn=Unlock
+vaultDetail.lockBtn=Lock
+vaultDetail.optionsBtn=Options
 
-
-# Misc/Not Classfied
+# Vault Options
+vaultOptions.general=General
+vaultOptions.general.changePasswordBtn=Change Password
+vaultOptions.mount=Mounting
 vaultOptions.mount.readonly=Read-Only
 vaultOptions.mount.driveName=Drive Name
 vaultOptions.mount.customMountFlags=Custom Mount Flags
+
+# Misc
 passwordStrength.messageLabel.0=Very weak
 passwordStrength.messageLabel.1=Weak
 passwordStrength.messageLabel.2=Fair