Initial skeleton for chat page
This commit is contained in:
Sebastian J. Wolf
parent
bfbc310bc9
commit
a7b8dc54bd
5 changed files with 193 additions and 3 deletions
|
|
@ -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 \
|
||||
|
|
|
|||
168
qml/pages/ChatPage.qml
Normal file
168
qml/pages/ChatPage.qml
Normal file
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
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(/\<img [^>]+\/\>/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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -76,6 +76,17 @@
|
|||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>ChatPage</name>
|
||||
<message>
|
||||
<source>Unknown</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Your message</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>CoverPage</name>
|
||||
<message>
|
||||
|
|
|
|||
|
|
@ -76,6 +76,17 @@
|
|||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>ChatPage</name>
|
||||
<message>
|
||||
<source>Unknown</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>Your message</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>CoverPage</name>
|
||||
<message>
|
||||
|
|
|
|||
Loading…
Reference in a new issue