feat(app): calls in progress

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

@@ -38,7 +38,7 @@ Rectangle {
       ContactDescription {
         id: contactDescription
 
-        height: CallStyle.contactDescriptionHeight
+        height: CallStyle.header.contactDescriptionHeight
         horizontalTextAlignment: Text.AlignHCenter
         sipAddress: call.sipAddress
         username: LinphoneUtils.getContactUsername(_contactObserver.contact || call.sipAddress)
@@ -47,9 +47,9 @@ Rectangle {
 
       BusyIndicator {
         anchors.horizontalCenter: parent.horizontalCenter
-        color: CallStyle.busyIndicator.color
-        height: CallStyle.busyIndicator.height
-        width: CallStyle.busyIndicator.width
+        color: CallStyle.header.busyIndicator.color
+        height: CallStyle.header.busyIndicator.height
+        width: CallStyle.header.busyIndicator.width
 
         visible: call.isOutgoing
       }
@@ -64,7 +64,7 @@ Rectangle {
 
       Layout.fillHeight: true
       Layout.fillWidth: true
-      Layout.margins: CallStyle.containerMargins
+      Layout.margins: CallStyle.container.margins
 
       Avatar {
         id: avatar
@@ -73,14 +73,14 @@ Rectangle {
           var height = container.height
           var width = container.width
 
-          var size = height < CallStyle.avatar.maxSize && height > 0
+          var size = height < CallStyle.container.avatar.maxSize && height > 0
               ? height
-              : CallStyle.avatar.maxSize
+              : CallStyle.container.avatar.maxSize
           return size < width ? size : width
         }
 
         anchors.centerIn: parent
-        backgroundColor: CallStyle.avatar.backgroundColor
+        backgroundColor: CallStyle.container.avatar.backgroundColor
         image: _contactObserver.contact && _contactObserver.contact.avatar
         username: contactDescription.username
 
@@ -97,7 +97,7 @@ Rectangle {
       id: actionArea
 
       Layout.fillWidth: true
-      Layout.preferredHeight: CallStyle.actionAreaHeight
+      Layout.preferredHeight: CallStyle.actionArea.height
     }
   }
 }

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

@@ -39,16 +39,16 @@ Rectangle {
       id: info
 
       Layout.fillWidth: true
-      Layout.leftMargin: CallStyle.info.leftMargin
-      Layout.rightMargin: 20
-      Layout.preferredHeight: CallStyle.contactDescriptionHeight
+      Layout.leftMargin: CallStyle.header.leftMargin
+      Layout.rightMargin: CallStyle.header.rightMargin
+      Layout.preferredHeight: CallStyle.header.contactDescriptionHeight
 
       Icon {
         id: callQuality
 
         anchors.left: parent.left
         icon: 'call_quality_' + 2
-        iconSize: 40
+        iconSize: CallStyle.header.iconSize
       }
 
       ContactDescription {
@@ -67,7 +67,7 @@ Rectangle {
         id: cameraActions
 
         anchors.right: parent.right
-        iconSize: 40
+        iconSize: CallStyle.header.iconSize
 
         ActionButton {
           icon: 'screenshot'
@@ -92,7 +92,7 @@ Rectangle {
 
       Layout.fillWidth: true
       Layout.fillHeight: true
-      Layout.margins: CallStyle.containerMargins
+      Layout.margins: CallStyle.container.margins
 
       Component {
         id: avatar
@@ -102,13 +102,14 @@ Rectangle {
             var height = container.height
             var width = container.width
 
-            var size = height < CallStyle.avatar.maxSize && height > 0
+            var size = height < CallStyle.container.avatar.maxSize && height > 0
               ? height
-            : CallStyle.avatar.maxSize
+              : CallStyle.container.avatar.maxSize
+
             return size < width ? size : width
           }
 
-          backgroundColor: CallStyle.avatar.backgroundColor
+          backgroundColor: CallStyle.container.avatar.backgroundColor
           image: _contactObserver.contact ? _contactObserver.contact.vcard.avatar : ''
           username: contactDescription.username
 
@@ -132,65 +133,66 @@ Rectangle {
       }
     }
 
-    // ---------------------------------------------------------------
+    // -------------------------------------------------------------------------
     // Buttons.
-    // ---------------------------------------------------------------
+    // -------------------------------------------------------------------------
 
     Item {
       Layout.fillWidth: true
-      Layout.preferredHeight: CallStyle.actionAreaHeight
+      Layout.preferredHeight: CallStyle.actionArea.height
 
       GridLayout {
         anchors {
           left: parent.left
-          leftMargin: CallStyle.leftButtonsGroupMargin
+          leftMargin: CallStyle.actionArea.leftButtonsGroupMargin
           verticalCenter: parent.verticalCenter
         }
 
         rowSpacing: ActionBarStyle.spacing
-        columns: call.width < 645 && isVideoCall ? 2 : 4
+        columns: incall.width < CallStyle.actionArea.lowWidth ? 2 : 4
 
         ActionSwitch {
+          enabled: !call.microMuted
           icon: 'micro'
-          iconSize: CallStyle.iconSize
-          onClicked: enabled = !enabled
+          iconSize: CallStyle.actionArea.iconSize
+
+          onClicked: call.microMuted = enabled
         }
 
         ActionSwitch {
           icon: 'speaker'
-          iconSize: CallStyle.iconSize
+          iconSize: CallStyle.actionArea.iconSize
           onClicked: enabled = !enabled
         }
 
         ActionSwitch {
           icon: 'camera'
-          iconSize: CallStyle.iconSize
+          iconSize: CallStyle.actionArea.iconSize
           onClicked: enabled = !enabled
         }
 
         ActionButton {
-          Layout.preferredHeight: CallStyle.iconSize
-          Layout.preferredWidth: CallStyle.iconSize
-          icon: 'options'
-          iconSize: CallStyle.iconSize
+          Layout.preferredHeight: CallStyle.actionArea.iconSize
+          Layout.preferredWidth: CallStyle.actionArea.iconSize
+          icon: 'options' // TODO: display options.
+          iconSize: CallStyle.actionArea.iconSize
         }
       }
 
-      Rectangle {
+      Item {
         anchors.centerIn: parent
-        color: 'red'
-        height: CallStyle.userVideo.height
-        visible: incall.width >= 650
-        width: CallStyle.userVideo.width
+        height: CallStyle.actionArea.userVideo.height
+        visible: incall.width >= CallStyle.actionArea.lowWidth && call.videoOutputEnabled
+        width: CallStyle.actionArea.userVideo.width
       }
 
       ActionBar {
         anchors {
           right: parent.right
-          rightMargin: CallStyle.rightButtonsGroupMargin
+          rightMargin: CallStyle.actionArea.rightButtonsGroupMargin
           verticalCenter: parent.verticalCenter
         }
-        iconSize: CallStyle.iconSize
+        iconSize: CallStyle.actionArea.iconSize
 
         ActionSwitch {
           enabled: !call.pausedByUser

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

@@ -7,7 +7,7 @@ import App.Styles 1.0
 AbstractStartingCall {
   ActionBar {
     anchors.centerIn: parent
-    iconSize: CallStyle.iconSize
+    iconSize: CallStyle.actionArea.iconSize
 
     ActionButton {
       icon: 'video_call_accept'
@@ -25,10 +25,10 @@ AbstractStartingCall {
   ActionBar {
     anchors {
       right: parent.right
-      rightMargin: CallStyle.rightButtonsGroupMargin
+      rightMargin: CallStyle.actionArea.rightButtonsGroupMargin
       verticalCenter: parent.verticalCenter
     }
-    iconSize: CallStyle.iconSize
+    iconSize: CallStyle.actionArea.iconSize
 
     ActionButton {
       icon: 'hangup'

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

@@ -10,26 +10,26 @@ import App.Styles 1.0
 
 AbstractStartingCall {
   GridLayout {
-    columns: parent.width < CallStyle.lowWidth && call.videoOutputEnabled ? 1 : 2
+    columns: parent.width < CallStyle.actionArea.lowWidth && call.videoOutputEnabled ? 1 : 2
     rowSpacing: ActionBarStyle.spacing
 
     anchors {
       left: parent.left
-      leftMargin: CallStyle.leftButtonsGroupMargin
+      leftMargin: CallStyle.actionArea.leftButtonsGroupMargin
       verticalCenter: parent.verticalCenter
     }
 
     ActionSwitch {
       enabled: !call.microMuted
       icon: 'micro'
-      iconSize: CallStyle.iconSize
+      iconSize: CallStyle.actionArea.iconSize
 
       onClicked: call.microMuted = enabled
     }
 
     ActionSwitch {
       icon: 'speaker'
-      iconSize: CallStyle.iconSize
+      iconSize: CallStyle.actionArea.iconSize
 
       onClicked: enabled = !enabled
     }
@@ -37,8 +37,8 @@ AbstractStartingCall {
 
   Item {
     anchors.centerIn: parent
-    height: CallStyle.userVideo.height
-    width: CallStyle.userVideo.width
+    height: CallStyle.actionArea.userVideo.height
+    width: CallStyle.actionArea.userVideo.width
 
     visible: call.videoOutputEnabled
   }
@@ -46,10 +46,10 @@ AbstractStartingCall {
   ActionBar {
     anchors {
       right: parent.right
-      rightMargin: CallStyle.rightButtonsGroupMargin
+      rightMargin: CallStyle.actionArea.rightButtonsGroupMargin
       verticalCenter: parent.verticalCenter
     }
-    iconSize: CallStyle.iconSize
+    iconSize: CallStyle.actionArea.iconSize
 
     ActionButton {
       icon: 'hangup'

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

@@ -7,32 +7,41 @@ import Common 1.0
 
 QtObject {
   property color backgroundColor: Colors.f
-  property int actionAreaHeight: 100
-  property int contactDescriptionHeight: 60
-  property int containerMargins: 20
+
+  property QtObject actionArea: QtObject {
+    property int height: 100
     property int iconSize: 40
     property int leftButtonsGroupMargin: 50
     property int lowWidth: 415
     property int rightButtonsGroupMargin: 50
 
+    property QtObject userVideo: QtObject {
+      property int height: 90
+      property int width: 130
+    }
+  }
+
+  property QtObject container: QtObject {
+    property int margins: 20
+
     property QtObject avatar: QtObject {
       property color backgroundColor: Colors.w
       property int maxSize: 300
     }
-
-  property QtObject busyIndicator: QtObject {
-    property color color: Colors.g
-    property int height: 30
-    property int width: 30
   }
 
   property QtObject header: QtObject {
+    property int contactDescriptionHeight: 60
+    property int iconSize: 40
+    property int leftMargin: 20
+    property int rightMargin: 20
     property int spacing: 10
     property int topMargin: 26
-  }
 
-  property QtObject userVideo: QtObject {
-    property int height: 90
-    property int width: 130
+    property QtObject busyIndicator: QtObject {
+      property color color: Colors.g
+      property int height: 30
+      property int width: 30
+    }
   }
 }