Use CSS for Retina ready images

This commit is contained in:
Manfred Karrer 2014-09-16 02:09:32 +02:00
parent 908874fd92
commit 97facb6bbf
8 changed files with 110 additions and 102 deletions

View File

@ -119,7 +119,8 @@ public class BitSquare extends Application {
final Parent view = loader.load();
final Scene scene = new Scene(view, 1000, 750);
scene.getStylesheets().setAll(getClass().getResource("/io/bitsquare/gui/bitsquare.css").toExternalForm());
scene.getStylesheets().setAll(getClass().getResource("/io/bitsquare/gui/bitsquare.css").toExternalForm(),
getClass().getResource("/io/bitsquare/gui/images.css").toExternalForm());
setupCloseHandlers(primaryStage, scene);

View File

@ -17,7 +17,6 @@
package io.bitsquare.gui;
import io.bitsquare.gui.util.ImageUtil;
import io.bitsquare.persistence.Persistence;
import com.google.inject.Inject;
@ -159,14 +158,14 @@ public class Navigation {
// Main menu screens
///////////////////////////////////////////////////////////////////////////////////////////
HOME("/io/bitsquare/gui/main/home/HomeView.fxml", ImageUtil.HOME, ImageUtil.HOME_ACTIVE),
BUY("/io/bitsquare/gui/main/trade/BuyView.fxml", ImageUtil.BUY, ImageUtil.BUY_ACTIVE),
SELL("/io/bitsquare/gui/main/trade/SellView.fxml", ImageUtil.SELL, ImageUtil.SELL_ACTIVE),
ORDERS("/io/bitsquare/gui/main/orders/OrdersView.fxml", ImageUtil.ORDERS, ImageUtil.ORDERS_ACTIVE),
FUNDS("/io/bitsquare/gui/main/funds/FundsView.fxml", ImageUtil.FUNDS, ImageUtil.FUNDS_ACTIVE),
MSG("/io/bitsquare/gui/main/msg/MsgView.fxml", ImageUtil.MSG, ImageUtil.MSG_ACTIVE),
SETTINGS("/io/bitsquare/gui/main/settings/SettingsView.fxml", ImageUtil.SETTINGS, ImageUtil.SETTINGS_ACTIVE),
ACCOUNT("/io/bitsquare/gui/main/account/AccountView.fxml", ImageUtil.ACCOUNT, ImageUtil.ACCOUNT_ACTIVE),
HOME("/io/bitsquare/gui/main/home/HomeView.fxml"),
BUY("/io/bitsquare/gui/main/trade/BuyView.fxml"),
SELL("/io/bitsquare/gui/main/trade/SellView.fxml"),
ORDERS("/io/bitsquare/gui/main/orders/OrdersView.fxml"),
FUNDS("/io/bitsquare/gui/main/funds/FundsView.fxml"),
MSG("/io/bitsquare/gui/main/msg/MsgView.fxml"),
SETTINGS("/io/bitsquare/gui/main/settings/SettingsView.fxml"),
ACCOUNT("/io/bitsquare/gui/main/account/AccountView.fxml"),
///////////////////////////////////////////////////////////////////////////////////////////
@ -217,19 +216,6 @@ public class Navigation {
private final String fxmlUrl;
private String icon;
private String activeIcon;
/**
* @param fxmlUrl
* @param icon
* @param activeIcon
*/
Item(String fxmlUrl, String icon, String activeIcon) {
this.fxmlUrl = fxmlUrl;
this.icon = icon;
this.activeIcon = activeIcon;
}
Item(String fxmlUrl) {
this.fxmlUrl = fxmlUrl;
@ -238,13 +224,5 @@ public class Navigation {
public String getFxmlUrl() {
return fxmlUrl;
}
public String getIcon() {
return icon;
}
public String getActiveIcon() {
return activeIcon;
}
}
}

View File

@ -19,10 +19,7 @@ lower gradient color on tab: dddddd
-bs-dark-grey: #333333;
-bs-bg-grey: #dddddd;
}
#splash-logo {
-fx-image: url("../../../images/logo_splash.png");
}
/* Splash */
#splash {

View File

@ -17,7 +17,6 @@
package io.bitsquare.gui.components;
import io.bitsquare.gui.util.ImageUtil;
import io.bitsquare.locale.BSResources;
import javafx.application.Platform;
@ -72,7 +71,8 @@ public class InfoDisplay extends Parent {
public InfoDisplay() {
icon = ImageUtil.getImageView(ImageUtil.INFO);
icon = new ImageView();
icon.setId("image-info");
icon.setPickOnBounds(true);
icon.setPreserveRatio(true);
icon.visibleProperty().bind(visibleProperty());

View File

@ -0,0 +1,82 @@
/* splash screen */
#image-splash-logo {
-fx-image: url("../../../images/logo_splash.png");
}
/* shared*/
#image-info {
-fx-image: url("../../../images/info.png");
}
/* naviagtion buttons */
#image-nav-home {
-fx-image: url("../../../images/nav/home.png");
}
#image-nav-home-active {
-fx-image: url("../../../images/nav/home_active.png");
}
#image-nav-buy {
-fx-image: url("../../../images/nav/buy.png");
}
#image-nav-buy-active {
-fx-image: url("../../../images/nav/buy_active.png");
}
#image-nav-sell {
-fx-image: url("../../../images/nav/sell.png");
}
#image-nav-sell-active {
-fx-image: url("../../../images/nav/sell_active.png");
}
#image-nav-orders {
-fx-image: url("../../../images/nav/orders.png");
}
#image-nav-orders-active {
-fx-image: url("../../../images/nav/orders_active.png");
}
#image-nav-funds {
-fx-image: url("../../../images/nav/funds.png");
}
#image-nav-funds-active {
-fx-image: url("../../../images/nav/funds_active.png");
}
#image-nav-msg {
-fx-image: url("../../../images/nav/msg.png");
}
#image-nav-msg-active {
-fx-image: url("../../../images/nav/msg_active.png");
}
#image-nav-settings {
-fx-image: url("../../../images/nav/settings.png");
}
#image-nav-settings-active {
-fx-image: url("../../../images/nav/settings_active.png");
}
#image-nav-account {
-fx-image: url("../../../images/nav/account.png");
}
#image-nav-account-active {
-fx-image: url("../../../images/nav/account_active.png");
}
/* account*/
#image-tick {
-fx-image: url("../../../images/tick.png");
}
#image-arrow-blue {
-fx-image: url("../../../images/arrow_blue.png");
}
#image-arrow-grey {
-fx-image: url("../../../images/arrow_grey.png");
}

