updated vault detail layout, disabled focus traversable in main window's title buttons, updated other minor stylings

This commit is contained in:
Tobias Hagemann
2019-08-23 17:57:02 +02:00
parent 428ffbf705
commit b4f697e052
10 changed files with 231 additions and 109 deletions

View File

@@ -61,6 +61,7 @@ public class Vault {
private final StringBinding displayableName;
private final StringBinding displayablePath;
private final BooleanBinding locked;
private final BooleanBinding processing;
private final BooleanBinding unlocked;
private Volume volume;
@@ -78,6 +79,7 @@ public class Vault {
this.displayableName = Bindings.createStringBinding(this::getDisplayableName, vaultSettings.path());
this.displayablePath = Bindings.createStringBinding(this::getDisplayablePath, vaultSettings.path());
this.locked = Bindings.createBooleanBinding(this::isLocked, state);
this.processing = Bindings.createBooleanBinding(this::isProcessing, state);
this.unlocked = Bindings.createBooleanBinding(this::isUnlocked, state);
}
@@ -179,7 +181,7 @@ public class Vault {
public State getState() {
return state.get();
}
public void setState(State value) {
state.setValue(value);
}
@@ -192,6 +194,14 @@ public class Vault {
return state.get() == State.LOCKED;
}
public BooleanBinding processingProperty() {
return processing;
}
public boolean isProcessing() {
return state.get() == State.PROCESSING;
}
public BooleanBinding unlockedProperty() {
return unlocked;
}

View File

@@ -5,6 +5,8 @@ package org.cryptomator.ui.controls;
*/
public enum FontAwesome5Icon {
ANCHOR("\uF13D"), //
CIRCLE("\uF111"), //
COG("\uF013"), //
COGS("\uF085"), //
EXCLAMATION_TRIANGLE("\uF071"), //
FOLDER_OPEN("\uF07C"), //
@@ -16,6 +18,7 @@ public enum FontAwesome5Icon {
SPINNER("\uF110"), //
SYNC("\uF021"), //
TIMES("\uF00D"), //
WRENCH("\uF0AD"), //
;
private final String unicode;

View File

@@ -85,15 +85,6 @@
-fx-fill: white;
}
.main-window .title .button:focused {
-fx-background-color: white, PRIMARY_BG;
-fx-background-insets: 0, 1px;
}
.main-window .title .button:armed {
-fx-background-color: none;
}
.main-window .title .button:armed .glyph-icon {
-fx-fill: CONTROL_WHITE_BG_ARMED;
}
@@ -163,6 +154,14 @@
-fx-alignment: CENTER;
}
.tab-pane > .tab-header-area > .headers-region > .tab .glyph-icon {
-fx-fill: SECONDARY;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected .glyph-icon {
-fx-fill: TEXT_FILL;
}
/*******************************************************************************
* *
* SplitPane *
@@ -292,12 +291,16 @@
* *
******************************************************************************/
.vault-detail .vault-status-icon {
.vault-detail .vault-status-circle {
-fx-fill: SECONDARY;
}
.vault-detail .vault-status-icon {
-fx-fill: MAIN_BG;
}
.vault-detail .vault-name {
-fx-font-size: 2em;
-fx-font-size: 1.5em;
}
.vault-detail .vault-path {
@@ -306,22 +309,60 @@
/*******************************************************************************
* *
* Button Group *
* Badge *
* *
******************************************************************************/
.badge {
-fx-font-size: 0.8em;
-fx-background-radius: 4px;
-fx-padding: 0.2em 0.4em 0.2em 0.4em;
}
.badge-pill {
-fx-background-radius: 1em;
}
.badge-primary {
-fx-text-fill: TEXT_FILL_WHITE;
-fx-background-color: PRIMARY;
}
.badge-secondary {
-fx-text-fill: TEXT_FILL_WHITE;
-fx-background-color: SECONDARY;
}
/*******************************************************************************
* *
* ButtonGroup *
* *
******************************************************************************/
.button-group {
-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
-fx-background-insets: 0, 1px;
-fx-background-radius: 4px;
-fx-background-insets: 0, 0 1px 0 1px;
-fx-padding: 1em;
-fx-spacing: 0.25em;
}
.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_PRIMARY_LIGHT_BG_NORMAL;
}
.button-group-labels {
-fx-spacing: 0.25em;
}
.button-group-heading {
-fx-text-fill: TEXT_FILL_SECONDARY;
-fx-font-size: 0.8em;
@@ -331,6 +372,11 @@
-fx-text-fill: TEXT_FILL_PRIMARY;
}
.button-group-separator {
-fx-background-color: CONTROL_BORDER_NORMAL;
-fx-pref-height: 1px;
}
/*******************************************************************************
* *
* Tooltip *
@@ -422,20 +468,21 @@
}
.button-large {
-fx-graphic-text-gap: 6px;
-fx-font-size: 1.25em;
-fx-padding: 0.25em 1.25em 0.25em 1.25em;
-fx-padding: 0.5em 1.25em 0.5em 1.25em;
}
/*******************************************************************************
* *
* Checkbox *
* CheckBox *
* *
******************************************************************************/
.check-box {
-fx-text-fill: TEXT_FILL;
-fx-label-padding: 0 0 0 6px;
-fx-padding: 4px;
-fx-padding: 4px 0 4px 0;
}
.check-box > .box {
@@ -468,7 +515,7 @@
.radio-button {
-fx-text-fill: TEXT_FILL;
-fx-label-padding: 0 0 0 6px;
-fx-padding: 4px;
-fx-padding: 4px 0 4px 0;
}
.radio-button > .radio {
@@ -476,7 +523,7 @@
-fx-border-radius: 1em; /* large value to make sure this remains circular */
-fx-background-color: CONTROL_BG_NORMAL;
-fx-background-radius: 1em;
-fx-padding: 4px; /* padding from outside edge to the inner black dot */
-fx-padding: 0.3em; /* padding from outside edge to the inner black dot */
}
.radio-button:focused > .radio {
@@ -490,8 +537,8 @@
.radio-button > .radio > .dot {
-fx-background-color: transparent;
-fx-background-radius: 1.0em; /* large value to make sure this remains circular */
-fx-padding: 3px; /* radius of the inner black dot when selected */
-fx-background-radius: 1em; /* large value to make sure this remains circular */
-fx-padding: 0.2em; /* radius of the inner black dot when selected */
}
.radio-button:selected > .radio > .dot {

View File

@@ -85,15 +85,6 @@
-fx-fill: white;
}
.main-window .title .button:focused {
-fx-background-color: white, PRIMARY_BG;
-fx-background-insets: 0, 1px;
}
.main-window .title .button:armed {
-fx-background-color: none;
}
.main-window .title .button:armed .glyph-icon {
-fx-fill: CONTROL_WHITE_BG_ARMED;
}
@@ -163,6 +154,14 @@
-fx-alignment: CENTER;
}
.tab-pane > .tab-header-area > .headers-region > .tab .glyph-icon {
-fx-fill: SECONDARY;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected .glyph-icon {
-fx-fill: TEXT_FILL;
}
/*******************************************************************************
* *
* SplitPane *
@@ -292,12 +291,16 @@
* *
******************************************************************************/
.vault-detail .vault-status-icon {
.vault-detail .vault-status-circle {
-fx-fill: SECONDARY;
}
.vault-detail .vault-status-icon {
-fx-fill: MAIN_BG;
}
.vault-detail .vault-name {
-fx-font-size: 2em;
-fx-font-size: 1.5em;
}
.vault-detail .vault-path {
@@ -306,22 +309,60 @@
/*******************************************************************************
* *
* Button Group *
* Badge *
* *
******************************************************************************/
.badge {
-fx-font-size: 0.8em;
-fx-background-radius: 4px;
-fx-padding: 0.2em 0.4em 0.2em 0.4em;
}
.badge-pill {
-fx-background-radius: 1em;
}
.badge-primary {
-fx-text-fill: TEXT_FILL_WHITE;
-fx-background-color: PRIMARY;
}
.badge-secondary {
-fx-text-fill: TEXT_FILL_WHITE;
-fx-background-color: SECONDARY;
}
/*******************************************************************************
* *
* ButtonGroup *
* *
******************************************************************************/
.button-group {
-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
-fx-background-insets: 0, 1px;
-fx-background-radius: 4px;
-fx-background-insets: 0, 0 1px 0 1px;
-fx-padding: 1em;
-fx-spacing: 0.25em;
}
.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_PRIMARY_LIGHT_BG_NORMAL;
}
.button-group-labels {
-fx-spacing: 0.25em;
}
.button-group-heading {
-fx-text-fill: TEXT_FILL_SECONDARY;
-fx-font-size: 0.8em;
@@ -331,6 +372,11 @@
-fx-text-fill: TEXT_FILL_PRIMARY;
}
.button-group-separator {
-fx-background-color: CONTROL_BORDER_NORMAL;
-fx-pref-height: 1px;
}
/*******************************************************************************
* *
* Tooltip *
@@ -422,20 +468,21 @@
}
.button-large {
-fx-graphic-text-gap: 6px;
-fx-font-size: 1.25em;
-fx-padding: 0.25em 1.25em 0.25em 1.25em;
-fx-padding: 0.5em 1.25em 0.5em 1.25em;
}
/*******************************************************************************
* *
* Checkbox *
* CheckBox *
* *
******************************************************************************/
.check-box {
-fx-text-fill: TEXT_FILL;
-fx-label-padding: 0 0 0 6px;
-fx-padding: 4px;
-fx-padding: 4px 0 4px 0;
}
.check-box > .box {
@@ -468,7 +515,7 @@
.radio-button {
-fx-text-fill: TEXT_FILL;
-fx-label-padding: 0 0 0 6px;
-fx-padding: 4px;
-fx-padding: 4px 0 4px 0;
}
.radio-button > .radio {
@@ -476,7 +523,7 @@
-fx-border-radius: 1em; /* large value to make sure this remains circular */
-fx-background-color: CONTROL_BG_NORMAL;
-fx-background-radius: 1em;
-fx-padding: 4px; /* padding from outside edge to the inner black dot */
-fx-padding: 0.3em; /* padding from outside edge to the inner black dot */
}
.radio-button:focused > .radio {
@@ -490,8 +537,8 @@
.radio-button > .radio > .dot {
-fx-background-color: transparent;
-fx-background-radius: 1.0em; /* large value to make sure this remains circular */
-fx-padding: 3px; /* radius of the inner black dot when selected */
-fx-background-radius: 1em; /* large value to make sure this remains circular */
-fx-padding: 0.2em; /* radius of the inner black dot when selected */
}
.radio-button:selected > .radio > .dot {

View File

@@ -21,7 +21,7 @@
<children>
<Label text="Cryptomator"/>
<Region HBox.hgrow="ALWAYS"/>
<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#showPreferences">
<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#showPreferences" focusTraversable="false">
<graphic>
<StackPane>
<FontAwesome5IconView glyph="COGS"/>
@@ -29,10 +29,10 @@
</StackPane>
</graphic>
<tooltip>
<Tooltip text="%main.settingsBtn.tooltip"/>
<Tooltip text="%main.preferencesBtn.tooltip"/>
</tooltip>
</Button>
<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#close">
<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#close" focusTraversable="false">
<graphic>
<FontAwesome5IconView glyph="TIMES"/>
</graphic>

View File

@@ -13,20 +13,12 @@
<tabs>
<Tab fx:id="generalTab" text="%preferences.general">
<graphic>
<FontAwesome5IconView glyph="COGS"/>
<FontAwesome5IconView glyph="WRENCH"/>
</graphic>
<content>
<fx:include source="/fxml/preferences_general.fxml"/>
</content>
</Tab>
<Tab fx:id="updatesTab" text="%preferences.updates">
<graphic>
<FontAwesome5IconView glyph="SYNC"/>
</graphic>
<content>
<fx:include source="/fxml/preferences_updates.fxml"/>
</content>
</Tab>
<Tab fx:id="volumeTab" text="%preferences.volume">
<graphic>
<FontAwesome5IconView glyph="HDD"/>
@@ -35,5 +27,13 @@
<fx:include source="/fxml/preferences_volume.fxml"/>
</content>
</Tab>
<Tab fx:id="updatesTab" text="%preferences.updates">
<graphic>
<FontAwesome5IconView glyph="SYNC"/>
</graphic>
<content>
<fx:include source="/fxml/preferences_updates.fxml"/>
</content>
</Tab>
</tabs>
</TabPane>

View File

@@ -3,9 +3,10 @@
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
<VBox xmlns="http://javafx.com/javafx"
@@ -15,48 +16,80 @@
minWidth="300"
spacing="12">
<padding>
<Insets bottom="12.0" left="12.0" right="12.0" top="12.0"/>
<Insets bottom="12" left="12" right="12" top="12"/>
</padding>
<children>
<HBox alignment="BOTTOM_LEFT" spacing="12" visible="${controller.anyVaultSelected}">
<HBox alignment="CENTER_RIGHT">
<padding>
<Insets left="6"/>
<Insets left="12" right="12" top="6"/>
</padding>
<children>
<VBox alignment="CENTER" minWidth="22.5">
<FontAwesome5IconView styleClass="vault-status-icon" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="18"/>
</VBox>
<VBox spacing="6">
<Label styleClass="vault-name" text="${controller.vault.displayableName}"/>
<Label styleClass="vault-path" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS"/>
<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"/>
</padding>
<children>
<StackPane alignment="CENTER">
<FontAwesome5IconView styleClass="vault-status-circle" glyph="CIRCLE" HBox.hgrow="NEVER" glyphSize="32"/>
<FontAwesome5IconView styleClass="vault-status-icon" 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>
<Label styleClass="vault-path" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS">
<tooltip>
<Tooltip text="${controller.vault.displayablePath}"/>
</tooltip>
</Label>
</VBox>
</children>
</HBox>
<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>
<Region HBox.hgrow="ALWAYS"/>
<Label styleClass="button-group-action" text="TODO REVEAL"/>
</HBox>
<FlowPane rowValignment="BOTTOM" hgap="6" vgap="6" visible="${controller.vault.locked}" managed="${controller.vault.locked}">
<VBox visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
<HBox styleClass="button-group,first" alignment="CENTER">
<VBox styleClass="button-group-labels">
<Label styleClass="button-group-heading" text="%vaultDetail.accessLocation"/>
<Label text="${controller.vault.customMountPath}"/>
</VBox>
<Region HBox.hgrow="ALWAYS"/>
<Label styleClass="button-group-action" text="TODO REVEAL"/>
</HBox>
<Region styleClass="button-group-separator"/>
<HBox styleClass="button-group,last" alignment="CENTER">
<VBox styleClass="button-group-labels">
<Label styleClass="button-group-heading" text="example heading"/>
<Label text="example text"/>
</VBox>
<Region HBox.hgrow="ALWAYS"/>
<Label styleClass="button-group-action" text="EXAMPLE ACTION"/>
</HBox>
</VBox>
<Region prefHeight="24"/>
<HBox alignment="CENTER" spacing="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">
<Button styleClass="button-large" onAction="#showVaultOptions">
<graphic>
<FontAwesome5IconView glyph="COGS"/>
<FontAwesome5IconView glyph="COG" glyphSize="15"/>
</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"/>
</graphic>
</Button>
</HBox>
<VBox alignment="CENTER" spacing="6" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
<Button styleClass="button-large" text="%vaultDetail.lockBtn" onAction="#lock" defaultButton="${controller.vault.unlocked}">
<graphic>
<FontAwesome5IconView glyph="LOCK_ALT" glyphSize="15"/>
</graphic>
</Button>
</VBox>
</children>
</VBox>

View File

@@ -13,7 +13,7 @@
<tabs>
<Tab fx:id="generalTab" text="%vaultOptions.general">
<graphic>
<FontAwesome5IconView glyph="COGS"/>
<FontAwesome5IconView glyph="WRENCH"/>
</graphic>
<content>
<fx:include source="/fxml/vault_options_general.fxml"/>

View File

@@ -53,21 +53,22 @@ preferences.general.theme=Look & Feel
preferences.general.startHidden=Hide window when starting Cryptomator
preferences.general.debugLogging=Enable debug logging
preferences.general.volumeType=Volume Type
## Volume
preferences.volume=Virtual Drive
## Updates
preferences.updates=Updates
preferences.updates.autoUpdateCheck=Check for updates automatically
preferences.updates.checkNowBtn=Check Now
## Volume
preferences.volume=Virtual Drive
# Main Window
main.closeBtn.tooltip=Close
main.settingsBtn.tooltip=Settings
main.preferencesBtn.tooltip=Preferences
vaultlist.emptyList.onboardingInstruction=Click here to add a vault
## Vault Detail
vaultDetail.lockedStatus=LOCKED
vaultDetail.unlockedStatus=UNLOCKED
vaultDetail.unlockBtn=Unlock
vaultDetail.lockBtn=Lock
vaultDetail.optionsBtn=Options
vaultDetail.accessLocation=access location
# Vault Options

View File

@@ -1,19 +0,0 @@
addvaultwizard.existing.instruction=Please choose the masterkey.cryptomator file of your existing vault. The directory contain it will be displayed.
addvaultwizard.existing.filePickerTitle=Open Masterkey File
addvaultwizard.new.insertName=Please enter a name for the vault.
addvaultwizard.new.selectLocation=Please pick a directory where your vault is stored:
addvaultwizard.new.directoryPickerTitle=Select Directory
addvaultwizard.new.enterPassword=Please enter a Password for your vault:
addvaultwizard.new.reenterPassword=Please retype the password:
main.closeBtn.tooltip=Close
main.settingsBtn.tooltip=Settings
preferences.autoUpdateCheck=Check for updates automatically
preferences.debugLogging=Enable debug logging
preferences.startHidden=Hide window when starting Cryptomator
preferences.theme=Look & Feel
preferences.volume=Virtual Drive
preferences.volumeType=Volume type
vaultlist.emptyList.onboardingInstruction=Click here to add a vault
vaultOptions.mount.readonly=Read-Only
vaultOptions.mount.driveName=Drive Name
vaultOptions.mount.customMountFlags=Custom Mount Flags