new vault detail layout for unlocked state

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

@@ -102,6 +102,15 @@
 	-fx-text-fill: TEXT_FILL_SECONDARY;
 }
 
+.label-large {
+	-fx-font-family: 'Open Sans SemiBold';
+	-fx-font-size: 1.5em;
+}
+
+.label-small {
+	-fx-font-size: 0.8em;
+}
+
 .text-flow > * {
 	-fx-fill: TEXT_FILL;
 }
@@ -351,27 +360,6 @@
 	-fx-padding: 0 3 0 3;
 }
 
-
-/*******************************************************************************
- *                                                                             *
- * Vault Detail                                                                *
- *                                                                             *
- ******************************************************************************/
-
-.vault-detail .vault-name {
-	-fx-font-family: 'Open Sans SemiBold';
-	-fx-font-size: 1.5em;
-}
-
-.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                                                                       *
@@ -429,66 +417,6 @@
 	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4;
 }
 
-/*******************************************************************************
- *                                                                             *
- * ButtonGroup                                                                 *
- *                                                                             *
- ******************************************************************************/
-
-.button-group {
-	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
-	-fx-background-insets: 0, 0 1px 0 1px;
-}
-
-.button-group.first {
-	-fx-background-insets: 0, 1px 1px 0 1px;
-	-fx-background-radius: 4px 4px 0 0;
-}
-
-.button-group.last {
-	-fx-background-insets: 0, 0 1px 1px 1px;
-	-fx-background-radius: 0 0 4px 4px;
-}
-
-.button-group:hover {
-	-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;
-}
-
-.button-group-heading {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
-	-fx-font-size: 0.8em;
-}
-
-.button-group-action {
-	visibility: collapse;
-	managed: false;
-	-fx-text-fill: TEXT_FILL_PRIMARY;
-	-fx-font-family: 'Open Sans Bold';
-}
-
-.button-group-separator {
-	-fx-background-color: CONTROL_BORDER_NORMAL;
-	-fx-pref-height: 1px;
-}
-
 /*******************************************************************************
  *                                                                             *
  * Tooltip                                                                     *
@@ -496,6 +424,7 @@
  ******************************************************************************/
 
 .tooltip {
+	-fx-font-family: 'Open Sans';
 	-fx-text-fill: TEXT_FILL;
 	-fx-font-size: 0.8em;
 	-fx-background-color: CONTROL_BG_NORMAL;
@@ -587,7 +516,7 @@
 
 /*******************************************************************************
  *                                                                             *
- * Buttons                                                                     *
+ * Hyperlinks                                                                  *
  *                                                                             *
  ******************************************************************************/
 
@@ -595,6 +524,18 @@
 	-fx-text-fill: TEXT_FILL;
 }
 
+.hyperlink.hyperlink-secondary {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+}
+
+.hyperlink-hover-icon {
+	-fx-content-display: text-only;
+}
+
+.hyperlink-hover-icon:hover {
+	-fx-content-display: right;
+}
+
 /*******************************************************************************
  *                                                                             *
  * CheckBox                                                                    *

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

@@ -102,6 +102,15 @@
 	-fx-text-fill: TEXT_FILL_SECONDARY;
 }
 
+.label-large {
+	-fx-font-family: 'Open Sans SemiBold';
+	-fx-font-size: 1.5em;
+}
+
+.label-small {
+	-fx-font-size: 0.8em;
+}
+
 .text-flow > * {
 	-fx-fill: TEXT_FILL;
 }
@@ -351,27 +360,6 @@
 	-fx-padding: 0 3 0 3;
 }
 
-
-/*******************************************************************************
- *                                                                             *
- * Vault Detail                                                                *
- *                                                                             *
- ******************************************************************************/
-
-.vault-detail .vault-name {
-	-fx-font-family: 'Open Sans SemiBold';
-	-fx-font-size: 1.5em;
-}
-
-.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                                                                       *
@@ -429,66 +417,6 @@
 	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4;
 }
 
-/*******************************************************************************
- *                                                                             *
- * ButtonGroup                                                                 *
- *                                                                             *
- ******************************************************************************/
-
-.button-group {
-	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
-	-fx-background-insets: 0, 0 1px 0 1px;
-}
-
-.button-group.first {
-	-fx-background-insets: 0, 1px 1px 0 1px;
-	-fx-background-radius: 4px 4px 0 0;
-}
-
-.button-group.last {
-	-fx-background-insets: 0, 0 1px 1px 1px;
-	-fx-background-radius: 0 0 4px 4px;
-}
-
-.button-group:hover {
-	-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;
-}
-
-.button-group-heading {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
-	-fx-font-size: 0.8em;
-}
-
-.button-group-action {
-	visibility: collapse;
-	managed: false;
-	-fx-text-fill: TEXT_FILL_PRIMARY;
-	-fx-font-family: 'Open Sans Bold';
-}
-
-.button-group-separator {
-	-fx-background-color: CONTROL_BORDER_NORMAL;
-	-fx-pref-height: 1px;
-}
-
 /*******************************************************************************
  *                                                                             *
  * Tooltip                                                                     *
@@ -496,6 +424,7 @@
  ******************************************************************************/
 
 .tooltip {
+	-fx-font-family: 'Open Sans';
 	-fx-text-fill: TEXT_FILL;
 	-fx-font-size: 0.8em;
 	-fx-background-color: CONTROL_BG_NORMAL;
@@ -587,7 +516,7 @@
 
 /*******************************************************************************
  *                                                                             *
- * Buttons                                                                     *
+ * Hyperlinks                                                                  *
  *                                                                             *
  ******************************************************************************/
 
@@ -595,6 +524,18 @@
 	-fx-text-fill: TEXT_FILL;
 }
 
+.hyperlink.hyperlink-secondary {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+}
+
+.hyperlink-hover-icon {
+	-fx-content-display: text-only;
+}
+
+.hyperlink-hover-icon:hover {
+	-fx-content-display: right;
+}
+
 /*******************************************************************************
  *                                                                             *
  * CheckBox                                                                    *

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

@@ -19,76 +19,37 @@
 	  minWidth="300"
 	  spacing="12">
 	<padding>
-		<Insets bottom="12" left="12" right="12" top="12"/>
+		<Insets topRightBottomLeft="24"/>
 	</padding>
 	<children>
 		<HBox spacing="12" visible="${controller.anyVaultSelected}">
-			<padding>
-				<Insets bottom="12" left="12" right="12" top="12"/>
-			</padding>
-			<children>
-				<StackPane alignment="CENTER">
-					<Circle styleClass="glyph-icon-primary" radius="16"/>
-					<FontAwesome5IconView styleClass="glyph-icon-white" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
-				</StackPane>
-				<VBox spacing="4" HBox.hgrow="ALWAYS">
-					<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="%main.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="%main.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>
+			<StackPane alignment="CENTER">
+				<Circle styleClass="glyph-icon-primary" radius="16"/>
+				<FontAwesome5IconView styleClass="glyph-icon-white" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
+			</StackPane>
+			<VBox spacing="4" HBox.hgrow="ALWAYS">
+				<HBox spacing="12">
+					<Label styleClass="label-large" text="${controller.vault.displayableName}">
 						<tooltip>
-							<Tooltip text="${controller.vault.displayablePath}"/>
+							<Tooltip text="${controller.vault.displayableName}"/>
 						</tooltip>
-					</Hyperlink>
-				</VBox>
-			</children>
+					</Label>
+					<Region HBox.hgrow="ALWAYS"/>
+					<Label styleClass="badge,badge-pill,badge-secondary" text="%main.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="%main.vaultDetail.unlockedStatus" minWidth="-Infinity" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}"/>
+				</HBox>
+				<Hyperlink styleClass="hyperlink-secondary,hyperlink-hover-icon" 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>
+				</Hyperlink>
+			</VBox>
 		</HBox>
 
-		<VBox visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
-			<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="%main.vaultDetail.accessLocation"/>
-							<Label text="${controller.vault.accessPoint}"/>
-						</VBox>
-						<Region HBox.hgrow="ALWAYS"/>
-						<Label styleClass="button-group-action" text="%main.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="%main.vaultDetail.bytesPerSecondRead"/>
-							<ThrougputLabel idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps" mibsFormat="%main.vaultDetail.throughput.mbps"
-											bytesPerSecond="${controller.vault.stats.bytesPerSecondRead}"/>
-						</VBox>
-						<VBox styleClass="button-group-labels" HBox.hgrow="ALWAYS">
-							<Label styleClass="button-group-heading" text="%main.vaultDetail.bytesPerSecondWritten"/>
-							<ThrougputLabel idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps" mibsFormat="%main.vaultDetail.throughput.mbps"
-											bytesPerSecond="${controller.vault.stats.bytesPerSecondWritten}"/>
-						</VBox>
-						<Region HBox.hgrow="ALWAYS"/>
-						<Label styleClass="button-group-action" text="%main.vaultDetail.showChart" minWidth="-Infinity"/>
-					</HBox>
-				</graphic>
-			</Button>
-		</VBox>
-
 		<Region prefHeight="12" VBox.vgrow="NEVER"/>
 
 		<VBox alignment="CENTER" spacing="12" visible="${controller.vault.locked}" managed="${controller.vault.locked}">
@@ -104,11 +65,35 @@
 			</Hyperlink>
 		</VBox>
 		<VBox alignment="CENTER" spacing="12" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
-			<Button styleClass="button-large" text="%main.vaultDetail.lockBtn" minWidth="120" onAction="#lock">
+			<VBox alignment="CENTER" spacing="6">
+				<Label styleClass="label-secondary" text="%main.vaultDetail.accessLocation"/>
+				<Label text="${controller.vault.accessPoint}"/>
+			</VBox>
+			<Button styleClass="button-large" text="%main.vaultDetail.revealBtn" minWidth="120" onAction="#revealAccessLocation" defaultButton="${controller.vault.unlocked}">
 				<graphic>
-					<FontAwesome5IconView glyph="KEY" glyphSize="15"/>
+					<FontAwesome5IconView glyph="EYE" glyphSize="15"/>
+				</graphic>
+			</Button>
+			<Button text="%main.vaultDetail.lockBtn" minWidth="120" onAction="#lock">
+				<graphic>
+					<FontAwesome5IconView glyph="KEY"/>
 				</graphic>
 			</Button>
 		</VBox>
+
+		<Region VBox.vgrow="ALWAYS"/>
+
+		<VBox spacing="6" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
+			<HBox alignment="CENTER_RIGHT" spacing="6">
+				<Label styleClass="label-small" text="%main.vaultDetail.bytesPerSecondRead"/>
+				<ThrougputLabel styleClass="label-small" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
+								mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.vault.stats.bytesPerSecondRead}"/>
+			</HBox>
+			<HBox alignment="CENTER_RIGHT" spacing="6">
+				<Label styleClass="label-small" text="%main.vaultDetail.bytesPerSecondWritten"/>
+				<ThrougputLabel styleClass="label-small" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
+								mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.vault.stats.bytesPerSecondWritten}"/>
+			</HBox>
+		</VBox>
 	</children>
 </VBox>

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

@@ -109,12 +109,11 @@ main.vaultDetail.lockedStatus=LOCKED
 main.vaultDetail.unlockedStatus=UNLOCKED
 main.vaultDetail.unlockBtn=Unlock
 main.vaultDetail.optionsBtn=Vault Options
+main.vaultDetail.revealBtn=Reveal
 main.vaultDetail.lockBtn=Lock
 main.vaultDetail.accessLocation=access location
-main.vaultDetail.revealAccessLocation=REVEAL
-main.vaultDetail.bytesPerSecondRead=read
-main.vaultDetail.bytesPerSecondWritten=written
-main.vaultDetail.showChart=SHOW CHART
+main.vaultDetail.bytesPerSecondRead=read:
+main.vaultDetail.bytesPerSecondWritten=written:
 main.vaultDetail.throughput.idle=idle
 main.vaultDetail.throughput.kbps=%.1f kiB/s
 main.vaultDetail.throughput.mbps=%.1f MiB/s

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

@@ -109,12 +109,11 @@ main.vaultDetail.lockedStatus=GESPERRT
 main.vaultDetail.unlockedStatus=ENTSPERRT
 main.vaultDetail.unlockBtn=Entsperren
 main.vaultDetail.optionsBtn=Tresoroptionen
+main.vaultDetail.revealBtn=Anzeigen
 main.vaultDetail.lockBtn=Sperren
 main.vaultDetail.accessLocation=Tresorlaufwerk
-main.vaultDetail.revealAccessLocation=ANZEIGEN
-main.vaultDetail.bytesPerSecondRead=Gelesen
-main.vaultDetail.bytesPerSecondWritten=Geschrieben
-main.vaultDetail.showChart=ZEIGE GRAPH
+main.vaultDetail.bytesPerSecondRead=gelesen:
+main.vaultDetail.bytesPerSecondWritten=geschrieben:
 main.vaultDetail.throughput.idle=idle
 main.vaultDetail.throughput.kbps=%.1f kiB/s
 main.vaultDetail.throughput.mbps=%.1f MiB/s