From cfd3aa4ebdc5c72e1ecbeffa2c690359ed832191 Mon Sep 17 00:00:00 2001 From: yangkui <752544765@qq.com> Date: Wed, 11 Jan 2023 22:32:54 +0800 Subject: [PATCH] Beautify the program interface --- .../nes4j/app/control/SearchTextField.java | 26 ++++++++ .../nes4j/app/assets/css/GameHallStyle.css | 57 ++++++---------- .../navclub/nes4j/app/assets/css/common.css | 39 +++++++---- .../nes4j/app/assets/fxml/GameHall.fxml | 65 ++++++------------- .../app/assets/language/nes4j.properties | 1 + .../assets/language/nes4j_zh_CN.properties | 1 + 6 files changed, 97 insertions(+), 92 deletions(-) create mode 100644 app/src/main/java/cn/navclub/nes4j/app/control/SearchTextField.java diff --git a/app/src/main/java/cn/navclub/nes4j/app/control/SearchTextField.java b/app/src/main/java/cn/navclub/nes4j/app/control/SearchTextField.java new file mode 100644 index 0000000..048a6e0 --- /dev/null +++ b/app/src/main/java/cn/navclub/nes4j/app/control/SearchTextField.java @@ -0,0 +1,26 @@ +package cn.navclub.nes4j.app.control; + +import cn.navclub.nes4j.app.INes; +import javafx.scene.control.Label; +import javafx.scene.control.TextField; +import javafx.scene.layout.HBox; +import javafx.scene.layout.Priority; + +public class SearchTextField extends HBox { + private final Label prefix; + private final TextField textField; + + public SearchTextField() { + this.prefix = new Label(); + this.textField = new TextField(); + this.prefix.getStyleClass().add("prefix"); + this.textField.setFocusTraversable(false); + this.textField.setPromptText(INes.localeValue("nes4j.search", true)); + + HBox.setHgrow(this.textField, Priority.ALWAYS); + + this.getStyleClass().add("search-text-field"); + + this.getChildren().addAll(this.prefix, this.textField); + } +} diff --git a/app/src/main/resources/cn/navclub/nes4j/app/assets/css/GameHallStyle.css b/app/src/main/resources/cn/navclub/nes4j/app/assets/css/GameHallStyle.css index 017a283..dd5574a 100644 --- a/app/src/main/resources/cn/navclub/nes4j/app/assets/css/GameHallStyle.css +++ b/app/src/main/resources/cn/navclub/nes4j/app/assets/css/GameHallStyle.css @@ -5,51 +5,24 @@ -fx-text-fill: -nes4j-game-hall-text-fill; } -.assort .list-cell { - -fx-text-fill: -nes4j-game-hall-assort-fill; -} - -.assort .list-cell:selected { - -fx-text-fill: -nes4j-game-hall-text-fill; -} - .navbar { -fx-padding: .5em; + -fx-border-width: 0 0 .1em 0; + -fx-border-color: -nes4j-game-hall-navbar-border; -fx-background-color: -nes4j-game-hall-navbar; } -.navbar .logo-box { - -fx-spacing: .3em; - -fx-alignment: CENTER; -} - -.navbar VBox { - -fx-alignment: CENTER; +.navbar { + -fx-pref-height: 4em; } -.navbar .x-box { - -fx-alignment: CENTER-RIGHT; +.x-box { -fx-spacing: .6em; -} - -.navbar .x-box .button { - -fx-padding: 0; - -fx-focus-traversable: false; - -fx-background-color: transparent; -} - -.navbar .logo-box .app-name { - -fx-font-size: 1.8em; - -fx-text-fill: -nes4j-game-hall-app-name; -} - -.assort, .assort .list-cell { - -fx-background-color: -nes4j-game-hall-assort; - -fx-focus-traversable: false; -} - -.assort .list-cell:selected { - -fx-text-fill: -nes4j-game-hall-list-cell-active; + -fx-padding: .3em; + -fx-alignment: CENTER-LEFT; + -fx-border-width: 0 0 .1em 0; + -fx-background-color: -nes4j-game-hall-xbox; + -fx-border-color: -nes4j-game-hall-navbar-border; } .flow-pane { @@ -76,3 +49,13 @@ -fx-text-fill: -nes4j-game-tray-hover-text-color; } +.assort .list-cell { + -fx-background-color: -nes4j-game-hall-list-view; + -fx-focus-traversable: false; +} + +.assort .list-cell:selected { + -fx-text-fill: -nes4j-game-hall-list-cell-text; + -fx-background-color: -nes4j-game-hall-list-cell-active; +} + diff --git a/app/src/main/resources/cn/navclub/nes4j/app/assets/css/common.css b/app/src/main/resources/cn/navclub/nes4j/app/assets/css/common.css index 23b3cf2..2fa12b5 100644 --- a/app/src/main/resources/cn/navclub/nes4j/app/assets/css/common.css +++ b/app/src/main/resources/cn/navclub/nes4j/app/assets/css/common.css @@ -1,9 +1,12 @@ .root { -nes4j-background-color: #fff; /**Game hall navbar background color**/ - -nes4j-game-hall-navbar: #ff9833; - /**Game hall left assort background color**/ - -nes4j-game-hall-assort: #304156; + -nes4j-game-hall-navbar: #ffffff; + /**Game hall navbar bottom border color**/ + -nes4j-game-hall-navbar-border: #cdc7c7; + /**list view background color**/ + -nes4j-game-hall-list-view: #ededed; + -nes4j-game-hall-xbox: -nes4j-game-hall-list-view; /**Game hall left assort text fill**/ -nes4j-game-hall-assort-fill: #bfcbd9; /**Game hall center content background color**/ @@ -12,8 +15,10 @@ -nes4j-game-hall-app-name: #ffffff; /**Game hall text color**/ -nes4j-game-hall-text-fill: #000000; - /**Game hall list-cell select text color**/ - -nes4j-game-hall-list-cell-active: rgba(64, 158, 255, 1); + /**Game hall list-cell select background color**/ + -nes4j-game-hall-list-cell-active: linear-gradient(to right, #D6E0F0, #DDE4EF, #E6EAEF, #EAEBED); + /**Game hall list-cell select text fill*/ + -nes4j-game-hall-list-cell-text: #5185fd; /**Default list view select row background color**/ -nes4j-list-cell-select-color: rgba(10, 29, 47, 1); /**Game tray hover background color**/ @@ -33,15 +38,27 @@ ScrollPane, .list-view { -fx-padding: 0; } -.list-view .list-cell { - -fx-background-color: -nes4j-background-color; +.empty { + -fx-alignment: CENTER; } -.list-view .list-cell:selected { - -fx-background-color: -nes4j-list-cell-select-color; +.search-text-field { + -fx-alignment: CENTER; + -fx-spacing: .2em; + -fx-padding: .1em .2em; + -fx-background-color: #f4f4f4; + -fx-background-radius: .2em; } -.empty { - -fx-alignment: CENTER; +.search-text-field .prefix { + -fx-background-color: #939393; + -fx-pref-width: .8em; + -fx-pref-height: .5em; + -fx-shape: "M474.453333 884.053333c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z m0-68.266666c187.733333 0 341.333333-153.6 341.333334-341.333334s-153.6-341.333333-341.333334-341.333333-341.333333 153.6-341.333333 341.333333 153.6 341.333333 341.333333 341.333334z m252.586667 54.613333c-13.653333-13.653333-10.24-37.546667 3.413333-47.786667s37.546667-10.24 47.786667 3.413334l64.853333 78.506666c13.653333 13.653333 10.24 37.546667-3.413333 47.786667s-37.546667 10.24-47.786667-3.413333l-64.853333-78.506667z"; } +.search-text-field > .text-field { + -fx-background-color: transparent; + -fx-min-width: 15em; + -fx-font-size: 1.2em; +} \ No newline at end of file diff --git a/app/src/main/resources/cn/navclub/nes4j/app/assets/fxml/GameHall.fxml b/app/src/main/resources/cn/navclub/nes4j/app/assets/fxml/GameHall.fxml index 0f395fb..7fdfb07 100644 --- a/app/src/main/resources/cn/navclub/nes4j/app/assets/fxml/GameHall.fxml +++ b/app/src/main/resources/cn/navclub/nes4j/app/assets/fxml/GameHall.fxml @@ -3,61 +3,38 @@ - - - - + + - - - - - - - - - - - - - - + + + + + + + +
- - - - - - - + + + + + + + + + + +
diff --git a/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j.properties b/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j.properties index 2ee2665..e47e327 100644 --- a/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j.properties +++ b/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j.properties @@ -3,6 +3,7 @@ nes4j.run=Run nes4j.file=File nes4j.view=View nes4j.tool=Tool +nes4j.search=search nes4j.debug=Debug nes4j.reset=Reset nes4j.handle=Handle diff --git a/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j_zh_CN.properties b/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j_zh_CN.properties index d679814..1f54eda 100644 --- a/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j_zh_CN.properties +++ b/app/src/main/resources/cn/navclub/nes4j/app/assets/language/nes4j_zh_CN.properties @@ -5,6 +5,7 @@ nes4j.reset=重置 nes4j.tool=工具 nes4j.run=运行 nes4j.debug=调试 +nes4j.search=搜索 nes4j.handle=手柄 nes4j.palette=画布 nes4j.options=选项