rnhmjoj
/
nheko
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'nheko_loading_spinner' into 'master' 

Nheko loading spinner

See merge request nheko-reborn/nheko!9
This commit is contained in:
Nicolas Werner 2021-07-09 07:48:50 +00:00
parent f5d3804476 16e9332aec
commit c318adbf21
11 changed files with 218 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/qml/MessageView.qml
View File

@ -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 {

6
resources/qml/RoomSettings.qml
View File

@ -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 {

11
resources/qml/TimelineView.qml
View File

@ -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
}

4
resources/qml/UserProfile.qml
View File

@ -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 {

4
resources/qml/device-verification/AwaitingVerificationConfirmation.qml
View File

@ -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 {

5
resources/qml/device-verification/Waiting.qml
View File

@ -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 {

161
resources/qml/ui/Spinner.qml Normal file
View File

@ -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)
}
}
}

26
resources/qml/ui/animations/BlinkAnimation.qml Normal file
View File

@ -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
}
}

2
resources/qml/ui/animations/qmldir Normal file
View File

@ -0,0 +1,2 @@
module im.nheko.UI.Animations
BlinkAnimation 1.0 BlinkAnimation.qml

3
resources/qml/ui/qmldir
View File

@ -1,2 +1,3 @@
module im.nheko.UI
Ripple 1.0 Ripple.qml
Ripple 1.0 Ripple.qml
Spinner 1.0 Spinner.qml

2
resources/res.qrc
View File

@ -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>