Skip to content
Snippets Groups Projects
Commit c318adbf authored by Nicolas Werner's avatar Nicolas Werner
Browse files

Merge branch 'nheko_loading_spinner' into 'master' 

Nheko loading spinner

See merge request !9
parents f5d38044 16e9332a
No related branches found
No related tags found
1 merge request!9Nheko loading spinner
Pipeline #1353 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 218 additions and 15 deletions
resources/qml/MessageView.qml
+ 5
− 4
View file @ c318adbf
......@@ -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 {
......
resources/qml/RoomSettings.qml
+ 4
− 2
View file @ c318adbf
......@@ -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 {
......
resources/qml/TimelineView.qml
+ 7
− 4
View file @ c318adbf
......@@ -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
}
......
resources/qml/UserProfile.qml
+ 3
− 1
View file @ c318adbf
......@@ -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 {
......
resources/qml/device-verification/AwaitingVerificationConfirmation.qml
+ 3
− 1
View file @ c318adbf
......@@ -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 {
......
resources/qml/device-verification/Waiting.qml
+ 3
− 2
View file @ c318adbf
......@@ -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 {
......
resources/qml/ui/Spinner.qml 0 → 100644
+ 161
− 0
View file @ c318adbf
// 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)
}
}
}
resources/qml/ui/animations/BlinkAnimation.qml 0 → 100644
+ 26
− 0
View file @ c318adbf
// 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
}
}
\ No newline at end of file
resources/qml/ui/animations/qmldir 0 → 100644
+ 2
− 0
View file @ c318adbf
module im.nheko.UI.Animations
BlinkAnimation 1.0 BlinkAnimation.qml
resources/qml/ui/qmldir
+ 2
− 1
View file @ c318adbf
module im.nheko.UI
Ripple 1.0 Ripple.qml
\ No newline at end of file
Ripple 1.0 Ripple.qml
Spinner 1.0 Spinner.qml
\ No newline at end of file
resources/res.qrc
+ 2
− 0
View file @ c318adbf
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment