Initial work on creating a custom style

qtquick/SailfinStyle/Page.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Templates 2.12 as T
+
+T.Page {
+
+}

qtquick/SailfinStyle/SailfinStyle.qml

@@ -0,0 +1,20 @@
+pragma Singleton
+import QtQuick 2.12
+
+QtObject {
+    readonly property real scaleFactor: 1.0
+    readonly property real unit: 8.0 * scaleFactor
+    readonly property real smallPadding: unit
+    readonly property real mediumPadding: 2 * unit
+    readonly property real largePadding: 3 * unit
+    readonly property real hugePadding: 4 * unit
+    readonly property real enormousPadding: 5 * unit
+
+    // Fonts
+    readonly property real fontMultiplier: 1.0
+    readonly property real fontSizeMedium: 3 * unit * fontMultiplier
+    readonly property real fontSizeLarge: 4 * unit * fontMultiplier
+
+    // Specific controls
+    readonly property real toolbarHeight: 8 * unit
+}

qtquick/SailfinStyle/ToolBar.qml

@@ -0,0 +1,45 @@
+import QtQuick 2.12
+import QtGraphicalEffects 1.12
+import QtQuick.Templates 2.12 as T
+
+import "."
+
+T.ToolBar {
+    horizontalPadding: SailfinStyle.mediumPadding
+    topPadding: SailfinStyle.smallPadding
+    bottomPadding: implicitBackgroundHeight / 3 * 2 + SailfinStyle.smallPadding
+
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
+
+    contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
+    contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
+
+    background: Item {
+        implicitHeight: SailfinStyle.toolbarHeight
+        // FIXME: SVG is being "cut", show a rectangle as background as workaround.
+        Rectangle {
+            anchors {
+                left: parent.left; right: parent.right; top: parent.top; bottom: parent.bottom;
+                bottomMargin: 75
+            }
+            color: "crimson"
+        }
+
+        BorderImage {
+            id: backgroundImage
+            anchors.fill: parent
+            border { left: 0; right: 0; bottom: 75; top: 10; }
+            horizontalTileMode: BorderImage.Stretch
+            verticalTileMode: BorderImage.Stretch
+            source: Qt.resolvedUrl("assets/ToolBarBackground.svg")
+            visible: false
+        }
+
+        ColorOverlay {
+            anchors.fill: backgroundImage
+            source: backgroundImage
+            color: "crimson"
+        }
+    }
+}

qtquick/SailfinStyle/assets/ToolBarBackground.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="500" height="75" version="1.1" viewBox="0 0 500 75" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <radialGradient id="radialGradient2446" cx="250" cy="-203.06" r="250" gradientTransform="matrix(-1.16 1.5346e-8 0 -.14 540 -3.4277)" gradientUnits="userSpaceOnUse">
+   <stop stop-opacity=".74902" offset="0"/>
+   <stop stop-opacity="0" offset="1"/>
+  </radialGradient>
+ </defs>
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g>
+  <path d="m500-5h-500v30c125 25 375 25 500 0z" fill="#fff"/>
+  <path d="m500 75h-500l1.5984e-6 -50c125 25 375 25 500 0z" fill="url(#radialGradient2446)"/>
+ </g>
+</svg>

qtquick/SailfinStyle/qmldir

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

qtquick/qml.qrc

@@ -3,5 +3,12 @@
         <file>qml/main.qml</file>
         <file>qml/components/Background.qml</file>
         <file>assets/img/particle.png</file>
+        <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>
     </qresource>
 </RCC>

qtquick/qml/components/Background.qml

@@ -2,7 +2,23 @@ import QtQuick 2.12
 import QtQuick.Particles 2.12
 
 Rectangle {
-    color: "black"
+    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
@@ -10,27 +26,91 @@ Rectangle {
 
     Emitter {
         id: emitter
-        anchors.fill: parent
+        anchors.centerIn: parent
+        width: parent.width * 0.5
+        height: parent.height * 0.5
         system: particleSystem
-        emitRate: width * height / (lifeSpan * 100)
+        emitRate: Math.sqrt(width * height) * 30 / (lifeSpan)
         lifeSpan: 10000
-        lifeSpanVariation: 500
-        size: 16
-        endSize: 64
+        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: 100
+        pace: 300
         affectedParameter: Wander.Velocity
-        xVariance: 300
-        yVariance: 300
+        xVariance: 1000
+        yVariance: 1000
     }
 
 
     ImageParticle {
-        source: "/assets/img/particle.png"
+        //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();
     }
 }

qtquick/qml/main.qml

@@ -1,14 +1,33 @@
 import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtGraphicalEffects 1.12
 import QtQuick.Window 2.12
 
-import "components"
+import nl.netsoj.chris.Jellyfin 1.0
 
-Window {
+import "components"
+import "../SailfinStyle"
+
+ApplicationWindow {
     width: 600
     height: 600
     visible: true
 
-    Background {
+    background: Background {
         anchors.fill: parent
     }
+
+    StackView {
+        id: pageStack
+        anchors.fill: parent
+    }
+
+    Connections {
+        target: ApiClient
+        onSetupRequired: pageStack.push(Qt.resolvedUrl("pages/setup/ServerSelectPage.qml"));
+    }
+
+    Component.onCompleted: {
+        ApiClient.restoreSavedSession()
+    }
 }

qtquick/qml/pages/setup/ServerSelectPage.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import nl.netsoj.chris.Jellyfin 1.0
+
+import "../../../SailfinStyle"
+
+Page {
+    header: ToolBar {
+        Label {
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.pixelSize: SailfinStyle.fontSizeLarge
+            text: qsTr("Select a server")
+        }
+    }
+    BusyIndicator {
+        anchors.centerIn: parent
+    }
+
+    ServerDiscoveryModel {
+        id: discoveryModel
+    }
+
+}

qtquick/qtquickcontrols2.conf

@@ -0,0 +1,2 @@
+[Controls]
+Style=SailfinStyle

qtquick/src/main.cpp

@@ -1,3 +1,8 @@
+#define QT_DEBUG
+#define QT_QML_DEBUG
+#include <QtQuick>
+//#endif
+
 #include <QDebug>
 #include <QQmlApplicationEngine>
 #include <QGuiApplication>