From ddd894bdfa35e0dfdc99678bbc227097638b3cc2 Mon Sep 17 00:00:00 2001 From: "Sebastian J. Wolf" Date: Wed, 19 Aug 2020 16:47:59 +0200 Subject: [PATCH] Display chat pictures properly --- harbour-fernschreiber.pro | 1 + qml/components/ImageThumbnail.qml | 97 ----------------- qml/components/ProfileThumbnail.qml | 126 +++++++++++++++++++++++ qml/js/functions.js | 3 + qml/pages/AboutPage.qml | 6 +- qml/pages/OverviewPage.qml | 15 ++- translations/harbour-fernschreiber-de.ts | 4 + translations/harbour-fernschreiber.ts | 4 + 8 files changed, 149 insertions(+), 107 deletions(-) delete mode 100644 qml/components/ImageThumbnail.qml create mode 100644 qml/components/ProfileThumbnail.qml create mode 100644 qml/js/functions.js diff --git a/harbour-fernschreiber.pro b/harbour-fernschreiber.pro index 0a2d286..e751b6f 100644 --- a/harbour-fernschreiber.pro +++ b/harbour-fernschreiber.pro @@ -20,6 +20,7 @@ SOURCES += src/harbour-fernschreiber.cpp \ src/tdlibwrapper.cpp DISTFILES += qml/harbour-fernschreiber.qml \ + qml/js/functions.js \ qml/pages/CoverPage.qml \ qml/pages/InitializationPage.qml \ qml/pages/OverviewPage.qml \ diff --git a/qml/components/ImageThumbnail.qml b/qml/components/ImageThumbnail.qml deleted file mode 100644 index 1671b54..0000000 --- a/qml/components/ImageThumbnail.qml +++ /dev/null @@ -1,97 +0,0 @@ -/* - Copyright (C) 2020 Sebastian J. Wolf - - This file is part of Fernschreiber. - - Fernschreiber is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - Fernschreiber is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with Fernschreiber. If not, see . -*/ -import QtQuick 2.5 -import QtGraphicalEffects 1.0 -import Sailfish.Silica 1.0 - -Item { - - id: imageThumbnail - - property variant imageData; - - Image { - - Component.onCompleted: { - if (imageData.local.is_downloading_completed) { - singleImage.source = imageData.local.path; - } else { - tdLibWrapper.downloadFile(imageData.id); - } - } - - Connections { - target: tdLibWrapper - onFileUpdated: { - if (fileId === imageData.id) { - console.log("File updated, completed? " + fileInformation.local.is_downloading_completed); - imageThumbnail.imageData = fileInformation; - if (imageThumbnail.imageData.local.is_downloading_completed) { - singleImage.source = imageThumbnail.imageData.local.path; - } - } - } - } - - id: singleImage - width: parent.width - Theme.paddingSmall - height: parent.height - Theme.paddingSmall - anchors.centerIn: parent - - fillMode: Image.PreserveAspectCrop - autoTransform: true - asynchronous: true - visible: false - } - - Rectangle { - id: imageThumbnailMask - width: parent.width - Theme.paddingSmall - height: parent.height - Theme.paddingSmall - color: Theme.primaryColor - radius: parent.width / 2 - anchors.centerIn: singleImage - visible: false - } - - OpacityMask { - id: maskedThumbnail - source: singleImage - maskSource: imageThumbnailMask - anchors.fill: singleImage - visible: singleImage.status === Image.Ready ? true : false - opacity: singleImage.status === Image.Ready ? 1 : 0 - Behavior on opacity { NumberAnimation {} } - } - - Image { - id: imageLoadingBackgroundImage - source: "../../images/background" + ( Theme.colorScheme ? "-black" : "-white" ) + ".png" - anchors { - centerIn: parent - } - width: parent.width - 2 * Theme.paddingLarge - height: parent.height - 2 * Theme.paddingLarge - visible: singleImage.status !== Image.Ready - - fillMode: Image.PreserveAspectFit - opacity: 0.15 - } - -} diff --git a/qml/components/ProfileThumbnail.qml b/qml/components/ProfileThumbnail.qml new file mode 100644 index 0000000..c60fe42 --- /dev/null +++ b/qml/components/ProfileThumbnail.qml @@ -0,0 +1,126 @@ +/* + Copyright (C) 2020 Sebastian J. Wolf + + This file is part of Fernschreiber. + + Fernschreiber is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Fernschreiber is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Fernschreiber. If not, see . +*/ +import QtQuick 2.5 +import QtGraphicalEffects 1.0 +import Sailfish.Silica 1.0 + +Item { + + id: profileThumbnail + + property variant photoData; + property string replacementStringHint: "X" + + function getReplacementString() { + if (replacementStringHint.length > 2) { + // Remove all emoji images + var strippedText = replacementStringHint.replace(/\<[^>]+\>/g, "").trim(); + if (strippedText.length > 0) { + var textElements = strippedText.split(" "); + if (textElements.length > 1) { + return textElements[0].charAt(0) + textElements[textElements.length - 1].charAt(0); + } else { + return textElements[0].charAt(0); + } + } + } + return replacementStringHint; + } + + Component.onCompleted: { + if (typeof photoData === "object") { + if (photoData.local.is_downloading_completed) { + singleImage.source = photoData.local.path; + } else { + tdLibWrapper.downloadFile(photoData.id); + } + } + } + + Connections { + target: tdLibWrapper + onFileUpdated: { + if (fileId === photoData.id) { + console.log("File updated, completed? " + fileInformation.local.is_downloading_completed); + if (fileInformation.local.is_downloading_completed) { + photoData = fileInformation; + singleImage.source = photoData.local.path; + } + } + } + } + + Image { + id: singleImage + width: parent.width - Theme.paddingSmall + height: parent.height - Theme.paddingSmall + anchors.centerIn: parent + + fillMode: Image.PreserveAspectCrop + autoTransform: true + asynchronous: true + visible: false + } + + Rectangle { + id: profileThumbnailMask + width: parent.width - Theme.paddingSmall + height: parent.height - Theme.paddingSmall + color: Theme.primaryColor + radius: parent.width / 2 + anchors.centerIn: singleImage + visible: false + } + + OpacityMask { + id: maskedThumbnail + source: singleImage + maskSource: profileThumbnailMask + anchors.fill: singleImage + visible: singleImage.status === Image.Ready ? true : false + opacity: singleImage.status === Image.Ready ? 1 : 0 + Behavior on opacity { NumberAnimation {} } + } + + Item { + id: replacementThumbnailItem + width: parent.width - Theme.paddingSmall + height: parent.height - Theme.paddingSmall + visible: singleImage.status !== Image.Ready + + Rectangle { + id: replacementThumbnailBackground + anchors.fill: parent + color: (Theme.colorScheme === Theme.LightOnDark) ? Theme.darkSecondaryColor : Theme.lightSecondaryColor + radius: parent.width / 2 + opacity: 0.8 + } + + Text { + id: replacementThumbnailText + anchors.centerIn: replacementThumbnailBackground + text: getReplacementString() + color: Theme.primaryColor + font.bold: true + font.pixelSize: Theme.fontSizeLarge + } + + } + +} diff --git a/qml/js/functions.js b/qml/js/functions.js new file mode 100644 index 0000000..1eb9596 --- /dev/null +++ b/qml/js/functions.js @@ -0,0 +1,3 @@ +function getUserName(userInformation) { + return userInformation.first_name + " " + userInformation.last_name; +} diff --git a/qml/pages/AboutPage.qml b/qml/pages/AboutPage.qml index 2536b7d..087a5b3 100644 --- a/qml/pages/AboutPage.qml +++ b/qml/pages/AboutPage.qml @@ -20,6 +20,7 @@ import QtQuick 2.0 import Sailfish.Silica 1.0 import "../components" import "../js/twemoji.js" as Emoji +import "../js/functions.js" as Functions Page { id: aboutPage @@ -160,10 +161,11 @@ Page { } } - ImageThumbnail { - imageData: aboutPage.userInformation.profile_photo.big + ProfileThumbnail { + photoData: aboutPage.userInformation.profile_photo.small width: Theme.itemSizeExtraLarge height: Theme.itemSizeExtraLarge + replacementStringHint: aboutPage.userInformation.first_name + " " + aboutPage.userInformation.last_name anchors { horizontalCenter: parent.horizontalCenter } diff --git a/qml/pages/OverviewPage.qml b/qml/pages/OverviewPage.qml index b0f5e04..30ef3fb 100644 --- a/qml/pages/OverviewPage.qml +++ b/qml/pages/OverviewPage.qml @@ -24,6 +24,7 @@ import Nemo.Notifications 1.0 import WerkWolf.Fernschreiber 1.0 import "../components" import "../js/twemoji.js" as Emoji +import "../js/functions.js" as Functions Page { id: overviewPage @@ -198,14 +199,14 @@ Page { Column { id: chatListPictureColumn - width: parent.width / 6 - height: parent.width / 6 + width: chatListContentColumn.height + height: chatListContentColumn.height spacing: Theme.paddingSmall - ImageThumbnail { + ProfileThumbnail { id: chatListPictureThumbnail - visible: display.photo - imageData: display.photo.small + photoData: (typeof display.photo !== "undefined") ? display.photo.small : "" + replacementStringHint: chatListNameText.text width: parent.width height: parent.width } @@ -215,11 +216,9 @@ Page { id: chatListContentColumn width: parent.width * 5 / 6 - Theme.horizontalPageMargin - spacing: Theme.paddingSmall - Text { id: chatListNameText - text: Emoji.emojify(display.title, Theme.fontSizeMedium) + text: display.title !== "" ? Emoji.emojify(display.title, Theme.fontSizeMedium) : qsTr("Unknown") textFormat: Text.StyledText font.pixelSize: Theme.fontSizeMedium color: Theme.primaryColor diff --git a/translations/harbour-fernschreiber-de.ts b/translations/harbour-fernschreiber-de.ts index 2a83e07..a09918e 100644 --- a/translations/harbour-fernschreiber-de.ts +++ b/translations/harbour-fernschreiber-de.ts @@ -188,5 +188,9 @@ Updating content... + + Unknown + + diff --git a/translations/harbour-fernschreiber.ts b/translations/harbour-fernschreiber.ts index 2a83e07..a09918e 100644 --- a/translations/harbour-fernschreiber.ts +++ b/translations/harbour-fernschreiber.ts @@ -188,5 +188,9 @@ Updating content... + + Unknown + +