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