Busy indicator for chat list
This commit is contained in:
Sebastian J. Wolf
parent
a6768bc9dd
commit
d4954e0d7e
3 changed files with 186 additions and 158 deletions
|
|
@ -54,11 +54,6 @@ Page {
|
|||
}
|
||||
}
|
||||
|
||||
BusyLabel {
|
||||
text: qsTr("Loading...")
|
||||
running: overviewPage.loading
|
||||
}
|
||||
|
||||
function setPageStatus() {
|
||||
switch (overviewPage.connectionState) {
|
||||
case TelegramAPI.WaitingForNetwork:
|
||||
|
|
@ -187,149 +182,120 @@ Page {
|
|||
}
|
||||
}
|
||||
|
||||
SilicaListView {
|
||||
|
||||
id: chatListView
|
||||
|
||||
Item {
|
||||
id: chatListItem
|
||||
width: parent.width
|
||||
height: parent.height - Theme.paddingMedium - headerRow.height
|
||||
|
||||
clip: true
|
||||
visible: count > 0
|
||||
SilicaListView {
|
||||
|
||||
model: chatListModel
|
||||
delegate: ListItem {
|
||||
id: chatListView
|
||||
|
||||
id: chatListItem
|
||||
anchors.fill: parent
|
||||
|
||||
contentHeight: chatListRow.height + chatListSeparator.height + 2 * Theme.paddingMedium
|
||||
contentWidth: parent.width
|
||||
clip: true
|
||||
visible: count > 0
|
||||
opacity: overviewPage.chatListCreated ? 1 : 0
|
||||
Behavior on opacity { NumberAnimation {} }
|
||||
|
||||
onClicked: {
|
||||
pageStack.push(Qt.resolvedUrl("../pages/ChatPage.qml"), { "chatInformation" : display });
|
||||
}
|
||||
model: chatListModel
|
||||
delegate: ListItem {
|
||||
|
||||
Connections {
|
||||
target: chatListModel
|
||||
onChatChanged: {
|
||||
if (overviewPage.chatListCreated) {
|
||||
// Force update of all list item elements. dataChanged() doesn't seem to trigger them all :(
|
||||
chatListPictureThumbnail.photoData = (typeof display.photo !== "undefined") ? display.photo.small : "";
|
||||
chatUnreadMessagesCountBackground.visible = display.unread_count > 0;
|
||||
chatUnreadMessagesCount.text = display.unread_count > 99 ? "99+" : display.unread_count;
|
||||
chatListNameText.text = display.title !== "" ? Emoji.emojify(display.title, Theme.fontSizeMedium) : qsTr("Unknown");
|
||||
chatListLastMessageText.text = (typeof display.last_message !== "undefined") ? Emoji.emojify(Functions.getMessageText(display.last_message, true), Theme.fontSizeExtraSmall) : qsTr("Unknown");
|
||||
messageContactTimeElapsedText.text = (typeof display.last_message !== "undefined") ? Functions.getDateTimeElapsed(display.last_message.date) : qsTr("Unknown");
|
||||
id: chatListItem
|
||||
|
||||
contentHeight: chatListRow.height + chatListSeparator.height + 2 * Theme.paddingMedium
|
||||
contentWidth: parent.width
|
||||
|
||||
onClicked: {
|
||||
pageStack.push(Qt.resolvedUrl("../pages/ChatPage.qml"), { "chatInformation" : display });
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: chatListModel
|
||||
onChatChanged: {
|
||||
if (overviewPage.chatListCreated) {
|
||||
// Force update of all list item elements. dataChanged() doesn't seem to trigger them all :(
|
||||
chatListPictureThumbnail.photoData = (typeof display.photo !== "undefined") ? display.photo.small : "";
|
||||
chatUnreadMessagesCountBackground.visible = display.unread_count > 0;
|
||||
chatUnreadMessagesCount.text = display.unread_count > 99 ? "99+" : display.unread_count;
|
||||
chatListNameText.text = display.title !== "" ? Emoji.emojify(display.title, Theme.fontSizeMedium) : qsTr("Unknown");
|
||||
chatListLastMessageText.text = (typeof display.last_message !== "undefined") ? Emoji.emojify(Functions.getMessageText(display.last_message, true), Theme.fontSizeExtraSmall) : qsTr("Unknown");
|
||||
messageContactTimeElapsedText.text = (typeof display.last_message !== "undefined") ? Functions.getDateTimeElapsed(display.last_message.date) : qsTr("Unknown");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: chatListColumn
|
||||
width: parent.width - ( 2 * Theme.horizontalPageMargin )
|
||||
spacing: Theme.paddingSmall
|
||||
anchors {
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Column {
|
||||
id: chatListColumn
|
||||
width: parent.width - ( 2 * Theme.horizontalPageMargin )
|
||||
spacing: Theme.paddingSmall
|
||||
anchors {
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Row {
|
||||
id: chatListRow
|
||||
width: parent.width
|
||||
height: chatListContentColumn.height
|
||||
spacing: Theme.paddingMedium
|
||||
Row {
|
||||
id: chatListRow
|
||||
width: parent.width
|
||||
height: chatListContentColumn.height
|
||||
spacing: Theme.paddingMedium
|
||||
|
||||
Column {
|
||||
id: chatListPictureColumn
|
||||
width: chatListContentColumn.height - Theme.paddingSmall
|
||||
height: chatListContentColumn.height - Theme.paddingSmall
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Column {
|
||||
id: chatListPictureColumn
|
||||
width: chatListContentColumn.height - Theme.paddingSmall
|
||||
height: chatListContentColumn.height - Theme.paddingSmall
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Item {
|
||||
id: chatListPictureItem
|
||||
width: parent.width
|
||||
height: parent.width
|
||||
|
||||
ProfileThumbnail {
|
||||
id: chatListPictureThumbnail
|
||||
photoData: (typeof display.photo !== "undefined") ? display.photo.small : ""
|
||||
replacementStringHint: chatListNameText.text
|
||||
Item {
|
||||
id: chatListPictureItem
|
||||
width: parent.width
|
||||
height: parent.width
|
||||
forceElementUpdate: overviewPage.chatListCreated
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: chatUnreadMessagesCountBackground
|
||||
color: Theme.highlightBackgroundColor
|
||||
width: Theme.fontSizeLarge
|
||||
height: Theme.fontSizeLarge
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
radius: parent.width / 2
|
||||
visible: display.unread_count > 0
|
||||
}
|
||||
ProfileThumbnail {
|
||||
id: chatListPictureThumbnail
|
||||
photoData: (typeof display.photo !== "undefined") ? display.photo.small : ""
|
||||
replacementStringHint: chatListNameText.text
|
||||
width: parent.width
|
||||
height: parent.width
|
||||
forceElementUpdate: overviewPage.chatListCreated
|
||||
}
|
||||
|
||||
Text {
|
||||
id: chatUnreadMessagesCount
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
font.bold: true
|
||||
color: Theme.primaryColor
|
||||
anchors.centerIn: chatUnreadMessagesCountBackground
|
||||
visible: chatUnreadMessagesCountBackground.visible
|
||||
text: display.unread_count > 99 ? "99+" : display.unread_count
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
id: chatUnreadMessagesCountBackground
|
||||
color: Theme.highlightBackgroundColor
|
||||
width: Theme.fontSizeLarge
|
||||
height: Theme.fontSizeLarge
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
radius: parent.width / 2
|
||||
visible: display.unread_count > 0
|
||||
}
|
||||
|
||||
Column {
|
||||
id: chatListContentColumn
|
||||
width: parent.width * 5 / 6 - Theme.horizontalPageMargin
|
||||
spacing: Theme.paddingSmall
|
||||
|
||||
Text {
|
||||
id: chatListNameText
|
||||
text: display.title !== "" ? Emoji.emojify(display.title, Theme.fontSizeMedium) : qsTr("Unknown")
|
||||
textFormat: Text.StyledText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.primaryColor
|
||||
elide: Text.ElideRight
|
||||
width: parent.width
|
||||
onTruncatedChanged: {
|
||||
// There is obviously a bug in QML in truncating text with images.
|
||||
// We simply remove Emojis then...
|
||||
if (truncated) {
|
||||
text = text.replace(/\<img [^>]+\/\>/g, "");
|
||||
Text {
|
||||
id: chatUnreadMessagesCount
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
font.bold: true
|
||||
color: Theme.primaryColor
|
||||
anchors.centerIn: chatUnreadMessagesCountBackground
|
||||
visible: chatUnreadMessagesCountBackground.visible
|
||||
text: display.unread_count > 99 ? "99+" : display.unread_count
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: chatListLastMessageRow
|
||||
width: parent.width
|
||||
Column {
|
||||
id: chatListContentColumn
|
||||
width: parent.width * 5 / 6 - Theme.horizontalPageMargin
|
||||
spacing: Theme.paddingSmall
|
||||
|
||||
Text {
|
||||
id: chatListLastUserText
|
||||
text: (typeof display.last_message !== "undefined") ? ( display.last_message.sender_user_id !== overviewPage.ownUserId ? Emoji.emojify(Functions.getUserName(tdLibWrapper.getUserInformation(display.last_message.sender_user_id)), font.pixelSize) : qsTr("You") ) : qsTr("Unknown")
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
color: Theme.highlightColor
|
||||
id: chatListNameText
|
||||
text: display.title !== "" ? Emoji.emojify(display.title, Theme.fontSizeMedium) : qsTr("Unknown")
|
||||
textFormat: Text.StyledText
|
||||
onTruncatedChanged: {
|
||||
// There is obviously a bug in QML in truncating text with images.
|
||||
// We simply remove Emojis then...
|
||||
if (truncated) {
|
||||
text = text.replace(/\<img [^>]+\/\>/g, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
Text {
|
||||
id: chatListLastMessageText
|
||||
text: (typeof display.last_message !== "undefined") ? Emoji.emojify(Functions.getMessageText(display.last_message, true), Theme.fontSizeExtraSmall) : qsTr("Unknown")
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.primaryColor
|
||||
width: parent.width - Theme.paddingMedium - chatListLastUserText.width
|
||||
elide: Text.ElideRight
|
||||
textFormat: Text.StyledText
|
||||
width: parent.width
|
||||
onTruncatedChanged: {
|
||||
// There is obviously a bug in QML in truncating text with images.
|
||||
// We simply remove Emojis then...
|
||||
|
|
@ -338,49 +304,111 @@ Page {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: messageContactTimeUpdater
|
||||
interval: 60000
|
||||
running: true
|
||||
repeat: true
|
||||
onTriggered: {
|
||||
if (typeof display.last_message !== "undefined") {
|
||||
messageContactTimeElapsedText.text = Functions.getDateTimeElapsed(display.last_message.date);
|
||||
Row {
|
||||
id: chatListLastMessageRow
|
||||
width: parent.width
|
||||
spacing: Theme.paddingSmall
|
||||
Text {
|
||||
id: chatListLastUserText
|
||||
text: (typeof display.last_message !== "undefined") ? ( display.last_message.sender_user_id !== overviewPage.ownUserId ? Emoji.emojify(Functions.getUserName(tdLibWrapper.getUserInformation(display.last_message.sender_user_id)), font.pixelSize) : qsTr("You") ) : qsTr("Unknown")
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
color: Theme.highlightColor
|
||||
textFormat: Text.StyledText
|
||||
onTruncatedChanged: {
|
||||
// There is obviously a bug in QML in truncating text with images.
|
||||
// We simply remove Emojis then...
|
||||
if (truncated) {
|
||||
text = text.replace(/\<img [^>]+\/\>/g, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
Text {
|
||||
id: chatListLastMessageText
|
||||
text: (typeof display.last_message !== "undefined") ? Emoji.emojify(Functions.getMessageText(display.last_message, true), Theme.fontSizeExtraSmall) : qsTr("Unknown")
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
color: Theme.primaryColor
|
||||
width: parent.width - Theme.paddingMedium - chatListLastUserText.width
|
||||
elide: Text.ElideRight
|
||||
textFormat: Text.StyledText
|
||||
onTruncatedChanged: {
|
||||
// There is obviously a bug in QML in truncating text with images.
|
||||
// We simply remove Emojis then...
|
||||
if (truncated) {
|
||||
text = text.replace(/\<img [^>]+\/\>/g, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: messageContactTimeElapsedText
|
||||
text: (typeof display.last_message !== "undefined") ? Functions.getDateTimeElapsed(display.last_message.date) : qsTr("Unknown")
|
||||
font.pixelSize: Theme.fontSizeTiny
|
||||
color: Theme.secondaryColor
|
||||
Timer {
|
||||
id: messageContactTimeUpdater
|
||||
interval: 60000
|
||||
running: true
|
||||
repeat: true
|
||||
onTriggered: {
|
||||
if (typeof display.last_message !== "undefined") {
|
||||
messageContactTimeElapsedText.text = Functions.getDateTimeElapsed(display.last_message.date);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: messageContactTimeElapsedText
|
||||
text: (typeof display.last_message !== "undefined") ? Functions.getDateTimeElapsed(display.last_message.date) : qsTr("Unknown")
|
||||
font.pixelSize: Theme.fontSizeTiny
|
||||
color: Theme.secondaryColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Separator {
|
||||
id: chatListSeparator
|
||||
|
||||
anchors {
|
||||
top: chatListColumn.bottom
|
||||
topMargin: Theme.paddingMedium
|
||||
}
|
||||
|
||||
width: parent.width
|
||||
color: Theme.primaryColor
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Separator {
|
||||
id: chatListSeparator
|
||||
|
||||
anchors {
|
||||
top: chatListColumn.bottom
|
||||
topMargin: Theme.paddingMedium
|
||||
}
|
||||
|
||||
width: parent.width
|
||||
color: Theme.primaryColor
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
VerticalScrollDecorator {}
|
||||
}
|
||||
|
||||
VerticalScrollDecorator {}
|
||||
Column {
|
||||
width: parent.width
|
||||
height: loadingLabel.height + loadingBusyIndicator.height + Theme.paddingMedium
|
||||
spacing: Theme.paddingMedium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
opacity: overviewPage.chatListCreated ? 0 : 1
|
||||
Behavior on opacity { NumberAnimation {} }
|
||||
visible: !overviewPage.chatListCreated
|
||||
|
||||
InfoLabel {
|
||||
id: loadingLabel
|
||||
text: qsTr("Loading chat list...")
|
||||
}
|
||||
|
||||
BusyIndicator {
|
||||
id: loadingBusyIndicator
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
running: !overviewPage.chatListCreated
|
||||
size: BusyIndicatorSize.Large
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@
|
|||
</message>
|
||||
<message>
|
||||
<source>Loading messages...</source>
|
||||
<translation>Nachrichten laden...</translation>
|
||||
<translation>Lade Nachrichten...</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
|
|
@ -275,10 +275,6 @@
|
|||
<source>About Fernschreiber</source>
|
||||
<translation>Über Fernschreiber</translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Loading...</source>
|
||||
<translation>Laden...</translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Fernschreiber</source>
|
||||
<translation>Fernschreiber</translation>
|
||||
|
|
@ -307,6 +303,10 @@
|
|||
<source>You</source>
|
||||
<translation>Sie</translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Loading chat list...</source>
|
||||
<translation>Lade Chatliste...</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>VideoPage</name>
|
||||
|
|
|
|||
|
|
@ -275,10 +275,6 @@
|
|||
<source>About Fernschreiber</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Loading...</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Fernschreiber</source>
|
||||
<translation type="unfinished"></translation>
|
||||
|
|
@ -307,6 +303,10 @@
|
|||
<source>You</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Loading chat list...</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>VideoPage</name>
|
||||
|
|
|
|||
Loading…
Reference in a new issue