Relaxed vault list cell layout and added highlight colors (inspired by google backup & sync settings)

This commit is contained in:
Sebastian Stenzel
2019-08-19 17:21:49 +02:00
parent 15bdba85bb
commit 486d3170e2
3 changed files with 40 additions and 8 deletions

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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>