new create offer layout

src/main/java/io/bitsquare/gui/bitsquare.css

@@ -166,16 +166,22 @@
     -fx-font-size: 14;
 }
 
-#form-title {
+#form-group-label {
     -fx-font-weight: bold;
+    -fx-font-size: 14;
+    -fx-text-fill:#0096c9;
+    -fx-background-color:#f4f4f4;
+}
+
+#form-group-border {
+    -fx-border-color: #96D3E9;
+    -fx-border-radius: 4;
 }
 
 #form-title {
     -fx-font-weight: bold;
 }
 
-#form-entry-value {
-}
 
 /* tab pane */
 .tab-pane .tab-label {

src/main/java/io/bitsquare/gui/components/ValidatedTextField.java

@@ -22,6 +22,7 @@ import org.slf4j.LoggerFactory;
  * </div>
  * </p>
  */
+@Deprecated
 public class ValidatedTextField extends TextField
 {
     private static final Logger log = LoggerFactory.getLogger(ValidatedTextField.class);

src/main/java/io/bitsquare/gui/components/ValidatingTextField.java

@@ -98,7 +98,7 @@ public class ValidatingTextField extends TextField
         });
 
         this.focusedProperty().addListener((ov, oldValue, newValue) -> {
-            if (validateOnFocusOut && needsValidationOnFocusOut && !newValue && getScene().getWindow().isFocused())
+            if (validateOnFocusOut && needsValidationOnFocusOut && !newValue && getScene()!= null && getScene().getWindow().isFocused())
                 validate(getText());
         });
 

src/main/java/io/bitsquare/gui/market/createOffer/CreateOfferController.java

@@ -137,6 +137,10 @@ public class CreateOfferController implements Initializable, ChildController, Hi
     @Override
     public void initialize(URL url, ResourceBundle rb)
     {
+
+        //  Node wrappedButton = Borders.wrap(button).etchedBorder().buildAll()
+
+
         setupBindings();
         setupValidation();
 
@@ -242,18 +246,18 @@ public class CreateOfferController implements Initializable, ChildController, Hi
 
         amountTextField.focusedProperty().addListener((ov, oldValue, newValue) -> {
             // only on focus out and ignore focus loss from window
-            if (!newValue && amountTextField.getScene().getWindow().isFocused())
+            if (!newValue && amountTextField.getScene() != null && amountTextField.getScene().getWindow().isFocused())
                 volumeTextField.reValidate();
         });
         volumeTextField.focusedProperty().addListener((ov, oldValue, newValue) -> {
             // only on focus out and ignore focus loss from window
-            if (!newValue && volumeTextField.getScene().getWindow().isFocused())
+            if (!newValue && volumeTextField.getScene() != null && volumeTextField.getScene().getWindow().isFocused())
                 amountTextField.reValidate();
         });
         priceTextField.focusedProperty().addListener((ov, oldValue, newValue) -> {
             // only on focus out and ignore focus loss from window
-            if (!newValue && priceTextField.getScene().getWindow().isFocused())
-                volumeTextField.reValidate();
+            if (!newValue && priceTextField.getScene() != null && priceTextField.getScene().getWindow().isFocused())
+            volumeTextField.reValidate();
         });
     }
 

src/main/java/io/bitsquare/gui/market/createOffer/CreateOfferView.fxml

@@ -3,20 +3,30 @@
 <?import io.bitsquare.gui.components.btc.AddressTextField?>
 <?import io.bitsquare.gui.components.btc.BalanceTextField?>
 <?import io.bitsquare.gui.components.confidence.ConfidenceProgressIndicator?>
-<?import io.bitsquare.gui.components.ValidatingTextField?>
-<?import javafx.geometry.Insets?>
+<?import io.bitsquare.gui.components.*?>
+<?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 <AnchorPane xmlns:fx="http://javafx.com/fxml/1" fx:id="rootContainer" prefHeight="500" prefWidth="800" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0"
             AnchorPane.topAnchor="10.0" xmlns="http://javafx.com/javafx/8" fx:controller="io.bitsquare.gui.market.createOffer.CreateOfferController">
 
-    <GridPane hgap="5.0" vgap="5.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
+    <GridPane hgap="5.0" vgap="5.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
 
-        <Label id="form-header-text" text="Create new offer" GridPane.rowIndex="0"/>
+        <!-- group -->
+        <VSpacer GridPane.rowIndex="0" prefHeight="20"/>
+        <Pane GridPane.rowIndex="1" GridPane.columnSpan="2" GridPane.rowSpan="2" style="-fx-border-color:#96D3E9; -fx-border-radius: 4;">
+            <GridPane.margin>
+                <Insets top="-10" right="-10" bottom="-10" left="-10"/>
+            </GridPane.margin>
+            <Label layoutX="8" layoutY="-8" text="Create your offer:" id="form-group-label">
+                <padding>
+                    <Insets left="5" right="7"/>
+                </padding>
+            </Label>
+        </Pane>
 
