feat(ui/modules/Linphone/Chat): use a custom QML2 BusyIndicator

This commit is contained in:
Ronan Abhamon 2017-01-17 12:57:17 +01:00
parent fdb937f538
commit 2be59c9910
7 changed files with 109 additions and 10 deletions

View file

@ -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>

View 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
}
}
]
}
}
}
}
}

View 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
}

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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