mirror of
https://github.com/HenkKalkwater/harbour-sailfin.git
synced 2024-11-22 09:15:18 +00:00
Initial work on creating a custom style
This commit is contained in:
parent
4453492204
commit
fb60cf13de
6
qtquick/SailfinStyle/Page.qml
Normal file
6
qtquick/SailfinStyle/Page.qml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import QtQuick 2.12
|
||||
import QtQuick.Templates 2.12 as T
|
||||
|
||||
T.Page {
|
||||
|
||||
}
|
||||
20
qtquick/SailfinStyle/SailfinStyle.qml
Normal file
20
qtquick/SailfinStyle/SailfinStyle.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
45
qtquick/SailfinStyle/ToolBar.qml
Normal file
45
qtquick/SailfinStyle/ToolBar.qml
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
22
qtquick/SailfinStyle/assets/ToolBarBackground.svg
Normal file
22
qtquick/SailfinStyle/assets/ToolBarBackground.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1,001 B |
4
qtquick/SailfinStyle/qmldir
Normal file
4
qtquick/SailfinStyle/qmldir
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
module SailfinStyle
|
||||
depends QtQuick.Controls 2.12
|
||||
|
||||
singleton SailfinStyle 1.0 SailfinStyle.qml
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
qtquick/qml/pages/setup/ServerSelectPage.qml
Normal file
24
qtquick/qml/pages/setup/ServerSelectPage.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
2
qtquick/qtquickcontrols2.conf
Normal file
2
qtquick/qtquickcontrols2.conf
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[Controls]
|
||||
Style=SailfinStyle
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
#define QT_DEBUG
|
||||
#define QT_QML_DEBUG
|
||||
#include <QtQuick>
|
||||
//#endif
|
||||
|
||||
#include <QDebug>
|
||||
#include <QQmlApplicationEngine>
|
||||
#include <QGuiApplication>
|
||||
|
|
|
|||
97
ui-workfiles/corner-button.svg
Normal file
97
ui-workfiles/corner-button.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
107
ui-workfiles/toolbar.svg
Normal file
107
ui-workfiles/toolbar.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Reference in a new issue