mirrors/cryptomator
1
0
Fork 0
mirror of https://github.com/cryptomator/cryptomator.git synced 2026-05-14 08:41:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor notificationbar

Browse Source 
* rename to InfoBar
* replace closeButton text with graphic and add accessibilityText
* use common base class for styling and use CSS lookup for variants
This commit is contained in:
Armin Schrenk
2026-01-12 23:31:37 +01:00
parent a06accb80f
commit 33f26bf804
5 changed files with 122 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/main/java/org/cryptomator/ui/controls/NotificationBar.java → src/main/java/org/cryptomator/ui/controls/InfoBar.java
View File

@@ -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) {

64
src/main/resources/css/dark_theme.css
View File

@@ -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;
}
/*******************************************************************************

66
src/main/resources/css/light_theme.css
View File

@@ -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 *

14
src/main/resources/fxml/main_window.fxml
View File

@@ -3,7 +3,7 @@
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import org.cryptomator.ui.controls.NotificationBar?>
<?import org.cryptomator.ui.controls.InfoBar?>
<StackPane xmlns:fx="http://javafx.com/fxml"
xmlns="http://javafx.com/javafx"
@@ -11,23 +11,23 @@
fx:controller="org.cryptomator.ui.mainwindow.MainWindowController"
styleClass="main-window">
<VBox minWidth="600">
<NotificationBar onMouseClicked="#showUpdatePreferences"
<InfoBar onMouseClicked="#showUpdatePreferences"
text="%main.notification.updateAvailable"
dismissable="true"
notify="${controller.updateAvailable}"
styleClass="notification-update"/>
<NotificationBar onMouseClicked="#showContributePreferences"
styleClass="info-bar--yellow"/>
<InfoBar onMouseClicked="#showContributePreferences"
text="%main.notification.support"
dismissable="true"
notify="${!controller.licenseValid}"
styleClass="notification-support"/>
styleClass="info-bar--green"/>
<SplitPane dividerPositions="0.33" orientation="HORIZONTAL" VBox.vgrow="ALWAYS">
<fx:include source="vault_list.fxml" SplitPane.resizableWithParent="false"/>
<fx:include source="vault_detail.fxml" SplitPane.resizableWithParent="true"/>
</SplitPane>
<NotificationBar onMouseClicked="#showGeneralPreferences"
<InfoBar onMouseClicked="#showGeneralPreferences"
text="DEBUG MODE"
styleClass="notification-debug"
styleClass="info-bar--red"
notify="${controller.debugModeEnabled}"/>
</VBox>
</StackPane>

3
src/main/resources/i18n/strings.properties
View File

@@ -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: