Commit 31484f1a authored by Edric Milaret's avatar Edric Milaret Committed by gerrit2

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
parent db818e5b
<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
......@@ -44,5 +44,6 @@
<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>
......@@ -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;
......
......@@ -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();
}
}
......@@ -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;
......
......@@ -22,8 +22,63 @@
<property name="windowTitle">
<string/>
</property>
<layout class="QGridLayout" name="gridLayout">
<item row="1" column="1">
<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">
<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="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>
......@@ -37,6 +92,9 @@
<height>36</height>
</size>
</property>
<property name="toolTip">
<string>Hangup</string>
</property>
<property name="text">
<string/>
</property>
......@@ -52,52 +110,8 @@
</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">
<item>
<widget class="QPushButton" name="holdButton">
<property name="minimumSize">
<size>
<width>36</width>
......@@ -110,12 +124,15 @@
<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-join.svg</normaloff>:/images/video-conf/btn-join.svg</iconset>
<normaloff>:/images/video-conf/btn-pause.svg</normaloff>:/images/video-conf/btn-pause.svg</iconset>
</property>
<property name="iconSize">
<size>
......@@ -123,10 +140,13 @@
<height>36</height>
</size>
</property>
<property name="checkable">
<bool>true</bool>
</property>
</widget>
</item>
<item row="1" column="2">
<widget class="QPushButton" name="holdButton">
<item>
<widget class="QPushButton" name="chatButton">
<property name="minimumSize">
<size>
<width>36</width>
......@@ -139,12 +159,15 @@
<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-pause.svg</normaloff>:/images/video-conf/btn-pause.svg</iconset>
<normaloff>:/images/video-conf/btn-chat.svg</normaloff>:/images/video-conf/btn-chat.svg</iconset>
</property>
<property name="iconSize">
<size>
......@@ -152,19 +175,10 @@
<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>
<item>
<widget class="QPushButton" name="addPersonButton">
<property name="minimumSize">
<size>
<width>36</width>
......@@ -177,12 +191,15 @@
<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-nomic.svg</normaloff>:/images/video-conf/btn-nomic.svg</iconset>
<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>
......@@ -190,13 +207,10 @@
<height>36</height>
</size>
</property>
<property name="checkable">
<bool>true</bool>
</property>
</widget>
</item>
<item row="1" column="4">
<widget class="QPushButton" name="chatButton">
<item>
<widget class="QPushButton" name="transferButton">
<property name="minimumSize">
<size>
<width>36</width>
......@@ -209,12 +223,15 @@
<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-chat.svg</normaloff>:/images/video-conf/btn-chat.svg</iconset>
<normaloff>:/images/video-conf/btn-transfer.svg</normaloff>:/images/video-conf/btn-transfer.svg</iconset>
</property>
<property name="iconSize">
<size>
......@@ -224,64 +241,48 @@
</property>
</widget>
</item>
<item row="1" column="11">
<spacer name="horizontalSpacer_2">
<property name="orientation">
<enum>Qt::Horizontal</enum>
<item>
<widget class="QPushButton" name="noMicButton">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="sizeHint" stdset="0">
<property name="minimumSize">
<size>
<width>40</width>
<height>20</height>
<width>36</width>
<height>36</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 name="maximumSize">
<size>
<width>36</width>
<height>36</height>
</size>
</property>
<property name="toolTip">
<string>Mute Mic</string>
</property>
<property name="text">
<string>00:00</string>
<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="9">
<item>
<widget class="QPushButton" name="noVideoButton">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
......@@ -301,6 +302,9 @@
<height>36</height>
</size>
</property>
<property name="toolTip">
<string>Mute Video</string>
</property>
<property name="text">
<string/>
</property>
......@@ -319,21 +323,8 @@
</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">
<item>
<widget class="QPushButton" name="qualityButton">
<property name="minimumSize">
<size>
<width>36</width>
......@@ -346,12 +337,15 @@
<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/btn-add-contact-to-conf.svg</normaloff>:/images/video-conf/btn-add-contact-to-conf.svg</iconset>
<normaloff>:/images/video-conf/ic_high_quality_white.svg</normaloff>:/images/video-conf/ic_high_quality_white.svg</iconset>
</property>
<property name="iconSize">
<size>
......@@ -361,8 +355,8 @@
</property>
</widget>
</item>
<item row="1" column="7">
<widget class="QPushButton" name="transferButton">
<item>
<widget class="QPushButton" name="joinButton">
<property name="minimumSize">
<size>
<width>36</width>
......@@ -375,12 +369,15 @@
<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-transfer.svg</normaloff>:/images/video-conf/btn-transfer.svg</iconset>
<normaloff>:/images/video-conf/btn-join.svg</normaloff>:/images/video-conf/btn-join.svg</iconset>
</property>
<property name="iconSize">
<size>
......@@ -390,35 +387,164 @@
</property>
</widget>
</item>
<item row="1" column="10">
<widget class="QPushButton" name="qualityButton">
<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="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>36</width>
<height>36</height>
<width>30</width>
<height>30</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>36</width>
<height>36</height>
<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/ic_high_quality_white.svg</normaloff>:/images/video-conf/ic_high_quality_white.svg</iconset>
<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>
<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>