Warning, /network/neochat/src/qml/TypingPane.qml is written in an unsupported language. File is not indexed.

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 import QtQuick
0008 import QtQuick.Layouts
0009 import QtQuick.Controls as QQC2
0010 import org.kde.kirigami as Kirigami
0011 import org.kde.neochat
0012 
0013 Loader {
0014     id: root
0015     property string labelText: ""
0016 
0017     active: visible
0018     sourceComponent: QQC2.Pane {
0019         id: typingPane
0020 
0021         leftPadding: Kirigami.Units.largeSpacing
0022         rightPadding: Kirigami.Units.largeSpacing
0023         topPadding: Kirigami.Units.smallSpacing
0024         bottomPadding: Kirigami.Units.smallSpacing
0025         spacing: Kirigami.Units.largeSpacing
0026 
0027         FontMetrics {
0028             id: fontMetrics
0029         }
0030 
0031         Kirigami.Theme.colorSet: Kirigami.Theme.View
0032         Kirigami.Theme.inherit: false
0033 
0034         contentItem: RowLayout {
0035             spacing: typingPane.spacing
0036             Row {
0037                 id: dotRow
0038                 property int duration: 400
0039                 spacing: Kirigami.Units.smallSpacing
0040                 Repeater {
0041                     model: 3
0042                     delegate: Rectangle {
0043                         id: dot
0044                         color: Kirigami.Theme.textColor
0045                         radius: height / 2
0046                         implicitWidth: fontMetrics.xHeight
0047                         implicitHeight: fontMetrics.xHeight
0048                         // rotating 45 degrees makes the dots look a bit smoother when scaled up
0049                         rotation: 45
0050                         opacity: 0.5
0051                         scale: 1
0052                         // FIXME: Sometimes the animation timings for each
0053                         // dot drift slightly reletative to each other.
0054                         // Not everyone can see this, but I'm pretty sure it's there.
0055                         SequentialAnimation {
0056                             running: true
0057                             PauseAnimation {
0058                                 duration: dotRow.duration * index / 2
0059                             }
0060                             SequentialAnimation {
0061                                 loops: Animation.Infinite
0062                                 ParallelAnimation {
0063                                     // Animators unfortunately sync up instead of being
0064                                     // staggered, so I'm using NumberAnimations instead.
0065                                     NumberAnimation {
0066                                         target: dot
0067                                         property: "scale"
0068                                         from: 1
0069                                         to: 1.33
0070                                         duration: dotRow.duration
0071                                     }
0072                                     NumberAnimation {
0073                                         target: dot
0074                                         property: "opacity"
0075                                         from: 0.5
0076                                         to: 1
0077                                         duration: dotRow.duration
0078                                     }
0079                                 }
0080                                 ParallelAnimation {
0081                                     NumberAnimation {
0082                                         target: dot
0083                                         property: "scale"
0084                                         from: 1.33
0085                                         to: 1
0086                                         duration: dotRow.duration
0087                                     }
0088                                     NumberAnimation {
0089                                         target: dot
0090                                         property: "opacity"
0091                                         from: 1
0092                                         to: 0.5
0093                                         duration: dotRow.duration
0094                                     }
0095                                 }
0096                                 PauseAnimation {
0097                                     duration: dotRow.duration
0098                                 }
0099                             }
0100                         }
0101                     }
0102                 }
0103             }
0104             QQC2.Label {
0105                 id: typingLabel
0106                 elide: Text.ElideRight
0107                 text: root.labelText
0108                 textFormat: Text.PlainText
0109             }
0110         }
0111 
0112         leftInset: !mirrored ? 0 : -background.radius
0113         rightInset: mirrored ? 0 : -background.radius
0114         bottomInset: -background.radius
0115         background: Rectangle {
0116             radius: 3
0117             color: Kirigami.Theme.backgroundColor
0118             border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
0119             border.width: 1
0120         }
0121     }
0122 }