Add login page

This commit is contained in:
Chris Josten 2021-03-07 16:26:13 +01:00
parent fb60cf13de
commit 56d7c1486e
13 changed files with 246 additions and 121 deletions

View File

@ -1,5 +1,6 @@
import QtQuick 2.12
import QtQuick.Templates 2.12 as T
import ".."
T.Page {

View File

@ -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

View File

@ -1,4 +1,3 @@
module SailfinStyle
depends QtQuick.Controls 2.12
singleton SailfinStyle 1.0 SailfinStyle.qml

View File

@ -6,9 +6,13 @@
<file>qtquickcontrols2.conf</file>
<file>SailfinStyle/assets/ToolBarBackground.svg</file>
<file>SailfinStyle/qmldir</file>
<file>SailfinStyle/SailfinStyle.qml</file>
<file>SailfinStyle/ToolBar.qml</file>
<file>qml/pages/setup/ServerSelectPage.qml</file>
<file>SailfinStyle/Page.qml</file>
<file>SailfinStyle.qml</file>
<file>qmldir</file>
<file>qml/components/+sailfinstyle/Background.qml</file>
<file>qml/components/BusyDialog.qml</file>
<file>qml/pages/setup/LoginPage.qml</file>
</qresource>
</RCC>

View File

@ -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();
}
}

View File

@ -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() {}
}

View File

@ -0,0 +1,10 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
Dialog {
modal: true
BusyIndicator {
anchors.centerIn: parent
running: true
}
}

View File

@ -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 {

View File

@ -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
}
}
}

View File

@ -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()
}
}
}

1
qtquick/qmldir Normal file
View File

@ -0,0 +1 @@
singleton SailfinStyle 1.0 SailfinStyle.qml

View File

@ -1,2 +1,3 @@
[Controls]
Style=SailfinStyle
FallbackStyle=Universal