Commit 7c7b59a6 authored by Ronan Abhamon's avatar Ronan Abhamon

feat(Calls/Calls): add `Chat` in right panel (Note: Binding loop detected on...

feat(Calls/Calls): add `Chat` in right panel (Note: Binding loop detected on `implicitHeight` of `IncomingMessage` line 8)
parent 5b310315
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS> <!DOCTYPE TS>
<TS version="2.1"> <TS version="2.1">
<context>
<name>Chat</name>
<message>
<source>newMessagePlaceholder</source>
<translation type="unfinished">Enter your message</translation>
</message>
</context>
<context> <context>
<name>ConfirmDialog</name> <name>ConfirmDialog</name>
<message> <message>
...@@ -98,7 +105,7 @@ ...@@ -98,7 +105,7 @@
</message> </message>
<message> <message>
<source>newMessagePlaceholder</source> <source>newMessagePlaceholder</source>
<translation>Enter your message</translation> <translation type="vanished">Enter your message</translation>
</message> </message>
</context> </context>
<context> <context>
......
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS> <!DOCTYPE TS>
<TS version="2.1"> <TS version="2.1">
<context>
<name>Chat</name>
<message>
<source>newMessagePlaceholder</source>
<translation type="unfinished">Entrer votre message.</translation>
</message>
</context>
<context> <context>
<name>ConfirmDialog</name> <name>ConfirmDialog</name>
<message> <message>
...@@ -98,7 +105,7 @@ ...@@ -98,7 +105,7 @@
</message> </message>
<message> <message>
<source>newMessagePlaceholder</source> <source>newMessagePlaceholder</source>
<translation>Entrer votre message.</translation> <translation type="vanished">Entrer votre message.</translation>
</message> </message>
</context> </context>
<context> <context>
......
...@@ -5,132 +5,150 @@ import QtQuick.Layouts 1.3 ...@@ -5,132 +5,150 @@ import QtQuick.Layouts 1.3
import Common 1.0 import Common 1.0
import Linphone 1.0 import Linphone 1.0
ScrollableListView { ColumnLayout {
id: chat spacing: 0
model: ListModel { ScrollableListView {
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' } id: chat
ListElement { $dateSection: 1465389121000; $timestamp: 1465389133000; $type: 'event'; $content: 'incoming_call' }
ListElement { $dateSection: 1465389121000; $timestamp: 1465389439000; $type: 'message'; $content: 'Perfect!' } Layout.fillHeight: true
ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'hangup' } Layout.fillWidth: true
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...' } model: ListModel {
ListElement { $dateSection: 1465994221000; $timestamp: 1465924391000; $type: 'event'; $content: 'lost_incoming_call' } 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!' }
Component { ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'hangup' }
id: sectionHeading 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 { Component {
implicitHeight: text.height + id: sectionHeading
container.anchors.topMargin +
container.anchors.bottomMargin
width: parent.width
Item { Item {
anchors.bottomMargin: 10 implicitHeight: text.height +
anchors.fill: parent container.anchors.topMargin +
anchors.leftMargin: 18 container.anchors.bottomMargin
anchors.topMargin: 20 width: parent.width
id: container
Item {
Text { anchors.bottomMargin: 10
color: '#434343' anchors.fill: parent
font.bold: true anchors.leftMargin: 18
id: text anchors.topMargin: 20
id: container
// Cast section to integer because Qt convert the
// $dateSection in string!!! Text {
text: new Date(+section).toLocaleDateString( color: '#434343'
Qt.locale() 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.criteria: ViewSection.FullString
section.delegate: sectionHeading section.delegate: sectionHeading
section.property: '$dateSection' section.property: '$dateSection'
delegate: Rectangle { delegate: Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 18 anchors.leftMargin: 18
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 18 anchors.rightMargin: 18
// Unable to use `height` property. // Unable to use `height` property.
// The height is given by message height. // The height is given by message height.
implicitHeight: layout.height + 10 implicitHeight: layout.height + 10
width: parent.width width: parent.width
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onEntered: parent.state = 'hover' onEntered: parent.state = 'hover'
onExited: parent.state = '' onExited: parent.state = ''
} }
RowLayout { RowLayout {
id: layout id: layout
spacing: 0 spacing: 0
// The height is computed with the message height. // The height is computed with the message height.
// Unable to use `height` and `implicitHeight` property. // Unable to use `height` and `implicitHeight` property.
width: parent.width width: parent.width
// Display time. // Display time.
Text { Text {
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.preferredHeight: 30 Layout.preferredHeight: 30
Layout.preferredWidth: 50 Layout.preferredWidth: 50
color: '#898989' color: '#898989'
font.bold: $type === 'event' font.bold: $type === 'event'
text: new Date($timestamp).toLocaleString( text: new Date($timestamp).toLocaleString(
Qt.locale(), Qt.locale(),
'hh:mm' 'hh:mm'
) )
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
// Icons area. // Icons area.
Row { Row {
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.preferredHeight: 30 Layout.preferredHeight: 30
Layout.preferredWidth: 54 Layout.preferredWidth: 54
spacing: 10 spacing: 10
Icon { Icon {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon: ($type === 'event' && $content) || '' icon: ($type === 'event' && $content) || ''
iconSize: 16 iconSize: 16
}
ActionButton {
anchors.verticalCenter: parent.verticalCenter
icon: 'delete'
iconSize: 16
id: removeAction
onClicked: chat.model.remove(index)
visible: false
}
} }
ActionButton { // Display content.
anchors.verticalCenter: parent.verticalCenter Loader {
icon: 'delete' Layout.fillWidth: true
iconSize: 16 id: loader
id: removeAction source: $type === 'message'
onClicked: chat.model.remove(index) ? (
visible: false 'qrc:/ui/modules/Linphone/Chat/' +
($outgoing ? 'Outgoing' : 'Incoming') +
'Message.qml'
) : 'qrc:/ui/modules/Linphone/Chat/Event.qml'
} }
} }
// Display content. states: State {
Loader { name: 'hover'
Layout.fillWidth: true PropertyChanges { target: removeAction; visible: 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 { Rectangle {
name: 'hover' Layout.fillWidth: true
PropertyChanges { target: removeAction; visible: true } Layout.preferredHeight: 80
color: '#E2E9EF'
DroppableTextArea {
anchors.fill: parent
anchors.margins: 10
placeholderText: qsTr('newMessagePlaceholder')
} }
} }
} }
...@@ -44,13 +44,8 @@ Window { ...@@ -44,13 +44,8 @@ Window {
} }
// Chat. // Chat.
childB: Rectangle { childB: Chat {
anchors.fill: parent anchors.fill: parent
color: 'green'
Text {
text: 'hello2'
}
} }
} }
} }
......
...@@ -110,25 +110,11 @@ ColumnLayout { ...@@ -110,25 +110,11 @@ ColumnLayout {
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
borderColor: '#C7C7C7' borderColor: '#C7C7C7'
bottomWidth: 1
leftWidth: 1 leftWidth: 1
topWidth: 1 topWidth: 1
Chat { Chat {
ScrollBar.vertical: ForceScrollBar { }
anchors.fill: parent anchors.fill: parent
} }
} }
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 80
color: '#E2E9EF'
DroppableTextArea {
anchors.fill: parent
anchors.margins: 10
placeholderText: qsTr('newMessagePlaceholder')
}
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment