calloverlay: change the design for the audio-only hangup button

Change-Id: I642ef3a5c72aba911fad87c631fc3ccb59c483a0
Gitlab: #411

src/commoncomponents/HalfPill.qml

@@ -39,17 +39,19 @@ Item {
         id: rect
 
         property bool horizontal: type === HalfPill.Left ||
-                                  type == HalfPill.Right
+                                  type === HalfPill.Right
         property bool direction: type === HalfPill.Right ||
-                                 type == HalfPill.Bottom
+                                 type === HalfPill.Bottom
 
-        radius: root.radius * (type !== HalfPill.None)
-        width: root.size + radius
-        height: root.size + radius
+        property bool bp: type === HalfPill.None
+
+        radius: root.radius
+        width: root.size + radius * !bp
+        height: root.size + radius * !bp
         anchors.fill: root
-        anchors.leftMargin: horizontal * direction * -radius
-        anchors.rightMargin: horizontal * !direction * -radius
-        anchors.topMargin: !horizontal * direction * -radius
-        anchors.bottomMargin: !horizontal * !direction * -radius
+        anchors.leftMargin: horizontal * direction * -radius * !bp
+        anchors.rightMargin: horizontal * !direction * -radius * !bp
+        anchors.topMargin: !horizontal * direction * -radius * !bp
+        anchors.bottomMargin: !horizontal * !direction * -radius * !bp
     }
 }

src/mainview/components/CallActionBar.qml

@@ -338,7 +338,7 @@ Control {
                 background: HalfPill {
                     implicitWidth: root.height
                     implicitHeight: implicitWidth
-                    radius: 5
+                    radius: type === HalfPill.None ? 0 : 5
                     color: overflowButton.down ?
                                "#80aaaaaa" :
                                overflowButton.hovered ?
@@ -377,15 +377,11 @@ Control {
                         add: Transition {
                             NumberAnimation {
                                 property: "opacity"
-                                from: 0
-                                to: 1.0
-                                duration: 80
+                                from: 0 ; to: 1.0; duration: 80
                             }
                             NumberAnimation {
                                 property: "scale"
-                                from: 0
-                                to: 1.0
-                                duration: 80
+                                from: 0; to: 1.0; duration: 80
                             }
                         }
                     }

src/mainview/components/CallButtonDelegate.qml

@@ -55,7 +55,7 @@ ItemDelegate {
 
     background: HalfPill {
         anchors.fill: parent
-        radius: 5
+        radius: type === HalfPill.None ? 0 : 5
         color: {
             if (supplimentaryBackground.visible)
                 return "#c4272727"
@@ -85,7 +85,8 @@ ItemDelegate {
         }
     }
 
-    Rectangle {
+    // TODO: this can be a Rectangle once multistream is done
+    HalfPill {
         id: supplimentaryBackground
 
         visible: ItemAction.hasBg !== undefined
@@ -95,7 +96,8 @@ ItemDelegate {
                        JamiTheme.refuseRed :
                        JamiTheme.refuseRedTransparent
         anchors.fill: parent
-        radius: width / 2
+        radius: isLast ? 5 : width / 2
+        type: isLast ? HalfPill.Right : HalfPill.None
 
         Behavior on color {
             ColorAnimation { duration: JamiTheme.shortFadeDuration }