Rework the LoadingScreen and HBusyIndicator
This commit is contained in:
miruka
parent
410a42bc59
commit
0a0e11e1f4
80
src/icons/light-thin/loader.svg
Normal file
80
src/icons/light-thin/loader.svg
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created using Krita: http://krita.org -->
|
||||
|
||||
<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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="18pt"
|
||||
height="18pt"
|
||||
viewBox="0 0 18 18"
|
||||
version="1.1"
|
||||
id="svg1304"
|
||||
sodipodi:docname="loader.svg"
|
||||
inkscape:version="">
|
||||
<metadata
|
||||
id="metadata1308">
|
||||
<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>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="640"
|
||||
inkscape:window-height="480"
|
||||
id="namedview1306"
|
||||
showgrid="false"
|
||||
inkscape:snap-object-midpoints="true"
|
||||
inkscape:snap-center="true"
|
||||
inkscape:snap-text-baseline="true"
|
||||
inkscape:snap-page="true"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:zoom="22.627417"
|
||||
inkscape:cx="4.9912351"
|
||||
inkscape:cy="12.313093"
|
||||
inkscape:current-layer="svg1304">
|
||||
<sodipodi:guide
|
||||
position="16.125,8.9765625"
|
||||
orientation="0,1"
|
||||
id="guide1316"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="9,16.382812"
|
||||
orientation="1,0"
|
||||
id="guide1318"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1301" />
|
||||
<path
|
||||
id="shape0"
|
||||
d="M 9,0.07593943 C 4.0716875,0.07593943 0.07593943,4.0716875 0.07593943,9 c 0,4.928312 3.99574807,8.924061 8.92406057,8.924061 4.928312,0 8.924061,-3.995749 8.924061,-8.924061 C 17.924061,4.0716875 13.928312,0.07593943 9,0.07593943 Z"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.15800691;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.11764706"
|
||||
sodipodi:nodetypes="sssss" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.15;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.8669725"
|
||||
d="M 12,0.1015625 C 5.4289167,0.1015625 0.1015625,5.4289167 0.1015625,12 0.1015625,18.571083 5.4289167,23.898437 12,23.898438"
|
||||
transform="scale(0.75)"
|
||||
id="path1310"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="csc" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -1,36 +1,27 @@
|
|||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Shapes 1.12
|
||||
|
||||
BusyIndicator {
|
||||
id: indicator
|
||||
implicitWidth: Math.min(192, Math.max(64, parent.width / 5))
|
||||
implicitHeight: 10
|
||||
implicitWidth: theme ? theme.controls.loader.defaultDimension : 96
|
||||
implicitHeight: implicitWidth
|
||||
|
||||
contentItem: Item {
|
||||
Rectangle {
|
||||
id: circle
|
||||
width: height
|
||||
height: indicator.height
|
||||
radius: height / 2
|
||||
contentItem: HIcon {
|
||||
svgName: "loader"
|
||||
dimension: indicator.width
|
||||
property var pr: dimension
|
||||
colorize: theme ? theme.controls.loader.colorize : "white"
|
||||
mipmap: true
|
||||
|
||||
ColorAnimation on color {
|
||||
// Can't swap direct colors values
|
||||
property string c1: "white"
|
||||
property string c2: theme ? theme.colors.accentText : "cyan"
|
||||
|
||||
id: colorAnimation
|
||||
from: c1
|
||||
to: c2
|
||||
duration: 1000
|
||||
onStopped: {[c1, c2] = [c2, c1]; start()}
|
||||
}
|
||||
|
||||
XAnimator on x {
|
||||
RotationAnimation on rotation {
|
||||
id: rotationAnimation
|
||||
from: 0
|
||||
to: indicator.width - circle.width
|
||||
duration: colorAnimation.duration / 2
|
||||
onStopped: {[from, to] = [to, from]; start()}
|
||||
}
|
||||
to: 360
|
||||
running: true
|
||||
loops: Animation.Infinite
|
||||
duration: theme ? (theme.animationDuration * 6) : 600
|
||||
easing.type: Easing.Linear
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@ HImage {
|
|||
|
||||
source:
|
||||
svgName ?
|
||||
("../../icons/" + theme.preferredIconPack + "/" + svgName + ".svg") :
|
||||
("../../icons/" +
|
||||
(theme ? theme.preferredIconPack : "light-thin") +
|
||||
"/" + svgName + ".svg") :
|
||||
""
|
||||
|
||||
sourceSize.width: svgName ? dimension : 0
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
import QtQuick 2.12
|
||||
import "Base"
|
||||
import "utils.js" as Utils
|
||||
|
||||
HRectangle {
|
||||
color: theme ? theme.controls.box.background : "#0f1222"
|
||||
Behavior on color { HNumberAnimation {} }
|
||||
Item {
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
scale: Math.max(
|
||||
1.6, Math.ceil(parent.parent.width / parent.parent.height)
|
||||
)
|
||||
rotation: 45 * 3
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: Qt.hsla(0.73, 0.25, 0.25, 1) }
|
||||
GradientStop { position: 1.0; color: Qt.hsla(0.52, 1, 0.08, 1) }
|
||||
}
|
||||
}
|
||||
|
||||
HBusyIndicator {
|
||||
anchors.centerIn: parent
|
||||
width: Math.min(160, parent.width - 16, parent.height - 16)
|
||||
height: width
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ HPage {
|
|||
Layout.preferredHeight: childrenRect.height
|
||||
|
||||
HLoader {
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
source: ready ?
|
||||
modelData :
|
||||
|
|
|
|||
|
|
@ -79,6 +79,10 @@ colors:
|
|||
// Generic UI controls
|
||||
|
||||
controls:
|
||||
loader:
|
||||
int defaultDimension: 80
|
||||
color colorize: "white"
|
||||
|
||||
box:
|
||||
color background: colors.strongBackground
|
||||
int radius: theme.radius
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user