Introduce new functioning scene layout.

1 files changed, 114 insertions, 12 deletions

diff --git a/src/scenes/add_server_wizard/Scene_step_1.qml b/src/scenes/add_server_wizard/Scene_step_1.qml
index 2eb6eaa..e76462a 100644
--- a/src/scenes/add_server_wizard/Scene_step_1.qml
+++ b/src/scenes/add_server_wizard/Scene_step_1.qml
@@ -48,36 +48,138 @@ Item {
 
         Text {
             color: Material.foreground
-            id: title
+            id: step_indicator
 
             text: qsTr("Step 1")
-            font.pointSize: 18
+            anchors.leftMargin: 15
+            anchors.top: parent.top
+            anchors.topMargin: 15
+            font.pointSize: 21
             wrapMode: Text.WordWrap
 
             font.bold: true
             horizontalAlignment: Text.AlignHCenter
-            anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
+            anchors.margins: 5
+        }
+
+        Text {
+            color: Material.foreground
+            id: explaining_text
+
+            text: qsTr("Please input the address for the "+
+                       "remote web app server which you want "+
+                       "to connect to.\nIf you don't know "+
+                       "what this means, ask your local "+
+                       "administrator about it please.\nBefore you can "+
+                       "start any remote sessions you will have to "+
+                       "be approved for remote support.")
+            font.pointSize: 13
             anchors.right: parent.right
+            anchors.rightMargin: 15
+            anchors.leftMargin: 15
+            anchors.top: step_indicator.bottom
+            anchors.topMargin: 30
+            wrapMode: Text.WordWrap
+
+            anchors.left: parent.left
             anchors.margins: 5
         }
 
-        Button {
-            id: next_step1_button
-            text: qsTr("Next Step")
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 10
+        TextField {
+            id: host_url
+            selectByMouse: true
+            placeholderText: qsTr("http://example.com:8000")
+
+            font.pixelSize: 16
+            color: Material.foreground
+            anchors.topMargin: 30
+
+            padding: 15
+            topPadding: 15
+
+            anchors.top: explaining_text.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: 15
             anchors.right: parent.right
-            anchors.rightMargin: 10
+            anchors.margins: 30
 
-            onClicked: {
-                main_content_push("scenes/add_server_wizard/Scene_step_2.qml", StackView.Transition)
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                onHoveredChanged: {
+                    if (containsMouse) {
+                        host_url_background.state = "hovered"
+                    } else if (!host_url.focus) {
+                        host_url_background.state = "unhovered"
+                    }
+                }
+                onClicked: {
+                    host_url.forceActiveFocus();
+                }
+            }
+
+            onFocusChanged: {
+                host_url_background.state = host_url.focus ? "hovered" : "unhovered"
+            }
+
+            background: Rectangle {
+                id: host_url_background
+                color: Material.background
+                border.color: Material.foreground
+                border.width: 1
+                radius: 4
+
+                states: [
+                    State {
+                        name: "hovered"
+                        PropertyChanges {
+                            target: host_url_background
+                            border.color: "#0178EF"
+                        }
+                    },
+                    State {
+                        name: "unhovered"
+                        PropertyChanges {
+                            target: host_url_background
+                            border.color: Material.foreground
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        from: "*"
+                        to: "*"
+                        PropertyAnimation {
+                            property: "border.color"
+                            duration: 100
+                            easing.type: Easing.Linear
+                        }
+                    }
+                ]
+
+                Text {
+                    color: Material.foreground
+                    text: qsTr("RWA-server address")
+                    anchors.left: parent.left
+                    anchors.leftMargin: 15
+                    anchors.verticalCenterOffset: - host_url.height / 2
+                    anchors.verticalCenter: parent.verticalCenter
+                    leftPadding: 5
+
+                    Rectangle {
+                        color: Material.background
+                        width: parent.width + 5 + 3
+                        height: parent.height
+                        z: -1
+                    }
+                }
             }
         }
     }
 }
 
 /*##^## Designer {
-    D{i:0;autoSize:true;height:480;width:640}
+    D{i:0;autoSize:true;height:480;width:640}D{i:4;anchors_width:351;anchors_x:279}
 }
  ##^##*/