made button-group into an actual button

main/commons/src/main/java/org/cryptomator/common/vaults/VaultStats.java

@@ -45,7 +45,7 @@ public class VaultStats {
 			case UNLOCKED:
 				assert fs.get() != null;
 				LOG.debug("start recording stats");
-				updateService.start();
+				updateService.restart();
 				break;
 			case LOCKED:
 				LOG.debug("stop recording stats");

main/ui/src/main/java/org/cryptomator/ui/controls/FontAwesome5Icon.java

@@ -10,6 +10,7 @@ public enum FontAwesome5Icon {
 	COG("\uF013"), //
 	COGS("\uF085"), //
 	EXCLAMATION_TRIANGLE("\uF071"), //
+	EYE("\uF06E"), //
 	FOLDER_OPEN("\uF07C"), //
 	HDD("\uF0A0"), //
 	LOCK_ALT("\uF30D"), //

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

@@ -6,7 +6,6 @@ import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.ReadOnlyObjectProperty;
 import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
-import javafx.scene.input.MouseEvent;
 import org.cryptomator.common.vaults.Vault;
 import org.cryptomator.common.vaults.VaultState;
 import org.cryptomator.common.vaults.Volume;
@@ -96,7 +95,7 @@ public class VaultDetailController implements FxController {
 	}
 
 	@FXML
-	public void revealAccessLocation(MouseEvent mouseEvent) {
+	public void revealAccessLocation(ActionEvent actionEvent) {
 		try {
 			vault.get().reveal();
 		} catch (Volume.VolumeException e) {

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

@@ -36,6 +36,7 @@
 	CONTROL_BORDER_FOCUSED: #9E9E9E;
 	CONTROL_BORDER_DISABLED: #515151;
 	CONTROL_BG_NORMAL: #222;
+	CONTROL_BG_HOVER: #3B3B3B;
 	CONTROL_BG_ARMED: #515151;
 	CONTROL_BG_DISABLED: #3B3B3B;
 	CONTROL_PRIMARY_BORDER_NORMAL: #70A11B;
@@ -335,9 +336,14 @@
 }
 
 .vault-detail .vault-path {
+	-fx-content-display: text-only;
 	-fx-text-fill: TEXT_FILL_SECONDARY;
 }
 
+.vault-detail .vault-path:hover {
+	-fx-content-display: right;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Badge                                                                       *
@@ -404,7 +410,6 @@
 .button-group {
 	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 0 1px 0 1px;
-	-fx-padding: 1em;
 }
 
 .button-group.first {
@@ -418,10 +423,24 @@
 }
 
 .button-group:hover {
-	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_HOVER;
+}
+
+.button-group:hover:focused {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_HOVER;
+}
+
+.button-group:hover:armed {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
+}
+
+.button-group:hover .button-group-action {
+	visibility: visible;
+	managed: true;
 }
 
 .button-group-labels {
+	-fx-padding: 0.5em 0 0.5em 0;
 	-fx-spacing: 0.25em;
 }
 
@@ -431,7 +450,10 @@
 }
 
 .button-group-action {
+	visibility: collapse;
+	managed: false;
 	-fx-text-fill: TEXT_FILL_PRIMARY;
+	-fx-font-family: 'Open Sans Bold';
 }
 
 .button-group-separator {
@@ -534,9 +556,19 @@
 }
 
 .button-large {
-	-fx-graphic-text-gap: 6px;
+	-fx-graphic-text-gap: 9px;
 	-fx-font-size: 1.25em;
-	-fx-padding: 0.5em 1.25em 0.5em 1.25em;
+	-fx-padding: 0.6em 1.25em 0.6em 1.25em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Buttons                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.hyperlink {
+	-fx-text-fill: TEXT_FILL;
 }
 
 /*******************************************************************************

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

@@ -36,6 +36,7 @@
 	CONTROL_BORDER_FOCUSED: #9E9E9E;
 	CONTROL_BORDER_DISABLED: #E1E1E1;
 	CONTROL_BG_NORMAL: #FFF;
+	CONTROL_BG_HOVER: #F7F7F7;
 	CONTROL_BG_ARMED: #E1E1E1;
 	CONTROL_BG_DISABLED: #F7F7F7;
 	CONTROL_PRIMARY_BORDER_NORMAL: #598016;
@@ -335,9 +336,14 @@
 }
 
 .vault-detail .vault-path {
+	-fx-content-display: text-only;
 	-fx-text-fill: TEXT_FILL_SECONDARY;
 }
 
+.vault-detail .vault-path:hover {
+	-fx-content-display: right;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Badge                                                                       *
@@ -404,7 +410,6 @@
 .button-group {
 	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 0 1px 0 1px;
-	-fx-padding: 1em;
 }
 
 .button-group.first {
@@ -418,10 +423,24 @@
 }
 
 .button-group:hover {
-	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_HOVER;
+}
+
+.button-group:hover:focused {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_HOVER;
+}
+
+.button-group:hover:armed {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
+}
+
+.button-group:hover .button-group-action {
+	visibility: visible;
+	managed: true;
 }
 
 .button-group-labels {
+	-fx-padding: 0.5em 0 0.5em 0;
 	-fx-spacing: 0.25em;
 }
 
@@ -431,7 +450,10 @@
 }
 
 .button-group-action {
+	visibility: collapse;
+	managed: false;
 	-fx-text-fill: TEXT_FILL_PRIMARY;
+	-fx-font-family: 'Open Sans Bold';
 }
 
 .button-group-separator {
@@ -534,9 +556,19 @@
 }
 
 .button-large {
-	-fx-graphic-text-gap: 6px;
+	-fx-graphic-text-gap: 9px;
 	-fx-font-size: 1.25em;
-	-fx-padding: 0.5em 1.25em 0.5em 1.25em;
+	-fx-padding: 0.6em 1.25em 0.6em 1.25em;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Buttons                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.hyperlink {
+	-fx-text-fill: TEXT_FILL;
 }
 
 /*******************************************************************************

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

@@ -20,19 +20,9 @@
 		<Insets bottom="12" left="12" right="12" top="12"/>
 	</padding>
 	<children>
-		<HBox alignment="CENTER_RIGHT">
-			<padding>
-				<Insets left="12" right="12" top="6"/>
-			</padding>
-			<children>
-				<Label styleClass="badge,badge-pill,badge-secondary" text="%vaultDetail.lockedStatus" visible="${controller.vault.locked}" managed="${controller.vault.locked}"/>
-				<Label styleClass="badge,badge-pill,badge-secondary" text="…" visible="${controller.vault.processing}" managed="${controller.vault.processing}"/>
-				<Label styleClass="badge,badge-pill,badge-primary" text="%vaultDetail.unlockedStatus" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}"/>
-			</children>
-		</HBox>
 		<HBox spacing="12" visible="${controller.anyVaultSelected}">
 			<padding>
-				<Insets left="12" right="12"/>
+				<Insets bottom="12" left="12" right="12" top="12"/>
 			</padding>
 			<children>
 				<StackPane alignment="CENTER">
@@ -40,12 +30,21 @@
 					<FontAwesome5IconView styleClass="glyph-icon-main-bg" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
 				</StackPane>
 				<VBox spacing="4" HBox.hgrow="ALWAYS">
-					<Label styleClass="vault-name" text="${controller.vault.displayableName}">
-						<tooltip>
-							<Tooltip text="${controller.vault.displayableName}"/>
-						</tooltip>
-					</Label>
+					<HBox spacing="12">
+						<Label styleClass="vault-name" text="${controller.vault.displayableName}">
+							<tooltip>
+								<Tooltip text="${controller.vault.displayableName}"/>
+							</tooltip>
+						</Label>
+						<Region HBox.hgrow="ALWAYS"/>
+						<Label styleClass="badge,badge-pill,badge-secondary" text="%vaultDetail.lockedStatus" minWidth="-Infinity" visible="${controller.vault.locked}" managed="${controller.vault.locked}"/>
+						<Label styleClass="badge,badge-pill,badge-secondary" text="…" minWidth="-Infinity" visible="${controller.vault.processing}" managed="${controller.vault.processing}"/>
+						<Label styleClass="badge,badge-pill,badge-primary" text="%vaultDetail.unlockedStatus" minWidth="-Infinity" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}"/>
+					</HBox>
 					<Hyperlink styleClass="vault-path" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS" onAction="#revealStorageLocation">
+						<graphic>
+							<FontAwesome5IconView styleClass="glyph-icon-secondary" glyph="EYE"/>
+						</graphic>
 						<tooltip>
 							<Tooltip text="${controller.vault.displayablePath}"/>
 						</tooltip>
@@ -53,48 +52,55 @@
 				</VBox>
 			</children>
 		</HBox>
+
 		<VBox visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
-			<HBox styleClass="button-group,first" alignment="CENTER" onMouseClicked="#revealAccessLocation">
-				<VBox styleClass="button-group-labels">
-					<Label styleClass="button-group-heading" text="%vaultDetail.accessLocation"/>
-					<Label text="${controller.vault.accessPoint}"/>
-				</VBox>
-				<Region HBox.hgrow="ALWAYS"/>
-				<Label styleClass="button-group-action" text="TODO REVEAL"/>
-			</HBox>
-			<HBox styleClass="button-group,last" spacing="24" alignment="CENTER">
-				<VBox styleClass="button-group-labels" HBox.hgrow="ALWAYS">
-					<Label styleClass="button-group-heading" text="TODO Read"/>
-					<Label text="${controller.vault.stats.bytesPerSecondRead}"/>
-				</VBox>
-				<VBox styleClass="button-group-labels" HBox.hgrow="ALWAYS">
-					<Label styleClass="button-group-heading" text="TODO Written"/>
-					<Label text="${controller.vault.stats.bytesPerSecondWritten}"/>
-				</VBox>
-				<!-- Future use:
-				<Region HBox.hgrow="ALWAYS"/>
-				<Label styleClass="button-group-action" text="SHOW CHART"/>
-				-->
-			</HBox>
+			<Button styleClass="button-group,first" prefWidth="Infinity" contentDisplay="GRAPHIC_ONLY" onAction="#revealAccessLocation">
+				<graphic>
+					<HBox alignment="CENTER">
+						<VBox styleClass="button-group-labels">
+							<Label styleClass="button-group-heading" text="%vaultDetail.accessLocation"/>
+							<Label text="${controller.vault.accessPoint}"/>
+						</VBox>
+						<Region HBox.hgrow="ALWAYS"/>
+						<Label styleClass="button-group-action" text="%vaultDetail.revealAccessLocation" minWidth="-Infinity"/>
+					</HBox>
+				</graphic>
+			</Button>
 			<Region styleClass="button-group-separator"/>
+			<Button styleClass="button-group,last" prefWidth="Infinity" contentDisplay="GRAPHIC_ONLY">
+				<graphic>
+					<HBox alignment="CENTER" spacing="24">
+						<VBox styleClass="button-group-labels" HBox.hgrow="ALWAYS">
+							<Label styleClass="button-group-heading" text="%vaultDetail.bytesPerSecondRead"/>
+							<Label text="${controller.vault.stats.bytesPerSecondRead}"/>
+						</VBox>
+						<VBox styleClass="button-group-labels" HBox.hgrow="ALWAYS">
+							<Label styleClass="button-group-heading" text="%vaultDetail.bytesPerSecondWritten"/>
+							<Label text="${controller.vault.stats.bytesPerSecondWritten}"/>
+						</VBox>
+						<Region HBox.hgrow="ALWAYS"/>
+						<Label styleClass="button-group-action" text="%vaultDetail.showChart" minWidth="-Infinity"/>
+					</HBox>
+				</graphic>
+			</Button>
 		</VBox>
 
-		<Region prefHeight="24" VBox.vgrow="NEVER"/>
+		<Region prefHeight="12" VBox.vgrow="NEVER"/>
 
-		<HBox alignment="CENTER" spacing="9" visible="${controller.vault.locked}" managed="${controller.vault.locked}">
-			<Button styleClass="button-large" text="%vaultDetail.unlockBtn" onAction="#unlock" defaultButton="${controller.vault.locked}">
+		<VBox alignment="CENTER" spacing="12" visible="${controller.vault.locked}" managed="${controller.vault.locked}">
+			<Button styleClass="button-large" text="%vaultDetail.unlockBtn" minWidth="120" onAction="#unlock" defaultButton="${controller.vault.locked}">
 				<graphic>
 					<FontAwesome5IconView glyph="LOCK_OPEN_ALT" glyphSize="15"/>
 				</graphic>
 			</Button>
-			<Button styleClass="button-large" onAction="#showVaultOptions">
+			<Hyperlink text="%vaultDetail.optionsBtn" onAction="#showVaultOptions">
 				<graphic>
-					<FontAwesome5IconView glyph="COG" glyphSize="15"/>
+					<FontAwesome5IconView glyph="COG"/>
 				</graphic>
-			</Button>
-		</HBox>
-		<VBox alignment="CENTER" spacing="9" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
-			<Button styleClass="button-large" text="%vaultDetail.lockBtn" onAction="#lock" defaultButton="${controller.vault.unlocked}">
+			</Hyperlink>
+		</VBox>
+		<VBox alignment="CENTER" spacing="12" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
+			<Button styleClass="button-large" text="%vaultDetail.lockBtn" minWidth="120" onAction="#lock">
 				<graphic>
 					<FontAwesome5IconView glyph="LOCK_ALT" glyphSize="15"/>
 				</graphic>

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

@@ -4,6 +4,7 @@ generic.button.apply=Apply
 generic.button.back=Back
 generic.button.cancel=Cancel
 generic.button.change=Change
+generic.button.confirm=Confirm
 generic.button.create=Create
 generic.button.done=Done
 generic.button.next=Next
@@ -84,8 +85,13 @@ vaultlist.emptyList.onboardingInstruction=Click here to add a vault
 vaultDetail.lockedStatus=LOCKED
 vaultDetail.unlockedStatus=UNLOCKED
 vaultDetail.unlockBtn=Unlock
+vaultDetail.optionsBtn=Vault Options
 vaultDetail.lockBtn=Lock
 vaultDetail.accessLocation=access location
+vaultDetail.revealAccessLocation=REVEAL
+vaultDetail.bytesPerSecondRead=read
+vaultDetail.bytesPerSecondWritten=written
+vaultDetail.showChart=SHOW CHART
 
 # Vault Options
 vaultOptions.general=General
@@ -101,4 +107,3 @@ passwordStrength.messageLabel.1=Weak
 passwordStrength.messageLabel.2=Fair
 passwordStrength.messageLabel.3=Strong
 passwordStrength.messageLabel.4=Very strong
-generic.button.confirm=Confirm