fix(storybook): profile fetching updated

Profile fetching page, which is part of onboarding flow, is updated so it matches
the latest figma changes now.
This commit is contained in:
Sale Djenic 2022-11-30 10:19:59 +01:00 committed by saledjenic
parent 2e65796a06
commit 9d382b1c81
8 changed files with 328 additions and 133 deletions

View File

@ -0,0 +1,82 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import utils 1.0
Item {
id: root
property alias model: listView.model
signal stateChanged(string state)
ComboBox {
id: comboBox
width: parent.width
model: [Constants.startupState.profileFetching,
Constants.startupState.profileFetchingSuccess,
Constants.startupState.profileFetchingTimeout]
onCurrentIndexChanged: {
root.stateChanged(model[currentIndex])
}
}
ListView {
id: listView
anchors.top: comboBox.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 32
spacing: 25
ScrollBar.vertical: ScrollBar { x: root.width }
delegate: ColumnLayout {
id: rootDelegate
width: ListView.view.width
Label {
Layout.fillWidth: true
text: model.entity
font.weight: Font.Bold
}
Row {
Label {
anchors.verticalCenter: parent.verticalCenter
text: "loadedMessages:\t"
}
SpinBox {
editable: true
height: 30
from: 0; to: model.totalMessages
value: model.loadedMessages
onValueChanged: model.loadedMessages = value
}
}
Row {
Label {
anchors.verticalCenter: parent.verticalCenter
text: "totalMessages:\t"
}
SpinBox {
editable: true
height: 30
from: 0; to: 10 * 1000 * 1000
value: model.totalMessages
onValueChanged: model.totalMessages = value
}
}
}
}
}

View File

@ -20,8 +20,38 @@ SplitView {
SplitView.fillHeight: true
startupStore: StartupStore {
id: startupStore
property QtObject currentStartupState: QtObject {
property string stateType: comboBox.currentText
property string stateType
}
property ListModel fetchingDataModel: ListModel {
Component.onCompleted: append([
{
entity: Constants.onboarding.profileFetching.entity.profile,
loadedMessages: 0,
totalMessages: 0,
icon: "profile"
},
{
entity: Constants.onboarding.profileFetching.entity.contacts,
loadedMessages: 0,
totalMessages: 0,
icon: "contact-book"
},
{
entity: Constants.onboarding.profileFetching.entity.communities,
loadedMessages: 0,
totalMessages: 0,
icon: "communities"
},
{
entity: Constants.onboarding.profileFetching.entity.settings,
loadedMessages: 0,
totalMessages: 0,
icon: "settings"
}])
}
function doPrimaryAction() {
@ -48,10 +78,38 @@ SplitView {
}
}
ComboBox {
id: comboBox
Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
SplitView.preferredHeight: 100
model: [ Constants.startupState.profileFetching, Constants.startupState.profileFetchingCompleted, Constants.startupState.profileFetchingError, "none" ]
ProfileFetchingModelEditor {
anchors.fill: parent
model: startupStore.fetchingDataModel
onStateChanged: {
if (state === Constants.startupState.profileFetching) {
for(let i = 0; i < startupStore.fetchingDataModel.rowCount(); i++) {
startupStore.fetchingDataModel.setProperty(i, "totalMessages", 0)
startupStore.fetchingDataModel.setProperty(i, "loadedMessages", 0)
}
}
else if (state === Constants.startupState.profileFetchingSuccess) {
for(let i = 0; i < startupStore.fetchingDataModel.rowCount(); i++) {
let n = Math.ceil(Math.random() * 10) + 1
startupStore.fetchingDataModel.setProperty(i, "totalMessages", n)
startupStore.fetchingDataModel.setProperty(i, "loadedMessages", n)
}
}
else if (state === Constants.startupState.profileFetchingTimeout) {
for(let i = 0; i < startupStore.fetchingDataModel.rowCount(); i++) {
let n = Math.ceil(Math.random() * 5)
startupStore.fetchingDataModel.setProperty(i, "totalMessages", n + 5)
startupStore.fetchingDataModel.setProperty(i, "loadedMessages", n)
}
}
startupStore.currentStartupState.stateType = state
}
}
}
}

View File

@ -0,0 +1,3 @@
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6515 5.77187V5.8001V10.2001V10.2283V10.2283V10.2284V10.2284V10.2284C14.6515 11.0445 14.6515 11.6966 14.6084 12.2234C14.5643 12.7639 14.4716 13.2294 14.2536 13.6572C13.9037 14.344 13.3453 14.9023 12.6585 15.2523C12.2308 15.4702 11.7652 15.5629 11.2248 15.6071C10.698 15.6501 10.0459 15.6501 9.22974 15.6501H9.22973H9.22972H9.22971H9.22969H9.20146H6.80146H6.77323C5.95709 15.6501 5.30494 15.6501 4.77814 15.6071C4.23769 15.5629 3.77217 15.4702 3.3444 15.2523C2.65761 14.9023 2.09923 14.344 1.74929 13.6572C1.53133 13.2294 1.43865 12.7639 1.3945 12.2234C1.35914 11.7907 1.35283 11.2734 1.35171 10.6501H1.00146C0.64248 10.6501 0.351465 10.3591 0.351465 10.0001C0.351465 9.64111 0.64248 9.3501 1.00146 9.3501H1.35146L1.35146 6.6501H1.00146C0.64248 6.6501 0.351465 6.35908 0.351465 6.0001C0.351465 5.64111 0.64248 5.3501 1.00146 5.3501H1.35171C1.35283 4.7268 1.35914 4.2095 1.3945 3.77677C1.43865 3.23632 1.53133 2.7708 1.74929 2.34303C2.09923 1.65624 2.65761 1.09786 3.3444 0.747924C3.77217 0.529963 4.23769 0.437286 4.77814 0.393129C5.30494 0.350087 5.95709 0.350092 6.77323 0.350098H6.80147H9.20146H9.2297C10.0458 0.350092 10.698 0.350088 11.2248 0.393129C11.7652 0.437286 12.2308 0.529964 12.6585 0.747924C13.3453 1.09786 13.9037 1.65624 14.2536 2.34303C14.4716 2.7708 14.5643 3.23632 14.6084 3.77677C14.6515 4.30357 14.6515 4.9557 14.6515 5.77182V5.77183V5.77184V5.77185V5.77187ZM2.65146 9.3501L2.65146 6.6501H3.00146C3.36045 6.6501 3.65146 6.35908 3.65146 6.0001C3.65146 5.64111 3.36045 5.3501 3.00146 5.3501H2.65176C2.65296 4.7307 2.65909 4.26318 2.69018 3.88263C2.72777 3.42257 2.79858 3.14718 2.9076 2.93322C3.1329 2.49104 3.49241 2.13153 3.93459 1.90623C4.14855 1.79721 4.42394 1.7264 4.884 1.68881C5.35165 1.6506 5.95066 1.6501 6.80147 1.6501L9.20146 1.6501C10.0523 1.6501 10.6513 1.6506 11.1189 1.68881C11.579 1.7264 11.8544 1.79721 12.0683 1.90623C12.5105 2.13154 12.87 2.49104 13.0953 2.93322C13.2043 3.14718 13.2752 3.42257 13.3128 3.88263C13.351 4.35028 13.3515 4.94929 13.3515 5.8001V10.2001C13.3515 11.0509 13.351 11.6499 13.3128 12.1176C13.2752 12.5776 13.2043 12.853 13.0953 13.067C12.87 13.5092 12.5105 13.8687 12.0683 14.094C11.8544 14.203 11.579 14.2738 11.1189 14.3114C10.6513 14.3496 10.0523 14.3501 9.20146 14.3501H6.80146C5.95066 14.3501 5.35165 14.3496 4.884 14.3114C4.42394 14.2738 4.14855 14.203 3.93459 14.094C3.49241 13.8687 3.1329 13.5092 2.9076 13.067C2.79858 12.853 2.72777 12.5776 2.69018 12.1176C2.65909 11.737 2.65296 11.2695 2.65176 10.6501H3.00146C3.36045 10.6501 3.65146 10.3591 3.65146 10.0001C3.65146 9.64111 3.36045 9.3501 3.00146 9.3501H2.65146ZM4.35156 11.2501C4.35156 9.64847 5.64994 8.3501 7.25156 8.3501H8.75156C10.3532 8.3501 11.6516 9.64847 11.6516 11.2501C11.6516 12.0233 11.0248 12.6501 10.2516 12.6501H5.75156C4.97836 12.6501 4.35156 12.0233 4.35156 11.2501ZM7.25156 9.6501C6.36791 9.6501 5.65156 10.3664 5.65156 11.2501C5.65156 11.3053 5.69633 11.3501 5.75156 11.3501H10.2516C10.3068 11.3501 10.3516 11.3053 10.3516 11.2501C10.3516 10.3664 9.63522 9.6501 8.75156 9.6501H7.25156ZM7.15156 5.5001C7.15156 5.03066 7.53212 4.6501 8.00156 4.6501C8.471 4.6501 8.85156 5.03066 8.85156 5.5001C8.85156 5.96954 8.471 6.3501 8.00156 6.3501C7.53212 6.3501 7.15156 5.96954 7.15156 5.5001ZM8.00156 3.3501C6.81415 3.3501 5.85156 4.31269 5.85156 5.5001C5.85156 6.68751 6.81415 7.6501 8.00156 7.6501C9.18897 7.6501 10.1516 6.68751 10.1516 5.5001C10.1516 4.31269 9.18897 3.3501 8.00156 3.3501Z" fill="#647084"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -7,52 +7,11 @@ Item {
implicitHeight: 240
implicitWidth: 240
states: [
State {
name: Constants.startupState.profileFetching
PropertyChanges { target: loadingAnimation; opacity: 1; }
PropertyChanges { target: completedImage; opacity: 0 }
PropertyChanges { target: errorImage; opacity: 0 }
},
State {
name: Constants.startupState.profileFetchingCompleted
PropertyChanges { target: loadingAnimation; opacity: 0;}
PropertyChanges { target: completedImage; opacity: 1 }
PropertyChanges { target: errorImage; opacity: 0 }
},
State {
name: Constants.startupState.profileFetchingError
PropertyChanges { target: loadingAnimation; opacity: 0;}
PropertyChanges { target: completedImage; opacity: 0 }
PropertyChanges { target: errorImage; opacity: 1 }
}
]
transitions: [
Transition {
from: Constants.startupState.profileFetching
to: Constants.startupState.profileFetchingCompleted
ParallelAnimation {
NumberAnimation { target: completedImage; property: "opacity"; duration: 100 }
NumberAnimation { target: loadingAnimation; property: "opacity"; duration: 100 }
}
},
Transition {
from: Constants.startupState.profileFetching
to: Constants.startupState.profileFetchingError
ParallelAnimation {
NumberAnimation { target: errorImage; property: "opacity"; duration: 100 }
NumberAnimation { target: loadingAnimation; property: "opacity"; duration: 100 }
}
}
]
SpriteSequence {
id: loadingAnimation
anchors.fill: root
running: visible
visible: opacity > 0
running: true
Sprite {
id: sprite
@ -63,20 +22,4 @@ Item {
source: Style.png(Constants.onboarding.profileFetching.imgInProgress)
}
}
Image {
id: completedImage
anchors.fill: loadingAnimation
visible: opacity > 0
opacity: 0
source: Style.png(Constants.onboarding.profileFetching.imgCompleted)
}
Image {
id: errorImage
anchors.fill: loadingAnimation
visible: opacity > 0
opacity: 0
source: Style.png(Constants.onboarding.profileFetching.imgError)
}
}

View File

@ -8,6 +8,8 @@ QtObject {
: null
property var selectedLoginAccount: startupModuleInst ? startupModuleInst.selectedLoginAccount
: null
property var fetchingDataModel: startupModuleInst ? startupModuleInst.fetchingDataModel
: null
function backAction() {
root.currentStartupState.backAction()

View File

@ -1,9 +1,11 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import AppLayouts.Onboarding.stores 1.0
import AppLayouts.Onboarding.shared 1.0
@ -15,30 +17,24 @@ Item {
property StartupStore startupStore
states: [
State {
name: Constants.startupState.profileFetching
when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetching
PropertyChanges {
target: description;
text: Constants.onboarding.profileFetching.descriptionForFetchingStarted
nextText: Constants.onboarding.profileFetching.descriptionForFetchingInProgress
QtObject {
id: d
property int timeout: Constants.onboarding.profileFetching.timeout
property int counter: d.timeout
function getCurrTimerValue(){
let mins = "0"
let secs = "00"
if (d.counter > 0) {
mins = Math.floor(d.counter / 60)
let s = d.counter % 60
secs = (s < 10) ? "0" + s : s;
}
},
State {
name: Constants.startupState.profileFetchingCompleted
when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetchingCompleted
PropertyChanges { target: title; text: Constants.onboarding.profileFetching.titleForSuccess }
},
State {
name: Constants.startupState.profileFetchingError
when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetchingError
PropertyChanges { target: title; text: Constants.onboarding.profileFetching.titleForError }
PropertyChanges { target: description; text: Constants.onboarding.profileFetching.descriptionForError }
PropertyChanges { target: button; visible: true}
PropertyChanges { target: link; visible: true }
return "%1:%2".arg(mins).arg(secs)
}
]
}
ColumnLayout {
anchors.centerIn: parent
@ -59,56 +55,167 @@ Item {
font.pixelSize: Constants.onboarding.profileFetching.titleFontSize
}
StatusBaseText {
id: description
property string nextText: ""
Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Text.AlignHCenter
visible: text.length > 0
wrapMode: Text.WordWrap
color: Style.current.secondaryText
font.pixelSize: Constants.onboarding.profileFetching.descriptionFontSize
Timer {
id: nextTextTimer
interval: 2500
running: description.nextText !== ""
onTriggered: { description.text = description.nextText }
ListView {
Layout.preferredWidth: 345
Layout.alignment: Qt.AlignCenter
implicitHeight: contentItem.childrenRect.height
clip: true
spacing: 8
model: root.startupStore.fetchingDataModel
delegate: Item {
width: ListView.view.width
height: 32
StatusIcon {
id: icon
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 20
color: Theme.palette.baseColor1
icon: model.icon
}
Text {
id: entity
anchors.left: icon.right
anchors.right: indicator.visible? indicator.left : loaded.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
leftPadding: 4
font.pixelSize: Constants.onboarding.profileFetching.entityFontSize
text: {
switch(model.entity) {
case Constants.onboarding.profileFetching.entity.profile:
return qsTr("Profile details")
case Constants.onboarding.profileFetching.entity.contacts:
return qsTr("Contacts")
case Constants.onboarding.profileFetching.entity.communities:
return qsTr("Community membership")
case Constants.onboarding.profileFetching.entity.settings:
return qsTr("Settings")
}
}
}
StatusLoadingIndicator {
id: indicator
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
visible: model.totalMessages === 0
}
Text {
id: loaded
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
visible: !indicator.visible
rightPadding: 4
font.pixelSize: Constants.onboarding.profileFetching.entityProgressFontSize
color: Theme.palette.baseColor1
text: "%1/%2".arg(model.loadedMessages).arg(model.totalMessages)
}
StatusProgressBar {
id: progress
anchors.top: entity.bottom
anchors.left: entity.left
anchors.right: parent.right
anchors.topMargin: 4
height: 3
from: 0
to: model.totalMessages
value: model.loadedMessages
backgroundColor: Theme.palette.baseColor5
backgroundBorderColor: backgroundColor
fillColor: {
if (model.totalMessages > 0 && model.totalMessages === model.loadedMessages)
return Theme.palette.successColor1
return Theme.palette.primaryColor1
}
}
}
ScrollBar.vertical: ScrollBar {}
}
StatusButton {
id: button
visible: false
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetching? 80 : -1
focus: true
text: Constants.onboarding.profileFetching.tryAgainText
enabled: root.startupStore.currentStartupState.stateType !== Constants.startupState.profileFetching
Timer {
id: timer
interval: 1000
running: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetching
repeat: true
onTriggered: {
d.counter--
let timerVal = d.getCurrTimerValue()
if (timerVal === "0:00") {
root.startupStore.doPrimaryAction()
}
}
}
onClicked: {
root.startupStore.doPrimaryAction()
}
}
StatusBaseText {
id: link
visible: false
Layout.alignment: Qt.AlignHCenter
font.pixelSize: Constants.keycard.general.buttonFontSize
text: Constants.onboarding.profileFetching.createNewProfileText
color: Theme.palette.primaryColor1
font.underline: linkMouseArea.containsMouse
MouseArea {
id: linkMouseArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
root.startupStore.doSecondaryAction()
}
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
states: [
State {
name: Constants.startupState.profileFetching
when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetching
PropertyChanges {
target: title
text: qsTr("Fetching data...")
}
PropertyChanges {
target: button
text: d.getCurrTimerValue()
}
PropertyChanges {
target: d
counter: d.timeout
}
},
State {
name: Constants.startupState.profileFetchingTimeout
when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetchingTimeout
PropertyChanges {
target: title
text: qsTr("Fetching data...")
}
PropertyChanges {
target: button
text: qsTr("Continue")
}
},
State {
name: Constants.startupState.profileFetchingSuccess
when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetchingSuccess
PropertyChanges {
target: title
text: qsTr("Fetching data...")
}
PropertyChanges {
target: button
text: qsTr("Continue")
}
}
]
}

View File

@ -77,8 +77,8 @@ QtObject {
readonly property string loginKeycardEmpty: "LoginKeycardEmpty"
readonly property string loginNotKeycard: "LoginNotKeycard"
readonly property string profileFetching: "ProfileFetching"
readonly property string profileFetchingCompleted: "ProfileFetchingCompleted"
readonly property string profileFetchingError: "ProfileFetchingError"
readonly property string profileFetchingSuccess: "ProfileFetchingSuccess"
readonly property string profileFetchingTimeout: "ProfileFetchingTimeout"
}
readonly property QtObject predefinedKeycardData: QtObject {
@ -318,18 +318,18 @@ QtObject {
readonly property int userImageHeight: 40
readonly property int titleFontSize: 17
readonly property QtObject profileFetching: QtObject {
readonly property int timeout: 120 //2 mins (120 secs)
readonly property int titleFontSize: 22
readonly property string titleForSuccess: qsTr("Profile successfully fetched")
readonly property string titleForError: qsTr("Unable to fetch your profile")
readonly property int descriptionFontSize: 15
readonly property string descriptionForError: qsTr("Sorry, we were unable to fetch your Status profile. If you are using Status on \nanother device, make sure Status is running and it is online and try again. ")
readonly property string descriptionForFetchingStarted: qsTr("Securely transferring data...")
readonly property string descriptionForFetchingInProgress: qsTr("This might take a while...")
readonly property int entityFontSize: 15
readonly property int entityProgressFontSize: 12
readonly property string imgInProgress: "onboarding/profile_fetching_in_progress"
readonly property string imgError: "onboarding/profile_fetching_error"
readonly property string imgCompleted: "onboarding/profile_fetching_completed"
readonly property string tryAgainText: qsTr("Try again")
readonly property string createNewProfileText: qsTr("Create new Status profile")
readonly property QtObject entity: QtObject {
readonly property string profile: "profile"
readonly property string contacts: "contacts"
readonly property string communities: "communities"
readonly property string settings: "settings"
}
}
}

@ -1 +1 @@
Subproject commit 704e58621def14b7d8efd85025aea999b3ac9b78
Subproject commit e4fef0fb362ca5e48292d916c83c8aaefa7ac6fa