From fb60cf13debb5b31234c009fa4f0a57420a7efe7 Mon Sep 17 00:00:00 2001 From: Henk Kalkwater Date: Thu, 4 Mar 2021 17:26:51 +0100 Subject: [PATCH] Initial work on creating a custom style --- qtquick/SailfinStyle/Page.qml | 6 + qtquick/SailfinStyle/SailfinStyle.qml | 20 ++++ qtquick/SailfinStyle/ToolBar.qml | 45 ++++++++ .../SailfinStyle/assets/ToolBarBackground.svg | 22 ++++ qtquick/SailfinStyle/qmldir | 4 + qtquick/qml.qrc | 7 ++ qtquick/qml/components/Background.qml | 100 ++++++++++++++-- qtquick/qml/main.qml | 25 +++- qtquick/qml/pages/setup/ServerSelectPage.qml | 24 ++++ qtquick/qtquickcontrols2.conf | 2 + qtquick/src/main.cpp | 5 + ui-workfiles/corner-button.svg | 97 ++++++++++++++++ ui-workfiles/toolbar.svg | 107 ++++++++++++++++++ 13 files changed, 451 insertions(+), 13 deletions(-) create mode 100644 qtquick/SailfinStyle/Page.qml create mode 100644 qtquick/SailfinStyle/SailfinStyle.qml create mode 100644 qtquick/SailfinStyle/ToolBar.qml create mode 100644 qtquick/SailfinStyle/assets/ToolBarBackground.svg create mode 100644 qtquick/SailfinStyle/qmldir create mode 100644 qtquick/qml/pages/setup/ServerSelectPage.qml create mode 100644 qtquick/qtquickcontrols2.conf create mode 100644 ui-workfiles/corner-button.svg create mode 100644 ui-workfiles/toolbar.svg diff --git a/qtquick/SailfinStyle/Page.qml b/qtquick/SailfinStyle/Page.qml new file mode 100644 index 0000000..2380c62 --- /dev/null +++ b/qtquick/SailfinStyle/Page.qml @@ -0,0 +1,6 @@ +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T + +T.Page { + +} diff --git a/qtquick/SailfinStyle/SailfinStyle.qml b/qtquick/SailfinStyle/SailfinStyle.qml new file mode 100644 index 0000000..b19db14 --- /dev/null +++ b/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 +} diff --git a/qtquick/SailfinStyle/ToolBar.qml b/qtquick/SailfinStyle/ToolBar.qml new file mode 100644 index 0000000..ce5d534 --- /dev/null +++ b/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" + } + } +} diff --git a/qtquick/SailfinStyle/assets/ToolBarBackground.svg b/qtquick/SailfinStyle/assets/ToolBarBackground.svg new file mode 100644 index 0000000..868ba0e --- /dev/null +++ b/qtquick/SailfinStyle/assets/ToolBarBackground.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/qtquick/SailfinStyle/qmldir b/qtquick/SailfinStyle/qmldir new file mode 100644 index 0000000..8c5d182 --- /dev/null +++ b/qtquick/SailfinStyle/qmldir @@ -0,0 +1,4 @@ +module SailfinStyle +depends QtQuick.Controls 2.12 + +singleton SailfinStyle 1.0 SailfinStyle.qml diff --git a/qtquick/qml.qrc b/qtquick/qml.qrc index a82a7b3..2926ffa 100644 --- a/qtquick/qml.qrc +++ b/qtquick/qml.qrc @@ -3,5 +3,12 @@ qml/main.qml qml/components/Background.qml assets/img/particle.png + qtquickcontrols2.conf + SailfinStyle/assets/ToolBarBackground.svg + SailfinStyle/qmldir + SailfinStyle/SailfinStyle.qml + SailfinStyle/ToolBar.qml + qml/pages/setup/ServerSelectPage.qml + SailfinStyle/Page.qml diff --git a/qtquick/qml/components/Background.qml b/qtquick/qml/components/Background.qml index f760e91..4ebb171 100644 --- a/qtquick/qml/components/Background.qml +++ b/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(); } } diff --git a/qtquick/qml/main.qml b/qtquick/qml/main.qml index d171b11..1ee0590 100644 --- a/qtquick/qml/main.qml +++ b/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() + } } diff --git a/qtquick/qml/pages/setup/ServerSelectPage.qml b/qtquick/qml/pages/setup/ServerSelectPage.qml new file mode 100644 index 0000000..9fe0b52 --- /dev/null +++ b/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 + } + +} diff --git a/qtquick/qtquickcontrols2.conf b/qtquick/qtquickcontrols2.conf new file mode 100644 index 0000000..7ef3c8b --- /dev/null +++ b/qtquick/qtquickcontrols2.conf @@ -0,0 +1,2 @@ +[Controls] +Style=SailfinStyle diff --git a/qtquick/src/main.cpp b/qtquick/src/main.cpp index a1fbc5c..e00bee0 100644 --- a/qtquick/src/main.cpp +++ b/qtquick/src/main.cpp @@ -1,3 +1,8 @@ +#define QT_DEBUG +#define QT_QML_DEBUG +#include +//#endif + #include #include #include diff --git a/ui-workfiles/corner-button.svg b/ui-workfiles/corner-button.svg new file mode 100644 index 0000000..07bf893 --- /dev/null +++ b/ui-workfiles/corner-button.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/ui-workfiles/toolbar.svg b/ui-workfiles/toolbar.svg new file mode 100644 index 0000000..047521d --- /dev/null +++ b/ui-workfiles/toolbar.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + +