feat(app): calls views in progress

tests/assets/images/micro_off_hovered.svg

+<?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>micro_on</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="micro_on">
+            <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="#4B5964"></path>
+            <path d="M15.680106,21.1588052 C15.680106,23.2272241 17.3725587,24.9049836 19.4593354,24.9049836 C21.5467466,24.9049836 23.2391993,23.2272241 23.2391993,21.1588052 L23.2391993,11.7474365 C23.2391993,9.67775946 21.5467466,8 19.4593354,8 C17.3725587,8 15.680106,9.67775946 15.680106,11.7474365 L15.680106,21.1588052 L15.680106,21.1588052 Z M26.6155393,16.5901033 L26.6155393,20.6788163 C26.6155393,24.5976774 23.4114583,27.7732791 19.4593354,27.7732791 M19.4593354,27.7732791 L19.4593354,32.1916307 L19.4593354,27.7732791 Z M17.2326577,32.6854594 L21.6869648,32.6854594 L17.2326577,32.6854594 Z M12.3034487,16.5901033 L12.3034487,20.6788163 C12.3034487,24.5976774 15.5075297,27.7732791 19.4596526,27.7732791" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/micro_off_normal.svg

+<?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>micro_off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="micro_off">
+            <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="#D0D8DE"></path>
+            <path d="M15.680106,21.1588052 C15.680106,23.2272241 17.3725587,24.9049836 19.4593354,24.9049836 C21.5467466,24.9049836 23.2391993,23.2272241 23.2391993,21.1588052 L23.2391993,11.7474365 C23.2391993,9.67775946 21.5467466,8 19.4593354,8 C17.3725587,8 15.680106,9.67775946 15.680106,11.7474365 L15.680106,21.1588052 L15.680106,21.1588052 Z M26.6155393,16.5901033 L26.6155393,20.6788163 C26.6155393,24.5976774 23.4114583,27.7732791 19.4593354,27.7732791 M19.4593354,27.7732791 L19.4593354,32.1916307 L19.4593354,27.7732791 Z M17.2326577,32.6854594 L21.6869648,32.6854594 L17.2326577,32.6854594 Z M12.3034487,16.5901033 L12.3034487,20.6788163 C12.3034487,24.5976774 15.5075297,27.7732791 19.4596526,27.7732791 M10,29.8313182 L29.1397841,10.8541412 L10,29.8313182 Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/micro_off_pressed.svg

+<?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>micro_on_clic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="micro_on_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="#FF5E00"></path>
+            <path d="M15.680106,21.1588052 C15.680106,23.2272241 17.3725587,24.9049836 19.4593354,24.9049836 C21.5467466,24.9049836 23.2391993,23.2272241 23.2391993,21.1588052 L23.2391993,11.7474365 C23.2391993,9.67775946 21.5467466,8 19.4593354,8 C17.3725587,8 15.680106,9.67775946 15.680106,11.7474365 L15.680106,21.1588052 L15.680106,21.1588052 Z M26.6155393,16.5901033 L26.6155393,20.6788163 C26.6155393,24.5976774 23.4114583,27.7732791 19.4593354,27.7732791 M19.4593354,27.7732791 L19.4593354,32.1916307 L19.4593354,27.7732791 Z M17.2326577,32.6854594 L21.6869648,32.6854594 L17.2326577,32.6854594 Z M12.3034487,16.5901033 L12.3034487,20.6788163 C12.3034487,24.5976774 15.5075297,27.7732791 19.4596526,27.7732791" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/speaker_off_hovered.svg

+<?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>speaker_on</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="speaker_on">
+            <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="#4B5964"></path>
+            <path d="M10.1559954,23.7737278 L15.8840871,23.7737278 L22.3361811,29 L22.3361811,11 L15.8840871,16.2259714 L10,16.2259714 L10,23.7737278 L10.1559954,23.7737278 L10.1559954,23.7737278 Z M25.5099238,21.7675107 C26.548364,20.7459012 26.548364,19.0898471 25.5099238,18.0688393 M27.9740401,23.254199 C29.8472089,21.4119328 29.8475148,18.4241163 27.9740401,16.5818501" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/speaker_off_normal.svg

+<?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>speaker_off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="speaker_off">
+            <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="#D0D8DE"></path>
+            <path d="M10.1559954,23.7737278 L15.8840871,23.7737278 L22.3361811,29 L22.3361811,11 L15.8840871,16.2259714 L10,16.2259714 L10,23.7737278 L10.1559954,23.7737278 L10.1559954,23.7737278 Z M25.5099238,21.7675107 C26.548364,20.7459012 26.548364,19.0898471 25.5099238,18.0688393 M27.9740401,23.254199 C29.8472089,21.4119328 29.8475148,18.4241163 27.9740401,16.5818501" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M10,29.8313182 L29.1397841,10.8541412 L10,29.8313182 Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/speaker_off_pressed.svg

+<?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>speaker_on_clic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="speaker_on_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="#FF5E00"></path>
+            <path d="M10.1559954,23.7737278 L15.8840871,23.7737278 L22.3361811,29 L22.3361811,11 L15.8840871,16.2259714 L10,16.2259714 L10,23.7737278 L10.1559954,23.7737278 L10.1559954,23.7737278 Z M25.5099238,21.7675107 C26.548364,20.7459012 26.548364,19.0898471 25.5099238,18.0688393 M27.9740401,23.254199 C29.8472089,21.4119328 29.8475148,18.4241163 27.9740401,16.5818501" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/resources.qrc

@@ -179,7 +179,7 @@
     <file>ui/views/App/ManageAccounts.qml</file>
     <file>ui/views/App/NewCall.qml</file>
     <file>ui/views/App/qmldir</file>
-    <file>ui/views/App/Styles/Calls/CallsStyle.qml</file>
+    <file>ui/views/App/Styles/Calls/StartingCallStyle.qml</file>
     <file>ui/views/App/Styles/MainWindow/ContactsStyle.qml</file>
     <file>ui/views/App/Styles/MainWindow/ConversationStyle.qml</file>
     <file>ui/views/App/Styles/MainWindow/MainWindowStyle.qml</file>

tests/ui/views/App/Calls/AbstractCall.qml

@@ -5,6 +5,8 @@ import Common 1.0
 import Linphone 1.0
 import LinphoneUtils 1.0
 
+import App.Styles 1.0
+
 // ===================================================================
 
 Rectangle {
@@ -22,12 +24,12 @@ Rectangle {
 
   // -----------------------------------------------------------------
 
-  color: '#E8E8E8'
+  color: StartingCallStyle.backgroundColor
 
   ColumnLayout {
     anchors {
       fill: parent
-      topMargin: 26
+      topMargin: StartingCallStyle.header.topMargin
     }
 
     spacing: 0
@@ -37,18 +39,17 @@ Rectangle {
     // ---------------------------------------------------------------
 
     Column {
-      spacing: 10
-
       Layout.fillWidth: true
+      spacing: StartingCallStyle.header.spacing
 
       Text {
         id: callType
 
-        color: '#96A5B1'
+        color: StartingCallStyle.callType.color
 
         font {
           bold: true
-          pointSize: 17
+          pointSize: StartingCallStyle.callType.fontSize
         }
 
         horizontalAlignment: Text.AlignHCenter
@@ -59,6 +60,16 @@ Rectangle {
         anchors.horizontalCenter: parent.horizontalCenter
         visible: abstractCall.isOutgoing
       }
+
+      ContactDescription {
+        id: contactDescription
+
+        username: LinphoneUtils.getContactUsername(_contact)
+        sipAddress: abstractCall.sipAddress
+        height: StartingCallStyle.contactDescriptionHeight
+        horizontalTextAlignment: Text.AlignHCenter
+        width: parent.width
+      }
     }
 
     // ---------------------------------------------------------------
@@ -70,40 +81,23 @@ Rectangle {
 
       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
-        }
+      Layout.margins: StartingCallStyle.containerMargins
 
       Avatar {
         id: avatar
 
         function _computeAvatarSize () {
-            var height = container.height - contactDescription.height
+          var height = container.height
           var width = container.width
 
-            var size = height < 250 && height > 0 ? height : 250
+          var size = height < StartingCallStyle.avatar.maxSize && height > 0
+              ? height
+              : StartingCallStyle.avatar.maxSize
           return size < width ? size : width
         }
 
-          anchors {
-            top: contactDescription.bottom
-            horizontalCenter: parent.horizontalCenter
-          }
-
-          backgroundColor: '#A1A1A1'
+        anchors.centerIn: parent
+        backgroundColor: StartingCallStyle.avatar.backgroundColor
         image: _contact.avatar
         username: contactDescription.username
 
@@ -111,7 +105,6 @@ Rectangle {
         width: height
       }
     }
-    }
 
     // ---------------------------------------------------------------
     // Buttons.
@@ -120,9 +113,8 @@ Rectangle {
     Item {
       id: actionArea
 
-      Layout.alignment: Qt.AlignHCenter
       Layout.fillWidth: true
-      Layout.preferredHeight: 100
+      Layout.preferredHeight: StartingCallStyle.actionAreaHeight
     }
   }
 }

tests/ui/views/App/Calls/OutgoingCall.qml

@@ -5,6 +5,7 @@ import Common 1.0
 // ===================================================================
 
 AbstractCall {
+  isOutgoing: true
   callTypeLabel: isVideoCall
     ? 'OUTGOING VIDEO CALL'
     : 'OUTGOING AUDIO CALL'

tests/ui/views/App/Styles/Calls/CallsStyle.qml

-pragma Singleton
-import QtQuick 2.7
-
-import Common 1.0
-
-// ===================================================================
-
-QtObject {
-
-
-}

tests/ui/views/App/Styles/Calls/StartingCallStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// ===================================================================
+
+QtObject {
+  property color backgroundColor: '#E8E8E8'
+  property int actionAreaHeight: 100
+  property int contactDescriptionHeight: 60
+  property int containerMargins: 20
+
+  property QtObject header: QtObject {
+    property int spacing: 10
+    property int topMargin: 26
+  }
+
+  property QtObject avatar: QtObject {
+    property color backgroundColor: '#A1A1A1'
+    property int maxSize: 300
+  }
+
+  property QtObject callType: QtObject {
+    property color color: '#96A5B1'
+    property int fontSize: 17
+  }
+}

tests/ui/views/App/Styles/qmldir

@@ -4,7 +4,7 @@ module App.Styles
 
 # Views styles -------------------------------------------------------
 
-singleton CallsStyle        1.0 Calls/CallsStyle.qml
+singleton StartingCallStyle 1.0 Calls/StartingCallStyle.qml
 
 singleton ContactsStyle     1.0 MainWindow/ContactsStyle.qml
 singleton ConversationStyle 1.0 MainWindow/ConversationStyle.qml