From 56d7c1486e4a81113c5e73eb5df669add80f0a89 Mon Sep 17 00:00:00 2001 From: Henk Kalkwater Date: Sun, 7 Mar 2021 16:26:13 +0100 Subject: [PATCH] Add login page --- qtquick/{SailfinStyle => }/SailfinStyle.qml | 0 qtquick/SailfinStyle/Page.qml | 1 + qtquick/SailfinStyle/ToolBar.qml | 2 +- qtquick/SailfinStyle/qmldir | 1 - qtquick/qml.qrc | 6 +- .../components/+sailfinstyle/Background.qml | 116 +++++++++++++++++ qtquick/qml/components/Background.qml | 118 +----------------- qtquick/qml/components/BusyDialog.qml | 10 ++ qtquick/qml/main.qml | 13 +- qtquick/qml/pages/setup/LoginPage.qml | 35 ++++++ qtquick/qml/pages/setup/ServerSelectPage.qml | 63 +++++++++- qtquick/qmldir | 1 + qtquick/qtquickcontrols2.conf | 1 + 13 files changed, 246 insertions(+), 121 deletions(-) rename qtquick/{SailfinStyle => }/SailfinStyle.qml (100%) create mode 100644 qtquick/qml/components/+sailfinstyle/Background.qml create mode 100644 qtquick/qml/components/BusyDialog.qml create mode 100644 qtquick/qml/pages/setup/LoginPage.qml create mode 100644 qtquick/qmldir diff --git a/qtquick/SailfinStyle/SailfinStyle.qml b/qtquick/SailfinStyle.qml similarity index 100% rename from qtquick/SailfinStyle/SailfinStyle.qml rename to qtquick/SailfinStyle.qml diff --git a/qtquick/SailfinStyle/Page.qml b/qtquick/SailfinStyle/Page.qml index 2380c62..92c061a 100644 --- a/qtquick/SailfinStyle/Page.qml +++ b/qtquick/SailfinStyle/Page.qml @@ -1,5 +1,6 @@ import QtQuick 2.12 import QtQuick.Templates 2.12 as T +import ".." T.Page { diff --git a/qtquick/SailfinStyle/ToolBar.qml b/qtquick/SailfinStyle/ToolBar.qml index ce5d534..32fc047 100644 --- a/qtquick/SailfinStyle/ToolBar.qml +++ b/qtquick/SailfinStyle/ToolBar.qml @@ -2,7 +2,7 @@ import QtQuick 2.12 import QtGraphicalEffects 1.12 import QtQuick.Templates 2.12 as T -import "." +import ".." T.ToolBar { horizontalPadding: SailfinStyle.mediumPadding diff --git a/qtquick/SailfinStyle/qmldir b/qtquick/SailfinStyle/qmldir index 8c5d182..6cb60cb 100644 --- a/qtquick/SailfinStyle/qmldir +++ b/qtquick/SailfinStyle/qmldir @@ -1,4 +1,3 @@ module SailfinStyle depends QtQuick.Controls 2.12 -singleton SailfinStyle 1.0 SailfinStyle.qml diff --git a/qtquick/qml.qrc b/qtquick/qml.qrc index 2926ffa..74e3502 100644 --- a/qtquick/qml.qrc +++ b/qtquick/qml.qrc @@ -6,9 +6,13 @@ qtquickcontrols2.conf SailfinStyle/assets/ToolBarBackground.svg SailfinStyle/qmldir - SailfinStyle/SailfinStyle.qml SailfinStyle/ToolBar.qml qml/pages/setup/ServerSelectPage.qml SailfinStyle/Page.qml + SailfinStyle.qml + qmldir + qml/components/+sailfinstyle/Background.qml + qml/components/BusyDialog.qml + qml/pages/setup/LoginPage.qml diff --git a/qtquick/qml/components/+sailfinstyle/Background.qml b/qtquick/qml/components/+sailfinstyle/Background.qml new file mode 100644 index 0000000..4ebb171 --- /dev/null +++ b/qtquick/qml/components/+sailfinstyle/Background.qml @@ -0,0 +1,116 @@ +import QtQuick 2.12 +import QtQuick.Particles 2.12 + +Rectangle { + id: root + anchors.fill: parent + color: "#ccc" + + readonly property real normalStrength: 0.5 + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: { + if (mouse.button == Qt.LeftButton) { + enter(); + } else { + exit(); + } + } + } + + ParticleSystem { + id: particleSystem + } + + Emitter { + id: emitter + anchors.centerIn: parent + width: parent.width * 0.5 + height: parent.height * 0.5 + system: particleSystem + emitRate: Math.sqrt(width * height) * 30 / (lifeSpan) + lifeSpan: 10000 + lifeSpanVariation: 1000 + size: 12 + endSize: 24 + sizeVariation: 6 + shape: EllipseShape {} + } + + Attractor { + id: affector + anchors.centerIn: parent + width: parent.width * 2 + height: parent.height * 2 + affectedParameter: Attractor.Position + system: particleSystem + pointX: width / 2 + pointY: height / 2 + proportionalToDistance: Attractor.Linear + strength: -normalStrength + } + + Wander { + anchors.fill: parent + system: particleSystem + pace: 300 + affectedParameter: Wander.Velocity + xVariance: 1000 + yVariance: 1000 + } + + + ImageParticle { + //source: Qt.resolvedUrl("../../assets/img/particle.png") + source: "qrc:/particleresources/fuzzydot.png" + system: particleSystem + alpha: 0.7 + alphaVariation: 0.3 + } + + SequentialAnimation { + id: enterAnimation + NumberAnimation { + target: affector + property: "strength" + from: - 5 * normalStrength + to: -normalStrength + easing.type: Easing.OutQuad + duration: 1000 + } + ScriptAction { + script: emitter.burst(10) + } + } + + SequentialAnimation { + id: exitAnimation + PropertyAction { + target: affector + property: "strength" + value: 4 * normalStrength + } + PauseAnimation { + duration: 500 + } + NumberAnimation { + target: affector + property: "strength" + easing.type: Easing.InOutQuad + to: -normalStrength + duration: 500 + } + } + + function enter() { + console.log("Enter animation") + enterAnimation.start(); + } + + function exit() { + console.log("Exit animation") + exitAnimation.start(); + } +} diff --git a/qtquick/qml/components/Background.qml b/qtquick/qml/components/Background.qml index 4ebb171..4d3b51b 100644 --- a/qtquick/qml/components/Background.qml +++ b/qtquick/qml/components/Background.qml @@ -1,116 +1,6 @@ -import QtQuick 2.12 -import QtQuick.Particles 2.12 +import QtQuick 2.6 -Rectangle { - id: root - anchors.fill: parent - color: "#ccc" - - readonly property real normalStrength: 0.5 - - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.LeftButton | Qt.RightButton - onClicked: { - if (mouse.button == Qt.LeftButton) { - enter(); - } else { - exit(); - } - } - } - - ParticleSystem { - id: particleSystem - } - - Emitter { - id: emitter - anchors.centerIn: parent - width: parent.width * 0.5 - height: parent.height * 0.5 - system: particleSystem - emitRate: Math.sqrt(width * height) * 30 / (lifeSpan) - lifeSpan: 10000 - lifeSpanVariation: 1000 - size: 12 - endSize: 24 - sizeVariation: 6 - shape: EllipseShape {} - } - - Attractor { - id: affector - anchors.centerIn: parent - width: parent.width * 2 - height: parent.height * 2 - affectedParameter: Attractor.Position - system: particleSystem - pointX: width / 2 - pointY: height / 2 - proportionalToDistance: Attractor.Linear - strength: -normalStrength - } - - Wander { - anchors.fill: parent - system: particleSystem - pace: 300 - affectedParameter: Wander.Velocity - xVariance: 1000 - yVariance: 1000 - } - - - ImageParticle { - //source: Qt.resolvedUrl("../../assets/img/particle.png") - source: "qrc:/particleresources/fuzzydot.png" - system: particleSystem - alpha: 0.7 - alphaVariation: 0.3 - } - - SequentialAnimation { - id: enterAnimation - NumberAnimation { - target: affector - property: "strength" - from: - 5 * normalStrength - to: -normalStrength - easing.type: Easing.OutQuad - duration: 1000 - } - ScriptAction { - script: emitter.burst(10) - } - } - - SequentialAnimation { - id: exitAnimation - PropertyAction { - target: affector - property: "strength" - value: 4 * normalStrength - } - PauseAnimation { - duration: 500 - } - NumberAnimation { - target: affector - property: "strength" - easing.type: Easing.InOutQuad - to: -normalStrength - duration: 500 - } - } - - function enter() { - console.log("Enter animation") - enterAnimation.start(); - } - - function exit() { - console.log("Exit animation") - exitAnimation.start(); - } +Item { + function enter() {} + function exit() {} } diff --git a/qtquick/qml/components/BusyDialog.qml b/qtquick/qml/components/BusyDialog.qml new file mode 100644 index 0000000..0224977 --- /dev/null +++ b/qtquick/qml/components/BusyDialog.qml @@ -0,0 +1,10 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 + +Dialog { + modal: true + BusyIndicator { + anchors.centerIn: parent + running: true + } +} diff --git a/qtquick/qml/main.qml b/qtquick/qml/main.qml index 1ee0590..90f4470 100644 --- a/qtquick/qml/main.qml +++ b/qtquick/qml/main.qml @@ -6,20 +6,31 @@ import QtQuick.Window 2.12 import nl.netsoj.chris.Jellyfin 1.0 import "components" -import "../SailfinStyle" +import ".." ApplicationWindow { + id: appWindow width: 600 height: 600 visible: true + property int _oldDepth: 0 background: Background { + id: background anchors.fill: parent } StackView { id: pageStack anchors.fill: parent + onDepthChanged: { + if (depth >= _oldDepth) { + background.enter(); + } else { + background.exit(); + } + _oldDepth = depth + } } Connections { diff --git a/qtquick/qml/pages/setup/LoginPage.qml b/qtquick/qml/pages/setup/LoginPage.qml new file mode 100644 index 0000000..704515d --- /dev/null +++ b/qtquick/qml/pages/setup/LoginPage.qml @@ -0,0 +1,35 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 + +import "../../.." + +Page { + property string loginMessage + header: ToolBar { + Label { + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: SailfinStyle.fontSizeLarge + text: qsTr("Log in") + } + } + + Column { + anchors.horizontalCenter: parent.horizontalCenter + width: Math.min(80 * SailfinStyle.unit, parent.width - SailfinStyle.largePadding * 2) + spacing: SailfinStyle.mediumPadding + TextField { + id: usernameField + width: parent.width + EnterKey.type: Qt.EnterKeyNext + } + TextField { + id: passwordField + width: parent.width + } + Label { + width: parent.width + text: loginMessage + wrapMode: Text.WordWrap + } + } +} diff --git a/qtquick/qml/pages/setup/ServerSelectPage.qml b/qtquick/qml/pages/setup/ServerSelectPage.qml index 9fe0b52..dd8fd32 100644 --- a/qtquick/qml/pages/setup/ServerSelectPage.qml +++ b/qtquick/qml/pages/setup/ServerSelectPage.qml @@ -3,9 +3,12 @@ import QtQuick.Controls 2.12 import nl.netsoj.chris.Jellyfin 1.0 -import "../../../SailfinStyle" +import "../../components" +import "../../.." Page { + property string selectedServerName + property StackView stackView: StackView.view header: ToolBar { Label { anchors.horizontalCenter: parent.horizontalCenter @@ -13,12 +16,66 @@ Page { text: qsTr("Select a server") } } - BusyIndicator { - anchors.centerIn: parent + + ListView { + anchors { + horizontalCenter: parent.horizontalCenter + top: parent.top + bottom: parent.bottom + } + width: Math.min(80 * SailfinStyle.unit, parent.width - 2 * SailfinStyle.largePadding) + model: discoveryModel + + header: Column { + width: parent.width + Label { + text: "Enter an IP address" + width: parent.width + } + TextField { + width: parent.width + } + } + delegate: RadioDelegate { + text: name + width: parent.width + onClicked: { + selectedServerName = name + ApiClient.baseUrl = address + ApiClient.setupConnection() + busyDialog.open() + //StackView.view.push() + } + } + footer: BusyIndicator { + anchors.horizontalCenter: parent.horizontalCenter + } } ServerDiscoveryModel { id: discoveryModel } + StackView.onActivated: { + console.log("Hello") + discoveryModel.refresh() + } + + BusyDialog { + id: busyDialog + anchors.centerIn: Overlay.overlay + title: qsTr("Connecting to %1").arg(selectedServerName) + } + + Connections { + target: ApiClient + onConnectionSuccess: { + busyDialog.close() + stackView.push(Qt.resolvedUrl("LoginPage.qml"), {"loginMessage": loginMessage}) + } + onConnectionFailed: { + busyDialog.close() + } + } + } diff --git a/qtquick/qmldir b/qtquick/qmldir new file mode 100644 index 0000000..6c7ad4e --- /dev/null +++ b/qtquick/qmldir @@ -0,0 +1 @@ +singleton SailfinStyle 1.0 SailfinStyle.qml diff --git a/qtquick/qtquickcontrols2.conf b/qtquick/qtquickcontrols2.conf index 7ef3c8b..9f31dc2 100644 --- a/qtquick/qtquickcontrols2.conf +++ b/qtquick/qtquickcontrols2.conf @@ -1,2 +1,3 @@ [Controls] Style=SailfinStyle +FallbackStyle=Universal