diff --git a/src/main/java/org/cryptomator/ui/controls/NotificationBar.java b/src/main/java/org/cryptomator/ui/controls/InfoBar.java similarity index 67% rename from src/main/java/org/cryptomator/ui/controls/NotificationBar.java rename to src/main/java/org/cryptomator/ui/controls/InfoBar.java index 64a08f220..02efa00f5 100644 --- a/src/main/java/org/cryptomator/ui/controls/NotificationBar.java +++ b/src/main/java/org/cryptomator/ui/controls/InfoBar.java @@ -4,24 +4,27 @@ import javafx.beans.property.BooleanProperty; import javafx.beans.property.SimpleBooleanProperty; import javafx.fxml.FXML; import javafx.geometry.Pos; +import javafx.scene.AccessibleRole; import javafx.scene.control.Button; +import javafx.scene.control.ContentDisplay; import javafx.scene.control.Label; import javafx.scene.layout.HBox; import javafx.scene.layout.Region; import javafx.scene.layout.VBox; +import java.util.ResourceBundle; -public class NotificationBar extends HBox { +public class InfoBar extends HBox { @FXML - private Label notificationLabel; + private Label infoMessage; private final BooleanProperty dismissable = new SimpleBooleanProperty(); private final BooleanProperty notify = new SimpleBooleanProperty(); - public NotificationBar() { + public InfoBar() { setAlignment(Pos.CENTER); - setStyle("-fx-alignment: center;"); + getStyleClass().addAll("info-bar"); Region spacer = new Region(); spacer.setMinWidth(40); @@ -36,14 +39,21 @@ public class NotificationBar extends HBox { vbox.setAlignment(Pos.CENTER); HBox.setHgrow(vbox, javafx.scene.layout.Priority.ALWAYS); - notificationLabel = new Label(); - notificationLabel.getStyleClass().add("notification-label"); - notificationLabel.setStyle("-fx-alignment: center;"); - vbox.getChildren().add(notificationLabel); + infoMessage = new Label(); + infoMessage.setFocusTraversable(true); + infoMessage.setAccessibleRole(AccessibleRole.BUTTON); + vbox.getChildren().add(infoMessage); - Button closeButton = new Button("X"); + var closeGraphic = new FontAwesome5IconView(); + closeGraphic.setGlyph(FontAwesome5Icon.TIMES); + closeGraphic.setGlyphSize(12); + closeGraphic.getStyleClass().add("glyph"); + + Button closeButton = new Button(); + closeButton.setGraphic(closeGraphic); + closeButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY); + closeButton.setAccessibleText(ResourceBundle.getBundle("i18n.strings").getString("main.notification.closeButton.tooltip")); closeButton.setMinWidth(40); - closeButton.setStyle("-fx-background-color: transparent; -fx-text-fill: white; -fx-font-weight: bold;"); closeButton.visibleProperty().bind(dismissable); closeButton.setOnAction(_ -> { @@ -61,11 +71,11 @@ public class NotificationBar extends HBox { } public String getText() { - return notificationLabel.getText(); + return infoMessage.getText(); } public void setText(String text) { - notificationLabel.setText(text); + infoMessage.setText(text); } public void setStyleClass(String styleClass) { diff --git a/src/main/resources/css/dark_theme.css b/src/main/resources/css/dark_theme.css index 5b8c717c1..bb23af18c 100644 --- a/src/main/resources/css/dark_theme.css +++ b/src/main/resources/css/dark_theme.css @@ -50,6 +50,7 @@ GREEN_5: PRIMARY; RED_5: #E74C3C; ORANGE_5: #E67E22; + YELLOW_4: #C19F0E; YELLOW_5: #F1C40F; MAIN_BG: GRAY_1; @@ -387,37 +388,62 @@ /******************************************************************************* * * - * NotificationBar * + * InfoBar * * * ******************************************************************************/ +.info-bar { + -fx-alignment: center; + -fx-min-height:24px; + -fx-max-height:24px; + -fx-background-color: -bar-bg; +} -.notification-label { - -fx-text-fill: white; +.info-bar--green { + -bar-bg: GREEN_5; + -button-bg: GREEN_5; + -button-bg-pressed: GREEN_3; +} + +.info-bar--yellow { + -bar-bg: YELLOW_5; + -button-bg: YELLOW_5; + -button-bg-pressed: YELLOW_4; +} + +.info-bar--red { + -bar-bg: RED_5; + -button-bg: RED_5; + -button-bg-pressed: RED_5; +} + +.info-bar .label { + -fx-text-fill: GRAY_9; -fx-font-weight: bold; } -.notification-debug { - -fx-min-height:24px; - -fx-max-height:24px; - -fx-background-color: RED_5; +.info-bar--yellow .label { + -fx-text-fill: GRAY_9; + -fx-font-weight: bold; + -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.45) , 2 , 0 , 0 , 1 ); } -.notification-update { - -fx-min-height:24px; - -fx-max-height:24px; - -fx-background-color: YELLOW_5; +.info-bar .glyph { + -fx-fill: GRAY_9; } -.notification-support { - -fx-min-height:24px; - -fx-max-height:24px; - -fx-background-color: PRIMARY; +.info-bar:hover .label { + -fx-underline:true; } -.notification-debug:hover .notification-label, -.notification-update:hover .notification-label, -.notification-support:hover .notification-label { - -fx-underline:true; +.info-bar .button { + -fx-background-color: transparent; + -fx-border-color: transparent; + -fx-padding: 2 2 2 2; +} + +.info-bar .button:armed { + -fx-background-color: -button-bg-pressed; + -fx-background-radius: 8; } /******************************************************************************* diff --git a/src/main/resources/css/light_theme.css b/src/main/resources/css/light_theme.css index 38e476923..dcbee907f 100644 --- a/src/main/resources/css/light_theme.css +++ b/src/main/resources/css/light_theme.css @@ -50,6 +50,7 @@ GREEN_5: PRIMARY; RED_5: #E74C3C; ORANGE_5: #E67E22; + YELLOW_4: #C19F0E; YELLOW_5: #F1C40F; MAIN_BG: GRAY_9; @@ -387,39 +388,64 @@ /******************************************************************************* * * - * NotificationBar * + * InfoBar * * * ******************************************************************************/ +.info-bar { + -fx-alignment: center; + -fx-min-height:24px; + -fx-max-height:24px; + -fx-background-color: -bar-bg; +} -.notification-label { - -fx-text-fill: white; +.info-bar--green { + -bar-bg: GREEN_5; + -button-bg: GREEN_5; + -button-bg-pressed: GREEN_3; +} + +.info-bar--yellow { + -bar-bg: YELLOW_5; + -button-bg: YELLOW_5; + -button-bg-pressed: YELLOW_4; +} + +.info-bar--red { + -bar-bg: RED_5; + -button-bg: RED_5; + -button-bg-pressed: RED_5; +} + +.info-bar .label { + -fx-text-fill: GRAY_9; -fx-font-weight: bold; } -.notification-debug { - -fx-min-height:24px; - -fx-max-height:24px; - -fx-background-color: RED_5; +.info-bar--yellow .label { + -fx-text-fill: GRAY_9; + -fx-font-weight: bold; + -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.45) , 2 , 0 , 0 , 1 ); } -.notification-update { - -fx-min-height:24px; - -fx-max-height:24px; - -fx-background-color: YELLOW_5; +.info-bar .glyph { + -fx-fill: GRAY_9; } -.notification-support { - -fx-min-height:24px; - -fx-max-height:24px; - -fx-background-color: PRIMARY; -} - -.notification-debug:hover .notification-label, -.notification-update:hover .notification-label, -.notification-support:hover .notification-label { +.info-bar:hover .label { -fx-underline:true; } +.info-bar .button { + -fx-background-color: transparent; + -fx-border-color: transparent; + -fx-padding: 2 2 2 2; +} + +.info-bar .button:armed { + -fx-background-color: -button-bg-pressed; + -fx-background-radius: 8; +} + /******************************************************************************* * * * ScrollBar * diff --git a/src/main/resources/fxml/main_window.fxml b/src/main/resources/fxml/main_window.fxml index 327e2c470..37ab65bbb 100644 --- a/src/main/resources/fxml/main_window.fxml +++ b/src/main/resources/fxml/main_window.fxml @@ -3,7 +3,7 @@ - + - - + + styleClass="info-bar--green"/> - diff --git a/src/main/resources/i18n/strings.properties b/src/main/resources/i18n/strings.properties index 2ec835d74..d34d900fd 100644 --- a/src/main/resources/i18n/strings.properties +++ b/src/main/resources/i18n/strings.properties @@ -426,9 +426,10 @@ main.vaultlist.addVaultBtn.menuItemRecover=Recover Existing Vault… main.vaultlist.addVaultButton.tooltip=Add Vault main.vaultlist.showEventsButton.tooltip=Open Event View main.vaultlist.showPreferencesButton.tooltip=Show Preferences -##Notificaition +##Notification main.notification.updateAvailable=Update is available. main.notification.support=Support Cryptomator. +main.notification.closeButton.tooltip=Close info bar ## 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: