calloverlay: fix overflow button design

Gitlab: #411
Change-Id: Ibf35422987d4f3e1f9bacc55bd8c536f7acef5db

images/icons/more_vert-24dp.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<circle cx="12" cy="4.3" r="2.3"/>
+	<circle cx="12" cy="12" r="2.3"/>
+	<circle cx="12" cy="19.7" r="2.3"/>
+</g>
+</svg>

images/icons/more_vert-24px.svg

-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="white" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-</svg>
\ No newline at end of file

resources.qrc

@@ -38,7 +38,6 @@
         <file>images/icons/phone_forwarded-24px.svg</file>
         <file>images/icons/ic_chat_black_24dp_2x.png</file>
         <file>images/icons/ic_chat_white_24dp.png</file>
-        <file>images/icons/more_vert-24px.svg</file>
         <file>images/icons/ic_check_white_18dp_2x.png</file>
         <file>images/icons/ic_clear_24px.svg</file>
         <file>images/icons/ic_content_copy.svg</file>
@@ -142,5 +141,6 @@
         <file>images/icons/add_people_black_24dp.svg</file>
         <file>images/icons/spk_black_24dp.svg</file>
         <file>images/icons/spk_none_black_24dp.svg</file>
+        <file>images/icons/more_vert-24dp.svg</file>
     </qresource>
 </RCC>

src/mainview/components/CallActionBar.qml

@@ -328,23 +328,35 @@ Control {
 
                 indicator: null
 
-                contentItem: Text {
-                    text: "⋮"
+                contentItem: ResponsiveImage {
                     color: "white"
-                    font.pointSize: 24
-                    font.weight: Font.Bold
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
+                    source: "qrc:/images/icons/more_vert-24dp.svg"
+                    anchors.fill: parent
+                    anchors.margins: 17
                 }
 
-                background: Rectangle {
+                background: HalfPill {
                     implicitWidth: root.height
                     implicitHeight: implicitWidth
+                    radius: 5
                     color: overflowButton.down ?
                                "#80aaaaaa" :
                                overflowButton.hovered ?
                                    "#80777777" :
                                    "#80444444"
+                    type: {
+                        if ((overflowItemListView.count &&
+                                !urgentOverflowListView.count) ||
+                                overflowHiddenListView.count) {
+                            return HalfPill.None
+                        } else {
+                            return HalfPill.Left
+                        }
+                    }
+
+                    Behavior on color {
+                        ColorAnimation { duration: JamiTheme.shortFadeDuration }
+                    }
                 }
 
                 Item {
@@ -354,6 +366,8 @@ Control {
                     anchors.bottomMargin: itemSpacing
                     visible: !overflowButton.popup.visible
                     ListView {
+                        id: urgentOverflowListView
+
                         spacing: itemSpacing
                         anchors.fill: parent
                         model: CallOverlayModel.overflowVisibleModel()
@@ -384,7 +398,7 @@ Control {
                     padding: 0
 
                     contentItem: ListView {
-                        id: overflowListView
+                        id: overflowHiddenListView
                         spacing: itemSpacing
                         implicitHeight: contentHeight
                         interactive: false

src/mainview/components/CallButtonDelegate.qml

@@ -216,6 +216,7 @@ ItemDelegate {
                     verticalAlignment: Text.AlignVCenter
                     text: DeviceName
                     elide: Text.ElideRight
+                    font.pointSize: 9
                     color: "white"
                 }
             }