Use 3 dot typing indicator, clean up code a bit.
Move TypingIndicator.qml out of ChatBox folder. It wasn't part of the ChatBox. fixes #367 by eliding instead of wrapping text
This commit is contained in:
Noah Davis
@@ -1,66 +0,0 @@
|
||||
/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
|
||||
* SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
|
||||
* SPDX-FileCopyrightText: 2021 Srevin Saju <srevinsaju@sugarlabs.org>
|
||||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
import org.kde.kirigami 2.14 as Kirigami
|
||||
import org.kde.neochat 1.0
|
||||
|
||||
Loader {
|
||||
id: root
|
||||
property var typingNotification: null
|
||||
|
||||
active: visible
|
||||
sourceComponent: Pane {
|
||||
id: typingPane
|
||||
|
||||
padding: fontMetrics.lineSpacing * 0.25
|
||||
spacing: 0
|
||||
Kirigami.Theme.colorSet: Kirigami.Theme.View
|
||||
|
||||
contentItem: RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
spacing: 0
|
||||
|
||||
FontMetrics {
|
||||
id: fontMetrics
|
||||
font: typingLabel.font
|
||||
}
|
||||
Label {
|
||||
id: typingLabel
|
||||
textFormat: TextEdit.RichText
|
||||
wrapMode: Label.Wrap
|
||||
text: typingNotification
|
||||
}
|
||||
BusyIndicator {
|
||||
running: root.active
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
|
||||
Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
|
||||
}
|
||||
}
|
||||
|
||||
background: Item {
|
||||
Rectangle {
|
||||
height: 1
|
||||
property color borderColor: Kirigami.Theme.textColor
|
||||
color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.1)
|
||||
anchors {
|
||||
left: typingIndicatorBackground.left
|
||||
right: typingIndicatorBackground.right
|
||||
bottom: typingIndicatorBackground.top
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
id: typingIndicatorBackground
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,4 +5,3 @@ ReplyPane 1.0 ReplyPane.qml
|
||||
AttachmentPane 1.0 AttachmentPane.qml
|
||||
CompletionMenu 1.0 CompletionMenu.qml
|
||||
EmojiPickerPane 1.0 EmojiPickerPane.qml
|
||||
TypingPane 1.0 TypingPane.qml
|
||||
|
||||
107
imports/NeoChat/Component/TypingPane.qml
Normal file
107
imports/NeoChat/Component/TypingPane.qml
Normal file
@@ -0,0 +1,107 @@
|
||||
/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
|
||||
* SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
|
||||
* SPDX-FileCopyrightText: 2021 Srevin Saju <srevinsaju@sugarlabs.org>
|
||||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
import org.kde.kirigami 2.14 as Kirigami
|
||||
import org.kde.neochat 1.0
|
||||
|
||||
Loader {
|
||||
id: root
|
||||
property string labelText: ""
|
||||
|
||||
active: visible
|
||||
sourceComponent: Pane {
|
||||
id: typingPane
|
||||
|
||||
clip: true
|
||||
leftPadding: Kirigami.Units.largeSpacing
|
||||
rightPadding: Kirigami.Units.largeSpacing
|
||||
topPadding: Kirigami.Units.smallSpacing
|
||||
bottomPadding: Kirigami.Units.smallSpacing
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
FontMetrics {
|
||||
id: fontMetrics
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
spacing: typingPane.spacing
|
||||
Row {
|
||||
id: dotRow
|
||||
property int duration: 400
|
||||
spacing: Kirigami.Units.smallSpacing
|
||||
Repeater {
|
||||
model: 3
|
||||
delegate: Rectangle {
|
||||
id: dot
|
||||
color: Kirigami.Theme.textColor
|
||||
radius: height/2
|
||||
implicitWidth: fontMetrics.xHeight
|
||||
implicitHeight: fontMetrics.xHeight
|
||||
// rotating 45 degrees makes the dots look a bit smoother when scaled up
|
||||
rotation: 45
|
||||
opacity: 0.5
|
||||
scale: 1
|
||||
// FIXME: Sometimes the animation timings for each
|
||||
// dot drift slightly reletative to each other.
|
||||
// Not everyone can see this, but I'm pretty sure it's there.
|
||||
SequentialAnimation {
|
||||
running: true
|
||||
PauseAnimation { duration: dotRow.duration * index / 2 }
|
||||
SequentialAnimation {
|
||||
loops: Animation.Infinite
|
||||
ParallelAnimation {
|
||||
// Animators unfortunately sync up instead of being
|
||||
// staggered, so I'm using NumberAnimations instead.
|
||||
NumberAnimation {
|
||||
target: dot; property: "scale";
|
||||
from: 1; to: 1.33
|
||||
duration: dotRow.duration
|
||||
}
|
||||
NumberAnimation {
|
||||
target: dot; property: "opacity"
|
||||
from: 0.5; to: 1
|
||||
duration: dotRow.duration
|
||||
}
|
||||
}
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
target: dot; property: "scale"
|
||||
from: 1.33; to: 1
|
||||
duration: dotRow.duration
|
||||
}
|
||||
NumberAnimation {
|
||||
target: dot; property: "opacity"
|
||||
from: 1; to: 0.5
|
||||
duration: dotRow.duration
|
||||
}
|
||||
}
|
||||
PauseAnimation { duration: dotRow.duration }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Label {
|
||||
id: typingLabel
|
||||
elide: Text.ElideRight
|
||||
text: root.labelText
|
||||
}
|
||||
}
|
||||
|
||||
leftInset: mirrored ? 0 : -3
|
||||
rightInset: mirrored ? -3 : 0
|
||||
bottomInset: -3
|
||||
background: Rectangle {
|
||||
radius: 3
|
||||
color: Kirigami.Theme.backgroundColor
|
||||
border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
|
||||
border.width: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,3 +2,4 @@ module NeoChat.Component
|
||||
FullScreenImage 1.0 FullScreenImage.qml
|
||||
ChatTextInput 1.0 ChatTextInput.qml
|
||||
FancyEffectsContainer 1.0 FancyEffectsContainer.qml
|
||||
TypingPane 1.0 TypingPane.qml
|
||||
|
||||
@@ -720,8 +720,12 @@ Kirigami.ScrollablePage {
|
||||
header: TypingPane {
|
||||
id: typingPane
|
||||
visible: !loadingIndicator.visible && currentRoom && currentRoom.usersTyping.length > 0
|
||||
typingNotification: visible ? i18ncp("Message displayed when some users are typing", "%2 is typing", "%2 are typing", currentRoom.usersTyping.length, currentRoom.usersTyping.map(user => user.displayName).join(", ")) : ""
|
||||
width: parent.width
|
||||
labelText: visible ? i18ncp(
|
||||
"Message displayed when some users are typing", "%2 is typing", "%2 are typing",
|
||||
currentRoom.usersTyping.length,
|
||||
currentRoom.usersTyping.map(user => user.displayName).join(", ")
|
||||
) : ""
|
||||
anchors.left: parent.left
|
||||
height: visible ? implicitHeight : 0
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
|
||||
1
res.qrc
1
res.qrc
@@ -17,6 +17,7 @@
|
||||
<file>imports/NeoChat/Component/qmldir</file>
|
||||
<file>imports/NeoChat/Component/FullScreenImage.qml</file>
|
||||
<file>imports/NeoChat/Component/FancyEffectsContainer.qml</file>
|
||||
<file>imports/NeoChat/Component/TypingPane.qml</file>
|
||||
<file>imports/NeoChat/Component/ChatBox</file>
|
||||
<file>imports/NeoChat/Component/ChatBox/ChatBox.qml</file>
|
||||
<file>imports/NeoChat/Component/ChatBox/ChatBar.qml</file>
|
||||
|
||||
Reference in New Issue
Block a user