Merge branch 'nheko_loading_spinner' into 'master'
Nheko loading spinner See merge request nheko-reborn/nheko!9
This commit is contained in:
commit
c318adbf21
|
@ -4,6 +4,8 @@
|
|||
|
||||
import "./delegates"
|
||||
import "./emoji"
|
||||
import "./ui"
|
||||
|
||||
import Qt.labs.platform 1.1 as Platform
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick 2.12
|
||||
|
@ -404,14 +406,13 @@ ScrollView {
|
|||
|
||||
}
|
||||
|
||||
footer: BusyIndicator {
|
||||
footer: Spinner {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
running: chat.model && chat.model.paginationInProgress
|
||||
height: 50
|
||||
width: 50
|
||||
foreground: Nheko.colors.mid
|
||||
visible: chat.model && chat.model.paginationInProgress
|
||||
z: 3
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Platform.Menu {
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import "./ui"
|
||||
import Qt.labs.platform 1.1 as Platform
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.3
|
||||
|
@ -49,10 +50,11 @@ ApplicationWindow {
|
|||
}
|
||||
}
|
||||
|
||||
BusyIndicator {
|
||||
Spinner {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
running: roomSettings.isLoading
|
||||
visible: roomSettings.isLoading
|
||||
foreground: Nheko.colors.mid
|
||||
running: roomSettings.isLoading
|
||||
}
|
||||
|
||||
Text {
|
||||
|
|
|
@ -6,6 +6,8 @@ import "./delegates"
|
|||
import "./device-verification"
|
||||
import "./emoji"
|
||||
import "./voip"
|
||||
import "./ui"
|
||||
|
||||
import Qt.labs.platform 1.1 as Platform
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick 2.9
|
||||
|
@ -29,12 +31,13 @@ Item {
|
|||
color: Nheko.colors.text
|
||||
}
|
||||
|
||||
BusyIndicator {
|
||||
visible: running
|
||||
Spinner {
|
||||
visible: TimelineManager.isInitialSync
|
||||
anchors.centerIn: parent
|
||||
foreground: Nheko.colors.mid
|
||||
running: TimelineManager.isInitialSync
|
||||
height: 200
|
||||
width: 200
|
||||
// height is somewhat arbitrary here... don't set width because width scales w/ height
|
||||
height: parent.height / 16
|
||||
z: 3
|
||||
}
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import "./device-verification"
|
||||
import "./ui"
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.3
|
||||
import QtQuick.Layouts 1.2
|
||||
|
@ -47,10 +48,11 @@ ApplicationWindow {
|
|||
onClicked: profile.isSelf ? profile.changeAvatar() : TimelineManager.openImageOverlay(profile.avatarUrl, "")
|
||||
}
|
||||
|
||||
BusyIndicator {
|
||||
Spinner {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
running: profile.isLoading
|
||||
visible: profile.isLoading
|
||||
foreground: Nheko.colors.mid
|
||||
}
|
||||
|
||||
Text {
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import "../ui"
|
||||
import QtQuick 2.3
|
||||
import QtQuick.Controls 2.3
|
||||
import QtQuick.Layouts 1.10
|
||||
|
@ -25,8 +26,9 @@ Pane {
|
|||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
BusyIndicator {
|
||||
Spinner {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
foreground: Nheko.colors.mid
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import "../ui"
|
||||
import QtQuick 2.3
|
||||
import QtQuick.Controls 2.3
|
||||
import QtQuick.Layouts 1.10
|
||||
|
@ -34,9 +35,9 @@ Pane {
|
|||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
BusyIndicator {
|
||||
Spinner {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
palette: Nheko.colors
|
||||
foreground: Nheko.colors.mid
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
|
|
|
@ -0,0 +1,161 @@
|
|||
// SPDX-FileCopyrightText: 2021 Nheko Contributors
|
||||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.12
|
||||
import QtGraphicalEffects 1.12
|
||||
|
||||
import "./animations"
|
||||
|
||||
Item {
|
||||
id: spinner
|
||||
|
||||
property int spacing: 0
|
||||
property bool running: true
|
||||
property var foreground: "#333"
|
||||
readonly property int barCount: 6
|
||||
readonly property real a: Math.PI / 6
|
||||
readonly property var colors: ["#c0def5", "#87aade", "white"]
|
||||
readonly property var anims: [anim1, anim2, anim3, anim4, anim5, anim6]
|
||||
readonly property int pauseDuration: barCount * 150
|
||||
readonly property int glowDuration: 300
|
||||
|
||||
height: 40
|
||||
width: barCount * (height * 0.375)
|
||||
|
||||
Row {
|
||||
id: row
|
||||
|
||||
Rectangle {
|
||||
id: rect1
|
||||
|
||||
width: ((spinner.width / spinner.barCount) - (spinner.spacing)) * 1.5
|
||||
height: spinner.height / 3.5
|
||||
color: "white"
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rect2
|
||||
|
||||
width: (spinner.width / spinner.barCount) - spinner.spacing
|
||||
height: spinner.height
|
||||
color: spinner.colors[0]
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rect3
|
||||
|
||||
width: (spinner.width / spinner.barCount) - spinner.spacing
|
||||
height: spinner.height
|
||||
color: spinner.colors[1]
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rect4
|
||||
|
||||
width: (spinner.width / spinner.barCount) - spinner.spacing
|
||||
height: spinner.height
|
||||
color: spinner.colors[2]
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rect5
|
||||
|
||||
width: (spinner.width / (spinner.barCount + 1)) - spinner.spacing
|
||||
height: spinner.height / 3.5
|
||||
color: "white"
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rect6
|
||||
|
||||
width: (spinner.width / spinner.barCount) - spinner.spacing
|
||||
height: spinner.height
|
||||
color: "white"
|
||||
}
|
||||
|
||||
BlinkAnimation {
|
||||
id: anim1
|
||||
target: rect1
|
||||
pauseDuration: spinner.pauseDuration
|
||||
glowDuration: spinner.glowDuration
|
||||
|
||||
loops: Animation.Infinite
|
||||
}
|
||||
|
||||
BlinkAnimation {
|
||||
id: anim2
|
||||
target: rect2
|
||||
pauseDuration: spinner.pauseDuration
|
||||
glowDuration: spinner.glowDuration
|
||||
}
|
||||
|
||||
BlinkAnimation {
|
||||
id: anim3
|
||||
target: rect3
|
||||
pauseDuration: spinner.pauseDuration
|
||||
glowDuration: spinner.glowDuration
|
||||
|
||||
}
|
||||
|
||||
BlinkAnimation {
|
||||
id: anim4
|
||||
target: rect4
|
||||
pauseDuration: spinner.pauseDuration
|
||||
glowDuration: spinner.glowDuration
|
||||
|
||||
}
|
||||
|
||||
BlinkAnimation {
|
||||
id: anim5
|
||||
target: rect5
|
||||
pauseDuration: spinner.pauseDuration
|
||||
glowDuration: spinner.glowDuration
|
||||
}
|
||||
|
||||
BlinkAnimation {
|
||||
id: anim6
|
||||
target: rect6
|
||||
pauseDuration: spinner.pauseDuration
|
||||
glowDuration: spinner.glowDuration
|
||||
}
|
||||
|
||||
transform: Matrix4x4 {
|
||||
matrix: Qt.matrix4x4(Math.cos(spinner.a), -Math.sin(spinner.a), 0, 0, 0, Math.cos(spinner.a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Timer {
|
||||
// ----- Private Properties ----- //
|
||||
property int _barIndex: 0
|
||||
|
||||
interval: 80
|
||||
repeat: true
|
||||
running: spinner.running
|
||||
onTriggered: {
|
||||
if (_barIndex === spinner.barCount) {
|
||||
_barIndex = 0;
|
||||
stop();
|
||||
} else {
|
||||
anims[_barIndex].start();
|
||||
_barIndex++;
|
||||
}
|
||||
}
|
||||
Component.onCompleted: start()
|
||||
}
|
||||
|
||||
Glow {
|
||||
anchors.fill: row
|
||||
radius: 14
|
||||
samples: 17
|
||||
color: spinner.foreground
|
||||
source: row
|
||||
|
||||
transform: Matrix4x4 {
|
||||
matrix: Qt.matrix4x4(Math.cos(spinner.a), -Math.sin(spinner.a), 0, 0, 0, Math.cos(spinner.a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
// SPDX-FileCopyrightText: 2021 Nheko Contributors
|
||||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.12
|
||||
import QtGraphicalEffects 1.12
|
||||
|
||||
SequentialAnimation {
|
||||
property alias target: numberAnimation.target
|
||||
property alias glowDuration: numberAnimation.duration
|
||||
property alias pauseDuration: pauseAnimation.duration
|
||||
|
||||
loops: Animation.Infinite
|
||||
|
||||
NumberAnimation {
|
||||
id: numberAnimation
|
||||
property: "opacity"
|
||||
from: 0
|
||||
to: 1
|
||||
}
|
||||
|
||||
PauseAnimation {
|
||||
id: pauseAnimation
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,2 @@
|
|||
module im.nheko.UI.Animations
|
||||
BlinkAnimation 1.0 BlinkAnimation.qml
|
|
@ -1,2 +1,3 @@
|
|||
module im.nheko.UI
|
||||
Ripple 1.0 Ripple.qml
|
||||
Spinner 1.0 Spinner.qml
|
|
@ -171,6 +171,8 @@
|
|||
<file>qml/device-verification/Success.qml</file>
|
||||
<file>qml/dialogs/InputDialog.qml</file>
|
||||
<file>qml/ui/Ripple.qml</file>
|
||||
<file>qml/ui/Spinner.qml</file>
|
||||
<file>qml/ui/animations/BlinkAnimation.qml</file>
|
||||
<file>qml/voip/ActiveCallBar.qml</file>
|
||||
<file>qml/voip/CallDevices.qml</file>
|
||||
<file>qml/voip/CallInvite.qml</file>
|
||||
|
|
Loading…
Reference in New Issue