mirrors/linphone-desktop
1
0
Fork 0
mirror of https://gitlab.linphone.org/BC/public/linphone-desktop.git synced 2026-05-03 22:56:49 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(Chat): new component, supports events, messages and dates

Browse source
This commit is contained in:
Ronan Abhamon 2016-09-16 14:51:21 +02:00
parent 257beaf772
commit f3359e4f6c
16 changed files with 317 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
tests/imgs/hangup.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="122px" height="106px" viewBox="0 0 122 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>call_hangup</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-5908.000000, -17026.000000)" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
<g id="call_hangup" sketch:type="MSLayerGroup" transform="translate(5911.293554, 17028.843763)">
<path d="M116,31.643 C107.052,12.917 80.418,0 58.233,0 L57.771,0 C35.583,0 8.943,12.924 0,31.645 L3.263,55.891 L31.848,55.891 L33.871,31.76 L82.134,31.76 L84.152,55.891 L112.737,55.891 L116,31.643 L116,31.643 Z M37.789,79.794 L56.685,98.686 L58.002,100 L37.789,79.794 Z M78.214,79.813 L58.002,100 L78.214,79.813 Z M58.002,97.925 L58.002,57.915 L58.002,97.925 Z" id="Page-1" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

17
tests/imgs/incoming_call.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>call_incoming</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-5720.000000, -22563.000000)">
<g id="call_incoming" sketch:type="MSLayerGroup" transform="translate(5716.000000, 22560.000000)">
<rect id="Rectangle-1479" sketch:type="MSShapeGroup" x="0" y="0" width="40" height="40"></rect>
<g id="Imported-Layers-+-Path-Copy-3" transform="translate(6.000000, 6.000000)" stroke="#96C11F" stroke-width="5" sketch:type="MSShapeGroup" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.927462627,1.05262793 L0.927462627,24.9005215 L0.929496815,26.5628908 L0.927462627,1.05262793 Z M26.1025737,26.5711306 L0.929496815,26.5628908 L26.1025737,26.5711306 Z M2.22120622,25.2527707 L27.1603515,0 L2.22120622,25.2527707 Z" id="Imported-Layers"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

18
tests/imgs/lost_incoming_call.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>call_missed</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-5721.000000, -22957.000000)">
<g id="call_missed" sketch:type="MSLayerGroup" transform="translate(5716.000000, 22953.000000)">
<rect id="Rectangle-1479-Copy-2" sketch:type="MSShapeGroup" x="0" y="0" width="40" height="40"></rect>
<g id="Imported-Layers-+-Path-Copy-8" transform="translate(7.000000, 6.000000)" stroke="#FF0000" stroke-width="5" sketch:type="MSShapeGroup" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.976884746,27.068466 L26.5554953,0.818875394 L0.976884746,27.068466 Z" id="Imported-Layers" transform="translate(13.766190, 13.943671) rotate(-180.000000) translate(-13.766190, -13.943671) "></path>
<path d="M0.976884746,27.068466 L26.5554953,0.818875394 L0.976884746,27.068466 Z" id="Imported-Layers-Copy" transform="translate(13.766190, 13.943671) rotate(-90.000000) translate(-13.766190, -13.943671) "></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

18
tests/imgs/lost_outgoing_call.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>call_missed</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-5721.000000, -22957.000000)">
<g id="call_missed" sketch:type="MSLayerGroup" transform="translate(5716.000000, 22953.000000)">
<rect id="Rectangle-1479-Copy-2" sketch:type="MSShapeGroup" x="0" y="0" width="40" height="40"></rect>
<g id="Imported-Layers-+-Path-Copy-8" transform="translate(7.000000, 6.000000)" stroke="#FF0000" stroke-width="5" sketch:type="MSShapeGroup" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.976884746,27.068466 L26.5554953,0.818875394 L0.976884746,27.068466 Z" id="Imported-Layers" transform="translate(13.766190, 13.943671) rotate(-180.000000) translate(-13.766190, -13.943671) "></path>
<path d="M0.976884746,27.068466 L26.5554953,0.818875394 L0.976884746,27.068466 Z" id="Imported-Layers-Copy" transform="translate(13.766190, 13.943671) rotate(-90.000000) translate(-13.766190, -13.943671) "></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

19
tests/languages/en.ts
View file

@ -19,6 +19,25 @@
<translation>Please choose one or many files</translation>
</message>
</context>
<context>
<name>Event</name>
<message>
<source>incomingCall</source>
<translation>Incoming call</translation>
</message>
<message>
<source>hangup</source>
<translation>End call</translation>
</message>
<message>
<source>lostIncomingCall</source>
<translation>Lost incoming call</translation>
</message>
<message>
<source>lostOutgoingCall</source>
<translation>Lost outgoing call</translation>
</message>
</context>
<context>
<name>SelectContact</name>
<message>

19
tests/languages/fr.ts
View file

@ -19,6 +19,25 @@
<translation>Merci de choisir un ou plusieurs fichiers</translation>
</message>
</context>
<context>
<name>Event</name>
<message>
<source>incomingCall</source>
<translation>Appel entrant</translation>
</message>
<message>
<source>hangup</source>
<translation>Fin d&apos;appel</translation>
</message>
<message>
<source>lostIncomingCall</source>
<translation>Appel entrant manqué</translation>
</message>
<message>
<source>lostOutgoingCall</source>
<translation>Appel sortant manqué</translation>
</message>
</context>
<context>
<name>SelectContact</name>
<message>

6
tests/resources.qrc
View file

@ -5,11 +5,13 @@
<file>ui/components/scrollBar/ForceScrollBar.qml</file>
<file>ui/components/misc/MenuEntry.qml</file>
<file>ui/components/timeline/Timeline.qml</file>
<file>ui/components/image/Icon.qml</file>
<file>ui/components/select/SelectContact.qml</file>
<file>ui/components/collapse/Collapse.qml</file>
<file>ui/components/chat/IncomingMessage.qml</file>
<file>ui/components/chat/Chat.qml</file>
<file>ui/components/chat/OutgoingMessage.qml</file>
<file>ui/components/chat/Event.qml</file>
<file>ui/components/chat/Message.qml</file>
<file>ui/components/contact/Contact.qml</file>
<file>ui/components/contact/ShortContactDescription.qml</file>
@ -33,11 +35,15 @@
<file>ui/views/mainWindow/contacts.qml</file>
<file>ui/views/mainWindow/home.qml</file>
<file>ui/views/mainWindow/conversation.qml</file>
<file>imgs/lost_outgoing_call.svg</file>
<file>imgs/led_disconnected.svg</file>
<file>imgs/valid.svg</file>
<file>imgs/incoming_call.svg</file>
<file>imgs/led_do_not_disturb.svg</file>
<file>imgs/lost_incoming_call.svg</file>
<file>imgs/conference.svg</file>
<file>imgs/cam.svg</file>
<file>imgs/hangup.svg</file>
<file>imgs/chat.svg</file>
<file>imgs/chat_attachment.svg</file>
<file>imgs/led_connected.svg</file>

108
tests/ui/components/chat/Chat.qml
View file

