mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-02-07 15:08:24 +00:00
feat(ui/modules/Linphone/Chat): use a custom QML2 BusyIndicator
This commit is contained in:
parent
fdb937f538
commit
2be59c9910
7 changed files with 109 additions and 10 deletions
|
|
@ -134,6 +134,7 @@
|
|||
<file>assets/images/video_call_pressed.svg</file>
|
||||
<file>ui/modules/Common/Animations/CaterpillarAnimation.qml</file>
|
||||
<file>ui/modules/Common/Borders.qml</file>
|
||||
<file>ui/modules/Common/BusyIndicator.qml</file>
|
||||
<file>ui/modules/Common/Collapse.qml</file>
|
||||
<file>ui/modules/Common/Colors.qml</file>
|
||||
<file>ui/modules/Common/Constants.qml</file>
|
||||
|
|
@ -172,6 +173,7 @@
|
|||
<file>ui/modules/Common/SearchBox.qml</file>
|
||||
<file>ui/modules/Common/SmartConnect.qml</file>
|
||||
<file>ui/modules/Common/Styles/Animations/CaterpillarAnimationStyle.qml</file>
|
||||
<file>ui/modules/Common/Styles/BusyIndicatorStyle.qml</file>
|
||||
<file>ui/modules/Common/Styles/CollapseStyle.qml</file>
|
||||
<file>ui/modules/Common/Styles/DialogStyle.qml</file>
|
||||
<file>ui/modules/Common/Styles/DroppableTextAreaStyle.qml</file>
|
||||
|
|
|
|||
80
tests/ui/modules/Common/BusyIndicator.qml
Normal file
80
tests/ui/modules/Common/BusyIndicator.qml
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.0
|
||||
|
||||
import Common.Styles 1.0
|
||||
|
||||
// =============================================================================
|
||||
|
||||
BusyIndicator {
|
||||
id: busyIndicator
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
readonly property int _rotation: 360
|
||||
readonly property int _size: width < height ? width : height
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
contentItem: Item {
|
||||
x: parent.width / 2 - width / 2
|
||||
y: parent.height / 2 - height / 2
|
||||
|
||||
height: _size
|
||||
width: _size
|
||||
|
||||
Item {
|
||||
id: item
|
||||
|
||||
height: parent.height
|
||||
width: parent.width
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Animation.
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
RotationAnimator {
|
||||
duration: BusyIndicatorStyle.duration
|
||||
loops: Animation.Infinite
|
||||
running: busyIndicator.visible && busyIndicator.running
|
||||
target: item
|
||||
|
||||
from: 0
|
||||
to: busyIndicator._rotation
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Items to draw.
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
Repeater {
|
||||
id: repeater
|
||||
|
||||
model: BusyIndicatorStyle.nSpheres
|
||||
|
||||
Rectangle {
|
||||
x: item.width / 2 - width / 2
|
||||
y: item.height / 2 - height / 2
|
||||
|
||||
height: item.height / 3
|
||||
width: item.width / 3
|
||||
|
||||
color: BusyIndicatorStyle.color
|
||||
radius: (width > height ? width : height) / 2
|
||||
|
||||
transform: [
|
||||
Translate {
|
||||
y: busyIndicator._size / 2
|
||||
},
|
||||
Rotation {
|
||||
angle: index / repeater.count * busyIndicator._rotation
|
||||
origin {
|
||||
x: width / 2
|
||||
y: height / 2
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
12
tests/ui/modules/Common/Styles/BusyIndicatorStyle.qml
Normal file
12
tests/ui/modules/Common/Styles/BusyIndicatorStyle.qml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
pragma Singleton
|
||||
import QtQuick 2.7
|
||||
|
||||
import Common 1.0
|
||||
|
||||
// =============================================================================
|
||||
|
||||
QtObject {
|
||||
property color color: Colors.i
|
||||
property int duration: 1250
|
||||
property int nSpheres: 6
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@ module Common.Styles
|
|||
|
||||
# Components styles ------------------------------------------------------------
|
||||
|
||||
singleton BusyIndicatorStyle 1.0 BusyIndicatorStyle.qml
|
||||
|
||||
singleton CaterpillarAnimationStyle 1.0 Animations/CaterpillarAnimationStyle.qml
|
||||
|
||||
singleton CollapseStyle 1.0 CollapseStyle.qml
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
# ====================================================================
|
||||
# ==============================================================================
|
||||
# Common's components to export.
|
||||
# ====================================================================
|
||||
# ==============================================================================
|
||||
|
||||
module Common
|
||||
|
||||
# Constants ----------------------------------------------------------
|
||||
# Constants --------------------------------------------------------------------
|
||||
|
||||
singleton Colors 1.0 Colors.qml
|
||||
singleton Constants 1.0 Constants.qml
|
||||
|
||||
# Components ---------------------------------------------------------
|
||||
# Components -------------------------------------------------------------------
|
||||
|
||||
# Animations
|
||||
CaterpillarAnimation 1.0 Animations/CaterpillarAnimation.qml
|
||||
|
|
@ -17,6 +17,9 @@ CaterpillarAnimation 1.0 Animations/CaterpillarAnimation.qml
|
|||
# Chat
|
||||
Borders 1.0 Borders.qml
|
||||
|
||||
# BusyIndicator
|
||||
BusyIndicator 1.0 BusyIndicator.qml
|
||||
|
||||
# Collapse
|
||||
Collapse 1.0 Collapse.qml
|
||||
|
||||
|
|
|
|||
|
|
@ -223,13 +223,13 @@ Row {
|
|||
|
||||
Component {
|
||||
id: indicator
|
||||
BusyIndicator {
|
||||
width: ChatStyle.entry.message.outgoing.sendIconSize
|
||||
}
|
||||
BusyIndicator {}
|
||||
}
|
||||
|
||||
Loader {
|
||||
height: ChatStyle.entry.lineHeight
|
||||
width: ChatStyle.entry.message.outgoing.sendIconSize
|
||||
|
||||
sourceComponent: $chatEntry.isOutgoing
|
||||
? (
|
||||
$chatEntry.status === ChatModel.MessageStatusInProgress
|
||||
|
|
|
|||
|
|
@ -52,13 +52,13 @@ Item {
|
|||
|
||||
Component {
|
||||
id: indicator
|
||||
BusyIndicator {
|
||||
width: ChatStyle.entry.message.outgoing.sendIconSize
|
||||
}
|
||||
BusyIndicator {}
|
||||
}
|
||||
|
||||
Loader {
|
||||
height: ChatStyle.entry.lineHeight
|
||||
width: ChatStyle.entry.message.outgoing.sendIconSize
|
||||
|
||||
sourceComponent: $chatEntry.status === ChatModel.MessageStatusInProgress
|
||||
? indicator
|
||||
: icon
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue