davebluke
/
ctbrec
forked from j62/ctbrec
1
0
Fork 0
Code Pull Requests Activity

Use SVG paths instead of images for the popover background

This commit is contained in:
0xboobface 2018-11-25 15:55:16 +01:00
parent cf14d8c3fe
commit ee38f0a049
2 changed files with 36 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
client/src/main/java/ctbrec/ui/controls/Popover.css
View File

@ -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;
}

44
client/src/main/java/ctbrec/ui/controls/Popover.java
View File

@ -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<Event>{
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<ScrollEvent> popoverScrollHandler;
private Label title; // the current title
private final EventHandler<MouseEvent> popoverHideHandler;
private Runnable onHideCallback = null;
private int maxPopupHeight = -1;
@ -114,10 +112,10 @@ public class Popover extends Region implements EventHandler<Event>{
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<Event>{
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<Event>{
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<Event>{
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<Event>{
},
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<Event>{
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<Event>{
},
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();