From a7b8dc54bdd7bcc53b9adf657a0d811c3477313d Mon Sep 17 00:00:00 2001 From: "Sebastian J. Wolf" Date: Fri, 21 Aug 2020 14:26:56 +0200 Subject: [PATCH] Initial skeleton for chat page --- harbour-fernschreiber.pro | 1 + qml/pages/ChatPage.qml | 168 +++++++++++++++++++++++ qml/pages/OverviewPage.qml | 5 +- translations/harbour-fernschreiber-de.ts | 11 ++ translations/harbour-fernschreiber.ts | 11 ++ 5 files changed, 193 insertions(+), 3 deletions(-) create mode 100644 qml/pages/ChatPage.qml diff --git a/harbour-fernschreiber.pro b/harbour-fernschreiber.pro index e751b6f..7fc58bc 100644 --- a/harbour-fernschreiber.pro +++ b/harbour-fernschreiber.pro @@ -21,6 +21,7 @@ SOURCES += src/harbour-fernschreiber.cpp \ DISTFILES += qml/harbour-fernschreiber.qml \ qml/js/functions.js \ + qml/pages/ChatPage.qml \ qml/pages/CoverPage.qml \ qml/pages/InitializationPage.qml \ qml/pages/OverviewPage.qml \ diff --git a/qml/pages/ChatPage.qml b/qml/pages/ChatPage.qml new file mode 100644 index 0000000..8be1c91 --- /dev/null +++ b/qml/pages/ChatPage.qml @@ -0,0 +1,168 @@ +/* + 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 QtMultimedia 5.0 +import Sailfish.Silica 1.0 +import WerkWolf.Fernschreiber 1.0 +import "../components" +import "../js/twemoji.js" as Emoji +import "../js/functions.js" as Functions + +Page { + id: chatPage + allowedOrientations: Orientation.All + + property bool loading: true; + property variant chatInformation; + + function initializePage() { + chatPage.loading = false; + } + + Component.onCompleted: { + initializePage(); + } + + SilicaFlickable { + id: chatContainer + contentHeight: parent.height + contentWidth: parent.width + anchors.fill: parent + visible: !chatPage.loading + + Column { + id: chatColumn + width: parent.width + height: parent.height + spacing: Theme.paddingMedium + + Row { + id: headerRow + width: parent.width - (3 * Theme.horizontalPageMargin) + height: chatOverviewColumn.height + Theme.horizontalPageMargin + anchors.horizontalCenter: parent.horizontalCenter + spacing: Theme.paddingMedium + + ProfileThumbnail { + id: chatPictureThumbnail + photoData: (typeof chatInformation.photo !== "undefined") ? chatInformation.photo.small : "" + replacementStringHint: chatNameText.text + width: chatOverviewColumn.height + height: chatOverviewColumn.height + anchors.bottom: parent.bottom + } + + Column { + id: chatOverviewColumn + width: parent.width - chatPictureThumbnail.width - Theme.paddingMedium + anchors.bottom: parent.bottom + Text { + id: chatNameText + text: chatInformation.title !== "" ? Emoji.emojify(chatInformation.title, font.pixelSize) : qsTr("Unknown") + textFormat: Text.StyledText + font.pixelSize: Theme.fontSizeLarge + font.family: Theme.fontFamilyHeading + color: Theme.highlightColor + elide: Text.ElideRight + width: parent.width + maximumLineCount: 1 + horizontalAlignment: Text.AlignRight + onTruncatedChanged: { + // There is obviously a bug in QML in truncating text with images. + // We simply remove Emojis then... + if (truncated) { + text = text.replace(/\]+\/\>/g, ""); + } + } + } + Text { + id: chatStatusText + text: "This will become a status bar..." + textFormat: Text.StyledText + font.pixelSize: Theme.fontSizeSmall + font.family: Theme.fontFamilyHeading + color: Theme.secondaryColor + elide: Text.ElideRight + width: parent.width + maximumLineCount: 1 + horizontalAlignment: Text.AlignRight + } + } + } + + SilicaListView { + id: chatView + + width: parent.width + height: parent.height - ( 2 * Theme.paddingMedium ) - headerRow.height - newMessageRow.height + + clip: true + // visible: count > 0 + + // model: chatListModel + delegate: ListItem { + + id: chatItem + + //contentHeight: chatListRow.height + chatListSeparator.height + 2 * Theme.paddingMedium + contentWidth: parent.width + + } + + VerticalScrollDecorator {} + } + + Row { + id: newMessageRow + width: parent.width - Theme.horizontalPageMargin + height: sendMessageColumn.height + ( 2 * Theme.paddingLarge ) + anchors.left: parent.left + spacing: Theme.paddingMedium + Column { + id: sendMessageColumn + width: parent.width - Theme.fontSizeMedium - ( 2 * Theme.paddingMedium ) + anchors.verticalCenter: parent.verticalCenter + TextArea { + id: newMessageTextField + width: parent.width + font.pixelSize: Theme.fontSizeSmall + placeholderText: qsTr("Your message") + labelVisible: false + } + } + + Column { + width: Theme.fontSizeMedium + anchors.bottom: parent.bottom + anchors.bottomMargin: Theme.paddingLarge + IconButton { + id: newMessageSendButton + icon.source: "image://theme/icon-m-chat" + anchors.horizontalCenter: parent.horizontalCenter + onClicked: { + // Send message + } + } + } + } + } + } + +} diff --git a/qml/pages/OverviewPage.qml b/qml/pages/OverviewPage.qml index 5368476..de8efcf 100644 --- a/qml/pages/OverviewPage.qml +++ b/qml/pages/OverviewPage.qml @@ -148,7 +148,7 @@ Page { } SilicaFlickable { - id: aboutContainer + id: overviewContainer contentHeight: parent.height contentWidth: parent.width anchors.fill: parent @@ -207,8 +207,7 @@ Page { contentWidth: parent.width onClicked: { - // jump to chat details here... ;) - // pageStack.push(Qt.resolvedUrl("../pages/ConversationPage.qml"), { "conversationModel" : display, "myUserId": overviewPage.myUser.id_str, "configuration": overviewPage.configuration }); + pageStack.push(Qt.resolvedUrl("../pages/ChatPage.qml"), { "chatInformation" : display }); } Connections { diff --git a/translations/harbour-fernschreiber-de.ts b/translations/harbour-fernschreiber-de.ts index d62ea58..32b3dee 100644 --- a/translations/harbour-fernschreiber-de.ts +++ b/translations/harbour-fernschreiber-de.ts @@ -76,6 +76,17 @@ + + ChatPage + + Unknown + + + + Your message + + + CoverPage diff --git a/translations/harbour-fernschreiber.ts b/translations/harbour-fernschreiber.ts index d62ea58..32b3dee 100644 --- a/translations/harbour-fernschreiber.ts +++ b/translations/harbour-fernschreiber.ts @@ -76,6 +76,17 @@ + + ChatPage + + Unknown + + + + Your message + + + CoverPage