-        <Label fx:id="buyLabel" GridPane.rowIndex="1"/>
-
-        <HBox spacing="5" GridPane.rowIndex="1" GridPane.columnIndex="1" GridPane.hgrow="NEVER" alignment="CENTER_LEFT">
+        <Label GridPane.rowIndex="1" fx:id="buyLabel" />
+        <HBox GridPane.rowIndex="1" GridPane.columnIndex="1" spacing="5" GridPane.hgrow="NEVER" alignment="CENTER_LEFT">
             <ValidatingTextField fx:id="amountTextField" prefWidth="70.0" alignment="CENTER_RIGHT"/>
             <Label text="BTC for:"/>
             <ValidatingTextField fx:id="priceTextField" prefWidth="70.0" alignment="CENTER_RIGHT"/>
@@ -25,50 +35,88 @@
             <Label text="EUR in total"/>
         </HBox>
 
-        <Label text="Min. Amount (BTC):" GridPane.rowIndex="2"/>
-        <ValidatingTextField fx:id="minAmountTextField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
-
-        <Label fx:id="collateralLabel" text="Collateral:" GridPane.rowIndex="3"/>
-        <TextField fx:id="collateralTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
-
-        <Label text="Total Fees (Offer + tx)" GridPane.rowIndex="4"/>
-        <TextField fx:id="feeLabel" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="4"/>
-
-        <Label text="Total funds needed:" GridPane.rowIndex="5"/>
-        <TextField fx:id="totalsTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="5"/>
-
-        <Label text="BTC address for deposit:" GridPane.rowIndex="6"/>
-        <AddressTextField fx:id="addressTextField" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="6"/>
-
-        <Label text="Actual balance:" GridPane.rowIndex="7"/>
-        <BalanceTextField fx:id="balanceTextField" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="7"/>
-
-        <!--
-       <Label id="form-header-text" text="Offer details" GridPane.rowIndex="8">
-           <GridPane.margin>
-               <Insets top="10.0"/>
-           </GridPane.margin>
-       </Label>
-       -->
-
-        <Label text="Bank account type:" GridPane.rowIndex="9"/>
-        <TextField fx:id="bankAccountTypeTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="9"/>
-
-        <Label text="Bank account currency:" GridPane.rowIndex="10"/>
-        <TextField fx:id="bankAccountCurrencyTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="10"/>
-
-        <Label text="Bank account county:" GridPane.rowIndex="11"/>
-        <TextField fx:id="bankAccountCountyTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="11"/>
-
-        <Label text="Accepted countries:" GridPane.rowIndex="12"/>
-        <TextField fx:id="acceptedCountriesTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="12"/>
-
-        <Label text="Accepted languages:" GridPane.rowIndex="13"/>
-        <TextField fx:id="acceptedLanguagesTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="13"/>
+        <Label GridPane.rowIndex="2" text="Min. Amount (BTC):"/>
+        <ValidatingTextField GridPane.rowIndex="2" GridPane.columnIndex="1" fx:id="minAmountTextField"/>
 
 
-        <Button fx:id="placeOfferButton" defaultButton="true" onAction="#onPlaceOffer" text="Place offer" GridPane.columnIndex="1" GridPane.rowIndex="14"/>
+        <!-- group -->
+        <VSpacer GridPane.rowIndex="3" prefHeight="40"/>
+        <Pane GridPane.rowIndex="4" GridPane.columnSpan="2" GridPane.rowSpan="3" id="form-group-border">
+            <GridPane.margin>
+                <Insets top="-10" right="-10" bottom="-10" left="-10"/>
+            </GridPane.margin>
+            <Label layoutX="8" layoutY="-8" text="Fill your trade pocket:" id="form-group-label">
+                <padding>
+                    <Insets left="5" right="7"/>
+                </padding>
+            </Label>
+        </Pane>
 
+        <Label GridPane.rowIndex="4" text="Funds needed for that trade:"/>
+        <TextField GridPane.rowIndex="4" GridPane.columnIndex="1" fx:id="totalsTextField" editable="false" focusTraversable="false"/>
+
+        <Label GridPane.rowIndex="5" text="BTC address for funding:"/>
+        <AddressTextField GridPane.rowIndex="5" GridPane.columnIndex="1" fx:id="addressTextField" focusTraversable="false"/>
+
+        <Label GridPane.rowIndex="6" text="Current balance:"/>
+        <BalanceTextField GridPane.rowIndex="6" GridPane.columnIndex="1" fx:id="balanceTextField" focusTraversable="false"/>
+
+        <!-- button -->
+        <VSpacer GridPane.rowIndex="7" prefHeight="10"/>
+        <Button GridPane.rowIndex="8" GridPane.columnIndex="1" fx:id="placeOfferButton" onAction="#onPlaceOffer" defaultButton="true" text="Place offer"/>
+
+
+        <!-- group -->
+        <VSpacer GridPane.rowIndex="9" prefHeight="30"/>
+        <Pane GridPane.rowIndex="10" GridPane.columnSpan="2" GridPane.rowSpan="2" id="form-group-border">
+            <GridPane.margin>
+                <Insets top="-10" right="-10" bottom="-10" left="-10"/>
+            </GridPane.margin>
+            <Label layoutX="8" layoutY="-8" text="Collateral and fees:" id="form-group-label">
+                <padding>
+                    <Insets left="5" right="7"/>
+                </padding>
+            </Label>
+        </Pane>
+
+        <Label GridPane.rowIndex="10" fx:id="collateralLabel" text="Collateral:"/>
+        <TextField GridPane.rowIndex="10" GridPane.columnIndex="1" fx:id="collateralTextField" editable="false" focusTraversable="false"/>
+
+        <Label GridPane.rowIndex="11" text="Offer Fee + transaction fee:"/>
+        <TextField GridPane.rowIndex="11" fx:id="feeLabel" editable="false" focusTraversable="false" GridPane.columnIndex="1"/>
+
+
+        <!-- group -->
+        <VSpacer GridPane.rowIndex="12" prefHeight="40"/>
+        <Pane GridPane.rowIndex="13" GridPane.columnSpan="2" GridPane.rowSpan="5" id="form-group-border">
+            <GridPane.margin>
+                <Insets top="-10" right="-10" bottom="-10" left="-10"/>
+            </GridPane.margin>
+            <Label layoutX="8" layoutY="-8" text="Your trade details:" id="form-group-label">
+                <padding>
+                    <Insets left="5" right="7"/>
+                </padding>
+            </Label>
+        </Pane>
+
+        <Label text="Bank account type:" GridPane.rowIndex="13"/>
+        <TextField fx:id="bankAccountTypeTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="13"/>
+
+        <Label text="Bank account currency:" GridPane.rowIndex="14"/>
+        <TextField fx:id="bankAccountCurrencyTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="14"/>
+
+        <Label text="Bank account county:" GridPane.rowIndex="15"/>
+        <TextField fx:id="bankAccountCountyTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="15"/>
+
+        <Label text="Accepted countries:" GridPane.rowIndex="16"/>
+        <TextField fx:id="acceptedCountriesTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="16"/>
+
+        <Label text="Accepted languages:" GridPane.rowIndex="17"/>
+        <TextField fx:id="acceptedLanguagesTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="17"/>
+
+
+
+        <!-- on placed offer screen -->
         <Label fx:id="txTitleLabel" text="Transaction ID:" visible="false" GridPane.rowIndex="14"/>
         <TextField fx:id="transactionIdTextField" visible="false" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="14"/>
         <ConfidenceProgressIndicator fx:id="progressIndicator" visible="false" focusTraversable="false" progress="0" GridPane.columnIndex="2" GridPane.halignment="LEFT"
@@ -79,7 +127,7 @@
         </ConfidenceProgressIndicator>
         <Label fx:id="confirmationLabel" text="Checking confirmations..." visible="false" GridPane.columnIndex="3" GridPane.rowIndex="14"/>
 
-        <Button fx:id="closeButton" visible="false" defaultButton="true" focusTraversable="false" onAction="#onClose" text="Close" GridPane.columnIndex="1" GridPane.rowIndex="15"/>
+        <Button fx:id="closeButton" onAction="#onClose"  visible="false" defaultButton="true" focusTraversable="false" text="Close" GridPane.columnIndex="1" GridPane.rowIndex="15"/>
 
         <columnConstraints>
             <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES"/>

src/main/java/io/bitsquare/gui/util/ValidationHelper.java

@@ -28,7 +28,7 @@ public class ValidationHelper
 
         amountTextField.focusedProperty().addListener((ov, oldValue, newValue) -> {
             // only on focus out and ignore focus loss from window
-            if (!newValue && amountTextField.getScene().getWindow().isFocused())
+            if (!newValue && amountTextField.getScene() != null && amountTextField.getScene().getWindow().isFocused())
                 validateMinAmount(amountTextField,
                                   minAmountTextField,
                                   amount,
@@ -40,7 +40,7 @@ public class ValidationHelper
 
         minAmountTextField.focusedProperty().addListener((ov, oldValue, newValue) -> {
             // only on focus out and ignore focus loss from window
-            if (!newValue && minAmountTextField.getScene().getWindow().isFocused())
+            if (!newValue && minAmountTextField.getScene() != null && minAmountTextField.getScene().getWindow().isFocused())
                 validateMinAmount(amountTextField,
                                   minAmountTextField,
                                   amount,