@ -2,6 +2,8 @@ import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import 'qrc:/ui/components/form'
import 'qrc:/ui/components/image'
import 'qrc:/ui/components/scrollBar'
ListView {
@ -9,13 +11,52 @@ ListView {
boundsBehavior: Flickable.StopAtBounds
clip: true
highlightRangeMode: ListView.ApplyRange
spacing: 10
spacing: 0
model: ListModel {
ListElement { $timestamp: 1465389121; $type: 'message'; $message: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' }
ListElement { $type: 'message'; $message: 'Perfect!' }
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: 1465389121000; $type: 'event'; $content: 'incoming_call' }
ListElement { $dateSection: 1465389121000; $timestamp: 1465389421000; $type: 'message'; $content: 'Perfect!' }
ListElement { $dateSection: 1465389121000; $timestamp: 1465389121000; $type: 'event'; $content: 'hangup' }
ListElement { $dateSection: 1465994221000; $outgoing: true; $timestamp: 1465994221000; $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: 1465994221000; $type: 'event'; $content: 'lost_incoming_call' }
}
Component {
id: sectionHeading
Item {
implicitHeight: text.height +
container.anchors.topMargin +
container.anchors.bottomMargin
width: parent.width
Item {
anchors.bottomMargin: 10
anchors.fill: parent
anchors.leftMargin: 18
anchors.topMargin: 20
id: container
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
@ -24,28 +65,77 @@ ListView {
// Unable to use `height` property.
// The height is given by message height.
implicitHeight: layout.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
Rectangle {
// Display time.
Text {
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: 15
Layout.preferredWidth: 42
color: 'blue'
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: console.log('remove item')
visible: false
}
}
// Display content.
Loader {
Layout.fillWidth: true
id: loader
source: 'qrc:/ui/components/chat/IncomingMessage.qml'
source: $type === 'message'
? (
'qrc:/ui/components/chat/' +
($outgoing ? 'Outgoing' : 'Incoming') +
'Message.qml'
) : 'qrc:/ui/components/chat/Event.qml'
}
}
states: State {
name: 'hover'
PropertyChanges { target: removeAction; visible: true }
}
}
}

24
tests/ui/components/chat/Event.qml Normal file
View file

@ -0,0 +1,24 @@
import QtQuick 2.7
import 'qrc:/ui/scripts/utils.js' as Utils
// ===================================================================
Text {
Component {
// Never created.
// Private data for `lupdate`.
Item {
property variant i18n: [
QT_TR_NOOP('hangup'),
QT_TR_NOOP('incomingCall'),
QT_TR_NOOP('lostIncomingCall'),
QT_TR_NOOP('lostOutgoingCall')
]
}
}
color: '#898989'
font.bold: true
text: qsTr(Utils.snakeToCamel($content))
}

24
tests/ui/components/chat/IncomingMessage.qml
View file

@ -3,7 +3,25 @@ import QtQuick.Layouts 1.3
import 'qrc:/ui/components/contact'
Message {
backgroundColor: '#BFBFBF'
Layout.fillWidth: true
// ===================================================================
Item {
implicitHeight: message.height
RowLayout {
anchors.fill: parent
spacing: 10
Avatar {
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: 30
Layout.preferredWidth: 30
}
Message {
Layout.fillWidth: true
backgroundColor: '#BFBFBF'
id: message
}
}
}

15
tests/ui/components/chat/Message.qml
View file

@ -1,6 +1,9 @@
import QtQuick 2.7
// ===================================================================
Item {
default property alias content: content.data
property alias backgroundColor: rectangle.color
id: container
@ -21,9 +24,17 @@ Item {
Text {
anchors.left: container.left
anchors.right: container.right
padding: 8
id: text
text: $message
padding: 8
text: $content
wrapMode: Text.Wrap
// Little fix. Text may disappear with scrolling.
renderType: Text.NativeRendering
}
Item {
anchors.left: rectangle.right
id: content
}
}

21
tests/ui/components/chat/OutgoingMessage.qml
View file

@ -1 +1,22 @@
import QtQuick 2.7
import QtQuick.Layouts 1.3
import 'qrc:/ui/components/image'
Message {
Layout.fillWidth: true
backgroundColor: '#E4E4E4'
id: message
Item {
height: 30
width: 30
// TODO: Success and re-send icon.
Icon {
anchors.centerIn: parent
icon: 'valid'
iconSize: 16
}
}
}

9
tests/ui/components/form/ActionButton.qml
View file

@ -1,22 +1,23 @@
import QtQuick 2.7
import QtQuick.Controls 2.0
import 'qrc:/ui/components/image'
// ===================================================================
// An animated small button with an image.
// ===================================================================
Button {
property int iconSize
property string icon
property alias icon: icon.icon
// Ugly hack, use current size, ActionBar size,
// or other parent height.
height: iconSize || parent.iconSize || parent.height
width: iconSize || parent.iconSize || parent.height
Image {
Icon {
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: 'qrc:/imgs/' + parent.icon + '.svg'
id: icon
}
}

14
tests/ui/components/image/Icon.qml Normal file
View file

@ -0,0 +1,14 @@
import QtQuick 2.7
Image {
property int iconSize
property string icon
height: iconSize
width: iconSize
fillMode: Image.PreserveAspectFit
source: icon
? 'qrc:/imgs/' + icon + '.svg'
: ''
}

11
tests/ui/scripts/utils.js
View file

@ -8,8 +8,7 @@
//
// Supported options: isString, exitHandler.
//
// If exitHandler is used, window must implement returnedValue
// signal.
// If exitHandler is used, window must implement exitStatus signal.
function openWindow (window, parent, options) {
var object
@ -69,3 +68,11 @@ function openConfirmDialog (parent, options) {
}
)
}
// -------------------------------------------------------------------
function snakeToCamel (s) {
return s.replace(/(\_\w)/g, function (matches) {
return matches[1].toUpperCase()
})
}

1
tests/ui/views/mainWindow/contacts.qml
View file

@ -248,7 +248,6 @@ ColumnLayout {
}
}
states: State {
name: 'hover'
PropertyChanges { target: contact; color: '#D1D1D1' }