mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-29 09:49:20 +00:00
feat(mainWindow): conversation view (in progress)
This commit is contained in:
Ronan Abhamon
parent
b286809ea5
commit
f940f53d73
8 changed files with 268 additions and 27 deletions
22
tests/imgs/chat_attachment.svg
Normal file
22
tests/imgs/chat_attachment.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="120px" height="120px" viewBox="0 0 120 120" 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>chat_attachment</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(-3019.000000, -26419.000000)">
|
||||
<g id="chat_attachment" sketch:type="MSLayerGroup" transform="translate(3019.325879, 26419.202726)">
|
||||
<g id="chat_picture_over" fill="#E1E1E1" sketch:type="MSShapeGroup">
|
||||
<ellipse id="Oval-17-Copy-2" cx="60.0304079" cy="60.1705649" rx="59.5041322" ry="59.5041322"></ellipse>
|
||||
</g>
|
||||
<g id="chat_picture_default-copy" sketch:type="MSShapeGroup">
|
||||
<g id="chat_picture_default">
|
||||
<ellipse id="Oval-17-Copy-4" cx="59.9096471" cy="60.3716158" rx="59.5041322" ry="59.5041322"></ellipse>
|
||||
</g>
|
||||
<path d="M73.3846429,28.6226323 L73.3846429,77.8815953 C73.3785,86.0309656 66.7565,92.7232249 58.608,92.8185212 C50.4564286,92.8984471 43.8559286,86.3506693 43.8651429,78.204373 L43.8651429,33.8854471 C43.8651429,28.444336 48.288,23.9807804 53.7244286,23.9254471 C59.1547143,23.8639656 63.5437857,28.2230027 63.5437857,33.6671879 L63.5437857,77.9891879 C63.5437857,80.7097434 61.3262143,82.932299 58.6110714,82.9661138 C55.8959286,82.9968545 53.7090714,80.817336 53.7029286,78.0906323 L53.7029286,38.7025212 L48.7825,38.7517064 L48.7825,78.1428916 C48.7825,83.5840027 53.1807857,87.9461138 58.6202857,87.8907804 C64.0475,87.829299 68.4580714,83.3749656 68.4642143,77.9400027 L68.4642143,33.6149286 C68.4734286,25.4655582 61.8729286,18.9177804 53.7182857,19.0007804 C45.5728571,19.0930027 39.0122857,25.7760397 39,33.9284841 L39,80.7128175 C40.1947857,90.4115212 48.5736429,97.8446323 58.5987857,97.7431879 C68.6362143,97.6294471 77.0273571,90.0241879 78.2405714,80.2916693 L78.2405714,28.6226323 L73.3846429,28.6226323 L73.3846429,28.6226323 Z" id="Imported-Layers-Copy-5" fill="#444444"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -27,6 +27,21 @@
|
|||
<translation>ADD CONTACT</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>conversation</name>
|
||||
<message>
|
||||
<source>displayCallsAndMessages</source>
|
||||
<translation>All</translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>displayCalls</source>
|
||||
<translation>Calls</translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>displayMessages</source>
|
||||
<translation>Messages</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>home</name>
|
||||
<message>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,21 @@
|
|||
<translation>AJOUTER CONTACT</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>conversation</name>
|
||||
<message>
|
||||
<source>displayCallsAndMessages</source>
|
||||
<translation>Tout</translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>displayCalls</source>
|
||||
<translation>Appels</translation>
|
||||
</message>
|
||||
<message>
|
||||
<source>displayMessages</source>
|
||||
<translation>Messages</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>home</name>
|
||||
<message>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<!-- UI: Components. -->
|
||||
<file>ui/components/collapse/Collapse.qml</file>
|
||||
<file>ui/components/contact/Avatar.qml</file>
|
||||
<file>ui/components/contact/ShortContactDescription.qml</file>
|
||||
<file>ui/components/dialog/DialogDescription.qml</file>
|
||||
<file>ui/components/dialog/DialogPlus.qml</file>
|
||||
<file>ui/components/form/DarkButton.qml</file>
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
|
||||
<!-- UI: Views. -->
|
||||
<file>ui/views/mainWindow/contacts.qml</file>
|
||||
<file>ui/views/mainWindow/conversation.qml</file>
|
||||
<file>ui/views/mainWindow/home.qml</file>
|
||||
<file>ui/views/mainWindow/mainWindow.qml</file>
|
||||
<file>ui/views/manageAccounts.qml</file>
|
||||
|
|
@ -31,12 +33,13 @@
|
|||
<!-- Images. -->
|
||||
<file>imgs/avatar.svg</file>
|
||||
<file>imgs/camera.svg</file>
|
||||
<file>imgs/phone.svg</file>
|
||||
<file>imgs/chat_attachment.svg</file>
|
||||
<file>imgs/collapse.svg</file>
|
||||
<file>imgs/led_absent.svg</file>
|
||||
<file>imgs/led_connected.svg</file>
|
||||
<file>imgs/led_disconnected.svg</file>
|
||||
<file>imgs/led_do_not_disturb.svg</file>
|
||||
<file>imgs/phone.svg</file>
|
||||
<file>imgs/start_conference.svg</file>
|
||||
<file>imgs/valid.svg</file>
|
||||
</qresource>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Item {
|
|||
anchors.fill: parent
|
||||
color: '#8F8F8F'
|
||||
id: avatar
|
||||
radius: 20
|
||||
radius: 50
|
||||
}
|
||||
|
||||
// Initials.
|
||||
|
|
|
|||
30
tests/ui/components/contact/ShortContactDescription.qml
Normal file
30
tests/ui/components/contact/ShortContactDescription.qml
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import QtQuick 2.7
|
||||
|
||||
// ===================================================================
|
||||
|
||||
Column {
|
||||
property string sipAddress
|
||||
property string username
|
||||
|
||||
// Username.
|
||||
Text {
|
||||
clip: true
|
||||
color: '#5A585B'
|
||||
font.pointSize: 11
|
||||
font.weight: Font.DemiBold
|
||||
height: parent.height / 2
|
||||
text: username
|
||||
verticalAlignment: Text.AlignBottom
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
// Sip address.
|
||||
Text {
|
||||
clip: true
|
||||
color: '#5A585B'
|
||||
height: parent.height / 2
|
||||
text: sipAddress
|
||||
verticalAlignment: Text.AlignTop
|
||||
width: parent.width
|
||||
}
|
||||
}
|
||||
175
tests/ui/views/mainWindow/conversation.qml
Normal file
175
tests/ui/views/mainWindow/conversation.qml
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.0
|
||||
import QtQuick.Layouts 1.3
|
||||
|
||||
import 'qrc:/ui/components/contact'
|
||||
import 'qrc:/ui/components/form'
|
||||
import 'qrc:/ui/components/scrollBar'
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 0
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 102
|
||||
color: '#D1D1D1'
|
||||
|
||||
RowLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 40
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 40
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: 80
|
||||
spacing: 50
|
||||
width: parent.width
|
||||
|
||||
Avatar {
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: 80
|
||||
presence: 'connected' // TODO: Use C++.
|
||||
username: 'Cameron Andrews' // TODO: Use C++.
|
||||
}
|
||||
|
||||
Column {
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
|
||||
// Contact description.
|
||||
ShortContactDescription {
|
||||
height: parent.height * 0.60
|
||||
sipAddress: 'cam.andrews@sip.linphone.org' // TODO: Use C++.
|
||||
username: 'Cameron Andrews' // TODO: Use C++.
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
// Contact actions.
|
||||
Row {
|
||||
height: parent.height * 0.40
|
||||
width: parent.width
|
||||
|
||||
Row {
|
||||
height: parent.height
|
||||
spacing: 10
|
||||
width: parent.width / 2
|
||||
|
||||
Rectangle {
|
||||
color: 'blue'
|
||||
width: 32
|
||||
height: 32
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: 'red'
|
||||
width: 32
|
||||
height: 32
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
height: parent.height
|
||||
layoutDirection: Qt.RightToLeft
|
||||
spacing: 10
|
||||
width: parent.width / 2
|
||||
|
||||
Rectangle {
|
||||
color: 'green'
|
||||
width: 32
|
||||
height: 32
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: 'orange'
|
||||
width: 32
|
||||
height: 32
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 40
|
||||
color: '#C7C7C7'
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 1
|
||||
|
||||
ExclusiveButtons {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 40
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
texts: [
|
||||
qsTr('displayCallsAndMessages'),
|
||||
qsTr('displayCalls'),
|
||||
qsTr('displayMessages')
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
border.color: '#C7C7C7'
|
||||
border.width: 1
|
||||
id: messagesArea
|
||||
|
||||
ListView {
|
||||
ScrollBar.vertical: ForceScrollBar { }
|
||||
anchors.fill: parent
|
||||
anchors.bottomMargin: messagesArea.border.width
|
||||
anchors.topMargin: messagesArea.border.width
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
clip: true
|
||||
highlightRangeMode: ListView.ApplyRange
|
||||
spacing: 1
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 70
|
||||
border.color: textArea.activeFocus ? '#8E8E8E' : '#C7C7C7'
|
||||
border.width: 1
|
||||
id: newMessageArea
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
|
||||
// Message to send.
|
||||
Flickable {
|
||||
Layout.preferredHeight: parent.height
|
||||
Layout.fillWidth: true
|
||||
ScrollBar.vertical: ScrollBar { }
|
||||
TextArea.flickable: TextArea {
|
||||
id: textArea
|
||||
wrapMode: TextArea.Wrap
|
||||
}
|
||||
}
|
||||
|
||||
// DropArea.
|
||||
Rectangle {
|
||||
Layout.preferredHeight: parent.height - newMessageArea.border.width * 2
|
||||
Layout.preferredWidth: 40
|
||||
color: '#DDDDDD'
|
||||
|
||||
DropArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
Image {
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
fillMode: Image.PreserveAspectFit
|
||||
height: parent.height
|
||||
source: 'qrc:/imgs/chat_attachment.svg'
|
||||
width: parent.width
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import QtQuick.Controls 2.0
|
|||
import QtQuick.Layouts 1.3
|
||||
|
||||
import 'qrc:/ui/components/collapse'
|
||||
import 'qrc:/ui/components/contact'
|
||||
import 'qrc:/ui/components/form'
|
||||
import 'qrc:/ui/components/misc'
|
||||
|
||||
|
|
@ -30,31 +31,11 @@ ApplicationWindow {
|
|||
}
|
||||
|
||||
// User info.
|
||||
Column {
|
||||
Layout.preferredWidth: 200
|
||||
ShortContactDescription {
|
||||
Layout.fillHeight: parent.height
|
||||
|
||||
// Username.
|
||||
Text {
|
||||
clip: true
|
||||
color: '#5A585B'
|
||||
font.weight: Font.DemiBold
|
||||
height: parent.height / 2
|
||||
font.pointSize: 11
|
||||
text: 'Edward Miller'
|
||||
verticalAlignment: Text.AlignBottom
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
// Sip address.
|
||||
Text {
|
||||
clip: true
|
||||
color: '#5A585B'
|
||||
height: parent.height / 2
|
||||
text: 'e.miller@sip-linphone.org'
|
||||
verticalAlignment: Text.AlignTop
|
||||
width: parent.width
|
||||
}
|
||||
Layout.preferredWidth: 200
|
||||
sipAddress: 'e.miller@sip-linphone.org'
|
||||
username: 'Edward Miller'
|
||||
}
|
||||
|
||||
// User actions.
|
||||
|
|
@ -142,7 +123,7 @@ ApplicationWindow {
|
|||
Loader {
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
source: 'qrc:/ui/views/mainWindow/contacts.qml'
|
||||
source: 'qrc:/ui/views/mainWindow/conversation.qml'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue