From 736f315c49847f0107b7664ac69829a47c20606a Mon Sep 17 00:00:00 2001 From: Noelia Date: Wed, 1 Mar 2023 22:32:58 +0100 Subject: [PATCH] feat(SQ/StatusDotsLoadingIndicator): Created new 3 dots loading animation - Created new loading animation component. - Added documentation and page in `stroybook`. --- storybook/PagesModel.qml | 4 + .../pages/StatusDotsLoadingIndicatorPage.qml | 46 +++++++++ .../images/status_dots_loading_indicator.png | Bin 0 -> 6410 bytes .../Components/StatusDotsLoadingIndicator.qml | 91 ++++++++++++++++++ ui/StatusQ/src/StatusQ/Components/qmldir | 1 + 5 files changed, 142 insertions(+) create mode 100644 storybook/pages/StatusDotsLoadingIndicatorPage.qml create mode 100644 ui/StatusQ/doc/src/images/status_dots_loading_indicator.png create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusDotsLoadingIndicator.qml diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index 31367fecc3..ea3c76e1fb 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -129,6 +129,10 @@ ListModel { title: "StatusMessage" section: "Components" } + ListElement { + title: "StatusDotsLoadingIndicator" + section: "Components" + } ListElement { title: "BrowserSettings" section: "Settings" diff --git a/storybook/pages/StatusDotsLoadingIndicatorPage.qml b/storybook/pages/StatusDotsLoadingIndicatorPage.qml new file mode 100644 index 0000000000..a77b97ab1d --- /dev/null +++ b/storybook/pages/StatusDotsLoadingIndicatorPage.qml @@ -0,0 +1,46 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 + + +SplitView { + id: root + + SplitView { + orientation: Qt.Vertical + SplitView.fillWidth: true + ColumnLayout { + anchors.margins: 100 + anchors.fill: parent + spacing: 100 + + StatusDotsLoadingIndicator { + dotsDiameter: 5 + duration: 500 + dotsColor: "blue" + } + + StatusDotsLoadingIndicator { + dotsDiameter: 15 + duration: 1000 + dotsColor: "orange" + spacing: 16 + } + + StatusDotsLoadingIndicator { + dotsDiameter: 30 + duration: 1500 + dotsColor: "green" + spacing: 30 + } + + // filler + Item { + Layout.fillHeight: true + } + } + } +} diff --git a/ui/StatusQ/doc/src/images/status_dots_loading_indicator.png b/ui/StatusQ/doc/src/images/status_dots_loading_indicator.png new file mode 100644 index 0000000000000000000000000000000000000000..13f61f9a64c6d2f9d8b658591c7aa2a494d5603c GIT binary patch literal 6410 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 literal 0 HcmV?d00001 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusDotsLoadingIndicator.qml b/ui/StatusQ/src/StatusQ/Components/StatusDotsLoadingIndicator.qml new file mode 100644 index 0000000000..0eeb14234a --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusDotsLoadingIndicator.qml @@ -0,0 +1,91 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.14 +import QtQuick.Controls 2.14 + +import StatusQ.Core.Theme 0.1 + +/*! + \qmltype StatusDotsLoadingIndicator + \inherits Control + \inqmlmodule StatusQ.Components + \since StatusQ.Components 0.1 + \brief It is a 3 dots loading animation. + + The \c StatusDotsLoadingIndicator displays 3 dots blinking animation. + + Example of how the control looks like: + \image status_dots_loading_indicator.png + + Example of how to use it: + + \qml + StatusDotsLoadingIndicator { + dotsDiameter: 5 + duration: 1000 + dotsColor: "orange" + } + \endqml + + For a list of components available see StatusQ. +*/ +Control { + id: root + + /*! + \qmlproperty string StatusDotsLoadingIndicator::dotsDiameter + This property holds the diameter of the dots. + */ + property double dotsDiameter: 4.5 + + /*! + \qmlproperty string StatusDotsLoadingIndicator::duration + This property holds the duration of the animation. + */ + property int duration: 1500 + + /*! + \qmlproperty string StatusDotsLoadingIndicator::dotsColor + This property holds the color of the dots. + */ + property color dotsColor: Theme.palette.baseColor1 + + QtObject { + id: d + + readonly property double opacity1: 1 + readonly property double opacity2: 0.6 + readonly property double opacity3: 0.2 + } + + spacing: 2 + + component DotItem: Rectangle{ + id: dotItem + + property double maxOpacity + + width: root.dotsDiameter + height: width + radius: width / 2 + color: root.dotsColor + + SequentialAnimation { + id: blinkingAnimation + + loops: Animation.Infinite + running: visible + NumberAnimation { target: dotItem; property: "opacity"; to: 0; duration: root.duration;} + NumberAnimation { target: dotItem; property: "opacity"; to: dotItem.maxOpacity; duration: root.duration;} + } + + Component.onCompleted: blinkingAnimation.start() + } + + contentItem: RowLayout { + spacing: root.spacing + + DotItem { id: firstDot; maxOpacity: d.opacity1} + DotItem { id: secondDot; maxOpacity: d.opacity2} + DotItem { id: thirdDot; maxOpacity: d.opacity3} + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index 3de648d730..622deda995 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -15,6 +15,7 @@ StatusEmoji 0.1 StatusEmoji.qml StatusContactVerificationIcons 0.1 StatusContactVerificationIcons.qml StatusDateGroupLabel 0.1 StatusDateGroupLabel.qml StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml +StatusDotsLoadingIndicator 0.1 StatusDotsLoadingIndicator.qml StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml StatusListItem 0.1 StatusListItem.qml StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml