calloverlay: implement new action button design

- minor cosmetic changes to the call view overlay
- add the ability to change audio/video input during a call
  from the call screen overlay

Gitlab: #411
Change-Id: Id6bbb2278d807f3bd7ad1478db405669088584ce

images/icons/add_people_black_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">
+<path d="M16.1,11.3c1.1-0.7,1.8-2,1.8-3.3c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4c0,1.3,0.7,2.6,1.8,3.3c-0.6,0.3-1.2,0.6-1.8,1.1
+	c-0.3-0.3-0.6-0.5-1-0.7c0.6-0.6,1-1.4,1-2.3c0-1.8-1.4-3.2-3.2-3.2c-1.8,0-3.2,1.4-3.2,3.2c0,0.9,0.4,1.7,1,2.3
+	c-1.5,0.8-2.5,2.4-2.5,4.2c0,0.6,0.5,1.1,1.1,1.1h4.7c0,0.6,0.5,1.1,1.1,1.1h6.5l-0.3-0.2c-0.3-0.2-0.5-0.6-0.7-1l0-0.1H9.1
+	c0-0.3,0.1-0.7,0.1-1c0.1-0.6,0.4-1.1,0.7-1.6c0.2-0.3,0.4-0.6,0.7-0.8c0.9-0.8,2.1-1.3,3.3-1.3c1.1,0,2.1,0.4,3,1l0.1,0.1l0.1-0.1
+	c0.1-0.2,0.2-0.4,0.4-0.6c0.1-0.1,0.1-0.1,0.2-0.2l0.1-0.1l-0.1-0.1C17.2,11.8,16.6,11.5,16.1,11.3z M16.6,7.9
+	c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7C15.4,5.2,16.6,6.4,16.6,7.9z M6.6,11.3c-1.1,0-2-0.9-2-2
+	c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C8.6,10.4,7.7,11.3,6.6,11.3z M9,13.3c-0.5,0.7-0.9,1.5-1.1,2.4H3.2c0.1-1.8,1.6-3.3,3.4-3.3
+	C7.5,12.4,8.4,12.7,9,13.3z"/>
+<path d="M21.2,15.6l-1.7,0l0-1.7c0-0.4-0.3-0.7-0.7-0.7c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5l0,1.7l-1.7,0
+	c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.4,0.3,0.7,0.7,0.7l1.7,0l0,1.7c0,0.4,0.3,0.7,0.7,0.7h0
+	c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5l0-1.7l1.7,0c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5
+	C21.9,16,21.6,15.7,21.2,15.6z"/>
+</svg>

images/icons/chat_black_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 id="Icones_Outline">
+	<g id="Chat_Black_24dp">
+		<g id="Shape" transform="translate(3.000000, 4.000000)">
+			<g>
+				<path d="M4.6,17c-0.2,0-0.4,0-0.6-0.1c-0.6-0.3-0.9-0.8-0.9-1.5V13H2.3C0.5,13-1,11.5-1,9.6V2.3C-1,0.5,0.5-1,2.3-1h13.3
+					C17.5-1,19,0.5,19,2.3v7.3c0,1.8-1.5,3.3-3.3,3.3H9.5l-3.8,3.6C5.4,16.8,5,17,4.6,17z M2.3,0.4c-1.1,0-1.9,0.9-1.9,2v7.3
+					c0,1,0.8,1.9,1.9,1.9h2.2v3.9c0,0,0,0.1,0.1,0.1s0.1,0,0.2,0l4.2-4h6.7c1,0,1.9-0.8,1.9-1.9V2.3c0-1-0.8-1.9-1.9-1.9H2.3
+					L2.3,0.4z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

images/icons/record_black_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">
+<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20.3c-4.6,0-8.3-3.7-8.3-8.3S7.4,3.7,12,3.7
+	s8.3,3.7,8.3,8.3S16.6,20.3,12,20.3z"/>
+</svg>

images/icons/share_screen_black_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">
+<path id="Path" d="M12.6,8.9V7.8l2.6,2.2l-2.6,2.2V11c-3.4,0.1-4.2,2.6-4.2,2.6C8.5,9.6,11.7,9,12.6,8.9z"/>
+<g id="Icones_Outline">
+	<g id="Laptop_Black_24dp">
+		<g transform="translate(2.000000, 5.000000)">
+			<g id="Shape">
+				<path d="M17,12H2.8c-0.5,0-0.9-0.2-1.2-0.5C1.2,11.1,1,10.7,1,10.2V1.3c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5H17
+					c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v8.9c0,0.5-0.2,0.9-0.5,1.2S17.5,12,17,12z M2.8,0.9C2.7,0.9,2.6,1,2.5,1
+					c0,0.1-0.1,0.2-0.1,0.3v8.9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1H17c0.1,0,0.2-0.1,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3V1.3
+					c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17,0.9,2.8,0.9,2.8,0.9z"/>
+			</g>
+			<g id="Line-2">
+				<path d="M19.5,14.4h-19c-0.4,0-0.7-0.3-0.7-0.7S0.1,13,0.5,13h19c0.4,0,0.7,0.3,0.7,0.7S19.9,14.4,19.5,14.4z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

images/icons/spk_black_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>
+	<path d="M14.6,4c-0.4-0.7-1.3-0.8-2-0.4L6.8,7.7H4.1C3,7.7,2,8.7,2,9.9v4.3c0,1.2,1,2.1,2.1,2.1h2.6l5.8,4.1
+		c0.2,0.2,0.5,0.2,0.8,0.2c0.8,0,1.4-0.6,1.5-1.4V4.8C14.9,4.5,14.8,4.2,14.6,4z M13.4,19.2L13.4,19.2l-5.7-4l-0.4-0.3h-1H6.1h-2
+		c-0.4,0-0.7-0.3-0.7-0.7V9.9c0-0.4,0.3-0.7,0.7-0.7H6h0.2h1l0.4-0.3l5.7-4L13.4,19.2L13.4,19.2z"/>
+	<path d="M19.1,12c0,1.5-0.6,2.9-1.6,4c-0.3,0.3-0.7,0.3-1,0c-0.3-0.3-0.3-0.7,0-1c1.6-1.7,1.6-4.3,0-6c-0.3-0.3-0.3-0.7,0-1
+		c0.3-0.3,0.7-0.3,1,0C18.6,9.1,19.1,10.5,19.1,12z"/>
+	<path d="M18.9,5.1c-0.3-0.3-0.7-0.2-1,0c-0.3,0.3-0.2,0.7,0,1c3.3,2.9,3.5,8,0.6,11.2c-0.2,0.2-0.4,0.4-0.6,0.6
+		c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0c3.8-3.5,4.1-9.4,0.7-13.2C19.4,5.5,19.1,5.3,18.9,5.1L18.9,5.1z"/>
+</g>
+</svg>

images/icons/spk_none_black_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>
+	<path d="M14.6,4c-0.4-0.7-1.3-0.8-2-0.4L6.8,7.7H4.1C3,7.7,2,8.7,2,9.9v4.3c0,1.2,1,2.1,2.1,2.1h2.6l5.8,4.1
+		c0.2,0.2,0.5,0.2,0.8,0.2c0.8,0,1.4-0.6,1.5-1.4V4.8C14.9,4.5,14.8,4.2,14.6,4z M13.4,19.2L13.4,19.2l-5.7-4l-0.4-0.3h-1H6.1h-2
+		c-0.4,0-0.7-0.3-0.7-0.7V9.9c0-0.4,0.3-0.7,0.7-0.7H6h0.2h1l0.4-0.3l5.7-4L13.4,19.2L13.4,19.2z"/>
+	<path d="M19.1,12c0,1.5-0.6,2.9-1.6,4c-0.3,0.3-0.7,0.3-1,0c-0.3-0.3-0.3-0.7,0-1c1.6-1.7,1.6-4.3,0-6c-0.3-0.3-0.3-0.7,0-1
+		c0.3-0.3,0.7-0.3,1,0C18.6,9.1,19.1,10.5,19.1,12z"/>
+	<path d="M18.9,5.1c-0.3-0.3-0.7-0.2-1,0c-0.3,0.3-0.2,0.7,0,1c3.3,2.9,3.5,8,0.6,11.2c-0.2,0.2-0.4,0.4-0.6,0.6
+		c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0c3.8-3.5,4.1-9.4,0.7-13.2C19.4,5.5,19.1,5.3,18.9,5.1L18.9,5.1z"/>
+</g>
+<g>
+	<path d="M3.3,20.7c-0.2,0-0.3-0.1-0.5-0.2c-0.3-0.3-0.3-0.7-0.1-1L16.3,3.7c0.3-0.3,0.7-0.3,1-0.1c0.3,0.3,0.3,0.7,0.1,1L3.8,20.5
+		C3.7,20.6,3.5,20.7,3.3,20.7z"/>
+</g>
+</svg>

qml.qrc

@@ -106,7 +106,6 @@
         <file>src/mainview/components/CallStackView.qml</file>
         <file>src/mainview/components/InitialCallPage.qml</file>
         <file>src/mainview/components/CallOverlay.qml</file>
-        <file>src/mainview/components/CallOverlayButtonGroup.qml</file>
         <file>src/mainview/components/ContactSearchBar.qml</file>
         <file>src/mainview/components/OngoingCallPage.qml</file>
         <file>src/mainview/components/ParticipantOverlay.qml</file>
@@ -137,5 +136,10 @@
         <file>src/mainview/components/SmartListItemDelegate.qml</file>
         <file>src/mainview/components/BadgeNotifier.qml</file>
         <file>src/mainview/components/ParticipantsLayer.qml</file>
+        <file>src/mainview/components/MainOverlay.qml</file>
+        <file>src/mainview/components/CallButtonDelegate.qml</file>
+        <file>src/mainview/components/CallActionBar.qml</file>
+        <file>src/commoncomponents/HalfPill.qml</file>
+        <file>src/commoncomponents/MaterialToolTip.qml</file>
     </qresource>
 </RCC>

resources.qrc

@@ -134,5 +134,11 @@
         <file>images/icons/settings-24px.svg</file>
         <file>images/icons/quote.svg</file>
         <file>images/icons/plugins-24px.svg</file>
+        <file>images/icons/record_black_24dp.svg</file>
+        <file>images/icons/share_screen_black_24dp.svg</file>
+        <file>images/icons/chat_black_24dp.svg</file>
+        <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>
     </qresource>
 </RCC>

src/audiodevicemodel.cpp

@@ -62,6 +62,8 @@ AudioDeviceModel::data(const QModelIndex& index, int role) const
     }
     case Role::RawDeviceName:
         return QVariant(devices_.at(index.row()));
+    case Role::isCurrent:
+        return QVariant(index.row() == getCurrentIndex());
     default:
         break;
     }
@@ -115,7 +117,7 @@ AudioDeviceModel::reset()
 }
 
 int
-AudioDeviceModel::getCurrentIndex()
+AudioDeviceModel::getCurrentIndex() const
 {
     QString currentId = lrcInstance_->avModel().getInputDevice();
     auto resultList = match(index(0, 0), Qt::DisplayRole, QVariant(currentId));

src/audiodevicemodel.h

@@ -28,7 +28,7 @@ public:
     Q_ENUM(Type)
     Q_PROPERTY(Type type MEMBER type_ NOTIFY typeChanged)
 
-    enum Role { DeviceName = Qt::UserRole + 1, RawDeviceName };
+    enum Role { DeviceName = Qt::UserRole + 1, RawDeviceName, isCurrent };
     Q_ENUM(Role)
 
 Q_SIGNALS:
@@ -56,7 +56,7 @@ public:
     Qt::ItemFlags flags(const QModelIndex& index) const override;
 
     Q_INVOKABLE void reset();
-    Q_INVOKABLE int getCurrentIndex();
+    Q_INVOKABLE int getCurrentIndex() const;
 
 private:
     QVector<QString> devices_;

src/avadapter.cpp

@@ -69,13 +69,19 @@ AvAdapter::populateVideoDeviceContextMenuItem()
 }
 
 void
-AvAdapter::onVideoContextMenuDeviceItemClicked(const QString& deviceName)
+AvAdapter::selectVideoInputDeviceByName(const QString& deviceName)
 {
     auto deviceId = lrcInstance_->avModel().getDeviceIdFromName(deviceName);
     if (deviceId.isEmpty()) {
         qWarning() << "Couldn't find device: " << deviceName;
         return;
     }
+    selectVideoInputDeviceById(deviceId);
+}
+
+void
+AvAdapter::selectVideoInputDeviceById(const QString& deviceId)
+{
     lrcInstance_->avModel().setCurrentVideoCaptureDevice(deviceId);
     lrcInstance_->avModel().switchInputTo(deviceId, getCurrentCallId());
 }

src/avadapter.h

@@ -45,8 +45,11 @@ protected:
     // Return needed info for populating video device context menu item.
     Q_INVOKABLE QVariantMap populateVideoDeviceContextMenuItem();
 
-    // Preview video input switching.
-    Q_INVOKABLE void onVideoContextMenuDeviceItemClicked(const QString& deviceName);
+    // switch preview video input by device name
+    Q_INVOKABLE void selectVideoInputDeviceByName(const QString& deviceName);
+
+    // switch preview video input by device id
+    Q_INVOKABLE void selectVideoInputDeviceById(const QString& deviceId);
 
     // Share the screen specificed by screen number.
     Q_INVOKABLE void shareEntireScreen(int screenNumber);

src/calladapter.cpp

@@ -639,7 +639,6 @@ CallAdapter::updateCallOverlay(const lrc::api::conversation::Info& convInfo)
                          isVideoMuted,
                          isRecording,
                          accInfo.profileInfo.type == lrc::api::profile::Type::SIP,
-                         !convInfo.confId.isEmpty(),
                          bestName);
 }
 

src/calladapter.h

@@ -95,7 +95,6 @@ Q_SIGNALS:
                        bool isVideoMuted,
                        bool isRecording,
                        bool isSIP,
-                       bool isConferenceCall,
                        const QString& bestName);
     void remoteRecordingChanged(const QStringList& peers, bool state);
     void eraseRemoteRecording();

src/calloverlaymodel.cpp

@@ -44,15 +44,10 @@ CallControlListModel::data(const QModelIndex& index, int role) const
     auto item = data_.at(index.row());
 
     switch (role) {
-    case Role::DummyRole:
-        break;
-#define X(t, role) \
-    case Role::role: \
-        return QVariant::fromValue(item.role);
-        CC_ROLES
-#undef X
-    default:
-        break;
+    case Role::ItemAction:
+        return QVariant::fromValue(item.itemAction);
+    case Role::BadgeCount:
+        return QVariant::fromValue(item.badgeCount);
     }
     return QVariant();
 }
@@ -62,9 +57,8 @@ CallControlListModel::roleNames() const
 {
     using namespace CallControl;
     QHash<int, QByteArray> roles;
-#define X(t, role) roles[role] = #role;
-    CC_ROLES
-#undef X
+    roles[ItemAction] = "ItemAction";
+    roles[BadgeCount] = "BadgeCount";
     return roles;
 }
 
@@ -73,7 +67,7 @@ CallControlListModel::setBadgeCount(int row, int count)
 {
     if (row >= rowCount())
         return;
-    data_[row].BadgeCount = count;
+    data_[row].badgeCount = count;
     auto idx = index(row, 0);
     Q_EMIT dataChanged(idx, idx);
 }
@@ -86,6 +80,12 @@ CallControlListModel::addItem(const CallControl::Item& item)
     endResetModel();
 }
 
+void
+CallControlListModel::clearData()
+{
+    data_.clear();
+}
+
 IndexRangeFilterProxyModel::IndexRangeFilterProxyModel(QAbstractListModel* parent)
     : QSortFilterProxyModel(parent)
 {
@@ -129,25 +129,15 @@ CallOverlayModel::CallOverlayModel(LRCInstance* instance, QObject* parent)
 }
 
 void
-CallOverlayModel::addPrimaryControl(const QVariantMap& props)
+CallOverlayModel::addPrimaryControl(const QVariant& action)
 {
-    CallControl::Item item {
-#define X(t, role) props[#role].value<t>(),
-        CC_ROLES
-#undef X
-    };
-    primaryModel_->addItem(item);
+    primaryModel_->addItem(CallControl::Item {action.value<QObject*>()});
 }
 
 void
-CallOverlayModel::addSecondaryControl(const QVariantMap& props)
-{
-    CallControl::Item item {
-#define X(t, role) props[#role].value<t>(),
-        CC_ROLES
-#undef X
-    };
-    secondaryModel_->addItem(item);
+CallOverlayModel::addSecondaryControl(const QVariant& action)
+{
+    secondaryModel_->addItem(CallControl::Item {action.value<QObject*>()});
     setControlRanges();
 }
 
@@ -187,6 +177,13 @@ CallOverlayModel::overflowHiddenModel()
     return QVariant::fromValue(overflowHiddenModel_);
 }
 
