ui: instant messaging ui update
- rounded corners, use Arial font, anti-aliasing, misc.
- style sync with instantmessagingwidget
Change-Id: I0b214550110dc45593a3e45094324ee6da6e740c
Tuleap: #148
diff --git a/callwidget.cpp b/callwidget.cpp
index fce5e6c..7bc345c 100644
--- a/callwidget.cpp
+++ b/callwidget.cpp
@@ -97,6 +97,11 @@
ui->ringLogo->setPixmap(logo.scaledToHeight(100, Qt::SmoothTransformation));
ui->ringLogo->setAlignment(Qt::AlignHCenter);
+ QPixmap sendPixmap(":/images/ic_send_white.svg");
+ QIcon sendIcon(sendPixmap);
+ ui->sendButton->setIcon(sendIcon);
+ ui->sendButton->setIconSize(sendPixmap.rect().size());
+
GlobalInstances::setPixmapManipulator(std::unique_ptr<Interfaces::PixbufManipulator>(new Interfaces::PixbufManipulator()));
try {
diff --git a/callwidget.ui b/callwidget.ui
index 90fa227..d0fb91f 100644
--- a/callwidget.ui
+++ b/callwidget.ui
@@ -704,11 +704,25 @@
</widget>
</item>
<item>
+ <spacer name="horizontalSpacer_7">
+ <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="imNameLabel">
<property name="font">
<font>
- <weight>75</weight>
- <bold>true</bold>
+ <pointsize>12</pointsize>
+ <weight>50</weight>
+ <bold>false</bold>
</font>
</property>
<property name="text">
@@ -717,7 +731,27 @@
</widget>
</item>
<item>
- <widget class="QComboBox" name="contactMethodComboBox"/>
+ <spacer name="horizontalSpacer_6">
+ <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="QComboBox" name="contactMethodComboBox">
+ <property name="minimumSize">
+ <size>
+ <width>244</width>
+ <height>0</height>
+ </size>
+ </property>
+ </widget>
</item>
</layout>
</item>
@@ -734,6 +768,9 @@
<stylestrategy>PreferAntialias</stylestrategy>
</font>
</property>
+ <property name="focusPolicy">
+ <enum>Qt::NoFocus</enum>
+ </property>
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
@@ -759,13 +796,40 @@
</item>
<item>
<layout class="QHBoxLayout" name="horizontalLayout_5">
+ <property name="bottomMargin">
+ <number>6</number>
+ </property>
<item>
- <widget class="QLineEdit" name="messageEdit"/>
+ <widget class="QLineEdit" name="messageEdit">
+ <property name="minimumSize">
+ <size>
+ <width>0</width>
+ <height>30</height>
+ </size>
+ </property>
+ <property name="font">
+ <font>
+ <pointsize>10</pointsize>
+ </font>
+ </property>
+ </widget>
</item>
<item>
<widget class="QPushButton" name="sendButton">
+ <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>Send</string>
+ <string/>
</property>
</widget>
</item>
@@ -817,7 +881,7 @@
<string/>
</property>
<property name="pixmap">
- <pixmap resource="../../gerrit-2015/ring-client-windows-2015/ressources.qrc">:/images/user/btn-default-userpic.svg</pixmap>
+ <pixmap resource="ressources.qrc">:/images/user/btn-default-userpic.svg</pixmap>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
@@ -943,7 +1007,7 @@
<string/>
</property>
<property name="pixmap">
- <pixmap resource="../../gerrit-2015/ring-client-windows-2015/ressources.qrc">:/images/user/btn-default-userpic.svg</pixmap>
+ <pixmap resource="ressources.qrc">:/images/user/btn-default-userpic.svg</pixmap>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
@@ -1242,10 +1306,6 @@
</customwidget>
</customwidgets>
<resources>
- <include location="../../gerrit-2015/ring-client-windows-2015/ressources.qrc"/>
- <include location="../../gerrit-2015/ring-client-windows-2015/ressources.qrc"/>
- <include location="../../gerrit-2015/ring-client-windows-2015/ressources.qrc"/>
- <include location="ressources.qrc"/>
<include location="ressources.qrc"/>
</resources>
<connections/>
diff --git a/images/ic_send_white.svg b/images/ic_send_white.svg
new file mode 100644
index 0000000..beaf981
--- /dev/null
+++ b/images/ic_send_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="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+ <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/imdelegate.cpp b/imdelegate.cpp
index f5c3c0f..e670a9a 100644
--- a/imdelegate.cpp
+++ b/imdelegate.cpp
@@ -1,5 +1,5 @@
/***************************************************************************
- * Copyright (C) 2015-2016 by Savoir-faire Linux *
+ * Copyright (C) 2015-2016 by Savoir-faire Linux *
* Author: Edric Ladent Milaret <edric.ladent-milaret@savoirfairelinux.com>*
* *
* This program is free software; you can redistribute it and/or modify *
@@ -56,9 +56,11 @@
{
QStyleOptionViewItem opt = option;
initStyleOption(&opt, index);
-
painter->setRenderHint(QPainter::Antialiasing);
+ opt.font = fontMsg_;
+ painter->setFont(fontMsg_);
+
if (index.isValid()) {
auto msg = index.data(Qt::DisplayRole).toString();
opt.text.clear();
@@ -75,27 +77,29 @@
formatMsg(index, msg);
QRect textRect = getBoundingRect(dir, msg, opt);
- QRect bubbleRect(textRect.left() - bubblePadding_,
- textRect.top() - bubblePadding_,
- textRect.width() + bubblePadding_,
- textRect.height() + bubblePadding_);
- bubbleRect.setBottom(bubbleRect.bottom() + bubblePadding_);
- bubbleRect.setRight(bubbleRect.right() + bubblePadding_);
+
+ QRect bubbleRect(textRect.left() - padding_,
+ textRect.top() - padding_,
+ textRect.width() + 2 * padding_,
+ textRect.height() + 2 * padding_ );
+
opt.decorationSize = iconSize_;
- opt.decorationPosition = (dir == Qt::AlignRight ? QStyleOptionViewItem::Right : QStyleOptionViewItem::Left);
+ opt.decorationPosition = (dir == Qt::AlignRight ?
+ QStyleOptionViewItem::Right : QStyleOptionViewItem::Left);
opt.decorationAlignment = Qt::AlignTop | Qt::AlignHCenter;
style->drawControl(QStyle::CE_ItemViewItem, &opt, painter, opt.widget);
- painter->save();
- QPen pen(blue, padding_);
- if (dir == Qt::AlignRight)
- pen.setColor(grey);
QPainterPath path;
path.addRoundedRect(bubbleRect, padding_, padding_);
- painter->setPen(pen);
- painter->fillPath(path, pen.color());
- painter->drawPath(path);
- painter->restore();
+
+ if (dir == Qt::AlignRight) {
+ painter->fillPath(path, blue_);
+ painter->setPen(Qt::white);
+ }
+ else {
+ painter->fillPath(path, Qt::white);
+ painter->setPen(Qt::black);
+ }
painter->drawText(textRect, Qt::AlignLeft | Qt::AlignTop | Qt::TextWordWrap, msg);
}
@@ -108,16 +112,16 @@
QRect textRect;
if (dir == Qt::AlignRight) {
- textRect = textFontMetrics.boundingRect(option.rect.left(),
- option.rect.top() + padding_,
- option.rect.width() - iconSize_.width() - 2 * padding_,
+ textRect = textFontMetrics.boundingRect(option.rect.left() + 2 * padding_,
+ option.rect.top() + 2 * padding_,
+ option.rect.width() - iconSize_.width() - 4 * padding_,
0,
dir|Qt::AlignTop|Qt::TextWordWrap,
msg);
} else {
textRect = textFontMetrics.boundingRect(option.rect.left() + iconSize_.width() + 2 * padding_,
- option.rect.top() + padding_,
- option.rect.width() - iconSize_.width(),
+ option.rect.top() + 2 * padding_,
+ option.rect.width() - iconSize_.width() - 4 * padding_ ,
0,
dir|Qt::AlignTop|Qt::TextWordWrap,
msg);
@@ -129,6 +133,9 @@
ImDelegate::sizeHint(const QStyleOptionViewItem& option,
const QModelIndex& index) const
{
+ QStyleOptionViewItem opt = option;
+ opt.font = fontMsg_;
+
QString msg = index.data(Qt::DisplayRole).toString();
auto dir = index.data(
@@ -138,13 +145,13 @@
formatMsg(index, msg);
- QRect subheaderRect = getBoundingRect(dir, msg, option);
+ QRect boundingRect = getBoundingRect(dir, msg, opt);
- QSize size(option.rect.width(), subheaderRect.height() + 3 * padding_);
+ QSize size(option.rect.width(), boundingRect.height() + padding_);
/* Keep the minimum height needed. */
if(size.height() < iconSize_.height())
- size.setHeight(iconSize_.height() + 3 * padding_);
+ size.setHeight(iconSize_.height() + padding_);
return size;
}
diff --git a/imdelegate.h b/imdelegate.h
index e103fcd..f088dce 100644
--- a/imdelegate.h
+++ b/imdelegate.h
@@ -1,5 +1,5 @@
/***************************************************************************
- * Copyright (C) 2015-2016 by Savoir-faire Linux *
+ * Copyright (C) 2015-2016 by Savoir-faire Linux *
* Author: Edric Ladent Milaret <edric.ladent-milaret@savoirfairelinux.com>*
* *
* This program is free software; you can redistribute it and/or modify *
@@ -42,10 +42,10 @@
void formatMsg(const QModelIndex& index, QString& msg) const;
QRect getBoundingRect(const Qt::AlignmentFlag& dir, const QString& msg, const QStyleOptionViewItem &option) const;
- const QColor blue {"#3AC0D2"};
- const QColor grey {"#f2f2f2"};
+ const QFont fontMsg_ = QFont("Arial", 10);
+ const QColor blue_ {"#3AC0D2"};
const QSize iconSize_ {38,38};
+
constexpr static int padding_ = 5;
- constexpr static int bubblePadding_ = 2;
};
diff --git a/instantmessagingwidget.cpp b/instantmessagingwidget.cpp
index fc49ec9..0028dab 100644
--- a/instantmessagingwidget.cpp
+++ b/instantmessagingwidget.cpp
@@ -37,22 +37,27 @@
{
ui->setupUi(this);
+ QPixmap sendPixmap(":/images/ic_send_white.svg");
+ QIcon sendIcon(sendPixmap);
+ ui->sendButton->setIcon(sendIcon);
+ ui->sendButton->setIconSize(sendPixmap.rect().size());
+
this->hide();
imDelegate_ = new ImDelegate();
- ui->messageOutput->setItemDelegate(imDelegate_);
- ui->messageOutput->setContextMenuPolicy(Qt::ActionsContextMenu);
+ ui->listMessageView->setItemDelegate(imDelegate_);
+ ui->listMessageView->setContextMenuPolicy(Qt::ActionsContextMenu);
auto copyAction = new QAction(tr("Copy"), this);
- ui->messageOutput->addAction(copyAction);
+ ui->listMessageView->addAction(copyAction);
connect(copyAction, &QAction::triggered, [=]() {
copyToClipboard();
});
auto displayDate = new QAction(tr("Display date"), this);
displayDate->setCheckable(true);
- ui->messageOutput->addAction(displayDate);
+ ui->listMessageView->addAction(displayDate);
auto displayAuthor = new QAction(tr("Display author"), this);
displayAuthor->setCheckable(true);
- ui->messageOutput->addAction(displayAuthor);
+ ui->listMessageView->addAction(displayAuthor);
auto lamdba = [=](){
int opts = 0;
displayAuthor->isChecked() ? opts |= ImDelegate::DisplayOptions::AUTHOR : opts;
@@ -82,23 +87,25 @@
textMedia = call->addOutgoingMedia<Media::Text>();
}
if (textMedia) {
- connect(ui->messageOutput->model(),
+ connect(ui->listMessageView->model(),
SIGNAL(rowsInserted(const QModelIndex&, int, int)),
- ui->messageOutput, SLOT(scrollToBottom()));
- ui->messageOutput->setModel(
+ ui->listMessageView, SLOT(scrollToBottom()));
+ ui->listMessageView->setModel(
textMedia->recording()->
instantMessagingModel());
- connect(ui->messageInput, &QLineEdit::returnPressed, [=]()
+ connect(ui->messageEdit, &QLineEdit::returnPressed, [=]()
{
- QMap<QString, QString> messages;
- messages["text/plain"] = ui->messageInput->text();
- textMedia->send(messages);
- ui->messageInput->clear();
+ if (not ui->messageEdit->text().trimmed().isEmpty()) {
+ QMap<QString, QString> messages;
+ messages["text/plain"] = ui->messageEdit->text();
+ textMedia->send(messages);
+ ui->messageEdit->clear();
+ }
});
}
} else {
- ui->messageOutput->disconnect();
- ui->messageInput->disconnect();
+ ui->listMessageView->disconnect();
+ ui->messageEdit->disconnect();
}
}
@@ -138,15 +145,15 @@
InstantMessagingWidget::showEvent(QShowEvent *event)
{
Q_UNUSED(event)
- ui->messageInput->setFocus();
+ ui->messageEdit->setFocus();
}
void
InstantMessagingWidget::copyToClipboard()
{
- auto idx = ui->messageOutput->currentIndex();
+ auto idx = ui->listMessageView->currentIndex();
if (idx.isValid()) {
- auto text = ui->messageOutput->model()->data(idx);
+ auto text = ui->listMessageView->model()->data(idx);
QApplication::clipboard()->setText(text.value<QString>());
}
@@ -155,7 +162,7 @@
void
InstantMessagingWidget::on_sendButton_clicked()
{
- emit ui->messageInput->returnPressed();
+ emit ui->messageEdit->returnPressed();
}
void
diff --git a/instantmessagingwidget.ui b/instantmessagingwidget.ui
index 05a9f38..06d61ff 100644
--- a/instantmessagingwidget.ui
+++ b/instantmessagingwidget.ui
@@ -21,19 +21,19 @@
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<property name="leftMargin">
- <number>2</number>
+ <number>0</number>
</property>
<property name="topMargin">
- <number>2</number>
+ <number>0</number>
</property>
<property name="rightMargin">
- <number>2</number>
+ <number>0</number>
</property>
<property name="bottomMargin">
- <number>2</number>
+ <number>0</number>
</property>
<item>
- <widget class="QListView" name="messageOutput">
+ <widget class="QListView" name="listMessageView">
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
@@ -51,7 +51,13 @@
<number>0</number>
</property>
<item>
- <widget class="QLineEdit" name="messageInput">
+ <widget class="QLineEdit" name="messageEdit">
+ <property name="minimumSize">
+ <size>
+ <width>0</width>
+ <height>30</height>
+ </size>
+ </property>
<property name="placeholderText">
<string>Send text message...</string>
</property>
@@ -62,12 +68,20 @@
</item>
<item>
<widget class="QPushButton" name="sendButton">
- <property name="text">
- <string>Send</string>
+ <property name="minimumSize">
+ <size>
+ <width>36</width>
+ <height>36</height>
+ </size>
</property>
- <property name="icon">
- <iconset resource="ressources.qrc">
- <normaloff>:/images/arrow-right.png</normaloff>:/images/arrow-right.png</iconset>
+ <property name="maximumSize">
+ <size>
+ <width>36</width>
+ <height>36</height>
+ </size>
+ </property>
+ <property name="text">
+ <string/>
</property>
</widget>
</item>
@@ -75,8 +89,6 @@
</item>
</layout>
</widget>
- <resources>
- <include location="ressources.qrc"/>
- </resources>
+ <resources/>
<connections/>
</ui>
diff --git a/ressources.qrc b/ressources.qrc
index f3010b8..63a2a9b 100644
--- a/ressources.qrc
+++ b/ressources.qrc
@@ -42,5 +42,6 @@
<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>
</RCC>
diff --git a/stylesheet.css b/stylesheet.css
index 1bd929b..d4f17ec 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -48,7 +48,7 @@
}
QScrollBar::handle:vertical{
- background: rgb( 255, 255, 255 )
+ background: rgb( 255, 255, 255 );
}
SmartList{
@@ -62,11 +62,25 @@
}
SmartList::item:hover{
- background-color: rgba(242, 242, 242, 255);
+ background-color: rgba(242, 242, 242, 255);
}
QListView#listMessageView::item:hover{
- background-color: rgba(242, 242, 242, 255);
+ background-color: rgba(229, 229, 229, 255);
+ border-radius: 18px;
+}
+
+QListView#listMessageView{
+ background: rgb(242, 242, 242);
+ border-top: 1px solid rgb(229, 229, 229);
+}
+
+QLineEdit#messageEdit{
+ border-color: rgb(0, 192, 212);
+ border-radius: 5px;
+ border-width: 1px;
+ border-style: outset;
+ background-color: rgb(255, 255, 255);
}
QPushButton#holdButton{
@@ -126,6 +140,12 @@
border:solid 1px;
}
+QPushButton#sendButton{
+ background-color: #3AC0D2;
+ border-radius: 18px;
+ border:solid 1px;
+}
+
QScrollBar:vertical{
background: rgb(242, 242, 242);
width:10px;
@@ -134,3 +154,11 @@
QScrollBar::handle:vertical{
background: rgb(77, 77, 77);
}
+
+QWidget#welcomePage{
+ background: rgb(242, 242, 242);
+}
+
+QWidget#messagingPage{
+ background: rgb(242, 242, 242);
+}
