From 486d3170e2f16f0147d94d855c0c5a165b6bafdd Mon Sep 17 00:00:00 2001
From: Sebastian Stenzel <sebastian.stenzel@gmail.com>
Date: Mon, 19 Aug 2019 17:21:49 +0200
Subject: [PATCH] Relaxed vault list cell layout and added highlight colors
 (inspired by google backup & sync settings)

---
 main/ui/src/main/resources/css/dark_theme.css | 18 ++++++++++++++++-
 .../ui/src/main/resources/css/light_theme.css | 20 +++++++++++++++++--
 .../main/resources/fxml/vault_list_cell.fxml  | 10 +++++-----
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/main/ui/src/main/resources/css/dark_theme.css b/main/ui/src/main/resources/css/dark_theme.css
index 1721393e1..dfb5b6d4e 100644
--- a/main/ui/src/main/resources/css/dark_theme.css
+++ b/main/ui/src/main/resources/css/dark_theme.css
@@ -186,7 +186,7 @@
 }
 
 .list-view:focused .list-cell:selected {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_ARMED;
+	-fx-background-color: PRIMARY, CONTROL_BG_ARMED;
 	-fx-background-insets: 0, 0 2px;
 }
 
@@ -194,6 +194,22 @@
 	-fx-background-color: CONTROL_BG_ARMED;
 }
 
+.list-cell .glyph-icon {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
+.list-cell:selected .glyph-icon {
+	-fx-fill: PRIMARY;
+}
+
+.list-cell:selected .header-label {
+	-fx-text-fill: PRIMARY;
+}
+
+.list-cell .header-label {
+	-fx-font-size: 1.0em;
+}
+
 .list-cell .detail-label {
 	-fx-text-fill: TEXT_FILL_SECONDARY;
 	-fx-font-size: 0.8em;
diff --git a/main/ui/src/main/resources/css/light_theme.css b/main/ui/src/main/resources/css/light_theme.css
index 99d54f9fc..7494e0a8b 100644
--- a/main/ui/src/main/resources/css/light_theme.css
+++ b/main/ui/src/main/resources/css/light_theme.css
@@ -186,12 +186,28 @@
 }
 
 .list-view:focused .list-cell:selected {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_ARMED;
+	-fx-background-color: CONTROL_PRIMARY_BG_NORMAL, #f3f5f0; /* TODO define constant */
 	-fx-background-insets: 0, 0 2px;
 }
 
 .list-cell:selected {
-	-fx-background-color: CONTROL_BG_ARMED;
+	-fx-background-color: #f3f5f0; /* TODO define constant */
+}
+
+.list-cell .glyph-icon {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
+.list-cell:selected .glyph-icon {
+	-fx-fill: CONTROL_PRIMARY_BG_NORMAL;
+}
+
+.list-cell:selected .header-label {
+	-fx-text-fill: CONTROL_PRIMARY_BG_NORMAL;
+}
+
+.list-cell .header-label {
+	-fx-font-size: 1.0em;
 }
 
 .list-cell .detail-label {
diff --git a/main/ui/src/main/resources/fxml/vault_list_cell.fxml b/main/ui/src/main/resources/fxml/vault_list_cell.fxml
index 3147f1bcb..723e0e00e 100644
--- a/main/ui/src/main/resources/fxml/vault_list_cell.fxml
+++ b/main/ui/src/main/resources/fxml/vault_list_cell.fxml
@@ -8,17 +8,17 @@
 <HBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.mainwindow.VaultListCellController"
-	  prefHeight="46.0"
+	  prefHeight="60.0"
 	  prefWidth="200.0"
-	  spacing="10"
+	  spacing="12"
 	  alignment="CENTER_LEFT">
 	<padding>
-		<Insets top="6" right="8" bottom="6" left="10"/>
+		<Insets top="12" right="6" bottom="12" left="12"/>
 	</padding>
 	<children>
-		<FontAwesome5IconView glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
+		<FontAwesome5IconView glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="18"/>
 		<VBox spacing="4" HBox.hgrow="ALWAYS">
-			<Label text="${controller.vault.displayableName}"/>
+			<Label styleClass="header-label" text="${controller.vault.displayableName}"/>
 			<Label styleClass="detail-label" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS"/>
 		</VBox>
 	</children>