From 7b132adfe29ffb2208c5ddf698752de1bfdff219 Mon Sep 17 00:00:00 2001 From: Jan-Peter Klein Date: Tue, 16 Jul 2024 14:31:11 +0200 Subject: [PATCH] adjust add vault button position for improved UI --- .../ui/mainwindow/VaultListController.java | 20 +--- src/main/resources/css/dark_theme.css | 81 ++-------------- src/main/resources/css/light_theme.css | 80 ++-------------- src/main/resources/fxml/vault_list.fxml | 95 ++++++++++--------- src/main/resources/i18n/strings.properties | 11 +-- 5 files changed, 72 insertions(+), 215 deletions(-) diff --git a/src/main/java/org/cryptomator/ui/mainwindow/VaultListController.java b/src/main/java/org/cryptomator/ui/mainwindow/VaultListController.java index dbe81bcc8..5cd4c38ef 100644 --- a/src/main/java/org/cryptomator/ui/mainwindow/VaultListController.java +++ b/src/main/java/org/cryptomator/ui/mainwindow/VaultListController.java @@ -25,10 +25,8 @@ import javafx.collections.ListChangeListener; import javafx.collections.ObservableList; import javafx.fxml.FXML; import javafx.geometry.Side; -import javafx.scene.control.Button; import javafx.scene.control.ContextMenu; import javafx.scene.control.ListView; -import javafx.scene.control.ScrollPane; import javafx.scene.input.ContextMenuEvent; import javafx.scene.input.DragEvent; import javafx.scene.input.KeyCode; @@ -75,11 +73,9 @@ public class VaultListController implements FxController { private final FxApplicationWindows appWindows; public ListView vaultList; - public ScrollPane scrollPane; public VBox vbox; public StackPane root; - public Button addVaultBtn; - public HBox addVaultArea; + public HBox addVaultButton; @FXML private ContextMenu addVaultContextMenu; @@ -114,18 +110,6 @@ public class VaultListController implements FxController { vaultList.setItems(vaults); vaultList.setCellFactory(cellFactory); - vaultList.prefHeightProperty().bind(vaultList.fixedCellSizeProperty().multiply(vaultList.getItems().size())); - vaultList.maxHeightProperty().bind(vaultList.prefHeightProperty()); - vaultList.prefWidthProperty().bind(scrollPane.widthProperty()); - - scrollPane.heightProperty().addListener((_, oldValue, newValue) -> { - if(newValue.doubleValue()>oldValue.doubleValue()){ - scrollPane.setVvalue(1.0); - } - }); - - vaultList.prefHeightProperty().bind(Bindings.size(vaultList.getItems()).multiply(vaultList.fixedCellSizeProperty())); - selectedVault.bind(vaultList.getSelectionModel().selectedItemProperty()); vaults.addListener((ListChangeListener.Change c) -> { while (c.next()) { @@ -191,7 +175,7 @@ public class VaultListController implements FxController { if (addVaultContextMenu.isShowing()) { addVaultContextMenu.hide(); } else { - addVaultContextMenu.show(addVaultArea, Side.BOTTOM, 0.0, 0.0); + addVaultContextMenu.show(addVaultButton, Side.BOTTOM, 0.0, 0.0); } } diff --git a/src/main/resources/css/dark_theme.css b/src/main/resources/css/dark_theme.css index d01230f09..02f1ef028 100644 --- a/src/main/resources/css/dark_theme.css +++ b/src/main/resources/css/dark_theme.css @@ -181,31 +181,20 @@ -fx-border-width: 1px; } -.main-window .title { - -fx-background-color: CONTROL_BORDER_NORMAL, TITLE_BG; - -fx-background-insets: 0, 0 0 1px 0; +.main-window .button-bar { + -fx-background-color: MAIN_BG; + -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; + -fx-border-width: 1px 0 0 0; } -.main-window .title .button { - -fx-pref-height: 30px; - -fx-pref-width: 30px; - -fx-background-color: none; - -fx-padding: 0; +.main-window .button-left { + -fx-border-color: CONTROL_BORDER_NORMAL; + -fx-border-width: 0 1px 0 0; } -.main-window .title .button .glyph-icon { - -fx-fill: white; -} - -.main-window .title .button:armed .glyph-icon { - -fx-fill: GRAY_8; -} - -.main-window .update-indicator { - -fx-background-color: white, RED_5; - -fx-background-insets: 1px, 2px; - -fx-background-radius: 6px, 5px; - -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 2, 0, 0, 0); +.main-window .button-right { + -fx-border-color: CONTROL_BORDER_NORMAL; + -fx-border-width: 0 0 0 1px; } /******************************************************************************* @@ -322,46 +311,6 @@ -fx-fill: transparent; } -.button.toolbar-button { - -fx-min-height: 40px; - -fx-background-color: transparent; - -fx-background-insets: 0; - -fx-background-radius: 0; - -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; - -fx-border-width: 1px 0 0 0; - -fx-padding: 0; -} - -.button.toolbar-button:focused { - -fx-background-color: CONTROL_BORDER_FOCUSED, MAIN_BG; - -fx-background-insets: 0, 2px 1px 1px 1px; -} - -.button.toolbar-button:armed { - -fx-background-color: CONTROL_BG_ARMED; -} - -.left-side-panel { - -fx-background-color: CONTROL_BG_NORMAL; -} - -.add-vault-btn { - -fx-background-color: CONTROL_BG_NORMAL; -} -.add-vault-btn .icon { - -fx-fill: TEXT_FILL_MUTED; -} -.add-vault-btn-label { - -fx-font-family: 'Open Sans SemiBold'; - -fx-font-size: 1.0em; -} - -.preferences-btn { - -fx-background-color: MAIN_BG; - -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; - -fx-border-width: 1px 0 0 0; -} - /******************************************************************************* * * * ScrollBar * @@ -415,16 +364,6 @@ -fx-background-color: MUTED_BG; } -/* Note: These values below are kinda random such that it looks ok. I'm pretty sure there is room for improvement. Additionally, fx-text-fill does not work*/ -.badge-debug { - -fx-font-family: 'Open Sans Bold'; - -fx-font-size: 1.0em; - -fx-background-radius: 8px; - -fx-padding: 0.3em 0.55em 0.3em 0.55em; - -fx-background-color: RED_5; - -fx-background-radius: 2em; -} - /******************************************************************************* * * * Password Strength Indicator * diff --git a/src/main/resources/css/light_theme.css b/src/main/resources/css/light_theme.css index 74a0e72f8..3081ef2d3 100644 --- a/src/main/resources/css/light_theme.css +++ b/src/main/resources/css/light_theme.css @@ -181,30 +181,20 @@ -fx-border-width: 1px; } -.main-window .title { - -fx-background-color: TITLE_BG; +.main-window .button-bar { + -fx-background-color: MAIN_BG; + -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; + -fx-border-width: 1px 0 0 0; } -.main-window .title .button { - -fx-pref-height: 30px; - -fx-pref-width: 30px; - -fx-background-color: none; - -fx-padding: 0; +.main-window .button-bar .button-left { + -fx-border-color: CONTROL_BORDER_NORMAL; + -fx-border-width: 0 1px 0 0; } -.main-window .title .button .glyph-icon { - -fx-fill: white; -} - -.main-window .title .button:armed .glyph-icon { - -fx-fill: GRAY_8; -} - -.main-window .update-indicator { - -fx-background-color: white, RED_5; - -fx-background-insets: 1px, 2px; - -fx-background-radius: 6px, 5px; - -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 2, 0, 0, 0); +.main-window .button-bar .button-right { + -fx-border-color: CONTROL_BORDER_NORMAL; + -fx-border-width: 0 0 0 1px; } /******************************************************************************* @@ -321,46 +311,6 @@ -fx-fill: transparent; } -.button.toolbar-button { - -fx-min-height: 40px; - -fx-background-color: transparent; - -fx-background-insets: 0; - -fx-background-radius: 0; - -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; - -fx-border-width: 1px 0 0 0; - -fx-padding: 0; -} - -.button.toolbar-button:focused { - -fx-background-color: CONTROL_BORDER_FOCUSED, MAIN_BG; - -fx-background-insets: 0, 2px 1px 1px 1px; -} - -.button.toolbar-button:armed { - -fx-background-color: CONTROL_BG_ARMED; -} - -.left-side-panel { - -fx-background-color: CONTROL_BG_NORMAL; -} - -.add-vault-btn { - -fx-background-color: CONTROL_BG_NORMAL; -} -.add-vault-btn .icon { - -fx-fill: GRAY_4; -} -.add-vault-btn-label { - -fx-font-family: 'Open Sans SemiBold'; - -fx-font-size: 1.0em; -} - -.preferences-btn { - -fx-background-color: MAIN_BG; - -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; - -fx-border-width: 1px 0 0 0; -} - /******************************************************************************* * * * ScrollBar * @@ -414,16 +364,6 @@ -fx-background-color: MUTED_BG; } -/* Note: These values below are kinda random such that it looks ok. I'm pretty sure there is room for improvement. Additionally, fx-text-fill does not work*/ -.badge-debug { - -fx-font-family: 'Open Sans Bold'; - -fx-font-size: 1.0em; - -fx-background-radius: 8px; - -fx-padding: 0.3em 0.55em 0.3em 0.55em; - -fx-background-color: RED_5; - -fx-background-radius: 2em; -} - /******************************************************************************* * * * Password Strength Indicator * diff --git a/src/main/resources/fxml/vault_list.fxml b/src/main/resources/fxml/vault_list.fxml index ad80c9a2c..465ef199d 100644 --- a/src/main/resources/fxml/vault_list.fxml +++ b/src/main/resources/fxml/vault_list.fxml @@ -10,61 +10,62 @@ - + - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/src/main/resources/i18n/strings.properties b/src/main/resources/i18n/strings.properties index 64422536d..26e6f6ce2 100644 --- a/src/main/resources/i18n/strings.properties +++ b/src/main/resources/i18n/strings.properties @@ -300,7 +300,6 @@ preferences.interface.language.auto=System Default preferences.interface.interfaceOrientation=Interface Orientation preferences.interface.interfaceOrientation.ltr=Left to Right preferences.interface.interfaceOrientation.rtl=Right to Left -preferences.interface.showMinimizeButton=Show minimize button preferences.interface.showTrayIcon=Show tray icon (requires restart) ## Volume preferences.volume=Virtual Drive @@ -376,11 +375,6 @@ stats.access.total=Total accesses: %d # Main Window -main.closeBtn.tooltip=Close -main.minimizeBtn.tooltip=Minimize -main.preferencesBtn.tooltip=Preferences -main.debugModeEnabled.tooltip=Debug mode is enabled -main.supporterCertificateMissing.tooltip=Please consider donating ## Vault List main.vaultlist.emptyList.onboardingInstruction=Click here to add a vault main.vaultlist.contextMenu.remove=Remove… @@ -389,9 +383,8 @@ main.vaultlist.contextMenu.unlock=Unlock… main.vaultlist.contextMenu.unlockNow=Unlock Now main.vaultlist.contextMenu.vaultoptions=Show Vault Options main.vaultlist.contextMenu.reveal=Reveal Drive -main.vaultlist.addVaultBtn=Add Vault -main.vaultlist.addVaultBtn.menuItemNew=New Vault... -main.vaultlist.addVaultBtn.menuItemExisting=Existing Vault... +main.vaultlist.addVaultBtn.menuItemNew=Create New Vault... +main.vaultlist.addVaultBtn.menuItemExisting=Open Existing Vault... ## Vault Detail ### Welcome main.vaultDetail.welcomeOnboarding=Thanks for choosing Cryptomator to protect your files. If you need any assistance, check out our getting started guides: