changeset 5627:b937270b6da0

RT-33556: Implement styling for 2-level UI Controls RT-32835: Styles for 2-Level UI Controls are not loaded with -Dcom.sun.javafx.twoLevelFocus=true
author jgiles
date Tue, 05 Nov 2013 07:57:05 +1300
parents 1194b215f671
children ed14640dd11c
files modules/controls/src/main/resources/com/sun/javafx/scene/control/skin/caspian/two-level-focus.css modules/controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/two-level-focus.css modules/graphics/src/main/java/com/sun/javafx/application/PlatformImpl.java
diffstat 3 files changed, 282 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/modules/controls/src/main/resources/com/sun/javafx/scene/control/skin/caspian/two-level-focus.css	Tue Nov 05 07:57:05 2013 +1300
@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2009, 2011, Oracle anis/or its affiliates. All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Oracle designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Oracle in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ * or visit www.oracle.com if you need additional information or have any
+ * questions.
+ */
+
+ /*******************************************************************************
+ *																			   *
+ * 2-level focus setting for Caspian										   *
+ *																			   *
+ ******************************************************************************/
+
+/*******************************************************************************
+ *																			   *
+ * ChoiceBox																   *
+ *																			   *
+ ******************************************************************************/
+.choice-box:showing {
+    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+}
+/*******************************************************************************
+ *																			   *
+ * TextField																   *
+ *																			   *
+ ******************************************************************************/
+.text-input:focused:internal-focus {
+    -fx-highlight-fill: -fx-accent;
+    -fx-highlight-text-fill: white;
+}
+.text-input:focused:external-focus {
+    -fx-highlight-fill: -fx-control-inner-background;
+    -fx-highlight-text-fill: -fx-text-inner-color;
+}
+.text-field:focused:external-focus {
+    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
+}
+.text-field:focused:internal-focus {
+    -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
+    -fx-prompt-text-fill: transparent;
+}
+/*******************************************************************************
+ *																			   *
+ * TextArea																	   *
+ *																			   *
+ ******************************************************************************/
+.text-area:focused:internal-focus {
+    -fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
+}
+.text-area:focused:external-focus {
+    -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
+}
+/*******************************************************************************
+ *																			   *
+ * Slider																	   *
+ *																			   *
+ ******************************************************************************/
+.slider {
+    -fx-padding: 5;
+}
+.slider:focused:external-focus {
+    -fx-background-color: -fx-focus-color, -fx-control-inner-background;
+    -fx-background-insets: -0.4, 1;
+    -fx-background-radius: 3.4, 2;
+}
+.slider:focused:internal-focus {
+    -fx-background-color: transparent;
+}
+.slider:focused:external-focus .thumb {
+    -fx-background-color:
+        derive(-fx-color,-36%),
+        derive(-fx-color,73%),
+        linear-gradient(to bottom, derive(-fx-color,-19%),derive(-fx-color,61%));
+    -fx-background-insets: 0, 1, 2;
+}
+/*******************************************************************************
+ *																			   *
+ * ListView, TableView														   *
+ *																			   *
+ ******************************************************************************/
+.list-view:focused:external-focus > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
+.table-view:focused:external-focus > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
+.table-view:focused:external-focus > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:selected,
+.table-view:row-selection:focused:external-focus > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected:filled {
+    -fx-background-color: lightgray;
+    -fx-background: -fx-control-inner-background;
+    -fx-text-fill: -fx-text-inner-color;
+}
+.list-view:focused:internal-focus,
+.table-view:focused:internal-focus {
+    -fx-background-color: -fx-box-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+}
+/*******************************************************************************
+ *																			   *
+ * ComboBox																	   *
+ *																			   *
+ ******************************************************************************/
+.combo-box-base:focused:showing  {
+    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-radius: 5, 5, 4, 3;
+    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
+    -fx-padding: 0;
+}
+.combo-box-base:editable:focused:showing > .text-field:focused {
+    -fx-prompt-text-fill: transparent;
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/modules/controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/two-level-focus.css	Tue Nov 05 07:57:05 2013 +1300
@@ -0,0 +1,149 @@
+/*
+ * Copyright (c) 2009, 2011, Oracle anis/or its affiliates. All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Oracle designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Oracle in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ * or visit www.oracle.com if you need additional information or have any
+ * questions.
+ */
+
+/*******************************************************************************
+ *																			   *
+ * 2-level focus setting for Modena											   *
+ *																			   *
+ ******************************************************************************/
+
+/*******************************************************************************
+ *																			   *
+ * ChoiceBox																   *
+ *																			   *
+ ******************************************************************************/
+.choice-box:showing:external-focus {
+    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
+    -fx-background-radius: 3px, 3px, 2px, 1px;
+}
+/*******************************************************************************
+ *																			   *
+ * TextField																   *
+ *																			   *
+ ******************************************************************************/
+.text-input:focused:internal-focus {
+    -fx-highlight-fill: -fx-accent;
+    -fx-highlight-text-fill: white;
+    -fx-prompt-text-fill: transparent;
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
+    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
+}
+.text-input:focused:external-focus {
+    /*-fx-text-fill: -fx-text-inner-color;*/
+    -fx-highlight-fill: -fx-control-inner-background;
+    -fx-highlight-text-fill: -fx-text-inner-color;
+    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
+    -fx-background-color:
+        -fx-focus-color,
+        -fx-control-inner-background,
+        -fx-faint-focus-color,
+        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
+}
+/*******************************************************************************
+ *																			   *
+ * TextArea																	   *
+ *																			   *
+ ******************************************************************************/
+.text-area:focused:internal-focus .content {
+    -fx-background-color:
+        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
+}
+/*******************************************************************************
+ *																			   *
+ * Slider																	   *
+ *																			   *
+ ******************************************************************************/
+.slider {
+    -fx-padding: 5;
+}
+.slider:focused:external-focus {
+    -fx-background-color: -fx-focus-color, -fx-control-inner-background, -fx-faint-focus-color, -fx-control-inner-background;
+    -fx-background-insets: -0.2, 1, -1.4, 2;
+    -fx-background-radius: 3, 2, 4, 2;
+}
+.slider:focused:internal-focus {
+    -fx-background-color: transparent;
+}
+.slider:focused:external-focus .thumb {
+    -fx-background-color:
+        linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
+        -fx-inner-border,
+        -fx-body-color;
+}
+/*******************************************************************************
+ *																			   *
+ * ListView, TableView														   *
+ *																			   *
+ ******************************************************************************/
+.list-view:focused:external-focus > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
+.table-view:focused:external-focus > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
+.table-view:focused:external-focus > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:selected {
+    -fx-background: -fx-selection-bar-non-focused;
+    -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
+    -fx-cell-focus-inner-border: derive(-fx-selection-bar-non-focused, 20%);
+}
+
+.list-view:focused:internal-focus,
+.table-view:focused:internal-focus {
+    -fx-background-color: -fx-box-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+}
+/*******************************************************************************
+ *																			   *
+ * ComboBox																	   *
+ *																			   *
+ ******************************************************************************/
+.combo-box-base:focused:showing:external-focus,
+.combo-box-base:editable:focused:showing:external-focus > .arrow-button {
+    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
+    -fx-background-radius: 3px, 3px, 2px, 1px;
+}
+.combo-box-base:editable:focused:internal-focus > .text-field,
+.combo-box-base:editable:focused:showing:external-focus > .text-field:focused {
+    -fx-background-color: -fx-control-inner-background;
+    -fx-background-insets: 1 0 1 1;
+    -fx-background-radius: 2 0 0 2;
+    -fx-prompt-text-fill: transparent;
+}
+.combo-box-base:editable:focused:showing:external-focus > .arrow-button {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 1 1 1 0, 1, 2;
+    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
+}
+.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background: -fx-accent;
+    -fx-background-color: -fx-selection-bar !important;
+}
+.combo-box-base:editable:focused:external-focus > .text-field,
+.combo-box-base:editable:external-focus > .text-field:focused {
+    -fx-background-color:
+        -fx-control-inner-background,
+        -fx-faint-focus-color,
+        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
+    -fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
+    -fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
+}
\ No newline at end of file
--- a/modules/graphics/src/main/java/com/sun/javafx/application/PlatformImpl.java	Mon Nov 04 13:59:44 2013 -0800
+++ b/modules/graphics/src/main/java/com/sun/javafx/application/PlatformImpl.java	Tue Nov 05 07:57:05 2013 +1300
@@ -645,6 +645,10 @@
                                     StyleManager.getInstance().addUserAgentStylesheet("com/sun/javafx/scene/control/skin/caspian/android.css");
                                 }
                             }
+
+                            if (isSupported(ConditionalFeature.TWO_LEVEL_FOCUS)) {
+                                StyleManager.getInstance().addUserAgentStylesheet("com/sun/javafx/scene/control/skin/caspian/two-level-focus.css");
+                            }
                             return null;
                         }
                     });
@@ -666,6 +670,10 @@
                             if (PlatformUtil.isAndroid()) {
                                 StyleManager.getInstance().addUserAgentStylesheet("com/sun/javafx/scene/control/skin/modena/android.css");
                             }
+
+                            if (isSupported(ConditionalFeature.TWO_LEVEL_FOCUS)) {
+                                StyleManager.getInstance().addUserAgentStylesheet("com/sun/javafx/scene/control/skin/modena/two-level-focus.css");
+                            }
                             return null;
                         }
                     });