From 94883f882beb33565c115b0593ddf498f1f065cd Mon Sep 17 00:00:00 2001
From: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
Date: Sun, 30 May 2021 22:46:15 -0400
Subject: [PATCH] calloverlay: fix overflow button design

Gitlab: #411
Change-Id: Ibf35422987d4f3e1f9bacc55bd8c536f7acef5db
---
 images/icons/more_vert-24dp.svg               | 10 +++++++
 images/icons/more_vert-24px.svg               |  3 --
 resources.qrc                                 |  2 +-
 src/mainview/components/CallActionBar.qml     | 30 ++++++++++++++-----
 .../components/CallButtonDelegate.qml         |  1 +
 5 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 images/icons/more_vert-24dp.svg
 delete mode 100644 images/icons/more_vert-24px.svg

diff --git a/images/icons/more_vert-24dp.svg b/images/icons/more_vert-24dp.svg
new file mode 100644
index 00000000..957cfd49
--- /dev/null
+++ b/images/icons/more_vert-24dp.svg
@@ -0,0 +1,10 @@
+<?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>
diff --git a/images/icons/more_vert-24px.svg b/images/icons/more_vert-24px.svg
deleted file mode 100644
index 3a1e4ed2..00000000
--- a/images/icons/more_vert-24px.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
diff --git a/resources.qrc b/resources.qrc
index 89cba5ce..4b8aac1b 100644
--- a/resources.qrc
+++ b/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>
diff --git a/src/mainview/components/CallActionBar.qml b/src/mainview/components/CallActionBar.qml
index 2f5ea79e..b00fdc87 100644
--- a/src/mainview/components/CallActionBar.qml
+++ b/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
diff --git a/src/mainview/components/CallButtonDelegate.qml b/src/mainview/components/CallButtonDelegate.qml
index 86e0f8e6..036a44b0 100644
--- a/src/mainview/components/CallButtonDelegate.qml
+++ b/src/mainview/components/CallButtonDelegate.qml
@@ -216,6 +216,7 @@ ItemDelegate {
                     verticalAlignment: Text.AlignVCenter
                     text: DeviceName
                     elide: Text.ElideRight
+                    font.pointSize: 9
                     color: "white"
                 }
             }