+void
+CallOverlayModel::clearControls()
+{
+    primaryModel_->clearData();
+    secondaryModel_->clearData();
+}
+
 void
 CallOverlayModel::registerFilter(QQuickWindow* object, QQuickItem* item)
 {

src/calloverlaymodel.h

@@ -27,28 +27,15 @@
 #include <QSortFilterProxyModel>
 #include <QQuickItem>
 
-#define CC_ROLES \
-    X(QObject*, ItemAction) \
-    X(int, BadgeCount) \
-    X(bool, HasBackground) \
-    X(QObject*, MenuAction) \
-    X(QString, Name)
-
 namespace CallControl {
 Q_NAMESPACE
-enum Role {
-    DummyRole = Qt::UserRole + 1,
-#define X(t, role) role,
-    CC_ROLES
-#undef X
-};
+enum Role { ItemAction = Qt::UserRole + 1, BadgeCount };
 Q_ENUM_NS(Role)
 
 struct Item
 {
-#define X(t, role) t role;
-    CC_ROLES
-#undef X
+    QObject* itemAction;
+    int badgeCount {0};
 };
 } // namespace CallControl
 
@@ -64,6 +51,7 @@ public:
 
     void setBadgeCount(int row, int count);
     void addItem(const CallControl::Item& item);
+    void clearData();
 
 private:
     QList<CallControl::Item> data_;
@@ -93,9 +81,10 @@ class CallOverlayModel : public QObject
 public:
     CallOverlayModel(LRCInstance* instance, QObject* parent = nullptr);
 
-    Q_INVOKABLE void addPrimaryControl(const QVariantMap& props);
-    Q_INVOKABLE void addSecondaryControl(const QVariantMap& props);
+    Q_INVOKABLE void addPrimaryControl(const QVariant& action);
+    Q_INVOKABLE void addSecondaryControl(const QVariant& action);
     Q_INVOKABLE void setBadgeCount(int row, int count);
+    Q_INVOKABLE void clearControls();
 
     Q_INVOKABLE QVariant primaryModel();
     Q_INVOKABLE QVariant secondaryModel();

src/commoncomponents/HalfPill.qml

+/*
+ * Copyright (C) 2021 by Savoir-faire Linux
+ * Author: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.14
+
+Item {
+    id: root
+
+    enum Type {
+        None,
+        Top,
+        Left,
+        Bottom,
+        Right
+    }
+
+    property int type: HalfPill.None
+    property int radius: 0
+    property alias color: rect.color
+
+    clip: true
+
+    Rectangle {
+        id: rect
+
+        property bool horizontal: type === HalfPill.Left ||
+                                  type == HalfPill.Right
+        property bool direction: type === HalfPill.Right ||
+                                 type == HalfPill.Bottom
+
+        radius: root.radius * (type !== HalfPill.None)
+        width: root.size + radius
+        height: root.size + radius
+        anchors.fill: root
+        anchors.leftMargin: horizontal * direction * -radius
+        anchors.rightMargin: horizontal * !direction * -radius
+        anchors.topMargin: !horizontal * direction * -radius
+        anchors.bottomMargin: !horizontal * !direction * -radius
+    }
+}

src/commoncomponents/MaterialToolTip.qml

+/*
+ * Copyright (C) 2021 by Savoir-faire Linux
+ * Author: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import QtQuick.Controls 2.14
+
+import net.jami.Constants 1.0
+
+ToolTip {
+    id: root
+
+    onVisibleChanged: {
+        if (visible)
+            animation.start()
+    }
+
+    contentItem: Text {
+        id: label
+        text: root.text
+        font: root.font
+        color: "white"
+    }
+
+    background: Rectangle {
+        color: "#c4272727"
+        radius: 5
+    }
+
+    ParallelAnimation {
+        id: animation
+        NumberAnimation {
+             target: root; properties: "opacity"
+             from: 0; to: 1.0
+             duration: JamiTheme.shortFadeDuration
+        }
+        NumberAnimation {
+             target: root; properties: "scale"
+             from: 0.5; to: 1.0
+             duration: JamiTheme.shortFadeDuration * 0.5
+        }
+    }
+}

src/commoncomponents/ResponsiveImage.qml

@@ -25,8 +25,8 @@ import net.jami.Models 1.0
 Image {
     id: root
 
-    property real containerWidth
-    property real containerHeight
+    property real containerWidth: 30
+    property real containerHeight: 30
 
     property int padding: 0
     property point offset: Qt.point(0, 0)

src/constant/JamiStrings.qml

@@ -186,7 +186,7 @@ Item {
     property string peerStoppedRecording: qsTr("Peer stopped recording")
     property string isCallingYou: qsTr("is calling you")
 
-    // CallOverlayButtonGroup
+    // CallOverlay
     property string mute: qsTr("Mute")
     property string unmute: qsTr("Unmute")
     property string hangup: qsTr("End call")