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
+        lifeSpanVariation: 1000
-        size: 16
+        size: 12
-        endSize: 64
+        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
+        xVariance: 1000
-        yVariance: 300
+        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>

ui-workfiles/corner-button.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="72"
+   height="64"
+   viewBox="0 0 19.05 16.933334"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="corner-button.svg">
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient29437">
+      <stop
+         style="stop-color:#030303;stop-opacity:1"
+         offset="0"
+         id="stop29433" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="1"
+         id="stop29435" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient29437"
+       id="radialGradient29439"
+       cx="12.7"
+       cy="13.758333"
+       fx="12.7"
+       fy="13.758333"
+       r="6.35"
+       gradientTransform="matrix(-4.7852795e-8,-2.3333332,2,-4.0030534e-8,-14.816666,44.449999)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.1071711"
+     inkscape:cx="32.340637"
+     inkscape:cy="14.618398"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="true"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="36"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid833"
+       empspacing="8" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Laag 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 2.1166667,19.05 V 14.816667 C 2.1166667,8.4666667 6.3500001,2.1166667 12.7,2.1166667 h 8.466667 V 19.05 Z"
+       id="path835"
+       sodipodi:nodetypes="cccccc" />
+    <path
+       style="fill:url(#radialGradient29439);fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 0,14.816667 2.1166669,0 C 2.1166669,8.4666674 6.3500001,2.1166673 12.7,2.1166673 L 12.7,0 H 0 Z"
+       id="path835-3"
+       sodipodi:nodetypes="cccccc" />
+  </g>
+</svg>

ui-workfiles/toolbar.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="75"
+   viewBox="0 0 500 75"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="toolbar.svg">
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient2435">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.74901962"
+         offset="0"
+         id="stop2431" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0"
+         offset="1"
+         id="stop2433" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2435"
+       id="radialGradient2446"
+       cx="249.99998"
+       cy="-203.05522"
+       fx="249.99998"
+       fy="-203.05522"
+       r="250.00002"
+       gradientTransform="matrix(-1.16,1.5345986e-8,0,-0.14000001,539.99998,-3.4277401)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.7083266"
+     inkscape:cx="39.227241"
+     inkscape:cy="107.04381"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="true"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     viewbox-height="100"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="36"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid842"
+       spacingx="1.3229167"
+       spacingy="1.3229167" />
+    <sodipodi:guide
+       position="509.32293,52.916667"
+       orientation="1,0"
+       id="guide2409" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Laag 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 500.00001,-5.0000001 H 0 V 25.000001 c 125,25.000001 375.00001,25.000001 500.00001,0 z"
+       id="path844"
+       sodipodi:nodetypes="ccccc"
+       inkscape:label="header" />
+    <path
+       style="fill:url(#radialGradient2446);fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 500.00001,75.000002 H 0 L 1.5984261e-6,25.000001 C 125,50.000002 375.00001,50.000002 500.00001,25.000001 Z"
+       id="path844-3"
+       sodipodi:nodetypes="ccccc"
+       inkscape:label="headerShadow" />
+  </g>
+</svg>