From 31484f1a0f6b02368016041df3f1b8461427402d Mon Sep 17 00:00:00 2001
From: Edric Milaret <edric.ladent-milaret@savoirfairelinux.com>
Date: Tue, 2 Feb 2016 14:26:27 -0500
Subject: [PATCH] video: refactor overlay

- Add a button to add cm to contact in call
- Add a pause label to clarify HOLD state
- Add checked state feedback for hold button
- Fixed missing tooltip

Change-Id: I3d07b333477f5b3159e387cd65a065579ca4fe86
Tuleap: #322
---
 images/ic_pause_white.svg |   4 +
 ressources.qrc            |  93 ++--
 stylesheet.css            |  14 +-
 videooverlay.cpp          |  20 +
 videooverlay.h            |   1 +
 videooverlay.ui           | 912 ++++++++++++++++++++++----------------
 6 files changed, 597 insertions(+), 447 deletions(-)
 create mode 100644 images/ic_pause_white.svg

diff --git a/images/ic_pause_white.svg b/images/ic_pause_white.svg
new file mode 100644
index 0000000..c6974b9
--- /dev/null
+++ b/images/ic_pause_white.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/ressources.qrc b/ressources.qrc
index dc12fe6..acb7daa 100644
--- a/ressources.qrc
+++ b/ressources.qrc
@@ -1,48 +1,49 @@
 <RCC>
-  <qresource prefix="/">
-    <file>images/video-conf/btn-join.svg</file>
-    <file>stylesheet.css</file>
-    <file>images/ring.png</file>
-    <file>images/arrow-down-bold-circle-outline.png</file>
-    <file>images/arrow-left-bold.png</file>
-    <file>images/arrow-up-bold-circle-outline.png</file>
-    <file>images/close.png</file>
-    <file>images/logo-ring-standard-coul.png</file>
-    <file>images/minus.png</file>
-    <file>images/plus.png</file>
-    <file>images/settings.png</file>
-    <file>images/arrow-down.png</file>
-    <file>images/arrow-up.png</file>
-    <file>images/folder-download.png</file>
-    <file>images/arrow-right.png</file>
-    <file>images/history.png</file>
-    <file>images/close-ring.png</file>
-    <file>images/minimize-ring.png</file>
-    <file>images/maximize-ring.png</file>
-    <file>images/search-contact.png</file>
-    <file>images/hover-contact/btn-video.svg</file>
-    <file>images/hover-contact/btn-chat.svg</file>
-    <file>images/hover-contact/btn-contactinfo.svg</file>
-    <file>images/contactswidgetlist.png</file>
-    <file>images/historylist.png</file>
-    <file>images/user/btn-default-userpic.svg</file>
-    <file>images/call/btn-call.svg</file>
-    <file>images/call/btn-answer.svg</file>
-    <file>images/call/btn-ignore.svg</file>
-    <file>images/video-conf/btn-hangup.svg</file>
-    <file>images/video-conf/btn-pause.svg</file>
-    <file>images/video-conf/btn-pause-toggled.svg</file>
-    <file>images/video-conf/btn-chat.svg</file>
-    <file>images/video-conf/btn-nomic.svg</file>
-    <file>images/video-conf/btn-nomic-toggled.svg</file>
-    <file>images/video-conf/btn-novideo.svg</file>
-    <file>images/video-conf/btn-novideo-toggled.svg</file>
-    <file>images/video-conf/btn-missing.svg</file>
-    <file>images/video-conf/btn-add-contact-to-conf.svg</file>
-    <file>images/video-conf/btn-transfer.svg</file>
-    <file>images/btn-info.svg</file>
-    <file>images/ic_arrow_back_white.svg</file>
-    <file>images/video-conf/ic_high_quality_white.svg</file>
-    <file>images/ic_send_white.svg</file>
-  </qresource>
+    <qresource prefix="/">
+        <file>images/video-conf/btn-join.svg</file>
+        <file>stylesheet.css</file>
+        <file>images/ring.png</file>
+        <file>images/arrow-down-bold-circle-outline.png</file>
+        <file>images/arrow-left-bold.png</file>
+        <file>images/arrow-up-bold-circle-outline.png</file>
+        <file>images/close.png</file>
+        <file>images/logo-ring-standard-coul.png</file>
+        <file>images/minus.png</file>
+        <file>images/plus.png</file>
+        <file>images/settings.png</file>
+        <file>images/arrow-down.png</file>
+        <file>images/arrow-up.png</file>
+        <file>images/folder-download.png</file>
+        <file>images/arrow-right.png</file>
+        <file>images/history.png</file>
+        <file>images/close-ring.png</file>
+        <file>images/minimize-ring.png</file>
+        <file>images/maximize-ring.png</file>
+        <file>images/search-contact.png</file>
+        <file>images/hover-contact/btn-video.svg</file>
+        <file>images/hover-contact/btn-chat.svg</file>
+        <file>images/hover-contact/btn-contactinfo.svg</file>
+        <file>images/contactswidgetlist.png</file>
+        <file>images/historylist.png</file>
+        <file>images/user/btn-default-userpic.svg</file>
+        <file>images/call/btn-call.svg</file>
+        <file>images/call/btn-answer.svg</file>
+        <file>images/call/btn-ignore.svg</file>
+        <file>images/video-conf/btn-hangup.svg</file>
+        <file>images/video-conf/btn-pause.svg</file>
+        <file>images/video-conf/btn-pause-toggled.svg</file>
+        <file>images/video-conf/btn-chat.svg</file>
+        <file>images/video-conf/btn-nomic.svg</file>
+        <file>images/video-conf/btn-nomic-toggled.svg</file>
+        <file>images/video-conf/btn-novideo.svg</file>
+        <file>images/video-conf/btn-novideo-toggled.svg</file>
+        <file>images/video-conf/btn-missing.svg</file>
+        <file>images/video-conf/btn-add-contact-to-conf.svg</file>
+        <file>images/video-conf/btn-transfer.svg</file>
+        <file>images/btn-info.svg</file>
+        <file>images/ic_arrow_back_white.svg</file>
+        <file>images/video-conf/ic_high_quality_white.svg</file>
+        <file>images/ic_send_white.svg</file>
+        <file>images/ic_pause_white.svg</file>
+    </qresource>
 </RCC>
