apps/qml/TypingIndicator.qml

0001 /* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
0002  * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
0003  * SPDX-FileCopyrightText: 2021 Srevin Saju <srevinsaju@sugarlabs.org>
0004  * SPDX-License-Identifier: GPL-2.0-or-later
0005  */
0006
0007 // Please note that this is a slightly tweaked version of the typing indicator from Neochat, so go there if you have any
0008 // problems with the animation.
0009
0010 import QtQuick
0011 import QtQuick.Layouts
0012 import QtQuick.Controls as QQC2
0013 import org.kde.kirigami as Kirigami
0014
0015 Loader {
0016     id: root
0017
0018     active: visible
0019     sourceComponent: QQC2.Pane {
0020         id: typingPane
0021
0022         leftPadding: Kirigami.Units.largeSpacing
0023         rightPadding: Kirigami.Units.largeSpacing
0024         topPadding: Kirigami.Units.smallSpacing
0025         bottomPadding: Kirigami.Units.smallSpacing
0026         spacing: Kirigami.Units.largeSpacing
0027
0028         FontMetrics {
0029             id: fontMetrics
0030         }
0031
0032         Kirigami.Theme.colorSet: Kirigami.Theme.View
0033         Kirigami.Theme.inherit: false
0034
0035         contentItem: Row {
0036             id: dotRow
0037             property int duration: 400
0038             spacing: Kirigami.Units.smallSpacing
0039             Repeater {
0040                 model: 3
0041                 delegate: Rectangle {
0042                     id: dot
0043                     color: Kirigami.Theme.textColor
0044                     radius: height/2
0045                     implicitWidth: fontMetrics.xHeight
0046                     implicitHeight: fontMetrics.xHeight
0047                     // rotating 45 degrees makes the dots look a bit smoother when scaled up
0048                     rotation: 45
0049                     opacity: 0.5
0050                     scale: 1
0051                     // FIXME: Sometimes the animation timings for each
0052                     // dot drift slightly reletative to each other.
0053                     // Not everyone can see this, but I'm pretty sure it's there.
0054                     SequentialAnimation {
0055                         running: true
0056                         PauseAnimation { duration: dotRow.duration * index / 2 }
0057                         SequentialAnimation {
0058                             loops: Animation.Infinite
0059                             ParallelAnimation {
0060                                 // Animators unfortunately sync up instead of being
0061                                 // staggered, so I'm using NumberAnimations instead.
0062                                 NumberAnimation {
0063                                     target: dot; property: "scale";
0064                                     from: 1; to: 1.33
0065                                     duration: dotRow.duration
0066                                 }
0067                                 NumberAnimation {
0068                                     target: dot; property: "opacity"
0069                                     from: 0.5; to: 1
0070                                     duration: dotRow.duration
0071                                 }
0072                             }
0073                             ParallelAnimation {
0074                                 NumberAnimation {
0075                                     target: dot; property: "scale"
0076                                     from: 1.33; to: 1
0077                                     duration: dotRow.duration
0078                                 }
0079                                 NumberAnimation {
0080                                     target: dot; property: "opacity"
0081                                     from: 1; to: 0.5
0082                                     duration: dotRow.duration
0083                                 }
0084                             }
0085                             PauseAnimation { duration: dotRow.duration }
0086                         }
0087                     }
0088                 }
0089             }
0090         }
0091
0092         leftInset: !mirrored ? 0 : -background.radius
0093         rightInset: mirrored ? 0 : -background.radius
0094         bottomInset: -background.radius
0095         background: Rectangle {
0096             color: palette.alternateBase
0097         }
0098     }
0099 }