JMetro: Add Choice Box dark style

JFXtras · Jul 24, 2018 · 5911e92 · 5911e92
1 parent cdbc0ab
commit 5911e92
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 49 deletions.
diff --git a/jmetro/src/main/resources/jfxtras/styles/jmetro8/JMetroDarkTheme.css b/jmetro/src/main/resources/jfxtras/styles/jmetro8/JMetroDarkTheme.css
@@ -1168,44 +1168,45 @@
 
 /*******************************************************************************
  *                                                                             *
- * ChoiceBox                                                                   *
+ * Choice Box                                                                  *
  *                                                                             *
  ******************************************************************************/
 
 .choice-box  {
-    -fx-background-color: transparent, transparent, transparent, #d2d2d2;
+    -fx-background-color: transparent, #333333, transparent, #333333;
     -fx-background-radius: 0, 0, 0, 0;
     -fx-background-insets: -1.4, 0, 1, 2;
+
     -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
 
-    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-    -fx-font-size: 1.333333em; /* 16 */
+    -fx-font-family: "Segoe UI";
+    -fx-font-size: 1.166667em; /* 14 */
 }
 
-.choice-box:hover {
-    -fx-background-color: transparent, white, transparent, #d2d2d2;
+.choice-box > .label {
+    -fx-text-fill: white;
+}
 
+.choice-box > .open-button > .arrow {
+    -fx-background-color: #858585;
+}
+
+.choice-box:hover {
+    -fx-background-color: transparent, #858585, transparent, #333333;
 }
 
 .choice-box:focused {
-    -fx-background-color: transparent, white, transparent, #d2d2d2;
+    -fx-background-color: transparent, #858585, transparent, #333333;
 }
 
 .choice-box:focused:hover {
-    -fx-background-color: transparent, white, transparent, #d2d2d2;
+    -fx-background-color: transparent, #858585, transparent, #333333;
 }
 
-
 .choice-box:disabled {
     -fx-opacity: .4;
 }
 
-.radio-menu-item:checked > .left-container > .radio {
-    -fx-shape: "M9.005,17.766l13.759,14.739h1.716L49.02,0l10.298,8.488L25.997,50.453h-3.629L0,26.897L9.005,17.766z";
-    -fx-padding:7px;
-    -fx-scale-shape: true;
-}
-
 /*******************************************************************************
  *                                                                             *
  * List Box                                                                    *

diff --git a/samples/src/main/java/jfxtras/styles/jmetro8/ControlsSample.java b/samples/src/main/java/jfxtras/styles/jmetro8/ControlsSample.java
@@ -55,7 +55,7 @@ public class ControlsSample extends Application {
     static final private String CHOICE_BOX_RESOURCE = "JMetro ChoiceBox.fxml";
     static final private String LIST_BOX_RESOURCE = "JMetro ListBox.fxml";
 
-    static final private String RESOURCE = CONTEXT_MENU_RESOURCE;
+    static final private String RESOURCE = CHOICE_BOX_RESOURCE;
 
     static final private JMetro.Style STYLE = JMetro.Style.DARK;
 

diff --git a/samples/src/main/resources/jfxtras/styles/jmetro8/JMetro ChoiceBox.fxml b/samples/src/main/resources/jfxtras/styles/jmetro8/JMetro ChoiceBox.fxml
@@ -1,12 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import java.lang.*?>
-<?import java.util.*?>
 <?import javafx.collections.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
-<?import javafx.scene.paint.*?>
-<?import javafx.scene.text.*?>
 <?scenebuilder-stylesheet JMetroLightTheme.css?>
 
 <!--
@@ -37,36 +34,34 @@
   -->
 
 <AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="280.0" prefWidth="373.0" styleClass="background" xmlns:fx="http://javafx.com/fxml">
-    <children>
-        <Label layoutX="43.0" layoutY="37.0" styleClass="header" text="Choice Box">
-        </Label>
-        <Label layoutX="43.0" layoutY="165.0" styleClass="item-title" text="Normal" textFill="WHITE">
-        </Label>
-        <Label layoutX="200.0" layoutY="165.0" styleClass="item-title" text="Disabled">
-        </Label>
-        <ChoiceBox prefWidth="80" layoutX="43.0" layoutY="187.0">
-            <items>
-                <FXCollections fx:factory="observableArrayList">
-                    <String fx:value="1" />
-                    <String fx:value="2" />
-                    <String fx:value="3" />
-                </FXCollections>
-            </items>
-            <value>
+    <Label layoutX="43.0" layoutY="37.0" styleClass="header" text="Choice Box">
+    </Label>
+    <Label layoutX="43.0" layoutY="165.0" styleClass="item-title" text="Normal" textFill="WHITE">
+    </Label>
+    <Label layoutX="200.0" layoutY="165.0" styleClass="item-title" text="Disabled">
+    </Label>
+    <ChoiceBox prefWidth="80" layoutX="43.0" layoutY="187.0" focusTraversable="false">
+        <items>
+            <FXCollections fx:factory="observableArrayList">
                 <String fx:value="1" />
-            </value>
-        </ChoiceBox>
-        <ChoiceBox prefWidth="80" disable="true" layoutX="200.0" layoutY="188.0">
-            <items>
-                <FXCollections fx:factory="observableArrayList">
-                    <String fx:value="1" />
-                    <String fx:value="2" />
-                    <String fx:value="3" />
-                </FXCollections>
-            </items>
-            <value>
+                <String fx:value="2" />
+                <String fx:value="3" />
+            </FXCollections>
+        </items>
+        <value>
+            <String fx:value="1" />
+        </value>
+    </ChoiceBox>
+    <ChoiceBox prefWidth="80" disable="true" layoutX="200.0" layoutY="188.0">
+        <items>
+            <FXCollections fx:factory="observableArrayList">
                 <String fx:value="1" />
-            </value>
-        </ChoiceBox>
-    </children>
+                <String fx:value="2" />
+                <String fx:value="3" />
+            </FXCollections>
+        </items>
+        <value>
+            <String fx:value="1" />
+        </value>
+    </ChoiceBox>
 </AnchorPane>