mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-02-01 03:19:23 +00:00
feat(Calls/Calls): add Chat in right panel (Note: Binding loop detected on implicitHeight of IncomingMessage line 8)
This commit is contained in:
Ronan Abhamon
parent
5b310315e8
commit
7c7b59a61f
5 changed files with 147 additions and 134 deletions
|
|
@ -1,6 +1,13 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE TS>
|
||||
<TS version="2.1">
|
||||
<context>
|
||||
<name>Chat</name>
|
||||
<message>
|
||||
<source>newMessagePlaceholder</source>
|
||||
<translation type="unfinished">Enter your message</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>ConfirmDialog</name>
|
||||
<message>
|
||||
|
|
@ -98,7 +105,7 @@
|
|||
</message>
|
||||
<message>
|
||||
<source>newMessagePlaceholder</source>
|
||||
<translation>Enter your message</translation>
|
||||
<translation type="vanished">Enter your message</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE TS>
|
||||
<TS version="2.1">
|
||||
<context>
|
||||
<name>Chat</name>
|
||||
<message>
|
||||
<source>newMessagePlaceholder</source>
|
||||
<translation type="unfinished">Entrer votre message.</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>ConfirmDialog</name>
|
||||
<message>
|
||||
|
|
@ -98,7 +105,7 @@
|
|||
</message>
|
||||
<message>
|
||||
<source>newMessagePlaceholder</source>
|
||||
<translation>Entrer votre message.</translation>
|
||||
<translation type="vanished">Entrer votre message.</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
|
|
|
|||
|
|
@ -5,132 +5,150 @@ import QtQuick.Layouts 1.3
|
|||
import Common 1.0
|
||||
import Linphone 1.0
|
||||
|
||||
ScrollableListView {
|
||||
id: chat
|
||||
ColumnLayout {
|
||||
spacing: 0
|
||||
|
||||
model: ListModel {
|
||||
ListElement { $dateSection: 1465389121000; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' }
|
||||
ListElement { $dateSection: 1465389121000; $timestamp: 1465389133000; $type: 'event'; $content: 'incoming_call' }
|
||||
ListElement { $dateSection: 1465389121000; $timestamp: 1465389439000; $type: 'message'; $content: 'Perfect!' }
|
||||
ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'hangup' }
|
||||
ListElement { $dateSection: 1465994221000; $outgoing: true; $timestamp: 1465924321000; $type: 'message'; $content: 'You\'ve heard the expression, "Just believe it and it will come." Well, technically, that is true, however, \'believing\' is not just thinking that you can have it...' }
|
||||
ListElement { $dateSection: 1465994221000; $timestamp: 1465924391000; $type: 'event'; $content: 'lost_incoming_call' }
|
||||
}
|
||||
ScrollableListView {
|
||||
id: chat
|
||||
|
||||
Component {
|
||||
id: sectionHeading
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
model: ListModel {
|
||||
ListElement { $dateSection: 1465389121000; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' }
|
||||
ListElement { $dateSection: 1465389121000; $timestamp: 1465389133000; $type: 'event'; $content: 'incoming_call' }
|
||||
ListElement { $dateSection: 1465389121000; $timestamp: 1465389439000; $type: 'message'; $content: 'Perfect!' }
|
||||
ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'hangup' }
|
||||
ListElement { $dateSection: 1465994221000; $outgoing: true; $timestamp: 1465924321000; $type: 'message'; $content: 'You\'ve heard the expression, "Just believe it and it will come." Well, technically, that is true, however, \'believing\' is not just thinking that you can have it...' }
|
||||
ListElement { $dateSection: 1465994221000; $timestamp: 1465924391000; $type: 'event'; $content: 'lost_incoming_call' }
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitHeight: text.height +
|
||||
container.anchors.topMargin +
|
||||
container.anchors.bottomMargin
|
||||
width: parent.width
|
||||
Component {
|
||||
id: sectionHeading
|
||||
|
||||
Item {
|
||||
anchors.bottomMargin: 10
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 18
|
||||
anchors.topMargin: 20
|
||||
id: container
|
||||
implicitHeight: text.height +
|
||||
container.anchors.topMargin +
|
||||
container.anchors.bottomMargin
|
||||
width: parent.width
|
||||
|
||||
Text {
|
||||
color: '#434343'
|
||||
font.bold: true
|
||||
id: text
|
||||
Item {
|
||||
anchors.bottomMargin: 10
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 18
|
||||
anchors.topMargin: 20
|
||||
id: container
|
||||
|
||||
// Cast section to integer because Qt convert the
|
||||
// $dateSection in string!!!
|
||||
text: new Date(+section).toLocaleDateString(
|
||||
Qt.locale()
|
||||
)
|
||||
Text {
|
||||
color: '#434343'
|
||||
font.bold: true
|
||||
id: text
|
||||
|
||||
// Cast section to integer because Qt convert the
|
||||
// $dateSection in string!!!
|
||||
text: new Date(+section).toLocaleDateString(
|
||||
Qt.locale()
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.criteria: ViewSection.FullString
|
||||
section.delegate: sectionHeading
|
||||
section.property: '$dateSection'
|
||||
|
||||
delegate: Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 18
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 18
|
||||
|
||||
// Unable to use `height` property.
|
||||
// The height is given by message height.
|
||||
implicitHeight: layout.height + 10
|
||||
width: parent.width
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: parent.state = 'hover'
|
||||
onExited: parent.state = ''
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: layout
|
||||
spacing: 0
|
||||
|
||||
// The height is computed with the message height.
|
||||
// Unable to use `height` and `implicitHeight` property.
|
||||
width: parent.width
|
||||
|
||||
// Display time.
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.preferredHeight: 30
|
||||
Layout.preferredWidth: 50
|
||||
color: '#898989'
|
||||
font.bold: $type === 'event'
|
||||
text: new Date($timestamp).toLocaleString(
|
||||
Qt.locale(),
|
||||
'hh:mm'
|
||||
)
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
// Icons area.
|
||||
Row {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.preferredHeight: 30
|
||||
Layout.preferredWidth: 54
|
||||
spacing: 10
|
||||
|
||||
Icon {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: ($type === 'event' && $content) || ''
|
||||
iconSize: 16
|
||||
}
|
||||
|
||||
ActionButton {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: 'delete'
|
||||
iconSize: 16
|
||||
id: removeAction
|
||||
onClicked: chat.model.remove(index)
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
|
||||
// Display content.
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
id: loader
|
||||
source: $type === 'message'
|
||||
? (
|
||||
'qrc:/ui/modules/Linphone/Chat/' +
|
||||
($outgoing ? 'Outgoing' : 'Incoming') +
|
||||
'Message.qml'
|
||||
) : 'qrc:/ui/modules/Linphone/Chat/Event.qml'
|
||||
}
|
||||
}
|
||||
|
||||
states: State {
|
||||
name: 'hover'
|
||||
PropertyChanges { target: removeAction; visible: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.criteria: ViewSection.FullString
|
||||
section.delegate: sectionHeading
|
||||
section.property: '$dateSection'
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 80
|
||||
color: '#E2E9EF'
|
||||
|
||||
delegate: Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 18
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 18
|
||||
|
||||
// Unable to use `height` property.
|
||||
// The height is given by message height.
|
||||
implicitHeight: layout.height + 10
|
||||
width: parent.width
|
||||
|
||||
MouseArea {
|
||||
DroppableTextArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: parent.state = 'hover'
|
||||
onExited: parent.state = ''
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: layout
|
||||
spacing: 0
|
||||
|
||||
// The height is computed with the message height.
|
||||
// Unable to use `height` and `implicitHeight` property.
|
||||
width: parent.width
|
||||
|
||||
// Display time.
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.preferredHeight: 30
|
||||
Layout.preferredWidth: 50
|
||||
color: '#898989'
|
||||
font.bold: $type === 'event'
|
||||
text: new Date($timestamp).toLocaleString(
|
||||
Qt.locale(),
|
||||
'hh:mm'
|
||||
)
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
// Icons area.
|
||||
Row {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.preferredHeight: 30
|
||||
Layout.preferredWidth: 54
|
||||
spacing: 10
|
||||
|
||||
Icon {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: ($type === 'event' && $content) || ''
|
||||
iconSize: 16
|
||||
}
|
||||
|
||||
ActionButton {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: 'delete'
|
||||
iconSize: 16
|
||||
id: removeAction
|
||||
onClicked: chat.model.remove(index)
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
|
||||
// Display content.
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
id: loader
|
||||
source: $type === 'message'
|
||||
? (
|
||||
'qrc:/ui/modules/Linphone/Chat/' +
|
||||
($outgoing ? 'Outgoing' : 'Incoming') +
|
||||
'Message.qml'
|
||||
) : 'qrc:/ui/modules/Linphone/Chat/Event.qml'
|
||||
}
|
||||
}
|
||||
|
||||
states: State {
|
||||
name: 'hover'
|
||||
PropertyChanges { target: removeAction; visible: true }
|
||||
anchors.margins: 10
|
||||
placeholderText: qsTr('newMessagePlaceholder')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,13 +44,8 @@ Window {
|
|||
}
|
||||
|
||||
// Chat.
|
||||
childB: Rectangle {
|
||||
childB: Chat {
|
||||
anchors.fill: parent
|
||||
color: 'green'
|
||||
|
||||
Text {
|
||||
text: 'hello2'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,25 +110,11 @@ ColumnLayout {
|
|||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
borderColor: '#C7C7C7'
|
||||
bottomWidth: 1
|
||||
leftWidth: 1
|
||||
topWidth: 1
|
||||
|
||||
Chat {
|
||||
ScrollBar.vertical: ForceScrollBar { }
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 80
|
||||
color: '#E2E9EF'
|
||||
|
||||
DroppableTextArea {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
placeholderText: qsTr('newMessagePlaceholder')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue