From 07a922dc63428ae9a73ddbb3874d0334ce0c10b4 Mon Sep 17 00:00:00 2001 From: Joseph Donofry Date: Thu, 11 Mar 2021 23:09:57 -0500 Subject: [PATCH 1/6] Add Nheko logo QML Spinner --- resources/qml/TimelineView.qml | 9 +- resources/qml/ui/Spinner.qml | 225 +++++++++++++++++++++++++++++++++ resources/res.qrc | 1 + 3 files changed, 232 insertions(+), 3 deletions(-) create mode 100644 resources/qml/ui/Spinner.qml diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index 095103fa..a4800f39 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -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 { + Spinner { visible: running anchors.centerIn: parent + foreground: timelineRoot.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 } diff --git a/resources/qml/ui/Spinner.qml b/resources/qml/ui/Spinner.qml new file mode 100644 index 00000000..29160763 --- /dev/null +++ b/resources/qml/ui/Spinner.qml @@ -0,0 +1,225 @@ +// SPDX-FileCopyrightText: 2021 Nheko Contributors +// +// SPDX-License-Identifier: GPL-3.0-or-later + +import QtQuick 2.12 +import QtGraphicalEffects 1.12 + +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] + + 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" + } + + SequentialAnimation { + id: anim1 + + loops: Animation.Infinite + + NumberAnimation { + target: rect1 + property: "opacity" + from: 0 + to: 1 + duration: 300 + } + + PauseAnimation { + duration: spinner.barCount * 150 + } + + } + + SequentialAnimation { + id: anim2 + + loops: Animation.Infinite + + NumberAnimation { + target: rect2 + property: "opacity" + from: 0 + to: 1 + duration: 300 + } + + PauseAnimation { + duration: spinner.barCount * 150 + } + + } + + SequentialAnimation { + id: anim3 + + loops: Animation.Infinite + + NumberAnimation { + target: rect3 + property: "opacity" + from: 0 + to: 1 + duration: 300 + } + + PauseAnimation { + duration: spinner.barCount * 150 + } + + } + + SequentialAnimation { + id: anim4 + + loops: Animation.Infinite + + NumberAnimation { + target: rect4 + property: "opacity" + from: 0 + to: 1 + duration: 300 + } + + PauseAnimation { + duration: spinner.barCount * 150 + } + + } + + SequentialAnimation { + id: anim5 + + loops: Animation.Infinite + + NumberAnimation { + target: rect5 + property: "opacity" + from: 0 + to: 1 + duration: 300 + } + + PauseAnimation { + duration: spinner.barCount * 150 + } + + } + + SequentialAnimation { + id: anim6 + + loops: Animation.Infinite + + NumberAnimation { + target: rect6 + property: "opacity" + from: 0 + to: 1 + duration: 300 + } + + PauseAnimation { + duration: spinner.barCount * 150 + } + + } + + 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) + } + + } + +} diff --git a/resources/res.qrc b/resources/res.qrc index 531e9be2..8f24d33b 100644 --- a/resources/res.qrc +++ b/resources/res.qrc @@ -170,6 +170,7 @@ qml/device-verification/Success.qml qml/dialogs/InputDialog.qml qml/ui/Ripple.qml + qml/ui/Spinner.qml qml/voip/ActiveCallBar.qml qml/voip/CallDevices.qml qml/voip/CallInvite.qml From f859937b6553a6ea4e5e8ffdba9170ea474db2a0 Mon Sep 17 00:00:00 2001 From: Joseph Donofry Date: Sun, 14 Mar 2021 19:22:33 -0400 Subject: [PATCH 2/6] Change variable for running --- resources/qml/TimelineView.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index a4800f39..2e267b8c 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -32,7 +32,7 @@ Item { } Spinner { - visible: running + visible: TimelineManager.isInitialSync anchors.centerIn: parent foreground: timelineRoot.colors.mid running: TimelineManager.isInitialSync From 284ca27fdc188d32f7638282818e31b21b02cc17 Mon Sep 17 00:00:00 2001 From: Joseph Donofry Date: Wed, 9 Jun 2021 19:01:49 -0400 Subject: [PATCH 3/6] Add nheko logo spinner to relevant places in UI --- resources/qml/MessageView.qml | 9 +-- resources/qml/RoomSettings.qml | 12 +++- resources/qml/TimelineView.qml | 2 +- resources/qml/UserProfile.qml | 4 +- .../AwaitingVerificationConfirmation.qml | 4 +- resources/qml/device-verification/Waiting.qml | 5 +- resources/qml/ui/EmojiEmitter.qml | 60 +++++++++++++++++++ 7 files changed, 85 insertions(+), 11 deletions(-) create mode 100644 resources/qml/ui/EmojiEmitter.qml diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml index 176905db..a3a80b93 100644 --- a/resources/qml/MessageView.qml +++ b/resources/qml/MessageView.qml @@ -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 { diff --git a/resources/qml/RoomSettings.qml b/resources/qml/RoomSettings.qml index 1f7fe5de..b9830386 100644 --- a/resources/qml/RoomSettings.qml +++ b/resources/qml/RoomSettings.qml @@ -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,17 @@ ApplicationWindow { } } - BusyIndicator { + // BusyIndicator { + // Layout.alignment: Qt.AlignHCenter + // running: roomSettings.isLoading + // visible: roomSettings.isLoading + // } + + Spinner { Layout.alignment: Qt.AlignHCenter - running: roomSettings.isLoading visible: roomSettings.isLoading + foreground: Nheko.colors.mid + running: roomSettings.isLoading } Text { diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index 2e267b8c..5e5eccab 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -34,7 +34,7 @@ Item { Spinner { visible: TimelineManager.isInitialSync anchors.centerIn: parent - foreground: timelineRoot.colors.mid + foreground: Nheko.colors.mid running: TimelineManager.isInitialSync // height is somewhat arbitrary here... don't set width because width scales w/ height height: parent.height / 16 diff --git a/resources/qml/UserProfile.qml b/resources/qml/UserProfile.qml index 21f34f15..826d3165 100644 --- a/resources/qml/UserProfile.qml +++ b/resources/qml/UserProfile.qml @@ -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 { diff --git a/resources/qml/device-verification/AwaitingVerificationConfirmation.qml b/resources/qml/device-verification/AwaitingVerificationConfirmation.qml index a6a7f027..91306140 100644 --- a/resources/qml/device-verification/AwaitingVerificationConfirmation.qml +++ b/resources/qml/device-verification/AwaitingVerificationConfirmation.qml @@ -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 { diff --git a/resources/qml/device-verification/Waiting.qml b/resources/qml/device-verification/Waiting.qml index c521503b..e1401a47 100644 --- a/resources/qml/device-verification/Waiting.qml +++ b/resources/qml/device-verification/Waiting.qml @@ -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 { diff --git a/resources/qml/ui/EmojiEmitter.qml b/resources/qml/ui/EmojiEmitter.qml new file mode 100644 index 00000000..953b0352 --- /dev/null +++ b/resources/qml/ui/EmojiEmitter.qml @@ -0,0 +1,60 @@ +import QtQuick 2.0 +import QtQuick.Particles 2.0 + +Item { + id: bg + + readonly property int velocity: 50 + + ParticleSystem { + id: particleSys + } + + Emitter { + id: particles + + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + width: parent.width + system: particleSys + emitRate: 10 + lifeSpan: (parent.height / bg.velocity) * 1000 //8000 + lifeSpanVariation: 1000 + maximumEmitted: 1000 + size: 5 + sizeVariation: 15 + + velocity: AngleDirection { + angle: 90 + angleVariation: 10 + magnitude: bg.velocity + } + + } + + ItemParticle { + id: particle + + system: particleSys + delegate: itemDelegate + } + + Component { + id: itemDelegate + + Item { + id: container + + x: bg.width / 2 + y: 0 + + Text { + anchors.fill: parent + text: "🎉" + } + + } + + } + +} From 425f02b80045f479a4624ddae8ed901b70201ebd Mon Sep 17 00:00:00 2001 From: Joseph Donofry Date: Thu, 8 Jul 2021 21:28:10 -0400 Subject: [PATCH 4/6] Remove EmojiEmitter --- resources/qml/ui/EmojiEmitter.qml | 60 ------------------------------- 1 file changed, 60 deletions(-) delete mode 100644 resources/qml/ui/EmojiEmitter.qml diff --git a/resources/qml/ui/EmojiEmitter.qml b/resources/qml/ui/EmojiEmitter.qml deleted file mode 100644 index 953b0352..00000000 --- a/resources/qml/ui/EmojiEmitter.qml +++ /dev/null @@ -1,60 +0,0 @@ -import QtQuick 2.0 -import QtQuick.Particles 2.0 - -Item { - id: bg - - readonly property int velocity: 50 - - ParticleSystem { - id: particleSys - } - - Emitter { - id: particles - - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - width: parent.width - system: particleSys - emitRate: 10 - lifeSpan: (parent.height / bg.velocity) * 1000 //8000 - lifeSpanVariation: 1000 - maximumEmitted: 1000 - size: 5 - sizeVariation: 15 - - velocity: AngleDirection { - angle: 90 - angleVariation: 10 - magnitude: bg.velocity - } - - } - - ItemParticle { - id: particle - - system: particleSys - delegate: itemDelegate - } - - Component { - id: itemDelegate - - Item { - id: container - - x: bg.width / 2 - y: 0 - - Text { - anchors.fill: parent - text: "🎉" - } - - } - - } - -} From 8871f7e9d808a357a574f5c9c1f92f763d5efee6 Mon Sep 17 00:00:00 2001 From: Joseph Donofry Date: Thu, 8 Jul 2021 22:39:27 -0400 Subject: [PATCH 5/6] Fixes from code review --- resources/qml/RoomSettings.qml | 6 - resources/qml/ui/Spinner.qml | 120 ++++-------------- .../qml/ui/animations/BlinkAnimation.qml | 28 ++++ resources/qml/ui/animations/qmldir | 2 + resources/qml/ui/qmldir | 3 +- resources/res.qrc | 1 + 6 files changed, 61 insertions(+), 99 deletions(-) create mode 100644 resources/qml/ui/animations/BlinkAnimation.qml create mode 100644 resources/qml/ui/animations/qmldir diff --git a/resources/qml/RoomSettings.qml b/resources/qml/RoomSettings.qml index b9830386..d6e6c6a5 100644 --- a/resources/qml/RoomSettings.qml +++ b/resources/qml/RoomSettings.qml @@ -50,12 +50,6 @@ ApplicationWindow { } } - // BusyIndicator { - // Layout.alignment: Qt.AlignHCenter - // running: roomSettings.isLoading - // visible: roomSettings.isLoading - // } - Spinner { Layout.alignment: Qt.AlignHCenter visible: roomSettings.isLoading diff --git a/resources/qml/ui/Spinner.qml b/resources/qml/ui/Spinner.qml index 29160763..a1a09a6a 100644 --- a/resources/qml/ui/Spinner.qml +++ b/resources/qml/ui/Spinner.qml @@ -5,6 +5,8 @@ import QtQuick 2.12 import QtGraphicalEffects 1.12 +import "./animations" + Item { id: spinner @@ -15,6 +17,8 @@ Item { 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) @@ -70,118 +74,50 @@ Item { color: "white" } - SequentialAnimation { + BlinkAnimation { id: anim1 + target: rect1 + pauseDuration: spinner.pauseDuration + glowDuration: spinner.glowDuration loops: Animation.Infinite - - NumberAnimation { - target: rect1 - property: "opacity" - from: 0 - to: 1 - duration: 300 - } - - PauseAnimation { - duration: spinner.barCount * 150 - } - } - SequentialAnimation { + BlinkAnimation { id: anim2 - - loops: Animation.Infinite - - NumberAnimation { - target: rect2 - property: "opacity" - from: 0 - to: 1 - duration: 300 - } - - PauseAnimation { - duration: spinner.barCount * 150 - } - + target: rect2 + pauseDuration: spinner.pauseDuration + glowDuration: spinner.glowDuration } - SequentialAnimation { + BlinkAnimation { id: anim3 - - loops: Animation.Infinite - - NumberAnimation { - target: rect3 - property: "opacity" - from: 0 - to: 1 - duration: 300 - } - - PauseAnimation { - duration: spinner.barCount * 150 - } + target: rect3 + pauseDuration: spinner.pauseDuration + glowDuration: spinner.glowDuration } - SequentialAnimation { + BlinkAnimation { id: anim4 - - loops: Animation.Infinite - - NumberAnimation { - target: rect4 - property: "opacity" - from: 0 - to: 1 - duration: 300 - } - - PauseAnimation { - duration: spinner.barCount * 150 - } + target: rect4 + pauseDuration: spinner.pauseDuration + glowDuration: spinner.glowDuration } - SequentialAnimation { + BlinkAnimation { id: anim5 - - loops: Animation.Infinite - - NumberAnimation { - target: rect5 - property: "opacity" - from: 0 - to: 1 - duration: 300 - } - - PauseAnimation { - duration: spinner.barCount * 150 - } - + target: rect5 + pauseDuration: spinner.pauseDuration + glowDuration: spinner.glowDuration } - SequentialAnimation { + BlinkAnimation { id: anim6 - - loops: Animation.Infinite - - NumberAnimation { - target: rect6 - property: "opacity" - from: 0 - to: 1 - duration: 300 - } - - PauseAnimation { - duration: spinner.barCount * 150 - } - + target: rect6 + pauseDuration: spinner.pauseDuration + glowDuration: spinner.glowDuration } transform: Matrix4x4 { diff --git a/resources/qml/ui/animations/BlinkAnimation.qml b/resources/qml/ui/animations/BlinkAnimation.qml new file mode 100644 index 00000000..377296eb --- /dev/null +++ b/resources/qml/ui/animations/BlinkAnimation.qml @@ -0,0 +1,28 @@ +// 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 + // /duration: 300 + } + + PauseAnimation { + id: pauseAnimation + // duration: spinner.barCount * 150 + } + +} \ No newline at end of file diff --git a/resources/qml/ui/animations/qmldir b/resources/qml/ui/animations/qmldir new file mode 100644 index 00000000..14f9ad86 --- /dev/null +++ b/resources/qml/ui/animations/qmldir @@ -0,0 +1,2 @@ +module im.nheko.UI.Animations +BlinkAnimation 1.0 BlinkAnimation.qml diff --git a/resources/qml/ui/qmldir b/resources/qml/ui/qmldir index a8466a10..831a723d 100644 --- a/resources/qml/ui/qmldir +++ b/resources/qml/ui/qmldir @@ -1,2 +1,3 @@ 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 diff --git a/resources/res.qrc b/resources/res.qrc index 913de9d5..9bb8ae2e 100644 --- a/resources/res.qrc +++ b/resources/res.qrc @@ -172,6 +172,7 @@ qml/dialogs/InputDialog.qml qml/ui/Ripple.qml qml/ui/Spinner.qml + qml/ui/animations/BlinkAnimation.qml qml/voip/ActiveCallBar.qml qml/voip/CallDevices.qml qml/voip/CallInvite.qml From 16e9332aec071314d6a2b3b27320ff816eb3a03d Mon Sep 17 00:00:00 2001 From: Joseph Donofry Date: Thu, 8 Jul 2021 22:41:36 -0400 Subject: [PATCH 6/6] Remove commented code --- resources/qml/ui/animations/BlinkAnimation.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/resources/qml/ui/animations/BlinkAnimation.qml b/resources/qml/ui/animations/BlinkAnimation.qml index 377296eb..73991a1f 100644 --- a/resources/qml/ui/animations/BlinkAnimation.qml +++ b/resources/qml/ui/animations/BlinkAnimation.qml @@ -17,12 +17,10 @@ SequentialAnimation { property: "opacity" from: 0 to: 1 - // /duration: 300 } PauseAnimation { id: pauseAnimation - // duration: spinner.barCount * 150 } } \ No newline at end of file