From 2be59c99101798fcf179c76226b43783573b0cf3 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Tue, 17 Jan 2017 12:57:17 +0100 Subject: [PATCH] feat(ui/modules/Linphone/Chat): use a custom QML2 `BusyIndicator` --- tests/resources.qrc | 2 + tests/ui/modules/Common/BusyIndicator.qml | 80 +++++++++++++++++++ .../Common/Styles/BusyIndicatorStyle.qml | 12 +++ tests/ui/modules/Common/Styles/qmldir | 2 + tests/ui/modules/Common/qmldir | 11 ++- .../ui/modules/Linphone/Chat/FileMessage.qml | 6 +- .../modules/Linphone/Chat/OutgoingMessage.qml | 6 +- 7 files changed, 109 insertions(+), 10 deletions(-) create mode 100644 tests/ui/modules/Common/BusyIndicator.qml create mode 100644 tests/ui/modules/Common/Styles/BusyIndicatorStyle.qml diff --git a/tests/resources.qrc b/tests/resources.qrc index 896da1a33..715908917 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -134,6 +134,7 @@ assets/images/video_call_pressed.svg ui/modules/Common/Animations/CaterpillarAnimation.qml ui/modules/Common/Borders.qml + ui/modules/Common/BusyIndicator.qml ui/modules/Common/Collapse.qml ui/modules/Common/Colors.qml ui/modules/Common/Constants.qml @@ -172,6 +173,7 @@ ui/modules/Common/SearchBox.qml ui/modules/Common/SmartConnect.qml ui/modules/Common/Styles/Animations/CaterpillarAnimationStyle.qml + ui/modules/Common/Styles/BusyIndicatorStyle.qml ui/modules/Common/Styles/CollapseStyle.qml ui/modules/Common/Styles/DialogStyle.qml ui/modules/Common/Styles/DroppableTextAreaStyle.qml diff --git a/tests/ui/modules/Common/BusyIndicator.qml b/tests/ui/modules/Common/BusyIndicator.qml new file mode 100644 index 000000000..8eabd3052 --- /dev/null +++ b/tests/ui/modules/Common/BusyIndicator.qml @@ -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 + } + } + ] + } + } + } + } +} diff --git a/tests/ui/modules/Common/Styles/BusyIndicatorStyle.qml b/tests/ui/modules/Common/Styles/BusyIndicatorStyle.qml new file mode 100644 index 000000000..a76835e90 --- /dev/null +++ b/tests/ui/modules/Common/Styles/BusyIndicatorStyle.qml @@ -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 +} diff --git a/tests/ui/modules/Common/Styles/qmldir b/tests/ui/modules/Common/Styles/qmldir index 3c083574d..c46e94dff 100644 --- a/tests/ui/modules/Common/Styles/qmldir +++ b/tests/ui/modules/Common/Styles/qmldir @@ -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 diff --git a/tests/ui/modules/Common/qmldir b/tests/ui/modules/Common/qmldir index 5f408e8f4..ab7b8e95a 100644 --- a/tests/ui/modules/Common/qmldir +++ b/tests/ui/modules/Common/qmldir @@ -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 diff --git a/tests/ui/modules/Linphone/Chat/FileMessage.qml b/tests/ui/modules/Linphone/Chat/FileMessage.qml index 7204e77fa..3eae0bc43 100644 --- a/tests/ui/modules/Linphone/Chat/FileMessage.qml +++ b/tests/ui/modules/Linphone/Chat/FileMessage.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 diff --git a/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml b/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml index fd3553456..d6d5eafaa 100644 --- a/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml +++ b/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml @@ -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