diff --git a/desktop/src/main/java/haveno/desktop/haveno.css b/desktop/src/main/java/haveno/desktop/haveno.css index 7196ee875d..f081e70706 100644 --- a/desktop/src/main/java/haveno/desktop/haveno.css +++ b/desktop/src/main/java/haveno/desktop/haveno.css @@ -729,17 +729,22 @@ tree-table-view:focused { -fx-border-insets: 0 0 0 1; } +.nav-logo { + -fx-max-width: 180; + -fx-min-width: 180; +} + .nav-primary { -fx-background-color: -bs-rd-nav-primary-background; -fx-border-width: 0 0 0 0; -fx-border-color: -bs-rd-nav-primary-border; -fx-background-radius: 999; -fx-border-radius: 999; - -fx-padding: 9 9 9 11; + -fx-padding: 9 0 9 11; } .nav-secondary { - -fx-padding: 9 0 9 9; + -fx-padding: 9 9 9 9; } .nav-separator { @@ -776,7 +781,8 @@ tree-table-view:focused { -fx-pref-height: 0px; } -.jfx-badge > .nav-button { +.jfx-badge > .nav-button, +.jfx-badge > .secondary-nav-button { -fx-translate-y: 1; } @@ -789,8 +795,8 @@ tree-table-view:focused { } .nav-button .text { - -fx-font-size: 0.769em; - -fx-font-weight: bold; + -fx-font-size: 0.93em; + -fx-font-weight: medium; -fx-fill: -bs-rd-nav-deselected; } @@ -815,6 +821,36 @@ tree-table-view:focused { -fx-fill: -bs-rd-nav-selected; } +.secondary-nav-button { + -fx-cursor: hand; + -fx-background-color: transparent; + -fx-padding: 9 15; + -fx-border-color: transparent; + -fx-border-width: 0 0 1px 0; +} + +.secondary-nav-button .text { + -fx-font-size: 0.93em; + -fx-font-weight: medium; + -fx-fill: -bs-rd-nav-secondary-deselected; +} + +.secondary-nav-button-japanese .text { + -fx-font-size: 1em; +} + +.secondary-nav-button:selected { + -fx-border-color: transparent transparent -bs-rd-nav-secondary-selected transparent; + -fx-border-width: 0 0 1px 0; +} + +.secondary-nav-button:hover { +} + +.secondary-nav-button:selected .text { + -fx-fill: -bs-rd-nav-secondary-selected; +} + .nav-balance-display { -fx-alignment: center-left; -fx-text-fill: -bs-rd-font-balance; diff --git a/desktop/src/main/java/haveno/desktop/images.css b/desktop/src/main/java/haveno/desktop/images.css index de5a1d3c48..a72261d211 100644 --- a/desktop/src/main/java/haveno/desktop/images.css +++ b/desktop/src/main/java/haveno/desktop/images.css @@ -301,6 +301,18 @@ -fx-image: url("../../images/new_trade_protocol_screenshot.png"); } +#image-support { + -fx-image: url("../../images/support.png"); +} + +#image-account { + -fx-image: url("../../images/account.png"); +} + +#image-settings { + -fx-image: url("../../images/settings.png"); +} + /** * Crypto logos. */ diff --git a/desktop/src/main/java/haveno/desktop/main/MainView.java b/desktop/src/main/java/haveno/desktop/main/MainView.java index 0107185378..eb05ed2943 100644 --- a/desktop/src/main/java/haveno/desktop/main/MainView.java +++ b/desktop/src/main/java/haveno/desktop/main/MainView.java @@ -92,6 +92,7 @@ import static javafx.scene.layout.AnchorPane.setRightAnchor; import static javafx.scene.layout.AnchorPane.setTopAnchor; import javafx.scene.layout.BorderPane; import javafx.scene.layout.HBox; +import javafx.scene.layout.Pane; import javafx.scene.layout.Priority; import javafx.scene.layout.Region; import javafx.scene.layout.StackPane; @@ -165,15 +166,15 @@ public class MainView extends InitializableView { if (LanguageUtil.isDefaultLanguageRTL()) MainView.rootContainer.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT); - ToggleButton marketButton = new NavButton(MarketView.class, Res.get("mainView.menu.market").toUpperCase()); - ToggleButton buyButton = new NavButton(BuyOfferView.class, Res.get("mainView.menu.buyXmr").toUpperCase()); - ToggleButton sellButton = new NavButton(SellOfferView.class, Res.get("mainView.menu.sellXmr").toUpperCase()); - ToggleButton portfolioButton = new NavButton(PortfolioView.class, Res.get("mainView.menu.portfolio").toUpperCase()); - ToggleButton fundsButton = new NavButton(FundsView.class, Res.get("mainView.menu.funds").toUpperCase()); + ToggleButton marketButton = new NavButton(MarketView.class, Res.get("mainView.menu.market")); + ToggleButton buyButton = new NavButton(BuyOfferView.class, Res.get("mainView.menu.buyXmr")); + ToggleButton sellButton = new NavButton(SellOfferView.class, Res.get("mainView.menu.sellXmr")); + ToggleButton portfolioButton = new NavButton(PortfolioView.class, Res.get("mainView.menu.portfolio")); + ToggleButton fundsButton = new NavButton(FundsView.class, Res.get("mainView.menu.funds")); - ToggleButton supportButton = new NavButton(SupportView.class, Res.get("mainView.menu.support")); - ToggleButton accountButton = new NavButton(AccountView.class, Res.get("mainView.menu.account")); - ToggleButton settingsButton = new NavButton(SettingsView.class, Res.get("mainView.menu.settings")); + ToggleButton supportButton = new SecondaryNavButton(SupportView.class, Res.get("mainView.menu.support"), "image-support"); + ToggleButton accountButton = new SecondaryNavButton(AccountView.class, Res.get("mainView.menu.account"), "image-account"); + ToggleButton settingsButton = new SecondaryNavButton(SettingsView.class, Res.get("mainView.menu.settings"), "image-settings"); JFXBadge portfolioButtonWithBadge = new JFXBadge(portfolioButton); JFXBadge supportButtonWithBadge = new JFXBadge(supportButton); @@ -298,20 +299,13 @@ public class MainView extends InitializableView { } }); - HBox primaryNav = new HBox(marketButton, getNavigationSpacer(), buyButton, getNavigationSpacer(), + HBox primaryNav = new HBox(getLogoPane(), marketButton, getNavigationSpacer(), buyButton, getNavigationSpacer(), sellButton, getNavigationSpacer(), portfolioButtonWithBadge, getNavigationSpacer(), fundsButton); primaryNav.setAlignment(Pos.CENTER_LEFT); primaryNav.getStyleClass().add("nav-primary"); HBox.setHgrow(primaryNav, Priority.SOMETIMES); - HBox secondaryNav = new HBox(supportButtonWithBadge, getNavigationSpacer(), accountButton, - getNavigationSpacer(), settingsButtonWithBadge, getNavigationSpacer()); - secondaryNav.getStyleClass().add("nav-secondary"); - HBox.setHgrow(secondaryNav, Priority.ALWAYS); - - secondaryNav.setAlignment(Pos.CENTER_LEFT); - HBox priceAndBalance = new HBox(marketPriceBox.second, getNavigationSeparator(), availableBalanceBox.second, getNavigationSeparator(), pendingBalanceBox.second, getNavigationSeparator(), reservedBalanceBox.second); @@ -319,8 +313,7 @@ public class MainView extends InitializableView { priceAndBalance.setSpacing(12); priceAndBalance.getStyleClass().add("nav-price-balance"); - HBox navPane = new HBox(primaryNav, getNavigationSeparator(), secondaryNav, getNavigationSpacer(), - priceAndBalance) {{ + HBox navPane = new HBox(primaryNav, getNavigationSpacer(), priceAndBalance) {{ setLeftAnchor(this, 25d); setRightAnchor(this, 25d); setTopAnchor(this, 20d); @@ -329,15 +322,46 @@ public class MainView extends InitializableView { }}; navPane.setAlignment(Pos.CENTER); + HBox secondaryNav = new HBox(supportButtonWithBadge, getNavigationSpacer(), accountButton, + getNavigationSpacer(), settingsButtonWithBadge, getNavigationSpacer()); + secondaryNav.getStyleClass().add("nav-secondary"); + secondaryNav.setAlignment(Pos.CENTER_RIGHT); // TODO: check for LTR language + secondaryNav.setMouseTransparent(false); + secondaryNav.setPickOnBounds(false); + HBox.setHgrow(secondaryNav, Priority.ALWAYS); + AnchorPane.setLeftAnchor(secondaryNav, 0.0); + AnchorPane.setRightAnchor(secondaryNav, 0.0); + AnchorPane.setTopAnchor(secondaryNav, 0.0); + + AnchorPane secondaryNavContainer = new AnchorPane() {{ + setId("nav-secondary-container"); + setLeftAnchor(this, 0d); + setRightAnchor(this, 0d); + setTopAnchor(this, 95d); + }}; + secondaryNavContainer.setPickOnBounds(false); + secondaryNavContainer.setMouseTransparent(false); + secondaryNavContainer.getChildren().add(secondaryNav); + + // if (rootContainer.getNodeOrientation() == NodeOrientation.LEFT_TO_RIGHT) { + // log.warn("CENTERING RIGHT"); + // rightButtons.setAlignment(Pos.CENTER_RIGHT); + // StackPane.setMargin(rightButtons, new Insets(5, 10, 0, 0)); + // } else { + // rightButtons.setAlignment(Pos.CENTER_LEFT); + // log.warn("CENTERING LEFT"); + // StackPane.setMargin(rightButtons, new Insets(5, 0, 0, 10)); + // } + AnchorPane contentContainer = new AnchorPane() {{ getStyleClass().add("content-pane"); setLeftAnchor(this, 0d); setRightAnchor(this, 0d); - setTopAnchor(this, 90d); + setTopAnchor(this, 95d); setBottomAnchor(this, 0d); }}; - AnchorPane applicationContainer = new AnchorPane(navPane, contentContainer) {{ + AnchorPane applicationContainer = new AnchorPane(navPane, contentContainer, secondaryNavContainer) {{ setId("application-container"); }}; @@ -402,6 +426,22 @@ public class MainView extends InitializableView { return separator; } + @NotNull + private Pane getLogoPane() { + ImageView logo = new ImageView(); + logo.setId("image-logo-landscape"); + logo.setPreserveRatio(true); + logo.setFitHeight(40); + logo.setSmooth(true); + logo.setCache(true); + + final Pane pane = new Pane(); + HBox.setHgrow(pane, Priority.ALWAYS); + pane.getStyleClass().add("nav-logo"); + pane.getChildren().add(logo); + return pane; + } + @NotNull private Region getNavigationSpacer() { final Region spacer = new Region(); @@ -839,4 +879,30 @@ public class MainView extends InitializableView { } } + + private class SecondaryNavButton extends NavButton { + + SecondaryNavButton(Class viewClass, String title, String iconId) { + super(viewClass, title); + this.getStyleClass().setAll("secondary-nav-button"); + + // Japanese fonts are dense, increase top nav button text size + if (model.getPreferences() != null && "ja".equals(model.getPreferences().getUserLanguage())) { + this.getStyleClass().setAll("secondary-nav-button-japanese"); + } + + // add icon + ImageView imageView = new ImageView(); + imageView.setId(iconId); + imageView.setFitWidth(15); + imageView.setPreserveRatio(true); + setGraphicTextGap(10); + setGraphic(imageView); + + // show cursor hand on hover + this.setMouseTransparent(false); + this.setPickOnBounds(false); + } + + } } diff --git a/desktop/src/main/java/haveno/desktop/theme-dark.css b/desktop/src/main/java/haveno/desktop/theme-dark.css index 5f396a166f..3fc2194524 100644 --- a/desktop/src/main/java/haveno/desktop/theme-dark.css +++ b/desktop/src/main/java/haveno/desktop/theme-dark.css @@ -20,7 +20,7 @@ /* haveno main colors */ -bs-color-primary: #0b65da; -bs-color-primary-dark: #0c59bd; - -bs-text-color: #dadada; + -bs-text-color: white; -bs-background-color: #29292a; -bs-background-gray: black; -bs-content-background-gray: black; @@ -73,7 +73,9 @@ -bs-rd-nav-background: rgb(15, 15, 15); -bs-rd-nav-primary-background: rgb(15, 15, 15); -bs-rd-nav-selected: black; - -bs-rd-nav-deselected: rgba(255, 255, 255, .65); + -bs-rd-nav-deselected: rgba(255, 255, 255, 1); + -bs-rd-nav-secondary-selected: rgba(255, 255, 255, 1); + -bs-rd-nav-secondary-deselected: -bs-rd-font-light; -bs-rd-nav-button-hover: derive(-bs-rd-nav-background, 10%); -bs-rd-nav-primary-button-hover: derive(-bs-rd-nav-primary-background, 10%); -bs-rd-nav-hover-text: black; @@ -557,3 +559,7 @@ .toggle-button-no-slider:selected { -fx-background-color: -bs-color-gray-bbb; } + +#image-logo-landscape { + -fx-image: url("../../images/logo_landscape_dark.png"); +} \ No newline at end of file diff --git a/desktop/src/main/java/haveno/desktop/theme-light.css b/desktop/src/main/java/haveno/desktop/theme-light.css index 74431f6aba..f0ab2003f5 100644 --- a/desktop/src/main/java/haveno/desktop/theme-light.css +++ b/desktop/src/main/java/haveno/desktop/theme-light.css @@ -41,7 +41,9 @@ -bs-rd-green: #0b65da; -bs-rd-green-dark: #3EA34A; -bs-rd-nav-selected: #0b65da; - -bs-rd-nav-deselected: rgba(255, 255, 255, 0.75); + -bs-rd-nav-deselected: rgba(255, 255, 255, 1); + -bs-rd-nav-secondary-selected: -fx-accent; + -bs-rd-nav-secondary-deselected: -bs-rd-font-light; -bs-rd-nav-background: #0b65da; -bs-rd-nav-primary-background: #0b65da; -bs-rd-nav-button-hover: derive(-bs-rd-nav-background, 10%); @@ -133,3 +135,7 @@ -fx-focus-color: transparent; -fx-faint-focus-color: transparent; } + +#image-logo-landscape { + -fx-image: url("../../images/logo_landscape_light.png"); +} \ No newline at end of file diff --git a/desktop/src/main/resources/images/account.png b/desktop/src/main/resources/images/account.png new file mode 100644 index 0000000000..53b4058465 Binary files /dev/null and b/desktop/src/main/resources/images/account.png differ diff --git a/desktop/src/main/resources/images/lock_circle.png b/desktop/src/main/resources/images/lock_circle.png new file mode 100644 index 0000000000..f176e08203 Binary files /dev/null and b/desktop/src/main/resources/images/lock_circle.png differ diff --git a/desktop/src/main/resources/images/logo_landscape_dark.png b/desktop/src/main/resources/images/logo_landscape_dark.png new file mode 100644 index 0000000000..ce3ffd6747 Binary files /dev/null and b/desktop/src/main/resources/images/logo_landscape_dark.png differ diff --git a/desktop/src/main/resources/images/logo_landscape_light.png b/desktop/src/main/resources/images/logo_landscape_light.png new file mode 100644 index 0000000000..ce3ffd6747 Binary files /dev/null and b/desktop/src/main/resources/images/logo_landscape_light.png differ diff --git a/desktop/src/main/resources/images/settings.png b/desktop/src/main/resources/images/settings.png new file mode 100644 index 0000000000..8a534387f0 Binary files /dev/null and b/desktop/src/main/resources/images/settings.png differ diff --git a/desktop/src/main/resources/images/support.png b/desktop/src/main/resources/images/support.png new file mode 100644 index 0000000000..b40bdd28e1 Binary files /dev/null and b/desktop/src/main/resources/images/support.png differ