Skip to content

GitLab

J
jami-client-windows
Commit d0b3375f authored by Nicolas Jager's avatar Nicolas Jager Committed by Edric Milaret
Browse files
Options

ui: instant messaging ui update 

- rounded corners, use Arial font, anti-aliasing, misc.
- style sync with instantmessagingwidget

Change-Id: I0b214550110dc45593a3e45094324ee6da6e740c
Tuleap: #148
parent ca85029d
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 76 deletions
callwidget.cpp
View file @ d0b3375f
......@@ -97,6 +97,11 @@ CallWidget::CallWidget(QWidget* parent) :
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 {
......
callwidget.ui
View file @ d0b3375f
......@@ -703,12 +703,26 @@
</property>
</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/>
......
images/ic_send_white.svg 0 → 100644
View file @ d0b3375f
<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
imdelegate.cpp
View file @ d0b3375f
/***************************************************************************
* 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 @@ ImDelegate::paint(QPainter* painter,
{
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 @@ ImDelegate::paint(QPainter* painter,
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 ImDelegate::getBoundingRect(const Qt::AlignmentFlag& dir, const QString& m
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 @@ QSize
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 @@ ImDelegate::sizeHint(const QStyleOptionViewItem& option,
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;
}
......
imdelegate.h
View file @ d0b3375f
/***************************************************************************
* 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 @@ private:
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;
};
instantmessagingwidget.cpp
View file @ d0b3375f
......@@ -37,22 +37,27 @@ InstantMessagingWidget::InstantMessagingWidget(QWidget *parent) :
{
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 @@ InstantMessagingWidget::setMediaText(Call *call)
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 @@ void
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 @@ InstantMessagingWidget::copyToClipboard()
void
InstantMessagingWidget::on_sendButton_clicked()
{
emit ui->messageInput->returnPressed();
emit ui->messageEdit->returnPressed();
}
void
......
instantmessagingwidget.ui
View file @ d0b3375f
......@@ -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>
ressources.qrc
View file @ d0b3375f
......@@ -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>
stylesheet.css
View file @ d0b3375f
......@@ -48,7 +48,7 @@ QScrollBar:vertical{
}
QScrollBar::handle:vertical{
background: rgb( 255, 255, 255 )
background: rgb( 255, 255, 255 );
}
SmartList{
......@@ -62,11 +62,25 @@ SmartList::item:selected{
}
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 @@ QPushButton#qualityButton{
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:vertical{
QScrollBar::handle:vertical{
background: rgb(77, 77, 77);
}
QWidget#welcomePage{
background: rgb(242, 242, 242);
}
QWidget#messagingPage{
background: rgb(242, 242, 242);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment