From 428ffbf705dd63a414729b83cf0c6e735ba20027 Mon Sep 17 00:00:00 2001
From: Tobias Hagemann <tobias@hagemann.org>
Date: Fri, 23 Aug 2019 00:56:39 +0200
Subject: [PATCH] updated vault detail layout

---
 main/ui/src/main/resources/css/dark_theme.css | 24 ++++++----
 .../ui/src/main/resources/css/light_theme.css | 24 ++++++----
 .../src/main/resources/fxml/vault_detail.fxml | 46 ++++++++++---------
 .../main/resources/i18n/strings.properties    |  1 +
 4 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/main/ui/src/main/resources/css/dark_theme.css b/main/ui/src/main/resources/css/dark_theme.css
index 9017a9cb5..0434fe73a 100644
--- a/main/ui/src/main/resources/css/dark_theme.css
+++ b/main/ui/src/main/resources/css/dark_theme.css
@@ -300,31 +300,35 @@
 	-fx-font-size: 2em;
 }
 
-.list-group-item-heading {
+.vault-detail .vault-path {
 	-fx-text-fill: TEXT_FILL_SECONDARY;
-	-fx-font-size: 0.8em;
 }
 
 /*******************************************************************************
  *                                                                             *
- * List Group                                                                  *
+ * Button Group                                                                *
  *                                                                             *
  ******************************************************************************/
 
-.list-group {
+.button-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;
+.button-group:hover {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+}
+
+.button-group-heading {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-font-size: 0.8em;
+}
+
+.button-group-action {
+	-fx-text-fill: TEXT_FILL_PRIMARY;
 }
 
 /*******************************************************************************
diff --git a/main/ui/src/main/resources/css/light_theme.css b/main/ui/src/main/resources/css/light_theme.css
index 63b42491b..f6586dd6b 100644
--- a/main/ui/src/main/resources/css/light_theme.css
+++ b/main/ui/src/main/resources/css/light_theme.css
@@ -300,31 +300,35 @@
 	-fx-font-size: 2em;
 }
 
-.list-group-item-heading {
+.vault-detail .vault-path {
 	-fx-text-fill: TEXT_FILL_SECONDARY;
-	-fx-font-size: 0.8em;
 }
 
 /*******************************************************************************
  *                                                                             *
- * List Group                                                                  *
+ * Button Group                                                                *
  *                                                                             *
  ******************************************************************************/
 
-.list-group {
+.button-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;
+.button-group:hover {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+}
+
+.button-group-heading {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-font-size: 0.8em;
+}
+
+.button-group-action {
+	-fx-text-fill: TEXT_FILL_PRIMARY;
 }
 
 /*******************************************************************************
diff --git a/main/ui/src/main/resources/fxml/vault_detail.fxml b/main/ui/src/main/resources/fxml/vault_detail.fxml
index 200501524..773883136 100644
--- a/main/ui/src/main/resources/fxml/vault_detail.fxml
+++ b/main/ui/src/main/resources/fxml/vault_detail.fxml
@@ -3,6 +3,7 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.FlowPane?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
@@ -17,7 +18,7 @@
 		<Insets bottom="12.0" left="12.0" right="12.0" top="12.0"/>
 	</padding>
 	<children>
-		<HBox alignment="BOTTOM_LEFT" spacing="6" visible="${controller.anyVaultSelected}">
+		<HBox alignment="BOTTOM_LEFT" spacing="12" visible="${controller.anyVaultSelected}">
 			<padding>
 				<Insets left="6"/>
 			</padding>
@@ -25,32 +26,33 @@
 				<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>
+				<VBox spacing="6">
+					<Label styleClass="vault-name" text="${controller.vault.displayableName}"/>
+					<Label styleClass="vault-path" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS"/>
+				</VBox>
 			</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}"/>
+		<HBox styleClass="button-group" alignment="CENTER" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
+			<VBox>
+				<Label styleClass="button-group-heading" text="%vaultDetail.accessLocation" visible="${controller.vault.unlocked}"/>
 				<Label text="${controller.vault.customMountPath}"/>
 			</VBox>
-		</VBox>
+			<Region HBox.hgrow="ALWAYS"/>
+			<Label styleClass="button-group-action" text="TODO REVEAL"/>
+		</HBox>
 
-		<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>
+		<FlowPane rowValignment="BOTTOM" hgap="6" vgap="6" visible="${controller.vault.locked}" managed="${controller.vault.locked}">
+			<Button styleClass="button-large" text="%vaultDetail.unlockBtn" onAction="#unlock" defaultButton="${controller.vault.locked}">
+				<graphic>
+					<FontAwesome5IconView glyph="LOCK_OPEN_ALT" glyphSize="15"/>
+				</graphic>
+			</Button>
+			<Button text="%vaultDetail.optionsBtn" onAction="#showVaultOptions">
+				<graphic>
+					<FontAwesome5IconView glyph="COGS"/>
+				</graphic>
+			</Button>
+		</FlowPane>
 		<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"/>
diff --git a/main/ui/src/main/resources/i18n/strings.properties b/main/ui/src/main/resources/i18n/strings.properties
index 33d496656..1f32b69a9 100644
--- a/main/ui/src/main/resources/i18n/strings.properties
+++ b/main/ui/src/main/resources/i18n/strings.properties
@@ -68,6 +68,7 @@ vaultlist.emptyList.onboardingInstruction=Click here to add a vault
 vaultDetail.unlockBtn=Unlock
 vaultDetail.lockBtn=Lock
 vaultDetail.optionsBtn=Options
+vaultDetail.accessLocation=access location
 
 # Vault Options
 vaultOptions.general=General