diff --git a/stylesheet.css b/stylesheet.css
index feb8743..019f522 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -97,20 +97,18 @@ QPushButton#transferButton, QPushButton#addPersonButton, QPushButton#joinButton,
 }
 
 QPushButton#holdButton:hover, QPushButton#chatButton:hover, QPushButton#noMicButton:hover, QPushButton#noVideoButton:hover,
-QPushButton#transferButton:hover, QPushButton#addPersonButton:hover, QPushButton#joinButton:hover, QPushButton#qualityButton:hover{
+QPushButton#transferButton:hover, QPushButton#addPersonButton:hover, QPushButton#joinButton:hover, QPushButton#qualityButton:hover,
+QPushButton#addToContactButton:hover{
     background-color: rgba(0, 192, 213, 0.6);
-    border-radius: 18px;
-    border:solid 1px;
 }
 
 QPushButton#holdButton:pressed, QPushButton#chatButton:pressed, QPushButton#noMicButton:pressed, QPushButton#noVideoButton:pressed,
-QPushButton#transferButton:pressed, QPushButton#addPersonButton:pressed, QPushButton#joinButton:pressed, QPushButton#qualityButton:pressed{
+QPushButton#transferButton:pressed, QPushButton#addPersonButton:pressed, QPushButton#joinButton:pressed, QPushButton#qualityButton:pressed,
+QPushButton#addToContactButton:pressed{
     background-color: rgba(0, 192, 213, 0.8);
-    border-radius: 18px;
-    border:solid 1px;
 }
 
-QPushButton#noMicButton:checked, QPushButton#noVideoButton:checked{
+QPushButton#holdButton:checked, QPushButton#noMicButton:checked, QPushButton#noVideoButton:checked{
     background-color: rgba(0, 192, 213, 0.8);
 }
 
@@ -128,7 +126,7 @@ QPushButton#hangupButton:pressed{
     background-color: rgba(255, 0, 0, 0.8);
 }
 
-QPushButton#imBackButton{
+QPushButton#imBackButton, QPushButton#addToContactButton{
    background-color: #414141;
    border-radius: 15px;
    border:solid 1px;
diff --git a/videooverlay.cpp b/videooverlay.cpp
index 5d02898..c239fd4 100644
--- a/videooverlay.cpp
+++ b/videooverlay.cpp
@@ -19,7 +19,11 @@
 #include "videooverlay.h"
 #include "ui_videooverlay.h"
 
+#include "contactpicker.h"
+
 #include "callmodel.h"
+#include "contactmethod.h"
+#include "person.h"
 
 VideoOverlay::VideoOverlay(QWidget* parent) :
     QWidget(parent),
@@ -57,6 +61,7 @@ VideoOverlay::VideoOverlay(QWidget* parent) :
             case UserActionModel::Action::HOLD:
                 ui->holdButton->setChecked(idx.data(Qt::CheckStateRole).value<bool>());
                 ui->holdButton->setEnabled(idx.flags() & Qt::ItemIsEnabled);
+                ui->onHoldLabel->setVisible(idx.data(Qt::CheckStateRole).value<bool>());
                 break;
             default:
                 break;
@@ -83,6 +88,9 @@ VideoOverlay::VideoOverlay(QWidget* parent) :
 
                 ui->joinButton->hide();
             }
+            if (auto contactMethod =  c->peerContactMethod())
+                ui->addToContactButton->setVisible(not contactMethod->contact()
+                                                   || contactMethod->contact()->isPlaceHolder());
         }
     });
 }
@@ -177,3 +185,15 @@ VideoOverlay::on_qualityButton_clicked()
               pos.y() - (qualityDialog_->height()));
     qualityDialog_->show();
 }
+
+void
+VideoOverlay::on_addToContactButton_clicked()
+{
+    QPoint globalPos = mapToGlobal(ui->addToContactButton->pos());
+    if (auto contactMethod = CallModel::instance().selectedCall()->peerContactMethod()) {
+        ContactPicker contactPicker(contactMethod);
+        contactPicker.move(globalPos.x(),
+                           globalPos.y() + ui->addToContactButton->height());
+        contactPicker.exec();
+    }
+}
diff --git a/videooverlay.h b/videooverlay.h
index 322ad62..18f9bf6 100644
--- a/videooverlay.h
+++ b/videooverlay.h
@@ -53,6 +53,7 @@ private slots:
     void on_noMicButton_clicked();
     void on_noVideoButton_clicked();
     void on_qualityButton_clicked();
+    void on_addToContactButton_clicked();
 
 private:
     Ui::VideoOverlay* ui;
diff --git a/videooverlay.ui b/videooverlay.ui
index 4dd8f27..7a1b042 100644
--- a/videooverlay.ui
+++ b/videooverlay.ui
@@ -22,402 +22,528 @@
   <property name="windowTitle">
    <string/>
   </property>
-  <layout class="QGridLayout" name="gridLayout">
-   <item row="1" column="1">
-    <widget class="QPushButton" name="hangupButton">
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-hangup.svg</normaloff>:/images/video-conf/btn-hangup.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-    </widget>
-   </item>
-   <item row="0" column="0" alignment="Qt::AlignTop">
-    <widget class="QLabel" name="nameLabel">
-     <property name="palette">
-      <palette>
-       <active>
-        <colorrole role="WindowText">
-         <brush brushstyle="SolidPattern">
-          <color alpha="255">
-           <red>255</red>
-           <green>255</green>
-           <blue>255</blue>
-          </color>
-         </brush>
-        </colorrole>
-       </active>
-       <inactive>
-        <colorrole role="WindowText">
-         <brush brushstyle="SolidPattern">
-          <color alpha="255">
-           <red>255</red>
-           <green>255</green>
-           <blue>255</blue>
-          </color>
-         </brush>
-        </colorrole>
-       </inactive>
-       <disabled>
-        <colorrole role="WindowText">
-         <brush brushstyle="SolidPattern">
-          <color alpha="255">
-           <red>143</red>
-           <green>146</green>
-           <blue>147</blue>
-          </color>
-         </brush>
-        </colorrole>
-       </disabled>
-      </palette>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="6">
-    <widget class="QPushButton" name="joinButton">
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-join.svg</normaloff>:/images/video-conf/btn-join.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-    </widget>
-   </item>
+  <layout class="QGridLayout" name="gridLayout" rowstretch="0,1,0,0" columnstretch="0,0,2,0,0,0,0,0,0,0,0,0">
    <item row="1" column="2">
-    <widget class="QPushButton" name="holdButton">
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-pause.svg</normaloff>:/images/video-conf/btn-pause.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="checkable">
-      <bool>true</bool>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="8">
-    <widget class="QPushButton" name="noMicButton">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-nomic.svg</normaloff>:/images/video-conf/btn-nomic.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="checkable">
-      <bool>true</bool>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="4">
-    <widget class="QPushButton" name="chatButton">
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-chat.svg</normaloff>:/images/video-conf/btn-chat.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="11">
-    <spacer name="horizontalSpacer_2">
-     <property name="orientation">
-      <enum>Qt::Horizontal</enum>
-     </property>
-     <property name="sizeHint" stdset="0">
-      <size>
-       <width>40</width>
-       <height>20</height>
-      </size>
-     </property>
-    </spacer>
-   </item>
-   <item row="0" column="11" alignment="Qt::AlignRight|Qt::AlignTop">
-    <widget class="QLabel" name="timerLabel">
-     <property name="palette">
-      <palette>
-       <active>
-        <colorrole role="WindowText">
-         <brush brushstyle="SolidPattern">
-          <color alpha="255">
-           <red>255</red>
-           <green>255</green>
-           <blue>255</blue>
-          </color>
-         </brush>
-        </colorrole>
-       </active>
-       <inactive>
-        <colorrole role="WindowText">
-         <brush brushstyle="SolidPattern">
-          <color alpha="255">
-           <red>255</red>
-           <green>255</green>
-           <blue>255</blue>
-          </color>
-         </brush>
-        </colorrole>
-       </inactive>
-       <disabled>
-        <colorrole role="WindowText">
-         <brush brushstyle="SolidPattern">
-          <color alpha="255">
-           <red>143</red>
-           <green>146</green>
-           <blue>147</blue>
-          </color>
-         </brush>
-        </colorrole>
-       </disabled>
-      </palette>
-     </property>
-     <property name="text">
-      <string>00:00</string>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="9">
-    <widget class="QPushButton" name="noVideoButton">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-novideo.svg</normaloff>:/images/video-conf/btn-novideo.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="checkable">
-      <bool>true</bool>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="0">
-    <spacer name="horizontalSpacer">
-     <property name="orientation">
-      <enum>Qt::Horizontal</enum>
-     </property>
-     <property name="sizeHint" stdset="0">
-      <size>
-       <width>40</width>
-       <height>20</height>
-      </size>
-     </property>
-    </spacer>
-   </item>
-   <item row="1" column="5">
-    <widget class="QPushButton" name="addPersonButton">
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-add-contact-to-conf.svg</normaloff>:/images/video-conf/btn-add-contact-to-conf.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-    </widget>
+    <layout class="QHBoxLayout" name="horizontalLayout_5">
+     <item alignment="Qt::AlignHCenter|Qt::AlignVCenter">
+      <widget class="QLabel" name="onHoldLabel">
+       <property name="minimumSize">
+        <size>
+         <width>100</width>
+         <height>100</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>100</width>
+         <height>100</height>
+        </size>
+       </property>
+       <property name="font">
+        <font>
+         <stylestrategy>PreferAntialias</stylestrategy>
+        </font>
+       </property>
+       <property name="toolTip">
+        <string>Call on Hold</string>
+       </property>
+       <property name="autoFillBackground">
+        <bool>false</bool>
+       </property>
+       <property name="text">
+        <string notr="true"/>
+       </property>
+       <property name="pixmap">
+        <pixmap resource="ressources.qrc">:/images/ic_pause_white.svg</pixmap>
+       </property>
+       <property name="scaledContents">
+        <bool>true</bool>
+       </property>
+      </widget>
+     </item>
+    </layout>
    </item>
-   <item row="1" column="7">
-    <widget class="QPushButton" name="transferButton">
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/btn-transfer.svg</normaloff>:/images/video-conf/btn-transfer.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-    </widget>
+   <item row="2" column="0" colspan="5">
+    <layout class="QHBoxLayout" name="horizontalLayout_3">
+     <item>
+      <spacer name="horizontalSpacer">
+       <property name="orientation">
+        <enum>Qt::Horizontal</enum>
+       </property>
+       <property name="sizeHint" stdset="0">
+        <size>
+         <width>40</width>
+         <height>20</height>
+        </size>
+       </property>
+      </spacer>
+     </item>
+     <item>
+      <widget class="QPushButton" name="hangupButton">
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Hangup</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-hangup.svg</normaloff>:/images/video-conf/btn-hangup.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="holdButton">
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Hold / Unhold</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-pause.svg</normaloff>:/images/video-conf/btn-pause.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="checkable">
+        <bool>true</bool>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="chatButton">
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Chat</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-chat.svg</normaloff>:/images/video-conf/btn-chat.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="addPersonButton">
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Add person to call</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-add-contact-to-conf.svg</normaloff>:/images/video-conf/btn-add-contact-to-conf.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="transferButton">
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Transfer call</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-transfer.svg</normaloff>:/images/video-conf/btn-transfer.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="noMicButton">
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Mute Mic</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-nomic.svg</normaloff>:/images/video-conf/btn-nomic.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="checkable">
+        <bool>true</bool>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="noVideoButton">
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Mute Video</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-novideo.svg</normaloff>:/images/video-conf/btn-novideo.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="checkable">
+        <bool>true</bool>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="qualityButton">
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Quality</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/ic_high_quality_white.svg</normaloff>:/images/video-conf/ic_high_quality_white.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="joinButton">
+       <property name="minimumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Join Calls</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-join.svg</normaloff>:/images/video-conf/btn-join.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>36</width>
+         <height>36</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <spacer name="horizontalSpacer_2">
+       <property name="orientation">
+        <enum>Qt::Horizontal</enum>
+       </property>
+       <property name="sizeHint" stdset="0">
+        <size>
+         <width>40</width>
+         <height>20</height>
+        </size>
+       </property>
+      </spacer>
+     </item>
+    </layout>
    </item>
-   <item row="1" column="10">
-    <widget class="QPushButton" name="qualityButton">
-     <property name="minimumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="maximumSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-     <property name="text">
-      <string/>
-     </property>
-     <property name="icon">
-      <iconset resource="ressources.qrc">
-       <normaloff>:/images/video-conf/ic_high_quality_white.svg</normaloff>:/images/video-conf/ic_high_quality_white.svg</iconset>
-     </property>
-     <property name="iconSize">
-      <size>
-       <width>36</width>
-       <height>36</height>
-      </size>
-     </property>
-    </widget>
+   <item row="0" column="2">
+    <layout class="QHBoxLayout" name="horizontalLayout_7">
+     <item>
+      <widget class="QLabel" name="nameLabel">
+       <property name="palette">
+        <palette>
+         <active>
+          <colorrole role="WindowText">
+           <brush brushstyle="SolidPattern">
+            <color alpha="255">
+             <red>255</red>
+             <green>255</green>
+             <blue>255</blue>
+            </color>
+           </brush>
+          </colorrole>
+         </active>
+         <inactive>
+          <colorrole role="WindowText">
+           <brush brushstyle="SolidPattern">
+            <color alpha="255">
+             <red>255</red>
+             <green>255</green>
+             <blue>255</blue>
+            </color>
+           </brush>
+          </colorrole>
+         </inactive>
+         <disabled>
+          <colorrole role="WindowText">
+           <brush brushstyle="SolidPattern">
+            <color alpha="255">
+             <red>143</red>
+             <green>146</green>
+             <blue>147</blue>
+            </color>
+           </brush>
+          </colorrole>
+         </disabled>
+        </palette>
+       </property>
+       <property name="toolTip">
+        <string>Name label</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="addToContactButton">
+       <property name="minimumSize">
+        <size>
+         <width>30</width>
+         <height>30</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>30</width>
+         <height>30</height>
+        </size>
+       </property>
+       <property name="toolTip">
+        <string>Add to contact</string>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="ressources.qrc">
+         <normaloff>:/images/video-conf/btn-add-contact-to-conf.svg</normaloff>:/images/video-conf/btn-add-contact-to-conf.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>30</width>
+         <height>30</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <spacer name="horizontalSpacer_3">
+       <property name="orientation">
+        <enum>Qt::Horizontal</enum>
+       </property>
+       <property name="sizeHint" stdset="0">
+        <size>
+         <width>40</width>
+         <height>20</height>
+        </size>
+       </property>
+      </spacer>
+     </item>
+     <item>
+      <widget class="QLabel" name="timerLabel">
+       <property name="palette">
+        <palette>
+         <active>
+          <colorrole role="WindowText">
+           <brush brushstyle="SolidPattern">
+            <color alpha="255">
+             <red>255</red>
+             <green>255</green>
+             <blue>255</blue>
+            </color>
+           </brush>
+          </colorrole>
+         </active>
+         <inactive>
+          <colorrole role="WindowText">
+           <brush brushstyle="SolidPattern">
+            <color alpha="255">
+             <red>255</red>
+             <green>255</green>
+             <blue>255</blue>
+            </color>
+           </brush>
+          </colorrole>
+         </inactive>
+         <disabled>
+          <colorrole role="WindowText">
+           <brush brushstyle="SolidPattern">
+            <color alpha="255">
+             <red>143</red>
+             <green>146</green>
+             <blue>147</blue>
+            </color>
+           </brush>
+          </colorrole>
+         </disabled>
+        </palette>
+       </property>
+       <property name="toolTip">
+        <string>Time elapsed</string>
+       </property>
+       <property name="text">
+        <string>00:00</string>
+       </property>
+      </widget>
+     </item>
+    </layout>
    </item>
   </layout>
  </widget>
-- 
GitLab