From 890a0c44081483ee591c17ea2e91fb5b1ccda693 Mon Sep 17 00:00:00 2001 From: Sebastian Stenzel Date: Wed, 2 Mar 2016 22:23:40 +0100 Subject: [PATCH] "UI refactoring", preparation for #73 --- .../org/cryptomator/ui/MainApplication.java | 4 +- .../ui/controllers/MainController.java | 2 +- .../ui/controllers/UnlockController.java | 6 +-- .../ui/controllers/UnlockedController.java | 49 ++++++++++++----- .../ui/controllers/WelcomeController.java | 44 +++++++-------- .../ui/src/main/resources/css/linux_theme.css | 39 +++++++++++--- main/ui/src/main/resources/css/mac_theme.css | 45 ++++++++++++++-- main/ui/src/main/resources/css/win_theme.css | 33 +++++++++--- .../main/resources/fxml/change_password.fxml | 2 +- .../src/main/resources/fxml/initialize.fxml | 2 +- main/ui/src/main/resources/fxml/main.fxml | 32 +++++------ main/ui/src/main/resources/fxml/settings.fxml | 2 +- main/ui/src/main/resources/fxml/unlock.fxml | 2 +- main/ui/src/main/resources/fxml/unlocked.fxml | 54 ++++++++++--------- .../main/resources/localization.properties | 7 +-- 15 files changed, 213 insertions(+), 110 deletions(-) diff --git a/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java b/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java index bed077a24..226831192 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java +++ b/main/ui/src/main/java/org/cryptomator/ui/MainApplication.java @@ -72,7 +72,9 @@ public class MainApplication extends Application { final ResourceBundle rb = ResourceBundle.getBundle("localization"); primaryStage.titleProperty().bind(mainCtrl.windowTitle()); primaryStage.setResizable(false); - primaryStage.getIcons().add(new Image(MainApplication.class.getResourceAsStream("/window_icon.png"))); + if (SystemUtils.IS_OS_WINDOWS) { + primaryStage.getIcons().add(new Image(MainApplication.class.getResourceAsStream("/window_icon.png"))); + } primaryStage.show(); ActiveWindowStyleSupport.startObservingFocus(primaryStage); diff --git a/main/ui/src/main/java/org/cryptomator/ui/controllers/MainController.java b/main/ui/src/main/java/org/cryptomator/ui/controllers/MainController.java index edd1d69be..6b12702b9 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/controllers/MainController.java +++ b/main/ui/src/main/java/org/cryptomator/ui/controllers/MainController.java @@ -161,7 +161,7 @@ public class MainController extends AbstractFXMLViewController { if (addVaultContextMenu.isShowing()) { addVaultContextMenu.hide(); } else { - addVaultContextMenu.show(addVaultButton, Side.RIGHT, 0.0, 0.0); + addVaultContextMenu.show(addVaultButton, Side.BOTTOM, 0.0, 0.0); } } diff --git a/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockController.java b/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockController.java index 3d92b9f2a..f8af1891e 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockController.java +++ b/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockController.java @@ -293,13 +293,11 @@ public class UnlockController extends AbstractFXMLViewController { messageText.setText(resourceBundle.getString("unlock.errorMessage.unsupportedVersion.softwareOlderThanVault") + " "); } }); - } catch (FrontendCreationFailedException e) { + } catch (FrontendCreationFailedException | CommandFailedException e) { LOG.error("Decryption failed for technical reasons.", e); Platform.runLater(() -> { - messageText.setText(resourceBundle.getString("unlock.errorMessage.decryptionFailed")); + messageText.setText(resourceBundle.getString("unlock.errorMessage.mountingFailed")); }); - } catch (CommandFailedException e) { - LOG.error("Failed to reveal mounted vault", e); } finally { Platform.runLater(() -> { passwordField.swipe(); diff --git a/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockedController.java b/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockedController.java index b1f43f32e..148d07567 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockedController.java +++ b/main/ui/src/main/java/org/cryptomator/ui/controllers/UnlockedController.java @@ -31,11 +31,15 @@ import javafx.collections.ListChangeListener; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.fxml.FXML; +import javafx.geometry.Side; import javafx.scene.chart.LineChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart.Data; import javafx.scene.chart.XYChart.Series; +import javafx.scene.control.ContextMenu; import javafx.scene.control.Label; +import javafx.scene.control.ToggleButton; +import javafx.stage.PopupWindow.AnchorLocation; import javafx.stage.Stage; import javafx.util.Duration; @@ -68,12 +72,19 @@ public class UnlockedController extends AbstractFXMLViewController { @FXML private NumberAxis xAxis; + @FXML + private ToggleButton moreOptionsButton; + + @FXML + private ContextMenu moreOptionsMenu; + @Override public void initialize() { macWarningsController.initStage(macWarningsWindow); ActiveWindowStyleSupport.startObservingFocus(macWarningsWindow); EasyBind.subscribe(vault, this::vaultChanged); + EasyBind.subscribe(moreOptionsMenu.showingProperty(), moreOptionsButton::setSelected); } @Override @@ -106,20 +117,7 @@ public class UnlockedController extends AbstractFXMLViewController { } @FXML - private void didClickRevealVault(ActionEvent event) { - exec.submit(() -> { - try { - vault.get().reveal(); - } catch (CommandFailedException e) { - Platform.runLater(() -> { - messageLabel.setText(resourceBundle.getString("unlocked.label.revealFailed")); - }); - } - }); - } - - @FXML - private void didClickCloseVault(ActionEvent event) { + private void didClickLockVault(ActionEvent event) { exec.submit(() -> { try { vault.get().unmount(); @@ -134,6 +132,29 @@ public class UnlockedController extends AbstractFXMLViewController { }); } + @FXML + private void didClickMoreOptions(ActionEvent event) { + if (moreOptionsMenu.isShowing()) { + moreOptionsMenu.hide(); + } else { + moreOptionsMenu.setAnchorLocation(AnchorLocation.CONTENT_TOP_RIGHT); + moreOptionsMenu.show(moreOptionsButton, Side.BOTTOM, moreOptionsButton.getWidth(), 0.0); + } + } + + @FXML + private void didClickRevealVault(ActionEvent event) { + exec.submit(() -> { + try { + vault.get().reveal(); + } catch (CommandFailedException e) { + Platform.runLater(() -> { + messageLabel.setText(resourceBundle.getString("unlocked.label.revealFailed")); + }); + } + }); + } + // **************************************** // MAC Auth Warnings // **************************************** diff --git a/main/ui/src/main/java/org/cryptomator/ui/controllers/WelcomeController.java b/main/ui/src/main/java/org/cryptomator/ui/controllers/WelcomeController.java index 4e9bcc02f..d6e9af5c4 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/controllers/WelcomeController.java +++ b/main/ui/src/main/java/org/cryptomator/ui/controllers/WelcomeController.java @@ -53,6 +53,19 @@ public class WelcomeController extends AbstractFXMLViewController { private static final Logger LOG = LoggerFactory.getLogger(WelcomeController.class); + private final Application app; + private final Settings settings; + private final Comparator semVerComparator; + private final ExecutorService executor; + + @Inject + public WelcomeController(Application app, Settings settings, @Named("SemVer") Comparator semVerComparator, ExecutorService executor) { + this.app = app; + this.settings = settings; + this.semVerComparator = semVerComparator; + this.executor = executor; + } + @FXML private ImageView botImageView; @@ -68,17 +81,15 @@ public class WelcomeController extends AbstractFXMLViewController { @FXML private Hyperlink updateLink; - private final Application app; - private final Settings settings; - private final Comparator semVerComparator; - private final ExecutorService executor; - - @Inject - public WelcomeController(Application app, Settings settings, @Named("SemVer") Comparator semVerComparator, ExecutorService executor) { - this.app = app; - this.settings = settings; - this.semVerComparator = semVerComparator; - this.executor = executor; + @Override + public void initialize() { + botImageView.setImage(new Image(getClass().getResource("/bot_welcome.png").toString())); + if (areUpdatesManagedExternally()) { + checkForUpdatesContainer.setVisible(false); + checkForUpdatesContainer.setManaged(false); + } else if (settings.isCheckForUpdatesEnabled()) { + executor.execute(this::checkForUpdates); + } } @Override @@ -91,17 +102,6 @@ public class WelcomeController extends AbstractFXMLViewController { return ResourceBundle.getBundle("localization"); } - @Override - public void initialize() { - botImageView.setImage(new Image(getClass().getResource("/bot_welcome.png").toString())); - if (areUpdatesManagedExternally()) { - checkForUpdatesContainer.setVisible(false); - checkForUpdatesContainer.setManaged(false); - } else if (settings.isCheckForUpdatesEnabled()) { - executor.execute(this::checkForUpdates); - } - } - // **************************************** // Check for updates // **************************************** diff --git a/main/ui/src/main/resources/css/linux_theme.css b/main/ui/src/main/resources/css/linux_theme.css index 64446ad4f..767bed353 100644 --- a/main/ui/src/main/resources/css/linux_theme.css +++ b/main/ui/src/main/resources/css/linux_theme.css @@ -38,7 +38,7 @@ /**************************************************************************** * * - * Labels * + * Labels & Fonts * * * ****************************************************************************/ @@ -46,6 +46,10 @@ -fx-text-fill: COLOR_TEXT; } +.ionicons { + -fx-font-family: Ionicons; +} + /**************************************************************************** * * * Hyperlinks * @@ -67,30 +71,51 @@ * * ****************************************************************************/ -.button { +.button, +.toggle-button { + -fx-pref-height: 25px; -fx-background-color: COLOR_BORDER, COLOR_VGRAD_LIGHT; -fx-background-insets: 0, 1; - -fx-padding: 0.4em 0.8em 0.4em 0.8em; + -fx-padding: 4px 8px 4px 8px; -fx-text-fill: COLOR_TEXT; -fx-alignment: CENTER; } .button:hover, -.button:default:hover { +.button:default:hover, +.toggle-button:hover { -fx-background-color: COLOR_BORDER, COLOR_VGRAD_MEDIUM; } .button:armed, -.button:default:armed { +.button:default:armed, +.toggle-button:armed { -fx-background-color: COLOR_BORDER_DARK, COLOR_VGRAD_DARK; } .button:disabled, -.button:default:disabled { +.button:default:disabled, +.toggle-button:disabled { -fx-background-color: COLOR_BORDER, COLOR_VGRAD_LIGHT; -fx-text-fill: COLOR_TEXT_DISABLED; } +/**************************************************************************** + * * + * Segmented Buttons * + * * + ****************************************************************************/ + +.segmented-button-bar .button, +.segmented-button-bar .toggle-button { + -fx-background-insets: 0, 1; +} + +.segmented-button-bar .button.last, +.segmented-button-bar .toggle-button.last { + -fx-background-insets: 0, 1 1 1 0; +} + /**************************************************************************** * * * Text Fields * @@ -179,7 +204,7 @@ .tool-bar.list-related-toolbar .toggle-button, .tool-bar.list-related-toolbar .button { - -fx-font-family: Ionicons; + -fx-pref-height: 30px; -fx-font-size: 1.8em; -fx-text-fill: COLOR_TEXT; -fx-padding: 0.2em 0.8em 0.2em 0.8em; diff --git a/main/ui/src/main/resources/css/mac_theme.css b/main/ui/src/main/resources/css/mac_theme.css index 8cbe91c89..ecd72ff52 100644 --- a/main/ui/src/main/resources/css/mac_theme.css +++ b/main/ui/src/main/resources/css/mac_theme.css @@ -37,7 +37,7 @@ /**************************************************************************** * * - * Labels * + * Labels & Fonts * * * ****************************************************************************/ @@ -45,6 +45,10 @@ -fx-text-fill: COLOR_TEXT; } +.ionicons { + -fx-font-family: Ionicons; +} + /**************************************************************************** * * * Hyperlinks * @@ -66,11 +70,13 @@ * * ****************************************************************************/ -.button { +.button, +.toggle-button { + -fx-pref-height: 21px; -fx-background-color: COLOR_HGRAD_BTN_BORDER, #FFF; -fx-background-insets: 0, 1; -fx-background-radius: 4; - -fx-padding: 0.2em 0.8em 0.2em 0.8em; + -fx-padding: 2px 12px 3px 12px; -fx-text-fill: COLOR_TEXT; -fx-alignment: CENTER; -fx-focus-traversable: false; @@ -84,6 +90,7 @@ .button:disabled, .button:default:disabled, +.toggle-button:disabled, .root.active-window .button:default:disabled { -fx-background-color: COLOR_HGRAD_BTN_BORDER_DIS, #F2F2F2; -fx-background-insets: 0, 1; @@ -97,6 +104,34 @@ -fx-text-fill: #FFF; } +.toggle-button:armed, +.toggle-button:selected { + -fx-background-color: linear-gradient(to bottom, #C0C0C0 0%, #ADADAD 100%); +} + +/**************************************************************************** + * * + * Segmented Buttons * + * * + ****************************************************************************/ + +.segmented-button-bar .button, +.segmented-button-bar .toggle-button { + -fx-background-radius: 0; + -fx-background-insets: 0, 1 1 1 0; +} + +.segmented-button-bar .button.first, +.segmented-button-bar .toggle-button.first { + -fx-background-radius: 4 0 0 4; + -fx-background-insets: 0, 1; +} + +.segmented-button-bar .button.last, +.segmented-button-bar .toggle-button.last { + -fx-background-radius: 0 4 4 0; +} + /**************************************************************************** * * * Text Fields * @@ -227,6 +262,7 @@ ****************************************************************************/ .tool-bar.list-related-toolbar { + -fx-font-size: 1.4em; -fx-background-color: COLOR_BORDER, #F7F7F7; -fx-background-insets: 0, 0 1 1 1; -fx-padding: 0; @@ -241,8 +277,7 @@ .tool-bar.list-related-toolbar .toggle-button, .tool-bar.list-related-toolbar .button { - -fx-font-family: Ionicons; - -fx-font-size: 1.4em; + -fx-pref-height: 25px; -fx-text-fill: COLOR_TEXT; -fx-background-color: transparent; -fx-padding: 0.1em 0.6em 0.1em 0.6em; diff --git a/main/ui/src/main/resources/css/win_theme.css b/main/ui/src/main/resources/css/win_theme.css index fd09f370d..14c885dda 100644 --- a/main/ui/src/main/resources/css/win_theme.css +++ b/main/ui/src/main/resources/css/win_theme.css @@ -30,7 +30,7 @@ /**************************************************************************** * * - * Labels * + * Labels & Fonts * * * ****************************************************************************/ @@ -38,6 +38,10 @@ -fx-text-fill: COLOR_TEXT; } +.ionicons { + -fx-font-family: Ionicons; +} + /**************************************************************************** * * * Hyperlinks * @@ -61,10 +65,10 @@ .button, .toggle-button { + -fx-pref-height: 25px; -fx-background-color: COLOR_BORDER, linear-gradient(to bottom, #F0F0F0 0%, #E5E5E5 100%); -fx-background-insets: 0, 1; - -fx-background-radius: 0, 0; - -fx-padding: 0.1em 0.6em 0.1em 0.6em; + -fx-padding: 2px 12px 2px 12px; -fx-text-fill: COLOR_TEXT; -fx-alignment: CENTER; -fx-border-color: transparent; @@ -83,18 +87,34 @@ .button:armed, .button:default:armed, -.toggle-button:armed { +.toggle-button:armed, +.toggle-button:selected { -fx-background-color: COLOR_BORDER_FOCUS, linear-gradient(to bottom, #DAECFC 0%, #C4E0FC 100%); } .button:focused, -.toggle-button:focused, .toggle-button:focused { -fx-border-color: black; -fx-border-insets: 2px; -fx-border-style: dotted inside; } +/**************************************************************************** + * * + * Segmented Buttons * + * * + ****************************************************************************/ + +.segmented-button-bar .button, +.segmented-button-bar .toggle-button { + -fx-background-insets: 0, 1; +} + +.segmented-button-bar .button.last, +.segmented-button-bar .toggle-button.last { + -fx-background-insets: 0, 1 1 1 0; +} + /**************************************************************************** * * * Text Fields * @@ -232,14 +252,13 @@ .tool-bar.list-related-toolbar { -fx-background-color: transparent; - -fx-padding: 0.1em 0 0.1em 0; + -fx-padding: 0.4em 0 0 0; -fx-spacing: 1px; -fx-alignment: CENTER_LEFT; } .tool-bar.list-related-toolbar .toggle-button, .tool-bar.list-related-toolbar .button { - -fx-font-family: Ionicons; -fx-font-size: 1.4em; -fx-text-fill: COLOR_TEXT; } diff --git a/main/ui/src/main/resources/fxml/change_password.fxml b/main/ui/src/main/resources/fxml/change_password.fxml index 93f8ece25..93b7f18b0 100644 --- a/main/ui/src/main/resources/fxml/change_password.fxml +++ b/main/ui/src/main/resources/fxml/change_password.fxml @@ -24,7 +24,7 @@ - + diff --git a/main/ui/src/main/resources/fxml/initialize.fxml b/main/ui/src/main/resources/fxml/initialize.fxml index 11ab34445..65ca244c6 100644 --- a/main/ui/src/main/resources/fxml/initialize.fxml +++ b/main/ui/src/main/resources/fxml/initialize.fxml @@ -18,7 +18,7 @@ - + diff --git a/main/ui/src/main/resources/fxml/main.fxml b/main/ui/src/main/resources/fxml/main.fxml index ca5da150c..d3b56bd2c 100644 --- a/main/ui/src/main/resources/fxml/main.fxml +++ b/main/ui/src/main/resources/fxml/main.fxml @@ -20,7 +20,7 @@ - + @@ -39,23 +39,19 @@ - - - - - - - -