Beautify the program interface

GZYangKui · Jan 11, 2023 · cfd3aa4 · cfd3aa4
1 parent 44168c2
commit cfd3aa4
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 92 deletions.
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
@@ -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
@@ -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
@@ -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;
+}
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
@@ -3,61 +3,38 @@
 <?import javafx.scene.layout.*?>
 
 <?import javafx.scene.control.ListView?>
-<?import javafx.scene.image.ImageView?>
-<?import javafx.scene.image.Image?>
-<?import javafx.scene.control.Label?>
-<?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ScrollPane?>
 <?import cn.navclub.nes4j.app.control.Empty?>
 <?import cn.navclub.nes4j.app.event.NodeDragEvent?>
+<?import cn.navclub.nes4j.app.control.SearchTextField?>
+<?import javafx.scene.shape.Circle?>
 <BorderPane xmlns="http://javafx.com/javafx"
             xmlns:fx="http://javafx.com/fxml" stylesheets="@../css/GameHallStyle.css">
     <fx:define>
         <FlowPane styleClass="flow-pane" fx:id="flowPane"/>
     </fx:define>
-    <top>
-        <HBox fx:id="navbar" styleClass="navbar" NodeDragEvent.bind="">
-            <HBox styleClass="logo-box">
-                <Label text="INES" styleClass="app-name"/>
-            </HBox>
-            <VBox HBox.hgrow="ALWAYS">
-                <HBox styleClass="x-box">
-                    <Button onAction="#iconified">
-                        <graphic>
-                            <ImageView>
-                                <Image url="@../img/mwin.png"/>
-                            </ImageView>
-                        </graphic>
-                    </Button>
-                    <Button>
-                        <graphic>
-                            <ImageView>
-                                <Image url="@../img/max.png"/>
-                            </ImageView>
-                        </graphic>
-                    </Button>
-                    <Button onAction="#exit">
-                        <graphic>
-                            <ImageView>
-                                <Image url="@../img/xwin.png"/>
-                            </ImageView>
-                        </graphic>
-                    </Button>
-                </HBox>
-            </VBox>
-        </HBox>
-    </top>
     <left>
-        <ListView styleClass="assort" fx:id="listView"/>
+        <VBox>
+            <HBox styleClass="x-box" NodeDragEvent.bind="" prefHeight="${navbar.height}">
+                <Circle radius="8" fill="#c18b16" onMouseClicked="#iconified"/>
+                <Circle radius="8" fill="#59c837"/>
+                <Circle radius="8" fill="red" onMouseClicked="#exit"/>
+            </HBox>
+            <ListView styleClass="assort" fx:id="listView" VBox.vgrow="ALWAYS"/>
+        </VBox>
     </left>
     <center>
-        <StackPane>
-            <ScrollPane fitToHeight="true" fitToWidth="true">
-                <fx:reference source="flowPane"/>
-            </ScrollPane>
-            <Empty attach="$flowPane" text="暂无数据" fx:id="empty"/>
-        </StackPane>
-
+        <VBox styleClass="content">
+            <HBox fx:id="navbar" styleClass="navbar" NodeDragEvent.bind="">
+                <SearchTextField/>
+            </HBox>
+            <StackPane VBox.vgrow="ALWAYS">
+                <ScrollPane fitToHeight="true" fitToWidth="true">
+                    <fx:reference source="flowPane"/>
+                </ScrollPane>
+                <Empty attach="$flowPane" text="暂无数据" fx:id="empty"/>
+            </StackPane>
+        </VBox>
     </center>
 
 </BorderPane>
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
@@ -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
@@ -5,6 +5,7 @@ nes4j.reset=重置
 nes4j.tool=工具
 nes4j.run=运行
 nes4j.debug=调试
+nes4j.search=搜索
 nes4j.handle=手柄
 nes4j.palette=画布
 nes4j.options=选项