From d25a903556a7e7ce7f8ecc4e33999bafaf15805d Mon Sep 17 00:00:00 2001 From: Tobias Hagemann Date: Fri, 23 Aug 2019 00:22:57 +0200 Subject: [PATCH] updated vault detail layout, moved change password button to vault options, updated other minor stylings --- .../ui/mainwindow/VaultDetailController.java | 26 +++++++ .../GeneralVaultOptionsController.java | 16 ++++- main/ui/src/main/resources/css/dark_theme.css | 65 +++++++++++++++-- .../ui/src/main/resources/css/light_theme.css | 65 +++++++++++++++-- .../src/main/resources/fxml/vault_detail.fxml | 72 ++++++++++++------- .../main/resources/fxml/vault_options.fxml | 4 +- .../resources/fxml/vault_options_general.fxml | 4 +- .../main/resources/i18n/strings.properties | 44 ++++++------ 8 files changed, 236 insertions(+), 60 deletions(-) diff --git a/main/ui/src/main/java/org/cryptomator/ui/mainwindow/VaultDetailController.java b/main/ui/src/main/java/org/cryptomator/ui/mainwindow/VaultDetailController.java index 9250f874e..355337336 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/mainwindow/VaultDetailController.java +++ b/main/ui/src/main/java/org/cryptomator/ui/mainwindow/VaultDetailController.java @@ -1,5 +1,6 @@ package org.cryptomator.ui.mainwindow; +import javafx.beans.binding.Binding; import javafx.beans.binding.BooleanBinding; import javafx.beans.property.ObjectProperty; import javafx.beans.property.ReadOnlyObjectProperty; @@ -8,8 +9,10 @@ import org.cryptomator.common.vaults.Vault; import org.cryptomator.ui.changepassword.ChangePasswordComponent; import org.cryptomator.ui.common.FxController; import org.cryptomator.ui.common.Tasks; +import org.cryptomator.ui.controls.FontAwesome5Icon; import org.cryptomator.ui.fxapp.FxApplication; import org.cryptomator.ui.vaultoptions.VaultOptionsComponent; +import org.fxmisc.easybind.EasyBind; import org.slf4j.Logger; import org.slf4j.LoggerFactory; @@ -22,6 +25,7 @@ public class VaultDetailController implements FxController { private static final Logger LOG = LoggerFactory.getLogger(VaultDetailController.class); private final ReadOnlyObjectProperty vault; + private final Binding glyph; private final BooleanBinding anyVaultSelected; private final ExecutorService executor; private final FxApplication application; @@ -31,6 +35,7 @@ public class VaultDetailController implements FxController { @Inject VaultDetailController(ObjectProperty vault, ExecutorService executor, FxApplication application, VaultOptionsComponent.Builder vaultOptionsWindow, ChangePasswordComponent.Builder changePasswordWindow) { this.vault = vault; + this.glyph = EasyBind.select(vault).selectObject(Vault::stateProperty).map(this::getGlyphForVaultState).orElse(FontAwesome5Icon.EXCLAMATION_TRIANGLE); this.executor = executor; this.application = application; this.vaultOptionsWindow = vaultOptionsWindow; @@ -38,6 +43,19 @@ public class VaultDetailController implements FxController { this.anyVaultSelected = vault.isNotNull(); } + private FontAwesome5Icon getGlyphForVaultState(Vault.State state) { + switch (state) { + case LOCKED: + return FontAwesome5Icon.LOCK_ALT; + case PROCESSING: + return FontAwesome5Icon.SPINNER; + case UNLOCKED: + return FontAwesome5Icon.LOCK_OPEN_ALT; + default: + return FontAwesome5Icon.EXCLAMATION_TRIANGLE; + } + } + @FXML public void unlock() { application.showUnlockWindow(vault.get()); @@ -77,6 +95,14 @@ public class VaultDetailController implements FxController { return vault.get(); } + public Binding glyphProperty() { + return glyph; + } + + public FontAwesome5Icon getGlyph() { + return glyph.getValue(); + } + public BooleanBinding anyVaultSelectedProperty() { return anyVaultSelected; } diff --git a/main/ui/src/main/java/org/cryptomator/ui/vaultoptions/GeneralVaultOptionsController.java b/main/ui/src/main/java/org/cryptomator/ui/vaultoptions/GeneralVaultOptionsController.java index 7a7f5e59d..0b09239ba 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/vaultoptions/GeneralVaultOptionsController.java +++ b/main/ui/src/main/java/org/cryptomator/ui/vaultoptions/GeneralVaultOptionsController.java @@ -1,5 +1,8 @@ package org.cryptomator.ui.vaultoptions; +import javafx.fxml.FXML; +import org.cryptomator.common.vaults.Vault; +import org.cryptomator.ui.changepassword.ChangePasswordComponent; import org.cryptomator.ui.common.FxController; import javax.inject.Inject; @@ -7,7 +10,18 @@ import javax.inject.Inject; @VaultOptionsScoped public class GeneralVaultOptionsController implements FxController { + private final Vault vault; + private final ChangePasswordComponent.Builder changePasswordWindow; + @Inject - GeneralVaultOptionsController(){} + GeneralVaultOptionsController(@VaultOptionsWindow Vault vault, ChangePasswordComponent.Builder changePasswordWindow) { + this.vault = vault; + this.changePasswordWindow = changePasswordWindow; + } + + @FXML + public void changePassword() { + changePasswordWindow.vault(vault).build().showChangePasswordWindow(); + } } diff --git a/main/ui/src/main/resources/css/dark_theme.css b/main/ui/src/main/resources/css/dark_theme.css index 51e5f8379..9017a9cb5 100644 --- a/main/ui/src/main/resources/css/dark_theme.css +++ b/main/ui/src/main/resources/css/dark_theme.css @@ -113,9 +113,9 @@ } .main-window .update-indicator { - -fx-background-color: PRIMARY_BG, INDICATOR_BG; - -fx-background-insets: 0, 1px; - -fx-background-radius: 5px, 4px; + -fx-background-color: PRIMARY_BG, white, INDICATOR_BG; + -fx-background-insets: 0, 1px, 2px; + -fx-background-radius: 6px, 5px, 4px; -fx-translate-x: -1px; -fx-translate-y: 1px; } @@ -180,7 +180,7 @@ /******************************************************************************* * * - * Vault List * + * Vault List * * * ******************************************************************************/ @@ -234,6 +234,7 @@ } .toolbar-container { + -fx-min-height: 31px; -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; -fx-border-width: 1px 0 0 0; } @@ -284,6 +285,48 @@ -fx-padding: 0 3 0 3; } + +/******************************************************************************* + * * + * Vault Detail * + * * + ******************************************************************************/ + +.vault-detail .vault-status-icon { + -fx-fill: SECONDARY; +} + +.vault-detail .vault-name { + -fx-font-size: 2em; +} + +.list-group-item-heading { + -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-font-size: 0.8em; +} + +/******************************************************************************* + * * + * List Group * + * * + ******************************************************************************/ + +.list-group { + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; + -fx-background-insets: 0, 1px; + -fx-background-radius: 4px; +} + +.list-group-item { + -fx-padding: 1em; + -fx-spacing: 0.25em; +} + +.list-group-separator { + -fx-background-color: CONTROL_BORDER_NORMAL; + -fx-pref-height: 1px; +} + /******************************************************************************* * * * Tooltip * @@ -370,6 +413,15 @@ -fx-background-color: CONTROL_PRIMARY_BORDER_DISABLED, CONTROL_PRIMARY_BG_DISABLED; } +.button:default .glyph-icon { + -fx-fill: TEXT_FILL_WHITE; +} + +.button-large { + -fx-font-size: 1.25em; + -fx-padding: 0.25em 1.25em 0.25em 1.25em; +} + /******************************************************************************* * * * Checkbox * @@ -414,6 +466,7 @@ -fx-label-padding: 0 0 0 6px; -fx-padding: 4px; } + .radio-button > .radio { -fx-border-color: CONTROL_BORDER_NORMAL; -fx-border-radius: 1em; /* large value to make sure this remains circular */ @@ -421,18 +474,22 @@ -fx-background-radius: 1em; -fx-padding: 4px; /* padding from outside edge to the inner black dot */ } + .radio-button:focused > .radio { -fx-border-color: CONTROL_BORDER_FOCUSED; } + .text-input:disabled > .radio { -fx-border-color: CONTROL_BORDER_DISABLED; -fx-background-color: CONTROL_BG_DISABLED; } + .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 */ } + .radio-button:selected > .radio > .dot { -fx-background-color: TEXT_FILL; } diff --git a/main/ui/src/main/resources/css/light_theme.css b/main/ui/src/main/resources/css/light_theme.css index 1cdd8ff22..63b42491b 100644 --- a/main/ui/src/main/resources/css/light_theme.css +++ b/main/ui/src/main/resources/css/light_theme.css @@ -113,9 +113,9 @@ } .main-window .update-indicator { - -fx-background-color: PRIMARY_BG, INDICATOR_BG; - -fx-background-insets: 0, 1px; - -fx-background-radius: 5px, 4px; + -fx-background-color: PRIMARY_BG, white, INDICATOR_BG; + -fx-background-insets: 0, 1px, 2px; + -fx-background-radius: 6px, 5px, 4px; -fx-translate-x: -1px; -fx-translate-y: 1px; } @@ -180,7 +180,7 @@ /******************************************************************************* * * - * Vault List * + * Vault List * * * ******************************************************************************/ @@ -234,6 +234,7 @@ } .toolbar-container { + -fx-min-height: 31px; -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; -fx-border-width: 1px 0 0 0; } @@ -284,6 +285,48 @@ -fx-padding: 0 3 0 3; } + +/******************************************************************************* + * * + * Vault Detail * + * * + ******************************************************************************/ + +.vault-detail .vault-status-icon { + -fx-fill: SECONDARY; +} + +.vault-detail .vault-name { + -fx-font-size: 2em; +} + +.list-group-item-heading { + -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-font-size: 0.8em; +} + +/******************************************************************************* + * * + * List Group * + * * + ******************************************************************************/ + +.list-group { + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; + -fx-background-insets: 0, 1px; + -fx-background-radius: 4px; +} + +.list-group-item { + -fx-padding: 1em; + -fx-spacing: 0.25em; +} + +.list-group-separator { + -fx-background-color: CONTROL_BORDER_NORMAL; + -fx-pref-height: 1px; +} + /******************************************************************************* * * * Tooltip * @@ -370,6 +413,15 @@ -fx-background-color: CONTROL_PRIMARY_BORDER_DISABLED, CONTROL_PRIMARY_BG_DISABLED; } +.button:default .glyph-icon { + -fx-fill: TEXT_FILL_WHITE; +} + +.button-large { + -fx-font-size: 1.25em; + -fx-padding: 0.25em 1.25em 0.25em 1.25em; +} + /******************************************************************************* * * * Checkbox * @@ -414,6 +466,7 @@ -fx-label-padding: 0 0 0 6px; -fx-padding: 4px; } + .radio-button > .radio { -fx-border-color: CONTROL_BORDER_NORMAL; -fx-border-radius: 1em; /* large value to make sure this remains circular */ @@ -421,18 +474,22 @@ -fx-background-radius: 1em; -fx-padding: 4px; /* padding from outside edge to the inner black dot */ } + .radio-button:focused > .radio { -fx-border-color: CONTROL_BORDER_FOCUSED; } + .text-input:disabled > .radio { -fx-border-color: CONTROL_BORDER_DISABLED; -fx-background-color: CONTROL_BG_DISABLED; } + .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 */ } + .radio-button:selected > .radio > .dot { -fx-background-color: TEXT_FILL; } diff --git a/main/ui/src/main/resources/fxml/vault_detail.fxml b/main/ui/src/main/resources/fxml/vault_detail.fxml index b1cd0f789..200501524 100644 --- a/main/ui/src/main/resources/fxml/vault_detail.fxml +++ b/main/ui/src/main/resources/fxml/vault_detail.fxml @@ -3,40 +3,58 @@ + + - - + + styleClass="vault-detail" + minWidth="300" + spacing="12"> - + - - diff --git a/main/ui/src/main/resources/fxml/vault_options.fxml b/main/ui/src/main/resources/fxml/vault_options.fxml index 134786251..899a2cf8e 100644 --- a/main/ui/src/main/resources/fxml/vault_options.fxml +++ b/main/ui/src/main/resources/fxml/vault_options.fxml @@ -11,7 +11,7 @@ tabClosingPolicy="UNAVAILABLE" tabDragPolicy="FIXED"> - + @@ -19,7 +19,7 @@ - + diff --git a/main/ui/src/main/resources/fxml/vault_options_general.fxml b/main/ui/src/main/resources/fxml/vault_options_general.fxml index 377a6d89f..88ef91a2c 100644 --- a/main/ui/src/main/resources/fxml/vault_options_general.fxml +++ b/main/ui/src/main/resources/fxml/vault_options_general.fxml @@ -1,7 +1,7 @@ - + -