ADD::added animations to buttons in login and register window

This commit is contained in:
Sem van der Hoeven
2019-04-06 21:05:19 +02:00
parent 6cbabbdf8d
commit c0e0063465
7 changed files with 103 additions and 12 deletions

View File

@@ -1,12 +1,9 @@
package greenify.client.controller;
import com.sun.javafx.scene.control.skin.ButtonSkin;
import greenify.client.Application;
import greenify.client.rest.UserService;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.animation.TranslateTransition;
import javafx.animation.*;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
@@ -180,6 +177,7 @@ public class RegisterWindowController {
addSlideAnimation(1100, passwordField, 300);
TimeUnit.MILLISECONDS.sleep(300);
addSlideAnimation(1100, passwordField2, -420);
signUpButton.setSkin(new SignUpButtonSkin(signUpButton));
}
/**
@@ -605,4 +603,31 @@ public class RegisterWindowController {
carTravelElectricLabel.getText().replace(" mpge", ""));
}
}
@SuppressWarnings("Duplicates")
private class SignUpButtonSkin extends ButtonSkin {
/**
* button skin for the 'add activity' buttons.
* adds scale animations on entering, clicking and extiting the button
* @param button the button to set the skin of
*/
private SignUpButtonSkin(Button button) {
super(button);
//transition to scale up on hover
final ScaleTransition scaleUp = new ScaleTransition(Duration.millis(85));
//add the node and the position to scale to
scaleUp.setNode(button);
scaleUp.setToX(1.1);
scaleUp.setToY(1.1);
//play the transition when hovered over the button
button.setOnMouseEntered(e -> scaleUp.playFromStart());
final ScaleTransition scaleDown = new ScaleTransition(Duration.millis(85));
scaleDown.setNode(button);
scaleDown.setToX(1.0);
scaleDown.setToY(1.0);
button.setOnMouseExited(e -> scaleDown.playFromStart());
}
}
}

View File

@@ -1,7 +1,10 @@
package greenify.client.controller;
import com.sun.javafx.scene.control.skin.ButtonSkin;
import greenify.client.Application;
import greenify.client.rest.UserService;
import javafx.animation.FillTransition;
import javafx.animation.ScaleTransition;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.Parent;
@@ -10,8 +13,10 @@ import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.Window;
import javafx.util.Duration;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
@@ -35,6 +40,11 @@ public class UserController {
@FXML
private Button signUpButton;
public void initialize() {
loginButton.setSkin(new LoginButtonSkin(loginButton));
signUpButton.setSkin(new LoginButtonSkin(signUpButton));
}
/**
* Handles when the user clicks on the login button.
* it checks if the username and password fields are filled
@@ -135,10 +145,39 @@ public class UserController {
Parent registerWindow = Application.load(this.getClass().getClassLoader()
.getResource("fxml/RegisterWindow.fxml"));
Scene registerScene = new Scene(registerWindow);
registerScene.getStylesheets().add(Application.class.getClassLoader()
.getResource("stylesheets/registerWindowStyle.css").toExternalForm());
Stage registerStage = new Stage();
registerStage.setScene(registerScene);
registerStage.setTitle("Enter register credentials");
registerStage.show();
}
@SuppressWarnings("Duplicates")
private class LoginButtonSkin extends ButtonSkin {
/**
* button skin for the 'add activity' buttons.
* adds scale animations on entering, clicking and extiting the button
* @param button the button to set the skin of
*/
private LoginButtonSkin(Button button) {
super(button);
//transition to scale up on hover
final ScaleTransition scaleUp = new ScaleTransition(Duration.millis(85));
//add the node and the position to scale to
scaleUp.setNode(button);
scaleUp.setToX(1.1);
scaleUp.setToY(1.1);
//play the transition when hovered over the button
button.setOnMouseEntered(e -> scaleUp.playFromStart());
final ScaleTransition scaleDown = new ScaleTransition(Duration.millis(85));
scaleDown.setNode(button);
scaleDown.setToX(1.0);
scaleDown.setToY(1.0);
button.setOnMouseExited(e -> scaleDown.playFromStart());
}
}
}

View File

@@ -1,5 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
@@ -24,7 +25,7 @@
<Font size="13.0" />
</font>
</TextField>
<Button fx:id="signUpButton" layoutX="115.0" layoutY="229.0" mnemonicParsing="false" onAction="#handleSignUpButton" style="-fx-background-color: #005e07;" text="Sign up!" textFill="#c4eec9">
<Button fx:id="signUpButton" layoutX="115.0" layoutY="229.0" mnemonicParsing="false" onAction="#handleSignUpButton" text="Sign up!" textFill="#c4eec9">
<font>
<Font name="Corbel Bold" size="14.0" />
</font>

View File

@@ -1,5 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.chart.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.chart.PieChart?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
@@ -15,7 +22,7 @@
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane prefHeight="702.0" prefWidth="1032.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="greenify.client.controller.DashBoardController">
<AnchorPane prefHeight="702.0" prefWidth="1032.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="greenify.client.controller.DashBoardController">
<children>
<AnchorPane fx:id="menuBar" prefHeight="703.0" prefWidth="216.0" style="-fx-background-color: #5a635c;">
<children>
@@ -44,7 +51,7 @@
<Font size="21.0" />
</font>
</Button>
<Button fx:id="logOutButton" layoutY="270.0" mnemonicParsing="false" onAction="#logOut" prefHeight="45.0" prefWidth="216.0" text="log out ">
<Button fx:id="logOutButton" layoutX="48.0" layoutY="644.0" mnemonicParsing="false" onAction="#logOut" prefHeight="45.0" prefWidth="120.0" text="log out ">
<font>
<Font size="21.0" />
</font>
@@ -53,8 +60,6 @@
<Line endX="104.0" layoutX="105.0" layoutY="178.0" scaleY="0.7" startX="-100.0" stroke="#e3ffe8" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" />
<Line endX="104.0" layoutX="109.0" layoutY="223.0" startX="-100.0" stroke="#e3ffe8" strokeWidth="0.7" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" />
<Line fx:id="pathLine" endX="100.0" endY="28.0" fill="#1b9736" layoutX="8.0" layoutY="323.0" startX="-100.0" startY="28.0" stroke="#5a635c" />
<Line endX="104.0" layoutX="105.0" layoutY="271.0" startX="-100.0" stroke="#e3ffe8" strokeWidth="0.7" />
<Line endX="104.0" layoutX="106.0" layoutY="270.0" startX="-100.0" stroke="#e3ffe8" strokeWidth="0.7" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" />
<Label fx:id="hintText" alignment="TOP_LEFT" layoutX="14.0" layoutY="420.0" prefHeight="218.0" prefWidth="187.0" text="Hints" textFill="#c2cdc4">
<font>
<Font size="15.0" />

View File

@@ -2,4 +2,12 @@
-fx-background-color: #005e07;
-fx-text-fill: #c4eec9;
-fx-font-weight: bold;
}
.button:hover {
-fx-background-color: #11911b;
}
.button:pressed {
-fx-background-color: #1a8c23;
}

View File

@@ -49,12 +49,13 @@
}
#logOutButton {
-fx-background-color: #5a635c;
-fx-text-fill: #b8bcb9;
}
#logOutButton:hover {
-fx-background-color: #677069;
-fx-background-color: #c64b4b;
}
#logOutButton:pressed {
-fx-background-color: #b7e2c2;
-fx-background-color: #c9a9a9;
}

View File

@@ -0,0 +1,12 @@
#signUpButton {
-fx-background-color: #005e07;
-fx-text-fill: #c4eec9;
}
#signUpButton:hover {
-fx-background-color: #11911b;
}
#signUpButton:pressed {
-fx-background-color: #1a8c23;
}