View File

@ -164,10 +164,7 @@ public class MainViewCB extends ViewCB<MainPM> {
private void onBaseContainersCreated() {
Profiler.printMsgWithTime("MainController.onBaseContainersCreated");
MenuBar menuBar = getMenuBar();
AnchorPane applicationContainer = getApplicationContainer();
baseApplicationContainer.setTop(menuBar);
baseApplicationContainer.setCenter(applicationContainer);
presentationModel.backendInited.addListener((ov, oldValue, newValue) -> {
@ -258,9 +255,8 @@ public class MainViewCB extends ViewCB<MainPM> {
vBox.setSpacing(10);
vBox.setId("splash");
//ImageView logo = ImageUtil.getIconImageView(ImageUtil.SPLASH_LOGO);
ImageView logo = new ImageView();
logo.setId("splash-logo");
logo.setId("image-splash-logo");
Label subTitle = new Label("The decentralized Bitcoin exchange");
subTitle.setAlignment(Pos.CENTER);
@ -275,30 +271,6 @@ public class MainViewCB extends ViewCB<MainPM> {
return vBox;
}
private MenuBar getMenuBar() {
MenuBar menuBar = new MenuBar();
menuBar.setUseSystemMenuBar(false);
Menu fileMenu = new Menu("_File");
fileMenu.setMnemonicParsing(true);
MenuItem backupMenuItem = new MenuItem("Backup wallet");
fileMenu.getItems().addAll(backupMenuItem);
Menu settingsMenu = new Menu("_Settings");
settingsMenu.setMnemonicParsing(true);
MenuItem changePwMenuItem = new MenuItem("Change password");
settingsMenu.getItems().addAll(changePwMenuItem);
Menu helpMenu = new Menu("_Help");
helpMenu.setMnemonicParsing(true);
MenuItem faqMenuItem = new MenuItem("FAQ");
MenuItem forumMenuItem = new MenuItem("Forum");
helpMenu.getItems().addAll(faqMenuItem, forumMenuItem);
menuBar.getMenus().setAll(fileMenu, settingsMenu, helpMenu);
return menuBar;
}
private AnchorPane getApplicationContainer() {
AnchorPane anchorPane = new AnchorPane();
anchorPane.setId("content-pane");
@ -361,11 +333,15 @@ public class MainViewCB extends ViewCB<MainPM> {
}
private ToggleButton addNavButton(Pane parent, String title, Navigation.Item navigationItem) {
ImageView icon = ImageUtil.getImageView(navigationItem.getIcon());
icon.setFitWidth(32);
icon.setFitHeight(32);
final String url = navigationItem.getFxmlUrl();
int lastSlash = url.lastIndexOf("/") + 1;
int end = url.lastIndexOf("View.fxml");
final String id = url.substring(lastSlash, end).toLowerCase();
final ToggleButton toggleButton = new ToggleButton(title, icon);
ImageView iconImageView = new ImageView();
iconImageView.setId("image-nav-" + id);
final ToggleButton toggleButton = new ToggleButton(title, iconImageView);
toggleButton.setToggleGroup(navButtonsGroup);
toggleButton.setId("nav-button");
toggleButton.setPadding(new Insets(0, -10, -10, -10));
@ -380,12 +356,10 @@ public class MainViewCB extends ViewCB<MainPM> {
toggleButton.setMaxSize(50, 50);
toggleButton.setGraphicTextGap(newValue ? -1 : 0);
if (newValue) {
Image activeIcon = ImageUtil.getImage(navigationItem.getActiveIcon());
((ImageView) toggleButton.getGraphic()).setImage(activeIcon);
toggleButton.getGraphic().setId("image-nav-" + id + "-active");
}
else {
Image activeIcon = ImageUtil.getImage(navigationItem.getIcon());
((ImageView) toggleButton.getGraphic()).setImage(activeIcon);
toggleButton.getGraphic().setId("image-nav-" + id);
}
});

View File

@ -28,7 +28,6 @@ import io.bitsquare.gui.main.account.content.password.PasswordViewCB;
import io.bitsquare.gui.main.account.content.registration.RegistrationViewCB;
import io.bitsquare.gui.main.account.content.restrictions.RestrictionsViewCB;
import io.bitsquare.gui.main.account.content.seedwords.SeedWordsViewCB;
import io.bitsquare.gui.util.ImageUtil;
import io.bitsquare.util.ViewLoader;
import java.io.IOException;
@ -202,7 +201,8 @@ class WizardItem extends HBox {
setSpacing(5);
setPrefWidth(200);
imageView = ImageUtil.getImageView(ImageUtil.ARROW_GREY);
imageView = new ImageView();
imageView.setId("image-arrow-grey");
imageView.setFitHeight(15);
imageView.setFitWidth(20);
imageView.setPickOnBounds(true);
@ -237,7 +237,7 @@ class WizardItem extends HBox {
navigationItem);
setId("wizard-item-background-active");
imageView.setImage(ImageUtil.getImage(ImageUtil.ARROW_BLUE));
imageView.setId("image-arrow-blue");
titleLabel.setId("wizard-title-active");
subTitleLabel.setId("wizard-sub-title-active");
return childController;
@ -245,7 +245,7 @@ class WizardItem extends HBox {
void onCompleted() {
setId("wizard-item-background-completed");
imageView.setImage(ImageUtil.getImage(ImageUtil.TICK));
imageView.setId("image-tick");
titleLabel.setId("wizard-title-completed");
subTitleLabel.setId("wizard-sub-title-completed");
}

View File

@ -28,28 +28,9 @@ import org.slf4j.LoggerFactory;
public class ImageUtil {
private static final Logger log = LoggerFactory.getLogger(ImageUtil.class);
public static final String SPLASH_LOGO = "/images/logo_splash.png";
public static final String SYS_TRAY = "/images/system_tray_icon_44_32.png";
public static final String SYS_TRAY_ALERT = "/images/system_tray_notify_icon_44_32.png";
public static final String HOME = "/images/nav/home.png";
public static final String HOME_ACTIVE = "/images/nav/home_active.png";
public static final String BUY = "/images/nav/buy.png";
public static final String BUY_ACTIVE = "/images/nav/buy_active.png";
public static final String SELL = "/images/nav/sell.png";
public static final String SELL_ACTIVE = "/images/nav/sell_active.png";
public static final String ORDERS = "/images/nav/orders.png";
public static final String ORDERS_ACTIVE = "/images/nav/orders_active.png";
public static final String FUNDS = "/images/nav/funds.png";
public static final String FUNDS_ACTIVE = "/images/nav/funds_active.png";
public static final String MSG = "/images/nav/msg.png";
public static final String MSG_ACTIVE = "/images/nav/msg_active.png";
public static final String SETTINGS = "/images/nav/settings.png";
public static final String SETTINGS_ACTIVE = "/images/nav/settings_active.png";
public static final String ACCOUNT = "/images/nav/account.png";
public static final String ACCOUNT_ACTIVE = "/images/nav/account_active.png";
public static final String MSG_ALERT = "/images/nav/alertRound.png";
public static final String BUY_ICON = "/images/buy.png";
@ -59,11 +40,6 @@ public class ImageUtil {
public static final String EXPAND = "/images/expand.png";
public static final String COLLAPSE = "/images/collapse.png";
public static final String TICK = "/images/tick.png";
public static final String ARROW_BLUE = "/images/arrow_blue.png";
public static final String ARROW_GREY = "/images/arrow_grey.png";
public static final String INFO = "/images/info.png";
public static Image getImage(String url) {
return new Image(ImageUtil.class.getResourceAsStream(url));
}