From ee38f0a049bbf5090353ae5659c63d4855c285a0 Mon Sep 17 00:00:00 2001 From: 0xboobface <0xboobface@gmail.com> Date: Sun, 25 Nov 2018 15:55:16 +0100 Subject: [PATCH] Use SVG paths instead of images for the popover background --- .../main/java/ctbrec/ui/controls/Popover.css | 82 ++++--------------- .../main/java/ctbrec/ui/controls/Popover.java | 44 ++++------ 2 files changed, 36 insertions(+), 90 deletions(-) diff --git a/client/src/main/java/ctbrec/ui/controls/Popover.css b/client/src/main/java/ctbrec/ui/controls/Popover.css index 7fc3e632..bb0886ec 100644 --- a/client/src/main/java/ctbrec/ui/controls/Popover.css +++ b/client/src/main/java/ctbrec/ui/controls/Popover.css @@ -1,74 +1,28 @@ .popover { -fx-padding: 43 7 7 7; } + .popover-frame { - -fx-border-image-source: url("/popover-empty.png"); - -fx-border-image-slice: 78 50 60 120 fill; - -fx-border-image-width: 78 50 60 120; - -fx-border-image-insets: -32 -37 -47 -37; -} -.popover.right-tooth .popover-frame { - -fx-border-image-slice: 78 120 60 50 fill; - -fx-border-image-width: 78 120 60 50; -} -.popover-title { - /*-fx-font-family: "Bree serif"; */ - -fx-font-family: "Source Sans Pro Light"; - -fx-font-size: 20px; - /* -fx-text-fill: white; - -fx-font-weight: bold; */ -} -.popover .button { - -fx-font-family: "Source Sans Pro"; - -fx-font-size: 12px; + -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-base; + -fx-background-insets: 0 0 -1 0, 0, 1, 2; + -fx-background-radius: 10px, 10px, 10px, 10px; + -fx-padding: 1; + -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.8), 20, 0, 0, 0); } -.popover-tree-list-cell { - -fx-background-color: white; - /* -fx-border-color: transparent transparent #dfdfdf transparent; */ - -fx-padding: 0 30 0 12; - /*-fx-font-family: "Bree Serif"; */ - -fx-font-size: 15px; - /* -fx-font-weight: bold; */ - -fx-text-fill: #363636; +.popover.left-tooth .popover-frame { + -fx-shape: "m 33.34215,51.52967 4.782653,4.746482 4.333068,4.299995 h 94.637639 c 1.108,0 1.99987,0.891879 1.99987,1.999877 V 164.22046 c 0,1.10801 -0.89187,1.99988 -1.99987,1.99988 H 12.205971 c -1.107998,0 -2.000392,-0.89187 -2.000392,-1.99988 V 62.576024 c 0,-1.107998 0.892394,-1.999877 2.000392,-1.999877 h 12.020455 l 4.333071,-4.299995 z"; } -#PopoverBackground { - -fx-background-color: white; + +.popover.right-tooth .popover-frame { + -fx-shape: "M 438.26953 194.75781 L 420.19336 212.69727 L 403.81641 228.94922 L 46.130859 228.94922 C 41.943143 228.94922 38.572266 232.3201 38.572266 236.50781 L 38.572266 620.67578 C 38.572266 624.8635 41.943143 628.23438 46.130859 628.23438 L 518.1543 628.23438 C 522.34201 628.23438 525.71484 624.8635 525.71484 620.67578 L 525.71484 236.50781 C 525.71484 232.3201 522.34201 228.94922 518.1543 228.94922 L 472.72266 228.94922 L 456.3457 212.69727 L 438.26953 194.75781 z"; } -.search-result-cell { - -fx-background-color: white; - -fx-padding: 4 30 4 45; + +.popover-title { + -fx-font-size: 20px; + -fx-text-fill: -fx-text-background-color; } -.search-result-cell:selected { - /* -fx-background-color: white, #eeeeee; */ - -fx-background-insets: 0, 0 0 0 40; -} -.search-result-cell .title { - /*-fx-font-family: "Bree Serif"; */ - -fx-font-size: 15px; - /* -fx-font-weight: bold; */ - -fx-text-fill: #363636; -} -.search-result-cell .details { - -fx-font-size: 13px; - -fx-text-fill: #444444; -} -.search-icon-pane .label { - -fx-font-family: "Source Sans Pro Semibold"; - -fx-font-size: 16px; - -fx-background-color: #515151; - -fx-background-radius: 3px; - -fx-text-fill: white; - -fx-alignment: center; -} -.sample-tree-list-cell { - -fx-background-color: white; - -fx-border-color: transparent transparent #dfdfdf transparent; - -fx-padding: 0 30 0 20; - -fx-font-size: 15px; - -fx-text-fill: #363636; - -fx-graphic-text-gap: 20px; -} -#PopoverBackground { - -fx-background-color: white; + +.popover .button { + -fx-font-size: 12px; } \ No newline at end of file diff --git a/client/src/main/java/ctbrec/ui/controls/Popover.java b/client/src/main/java/ctbrec/ui/controls/Popover.java index a6bec1f2..4b16a172 100644 --- a/client/src/main/java/ctbrec/ui/controls/Popover.java +++ b/client/src/main/java/ctbrec/ui/controls/Popover.java @@ -48,15 +48,15 @@ import javafx.event.Event; import javafx.event.EventHandler; import javafx.geometry.Insets; import javafx.geometry.Point2D; -import javafx.geometry.VPos; import javafx.scene.Node; import javafx.scene.Scene; import javafx.scene.control.Button; +import javafx.scene.control.Label; import javafx.scene.input.MouseEvent; import javafx.scene.layout.Pane; import javafx.scene.layout.Region; import javafx.scene.shape.Rectangle; -import javafx.scene.text.Text; +import javafx.scene.text.TextAlignment; import javafx.util.Duration; /** @@ -86,9 +86,7 @@ public class Popover extends Region implements EventHandler{ private final Pane pagesPane = new Pane(); private final Rectangle pagesClipRect = new Rectangle(); private final Pane titlesPane = new Pane(); - private Text title; // the current title - private final Rectangle titlesClipRect = new Rectangle(); - // private final EventHandler popoverScrollHandler; + private Label title; // the current title private final EventHandler popoverHideHandler; private Runnable onHideCallback = null; private int maxPopupHeight = -1; @@ -114,10 +112,10 @@ public class Popover extends Region implements EventHandler{ rightButton.getStyleClass().add("popover-right-button"); rightButton.setMinWidth(USE_PREF_SIZE); pagesClipRect.setSmooth(false); + pagesClipRect.setArcHeight(10); + pagesClipRect.arcWidthProperty().bind(pagesClipRect.arcHeightProperty()); pagesPane.setClip(pagesClipRect); - titlesClipRect.setSmooth(false); - titlesPane.setClip(titlesClipRect); - getChildren().addAll(pagesPane, frameBorder, titlesPane, leftButton, rightButton); + getChildren().addAll(frameBorder, titlesPane, leftButton, rightButton, pagesPane); // always hide to start with setVisible(false); setOpacity(0); @@ -228,10 +226,11 @@ public class Popover extends Region implements EventHandler{ final Insets insets = getInsets(); final int width = (int)getWidth(); final int height = (int)getHeight(); - final int top = (int)insets.getTop(); + final int top = (int)insets.getTop() + 40; final int right = (int)insets.getRight(); final int bottom = (int)insets.getBottom(); final int left = (int)insets.getLeft(); + final int offset = 18; int pageWidth = width - left - right; int pageHeight = height - top - bottom; @@ -252,18 +251,15 @@ public class Popover extends Region implements EventHandler{ if (buttonHeight < 30) buttonHeight = 30; final int buttonTop = (int)((top-buttonHeight)/2d); final int leftButtonWidth = (int)snapSizeX(leftButton.prefWidth(-1)); - leftButton.resizeRelocate(left, buttonTop,leftButtonWidth,buttonHeight); + leftButton.resizeRelocate(left, buttonTop + offset,leftButtonWidth,buttonHeight); final int rightButtonWidth = (int)snapSizeX(rightButton.prefWidth(-1)); - rightButton.resizeRelocate(width-right-rightButtonWidth, buttonTop,rightButtonWidth,buttonHeight); - - final double leftButtonRight = leftButton.isVisible() ? (left + leftButtonWidth) : left; - final double rightButtonLeft = rightButton.isVisible() ? (right + rightButtonWidth) : right; - titlesClipRect.setX(leftButtonRight); - titlesClipRect.setWidth(pageWidth - leftButtonRight - rightButtonLeft); - titlesClipRect.setHeight(top); + rightButton.resizeRelocate(width-right-rightButtonWidth, buttonTop + offset,rightButtonWidth,buttonHeight); if (title != null) { - title.setTranslateY((int) (top / 2d)); + double tw = title.getWidth(); + double th = title.getHeight(); + title.setTranslateX((width - tw) / 2); + title.setTranslateY((top - th) / 2 + offset); } } @@ -279,7 +275,6 @@ public class Popover extends Region implements EventHandler{ popoverHeight.set(400); pagesPane.setTranslateX(0); titlesPane.setTranslateX(0); - titlesClipRect.setTranslateX(0); } public final void popPage() { @@ -307,8 +302,7 @@ public class Popover extends Region implements EventHandler{ }, new KeyValue(pagesPane.translateXProperty(), -newPageX, Interpolator.EASE_BOTH), new KeyValue(titlesPane.translateXProperty(), -newPageX, Interpolator.EASE_BOTH), - new KeyValue(pagesClipRect.xProperty(), newPageX, Interpolator.EASE_BOTH), - new KeyValue(titlesClipRect.translateXProperty(), newPageX, Interpolator.EASE_BOTH) + new KeyValue(pagesClipRect.xProperty(), newPageX, Interpolator.EASE_BOTH) ) ).play(); } else { @@ -328,10 +322,9 @@ public class Popover extends Region implements EventHandler{ rightButton.setVisible(page.rightButtonText() != null); rightButton.setText(page.rightButtonText()); - title = new Text(page.getPageTitle()); + title = new Label(page.getPageTitle()); title.getStyleClass().add("popover-title"); - //debtest title.setFill(Color.WHITE); - title.setTextOrigin(VPos.CENTER); + title.setTextAlignment(TextAlignment.CENTER); title.setTranslateX(newPageX + (int) ((pageWidth - title.getLayoutBounds().getWidth()) / 2d)); titlesPane.getChildren().add(title); @@ -343,8 +336,7 @@ public class Popover extends Region implements EventHandler{ }, new KeyValue(pagesPane.translateXProperty(), -newPageX, Interpolator.EASE_BOTH), new KeyValue(titlesPane.translateXProperty(), -newPageX, Interpolator.EASE_BOTH), - new KeyValue(pagesClipRect.xProperty(), newPageX, Interpolator.EASE_BOTH), - new KeyValue(titlesClipRect.translateXProperty(), newPageX, Interpolator.EASE_BOTH) + new KeyValue(pagesClipRect.xProperty(), newPageX, Interpolator.EASE_BOTH) ) ); timeline.play();