Commit e07748ba authored by Ronan Abhamon's avatar Ronan Abhamon

feat(app): calls views in progress.

parent c3c64c75
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>call_accept_over</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="call_accept_over">
<circle fill="#7D9F21" cx="20" cy="20" r="20"></circle>
<g id="call_icon" transform="translate(9.000000, 9.000000)" stroke-width="1.5" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.797831313,3.39639949 C-0.629468455,7.43554002 1.37064325,13.2080051 4.60766925,16.445894 L4.67554581,16.5133156 C7.9118623,19.7504948 13.6842079,21.7511398 17.7208528,20.3234595 L20.7828661,16.3084488 L16.6121235,12.1370674 L12.7966095,15.3645475 L9.30959911,11.8770806 L9.24266856,11.8096591 L5.75613117,8.32219216 L8.98204149,4.50424154 L4.81295445,0.333333333 L0.797831313,3.39639949 L0.797831313,3.39639949 Z"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>call_accept default</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="call_accept-default">
<circle fill="#9ECD1D" cx="20" cy="20" r="20"></circle>
<g id="call_icon" transform="translate(9.000000, 9.000000)" stroke-width="1.5" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.797831313,3.39639949 C-0.629468455,7.43554002 1.37064325,13.2080051 4.60766925,16.445894 L4.67554581,16.5133156 C7.9118623,19.7504948 13.6842079,21.7511398 17.7208528,20.3234595 L20.7828661,16.3084488 L16.6121235,12.1370674 L12.7966095,15.3645475 L9.30959911,11.8770806 L9.24266856,11.8096591 L5.75613117,8.32219216 L8.98204149,4.50424154 L4.81295445,0.333333333 L0.797831313,3.39639949 L0.797831313,3.39639949 Z"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>call_accept_clic</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="call_accept_clic">
<circle fill="#9ECD1D" cx="20" cy="20" r="20"></circle>
<g id="call_icon" transform="translate(9.000000, 9.000000)" stroke-width="1.5" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.797831313,3.39639949 C-0.629468455,7.43554002 1.37064325,13.2080051 4.60766925,16.445894 L4.67554581,16.5133156 C7.9118623,19.7504948 13.6842079,21.7511398 17.7208528,20.3234595 L20.7828661,16.3084488 L16.6121235,12.1370674 L12.7966095,15.3645475 L9.30959911,11.8770806 L9.24266856,11.8096591 L5.75613117,8.32219216 L8.98204149,4.50424154 L4.81295445,0.333333333 L0.797831313,3.39639949 L0.797831313,3.39639949 Z"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>hangup_over</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hangup_over">
<circle fill="#DC4100" cx="20" cy="20" r="20"></circle>
<path d="M30.5377049,16.8536881 C28.9534689,13.3895361 24.237941,11 20.3101049,11 L20.2283082,11 C16.299941,11 11.5833508,13.390831 10,16.8540581 L10.5777115,21.3393637 L15.6386623,21.3393637 L15.9968328,16.8753322 L24.5417574,16.8753322 L24.8990426,21.3393637 L29.9599934,21.3393637 L30.5377049,16.8536881 L30.5377049,16.8536881 Z M16.6905115,25.7612171 L20.0360328,29.2560777 L20.2692066,29.4991567 L16.6905115,25.7612171 Z M23.8477246,25.7647319 L20.2692066,29.4991567 L23.8477246,25.7647319 Z M20.2692066,29.1152992 L20.2692066,21.7137866 L20.2692066,29.1152992 Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>hangup_default</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hangup_default">
<circle fill="#FF5E00" cx="20" cy="20" r="20"></circle>
<path d="M30.5377049,16.8536881 C28.9534689,13.3895361 24.237941,11 20.3101049,11 L20.2283082,11 C16.299941,11 11.5833508,13.390831 10,16.8540581 L10.5777115,21.3393637 L15.6386623,21.3393637 L15.9968328,16.8753322 L24.5417574,16.8753322 L24.8990426,21.3393637 L29.9599934,21.3393637 L30.5377049,16.8536881 L30.5377049,16.8536881 Z M16.6905115,25.7612171 L20.0360328,29.2560777 L20.2692066,29.4991567 L16.6905115,25.7612171 Z M23.8477246,25.7647319 L20.2692066,29.4991567 L23.8477246,25.7647319 Z M20.2692066,29.1152992 L20.2692066,21.7137866 L20.2692066,29.1152992 Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>hangup_clic</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hangup_clic">
<circle fill="#FF5E00" cx="20" cy="20" r="20"></circle>
<path d="M30.5377049,16.8536881 C28.9534689,13.3895361 24.237941,11 20.3101049,11 L20.2283082,11 C16.299941,11 11.5833508,13.390831 10,16.8540581 L10.5777115,21.3393637 L15.6386623,21.3393637 L15.9968328,16.8753322 L24.5417574,16.8753322 L24.8990426,21.3393637 L29.9599934,21.3393637 L30.5377049,16.8536881 L30.5377049,16.8536881 Z M16.6905115,25.7612171 L20.0360328,29.2560777 L20.2692066,29.4991567 L16.6905115,25.7612171 Z M23.8477246,25.7647319 L20.2692066,29.4991567 L23.8477246,25.7647319 Z M20.2692066,29.1152992 L20.2692066,21.7137866 L20.2692066,29.1152992 Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>video_call_accept_over</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="video_call_accept_over">
<path d="M20,40 C31.045695,40 40,31.045695 40,20 C40,8.954305 31.045695,0 20,0 C8.954305,0 0,8.954305 0,20 C0,31.045695 8.954305,40 20,40 Z" fill="#7D9F21"></path>
<g id="videocall_icon" transform="translate(9.000000, 13.000000)" stroke-linecap="round" stroke-width="1.5" stroke="#FFFFFF" stroke-linejoin="round">
<polygon points="21.9033897 6.53341215 21.9033897 0.673601511 16.1289093 5.25958769 16.1289093 0.333333333 0.333333333 0.333333333 0.333333333 12.9483398 16.1289093 12.9483398 16.1289093 8.02208543 21.9033897 12.6080716"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>video_call_accept_default</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="video_call_accept_default">
<path d="M20,40 C31.045695,40 40,31.045695 40,20 C40,8.954305 31.045695,0 20,0 C8.954305,0 0,8.954305 0,20 C0,31.045695 8.954305,40 20,40 Z" fill="#9ECD1D"></path>
<g id="videocall_icon" transform="translate(9.000000, 13.000000)" stroke-linecap="round" stroke-width="1.5" stroke="#FFFFFF" stroke-linejoin="round">
<polygon points="21.9033897 6.53341215 21.9033897 0.673601511 16.1289093 5.25958769 16.1289093 0.333333333 0.333333333 0.333333333 0.333333333 12.9483398 16.1289093 12.9483398 16.1289093 8.02208543 21.9033897 12.6080716"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>video_call_accept_clic</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="video_call_accept_clic">
<path d="M20,40 C31.045695,40 40,31.045695 40,20 C40,8.954305 31.045695,0 20,0 C8.954305,0 0,8.954305 0,20 C0,31.045695 8.954305,40 20,40 Z" fill="#9ECD1D"></path>
<g id="videocall_icon" transform="translate(9.000000, 13.000000)" stroke-linecap="round" stroke-width="1.5" stroke="#FFFFFF" stroke-linejoin="round">
<polygon points="21.9033897 6.53341215 21.9033897 0.673601511 16.1289093 5.25958769 16.1289093 0.333333333 0.333333333 0.333333333 0.333333333 12.9483398 16.1289093 12.9483398 16.1289093 8.02208543 21.9033897 12.6080716"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -4,11 +4,12 @@
<file>assets/images/attachment_normal.svg</file>
<file>assets/images/attachment_pressed.svg</file>
<file>assets/images/auto_answer.svg</file>
<file>assets/images/a-v-a-t-a-r-120120@3x.png</file>
<file>assets/images/call_accept_hovered.svg</file>
<file>assets/images/call_accept_normal.svg</file>
<file>assets/images/call_accept_pressed.svg</file>
<file>assets/images/call_hovered.svg</file>
<file>assets/images/call_normal.svg</file>
<file>assets/images/call_pressed.svg</file>
<file>assets/images/cat.jpg</file>
<file>assets/images/chat_error.svg</file>
<file>assets/images/chat_hovered.svg</file>
<file>assets/images/chat_normal.svg</file>
......@@ -31,6 +32,9 @@
<file>assets/images/delete_pressed.svg</file>
<file>assets/images/ended_call.svg</file>
<file>assets/images/filter.svg</file>
<file>assets/images/hangup_hovered.svg</file>
<file>assets/images/hangup_normal.svg</file>
<file>assets/images/hangup_pressed.svg</file>
<file>assets/images/history.svg</file>
<file>assets/images/home_normal.svg</file>
<file>assets/images/home_selected.svg</file>
......@@ -48,6 +52,9 @@
<file>assets/images/tooltip_arrow_left.svg</file>
<file>assets/images/tooltip_arrow_right.svg</file>
<file>assets/images/tooltip_arrow_top.svg</file>
<file>assets/images/video_call_accept_hovered.svg</file>
<file>assets/images/video_call_accept_normal.svg</file>
<file>assets/images/video_call_accept_pressed.svg</file>
<file>assets/images/video_call_hovered.svg</file>
<file>assets/images/video_call_normal.svg</file>
<file>assets/images/video_call_pressed.svg</file>
......@@ -149,8 +156,8 @@
<file>ui/scripts/Utils/utils.js</file>
<file>ui/views/App/Calls/AbstractCall.qml</file>
<file>ui/views/App/Calls/Calls.qml</file>
<file>ui/views/App/Calls/StartingIncomingCall.qml</file>
<file>ui/views/App/Calls/StartingOutgoingCall.qml</file>
<file>ui/views/App/Calls/IncomingCall.qml</file>
<file>ui/views/App/Calls/OutgoingCall.qml</file>
<file>ui/views/App/MainWindow/Contact.qml</file>
<file>ui/views/App/MainWindow/Contacts.qml</file>
<file>ui/views/App/MainWindow/Conversation.qml</file>
......
......@@ -24,9 +24,9 @@ Item {
Image {
function _checkIconSize () {
Utils.assert(
iconSize != null && iconSize > 0,
iconSize != null && iconSize >= 0,
'`iconSize` must be defined and must be positive. (icon=`' +
icon + '`)'
icon + '`, iconSize=' + iconSize + ')'
)
}
......
......@@ -34,6 +34,7 @@ Item {
property color foregroundColor: item.foregroundColor
property var image: imageContainer
// See: https://www.opengl.org/sdk/docs/man/html/mix.xhtml
fragmentShader: '
uniform lowp sampler2D image;
uniform lowp sampler2D mask;
......
......@@ -9,8 +9,11 @@ import Utils 1.0
// ===================================================================
Item {
id: avatar
property alias image: roundedImage.source
property alias presenceLevel: presenceLevel.level
property color backgroundColor: AvatarStyle.backgroundColor
property string username
property var _initialsRegex: /^\s*([^\s\.]+)(?:[\s\.]+([^\s\.]+))?/
......@@ -34,6 +37,13 @@ Item {
// -----------------------------------------------------------------
RoundedImage {
id: roundedImage
anchors.fill: parent
backgroundColor: avatar.backgroundColor
}
Text {
anchors.centerIn: parent
color: AvatarStyle.initials.color
......@@ -50,18 +60,14 @@ Item {
text: _computeInitials()
}
RoundedImage {
id: roundedImage
anchors.fill: parent
backgroundColor: AvatarStyle.backgroundColor
}
PresenceLevel {
id: presenceLevel
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors {
bottom: parent.bottom
right: parent.right
}
height: parent.height / 3
width: parent.width / 3
}
......
// ===================================================================
// Contains linphone helpers.
// ===================================================================
.pragma library
.import 'qrc:/ui/scripts/Utils/utils.js' as Utils
// Returns the username of a contact object or URI string.
function getContactUsername (contact) {
return Utils.isString(contact)
? contact.substring(4, contact.indexOf('@')) // 4 = length("sip:")
: contact.username
}
module LinphoneUtils
LinphoneUtils 1.0 linphone-utils.js
import QtQuick 2.7
import QtQuick.Layouts 1.3
import Common 1.0
import Linphone 1.0
import LinphoneUtils 1.0
// ===================================================================
Rectangle {
id: abstractCall
default property alias _actionArea: actionArea.data
property alias callTypeLabel: callType.text
property bool isOutgoing: false
property bool isVideoCall: false
property string sipAddress
property var _contact: ContactsListModel.mapSipAddressToContact(
sipAddress
) || sipAddress
// -----------------------------------------------------------------
color: '#E8E8E8'
ColumnLayout {
anchors {
fill: parent
topMargin: 26
}
spacing: 0
// ---------------------------------------------------------------
// Call type.
// ---------------------------------------------------------------
Column {
spacing: 10
Layout.fillWidth: true
Text {
id: callType
color: '#96A5B1'
font {
bold: true
pointSize: 17
}
horizontalAlignment: Text.AlignHCenter
width: parent.width
}
CaterpillarAnimation {
anchors.horizontalCenter: parent.horizontalCenter
visible: abstractCall.isOutgoing
}
}
// ---------------------------------------------------------------
// Contact visual.
// ---------------------------------------------------------------
Item {
id: container
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 20
Item {
anchors.verticalCenter: parent.verticalCenter
implicitHeight: contactDescription.height + avatar.height
width: parent.width
ContactDescription {
id: contactDescription
username: LinphoneUtils.getContactUsername(_contact)
sipAddress: abstractCall.sipAddress
height: 60
horizontalTextAlignment: Text.AlignHCenter
width: parent.width
}
Avatar {
id: avatar
function _computeAvatarSize () {
var height = container.height - contactDescription.height
var width = container.width
var size = height < 250 && height > 0 ? height : 250
return size < width ? size : width
}
anchors {
top: contactDescription.bottom
horizontalCenter: parent.horizontalCenter
}
backgroundColor: '#A1A1A1'
image: _contact.avatar
username: contactDescription.username
height: _computeAvatarSize()
width: height
}
}
}
// ---------------------------------------------------------------
// Buttons.
// ---------------------------------------------------------------
Item {
id: actionArea
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.preferredHeight: 100
}
}
}
......@@ -78,14 +78,13 @@ Window {
closingEdge: Qt.RightEdge
defaultChildAWidth: 300
defaultClosed: true
minimumLeftLimit: 250
minimumRightLimit: 350
minimumLeftLimit: 350
minimumRightLimit: 250
resizeAInPriority: true
// Call.
childA: AbstractCall {
childA: IncomingCall {
anchors.fill: parent
callTypeLabel: 'INCOMING VIDEO CALL'
sipAddress: 'sip:erwan.croze@sip.linphone.org'
}
......
import Common 1.0
import Linphone 1.0
StartingCall {
avatarImage: "qrc:/imgs/cat_contact.jpg"
callType: 'INCOMING CALL'
sipAddress: 'mister-meow@sip-linphone.org'
username: 'Mister Meow'
// ===================================================================
AbstractCall {
callTypeLabel: isVideoCall
? 'INCOMING VIDEO CALL'
: 'INCOMING AUDIO CALL'
ActionBar {
anchors.centerIn: parent
iconSize: 40
ActionButton {
icon: 'cam'
icon: 'video_call_accept'
}
ActionButton {
icon: 'call'
icon: 'call_accept'
}
}
ActionBar {
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 85
}
iconSize: 40
ActionButton {
icon: 'hangup'
......
import Common 1.0
// ===================================================================
AbstractCall {
callTypeLabel: isVideoCall
? 'OUTGOING VIDEO CALL'
: 'OUTGOING AUDIO CALL'
ActionBar {
anchors.centerIn: parent
iconSize: 40
ActionButton {
icon: 'video_call_accept'
}
ActionButton {
icon: 'call_accept'
}
}
ActionBar {
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 85
}
iconSize: 40
ActionButton {
icon: 'hangup'
}
}
}
import QtQuick 2.7
import QtQuick.Layouts 1.3
import Common 1.0
import Linphone 1.0
StartingCall {
avatarImage: "qrc:/imgs/cat_contact.jpg"
callType: 'OUTGOING CALL'
sipAddress: 'mister-meow@sip-linphone.org'
username: 'Mister Meow'
RowLayout {
anchors.fill: parent
spacing: 0
ActionBar {
iconSize: 40
ActionButton {
icon: 'micro'
}
ActionButton {
icon: 'speaker'
}
ActionButton {
icon: 'cam'
}
}
// TODO: Cam.
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
ActionBar {
iconSize: 40
ActionButton {
icon: 'hangup'
}
ActionButton {
icon: 'chat'
}
}
}
}
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