changeset 995:e262487f274b

Pagination visual designs by Jasper.
author Kinsley Wong <kinsley.wong@oracle.com>
date Sat, 12 May 2012 10:36:12 -0700
parents afb9b341bd82
children cc5336993d4c
files javafx-ui-controls/src/com/sun/javafx/scene/control/skin/PaginationSkin.java javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css
diffstat 2 files changed, 76 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/PaginationSkin.java	Sat May 12 10:34:23 2012 -0700
+++ b/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/PaginationSkin.java	Sat May 12 10:36:12 2012 -0700
@@ -643,10 +643,13 @@
 
         private HBox controlBox;
         private Button leftArrowButton;
+        private StackPane leftArrow;
         private Button rightArrowButton;
+        private StackPane rightArrow;
         private ToggleGroup indicatorButtons;
         private Label pageInformation;
         private double previousWidth = -1;
+        private double minButtonSize = -1;
 
         public NavigationControl() {
             getStyleClass().setAll("pagination-control");
@@ -655,17 +658,40 @@
             controlBox.getStyleClass().add("control-box");
 
             leftArrowButton = new Button();
+            minButtonSize = leftArrowButton.getFont().getSize() * 2;
+            leftArrowButton.fontProperty().addListener(new ChangeListener<Font>() {
+                @Override public void changed(ObservableValue<? extends Font> arg0, Font arg1, Font newFont) {
+                    minButtonSize = newFont.getSize() * 2;
+                    for(Node child: controlBox.getChildren()) {
+                        ((Control)child).setMinSize(minButtonSize, minButtonSize);
+                    }
+                    // We want to relayout the indicator buttons because the size has changed.
+                    requestLayout();
+                }
+            });
+            leftArrowButton.setMinSize(minButtonSize, minButtonSize);
             leftArrowButton.getStyleClass().add("left-arrow-button");
             leftArrowButton.setFocusTraversable(false);
+            HBox.setMargin(leftArrowButton, new Insets(0, 4, 0, 0));
+            leftArrow = new StackPane();
+            leftArrow.setMaxSize(USE_PREF_SIZE, USE_PREF_SIZE);
+            leftArrowButton.setGraphic(leftArrow);
+            leftArrow.getStyleClass().add("left-arrow");
 
             rightArrowButton = new Button();
+            rightArrowButton.setMinSize(minButtonSize, minButtonSize);
             rightArrowButton.getStyleClass().add("right-arrow-button");
             rightArrowButton.setFocusTraversable(false);
+            HBox.setMargin(rightArrowButton, new Insets(0, 0, 0, 4));
+            rightArrow = new StackPane();
+            rightArrow.setMaxSize(USE_PREF_SIZE, USE_PREF_SIZE);
+            rightArrowButton.setGraphic(rightArrow);
+            rightArrow.getStyleClass().add("right-arrow");
 
             indicatorButtons = new ToggleGroup();
 
             pageInformation = new Label();
-            //pageInformation.getStyleClass().add("page-information");
+            pageInformation.getStyleClass().add("page-information");
 
             getChildren().addAll(controlBox, pageInformation);
             initializeNavigationHandlers();
@@ -719,6 +745,7 @@
             controlBox.getChildren().add(leftArrowButton);
             for (int i = fromIndex; i <= toIndex; i++) {
                 IndicatorButton ib = new IndicatorButton(i);
+                ib.setMinSize(minButtonSize, minButtonSize);
                 ib.setToggleGroup(indicatorButtons);
                 controlBox.getChildren().add(ib);
             }
--- a/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css	Sat May 12 10:34:23 2012 -0700
+++ b/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css	Sat May 12 10:36:12 2012 -0700
@@ -3397,28 +3397,64 @@
 
 .pagination .pagination-control {
     -fx-background-color: transparent;    
-    -fx-padding: 0.833333em 0em 0.833333em 0em; /* 10 5 10 5 */            
+    -fx-padding: 0.833333em 0em 0.833333em 0em;
 }
 
 .pagination .pagination-control .control-box {
-    -fx-spacing: 10;
+    -fx-spacing: 4;
     -fx-alignment: center;
 }
 
-.pagination .pagination-control .left-arrow-button {    
-    -fx-padding: 0.583em 0.5em 0.583em 0.583em; /* 7 6 7 7 */
-    -fx-shape: "M 0 0 L -13 7 L 0 13 z";    
-}
-
-.pagination .pagination-control .right-arrow-button {    
-    -fx-padding: 0.583em 0.583em 0.583em 0.5em; /* 7 7 6 7 */
+.pagination .pagination-control .left-arrow-button{
+    -fx-background-radius: 0;
+    -fx-padding: 0.166667em 0.416em 0.25em 0.333em;
+}
+.pagination .pagination-control .right-arrow-button {
+    -fx-background-radius: 0;
+    -fx-padding: 0.166667em 0.333em 0.25em 0.416em;
+}
+
+.pagination .pagination-control .left-arrow {
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -fx-background-insets: 1 0 -1 0, 0;
+    -fx-padding: 0.375em 0.291em 0.375em 0.291em;
+    -fx-shape: "M 0 0 L -13 7 L 0 13 z";
+    -fx-scale-shape: true;
+}
+
+.pagination .pagination-control .right-arrow {
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -fx-background-insets: 1 0 -1 0, 0;
+    -fx-padding: 0.375em 0.291em 0.375em 0.291em;
     -fx-shape: "M 0 0 L 13 7 L 0 13 z";
+    -fx-scale-shape: true;
 }
 
 .pagination .pagination-control .bullet-button {   
-   -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
-   -fx-padding: 0.583em; /* 7 -- padding from outside edge to the inner black dot */
+   -fx-background-radius: 0, 4em, 4em, 4em, 4em;
+   -fx-padding: 0.333em;
+   
+   -fx-background-color: transparent, -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+   -fx-background-insets: 0, 4 4 3 4,  5,  6,  7;
+}
+
+.pagination .pagination-control .bullet-button:selected {   
+    -fx-base: -fx-accent;
+}
+
+.pagination.bullet .pagination-control .left-arrow-button, .pagination.bullet .pagination-control .right-arrow-button {
+    -fx-background-radius: 4em;
 }
 
 .pagination .pagination-control .number-button {
-}
+    -fx-background-radius: 0;
+    -fx-padding: 0.166667em 0.25em 0.25em 0.333em;
+    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+}
+
+.pagination .pagination-control .number-button:selected {   
+    -fx-base: -fx-accent;
+}
+.pagination .pagination-control .page-information {   
+    -fx-padding: 0.416em 0 0 0;
+}
\ No newline at end of file