diff options
| -rw-r--r-- | src/scenes/add_server_wizard/Scene_step_1.qml | 126 |
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} } ##^##*/ |