From b4f697e052dc4bbdc9a58a75adc39952f784ab13 Mon Sep 17 00:00:00 2001 From: Tobias Hagemann Date: Fri, 23 Aug 2019 17:57:02 +0200 Subject: [PATCH] updated vault detail layout, disabled focus traversable in main window's title buttons, updated other minor stylings --- .../org/cryptomator/common/vaults/Vault.java | 12 ++- .../ui/controls/FontAwesome5Icon.java | 3 + main/ui/src/main/resources/css/dark_theme.css | 91 ++++++++++++++----- .../ui/src/main/resources/css/light_theme.css | 91 ++++++++++++++----- .../src/main/resources/fxml/main_window.fxml | 6 +- .../src/main/resources/fxml/preferences.fxml | 18 ++-- .../src/main/resources/fxml/vault_detail.fxml | 89 ++++++++++++------ .../main/resources/fxml/vault_options.fxml | 2 +- .../main/resources/i18n/strings.properties | 9 +- .../main/resources/i18n/strings_en.properties | 19 ---- 10 files changed, 231 insertions(+), 109 deletions(-) diff --git a/main/commons/src/main/java/org/cryptomator/common/vaults/Vault.java b/main/commons/src/main/java/org/cryptomator/common/vaults/Vault.java index 7d0ef2124..c5bb75b5a 100644 --- a/main/commons/src/main/java/org/cryptomator/common/vaults/Vault.java +++ b/main/commons/src/main/java/org/cryptomator/common/vaults/Vault.java @@ -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; } diff --git a/main/ui/src/main/java/org/cryptomator/ui/controls/FontAwesome5Icon.java b/main/ui/src/main/java/org/cryptomator/ui/controls/FontAwesome5Icon.java index 6d159414e..da29581b3 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/controls/FontAwesome5Icon.java +++ b/main/ui/src/main/java/org/cryptomator/ui/controls/FontAwesome5Icon.java @@ -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; diff --git a/main/ui/src/main/resources/css/dark_theme.css b/main/ui/src/main/resources/css/dark_theme.css index 0434fe73a..8cc599727 100644 --- a/main/ui/src/main/resources/css/dark_theme.css +++ b/main/ui/src/main/resources/css/dark_theme.css @@ -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 { diff --git a/main/ui/src/main/resources/css/light_theme.css b/main/ui/src/main/resources/css/light_theme.css index f6586dd6b..2a7383913 100644 --- a/main/ui/src/main/resources/css/light_theme.css +++ b/main/ui/src/main/resources/css/light_theme.css @@ -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 { diff --git a/main/ui/src/main/resources/fxml/main_window.fxml b/main/ui/src/main/resources/fxml/main_window.fxml index 85414195e..3e0aabb34 100644 --- a/main/ui/src/main/resources/fxml/main_window.fxml +++ b/main/ui/src/main/resources/fxml/main_window.fxml @@ -21,7 +21,7 @@ diff --git a/main/ui/src/main/resources/fxml/vault_options.fxml b/main/ui/src/main/resources/fxml/vault_options.fxml index 899a2cf8e..43241912d 100644 --- a/main/ui/src/main/resources/fxml/vault_options.fxml +++ b/main/ui/src/main/resources/fxml/vault_options.fxml @@ -13,7 +13,7 @@ - + diff --git a/main/ui/src/main/resources/i18n/strings.properties b/main/ui/src/main/resources/i18n/strings.properties index 1f32b69a9..bc6403b2f 100644 --- a/main/ui/src/main/resources/i18n/strings.properties +++ b/main/ui/src/main/resources/i18n/strings.properties @@ -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 diff --git a/main/ui/src/main/resources/i18n/strings_en.properties b/main/ui/src/main/resources/i18n/strings_en.properties index afde3b57c..e69de29bb 100644 --- a/main/ui/src/main/resources/i18n/strings_en.properties +++ b/main/ui/src/main/resources/i18n/strings_en.properties @@ -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