roomlist: Put the message timestamp on the top

This commit is contained in:
Konstantinos Sideris 2018-03-18 15:54:53 +02:00
parent 4192a99927
commit 7253dc2c54
4 changed files with 63 additions and 49 deletions

View file

@ -57,6 +57,7 @@ static constexpr int cornerRadius = 3;
namespace roomlist { namespace roomlist {
namespace fonts { namespace fonts {
static constexpr int heading = 14; static constexpr int heading = 14;
static constexpr int timestamp = heading - 1;
static constexpr int badge = 10; static constexpr int badge = 10;
static constexpr int bubble = 20; static constexpr int bubble = 20;
} // namespace fonts } // namespace fonts
@ -84,7 +85,7 @@ static constexpr int headerLeftMargin = 15;
namespace fonts { namespace fonts {
static constexpr int timestamp = 13; static constexpr int timestamp = 13;
static constexpr int dateSeparator = conf::fontSize - 2; static constexpr int dateSeparator = conf::fontSize;
} // namespace fonts } // namespace fonts
} // namespace timeline } // namespace timeline

View file

@ -75,10 +75,10 @@ public:
update(); update();
} }
QString roomId(); QString roomId() { return roomId_; }
bool isPressed() const { return isPressed_; }; bool isPressed() const { return isPressed_; }
QSharedPointer<RoomState> state() const { return state_; } QSharedPointer<RoomState> state() const { return state_; }
int unreadMessageCount() const { return unreadMsgCount_; }; int unreadMessageCount() const { return unreadMsgCount_; }
void setAvatar(const QImage &avatar_image); void setAvatar(const QImage &avatar_image);
void setDescriptionMessage(const DescInfo &info); void setDescriptionMessage(const DescInfo &info);
@ -184,10 +184,12 @@ private:
QRectF acceptBtnRegion_; QRectF acceptBtnRegion_;
QRectF declineBtnRegion_; QRectF declineBtnRegion_;
};
inline QString // Fonts
RoomInfoListItem::roomId() QFont bubbleFont_;
{ QFont font_;
return roomId_; QFont headingFont_;
} QFont timestampFont_;
QFont usernameFont_;
QFont unreadCountFont_;
};

View file

@ -52,6 +52,25 @@ RoomInfoListItem::init(QWidget *parent)
ripple_overlay_ = new RippleOverlay(this); ripple_overlay_ = new RippleOverlay(this);
ripple_overlay_->setClipPath(path); ripple_overlay_->setClipPath(path);
ripple_overlay_->setClipping(true); ripple_overlay_->setClipping(true);
font_.setPixelSize(conf::fontSize);
usernameFont_ = font_;
usernameFont_.setWeight(60);
bubbleFont_ = font_;
bubbleFont_.setPixelSize(conf::roomlist::fonts::bubble);
unreadCountFont_.setPixelSize(conf::roomlist::fonts::badge);
unreadCountFont_.setBold(true);
timestampFont_ = font_;
timestampFont_.setPixelSize(conf::roomlist::fonts::timestamp);
timestampFont_.setBold(false);
headingFont_ = font_;
headingFont_.setPixelSize(conf::roomlist::fonts::heading);
headingFont_.setWeight(60);
} }
RoomInfoListItem::RoomInfoListItem(QString room_id, RoomInfoListItem::RoomInfoListItem(QString room_id,
@ -125,9 +144,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
p.setRenderHint(QPainter::SmoothPixmapTransform); p.setRenderHint(QPainter::SmoothPixmapTransform);
p.setRenderHint(QPainter::Antialiasing); p.setRenderHint(QPainter::Antialiasing);
QFont font; QFontMetrics metrics(font_);
font.setPixelSize(conf::fontSize);
QFontMetrics metrics(font);
QPen titlePen(titleColor_); QPen titlePen(titleColor_);
QPen subtitlePen(subtitleColor_); QPen subtitlePen(subtitleColor_);
@ -148,26 +165,26 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
int bottom_y = MaxHeight - Padding - Padding / 3 - metrics.ascent() / 2; int bottom_y = MaxHeight - Padding - Padding / 3 - metrics.ascent() / 2;
if (width() > ui::sidebar::SmallSize) { if (width() > ui::sidebar::SmallSize) {
font.setPixelSize(conf::roomlist::fonts::heading); p.setFont(headingFont_);
font.setWeight(60);
p.setFont(font);
p.setPen(titlePen); p.setPen(titlePen);
const auto msgStampWidth =
QFontMetrics(timestampFont_).width(lastMsgInfo_.timestamp) + 4;
// Name line. // Name line.
QFontMetrics fontNameMetrics(font); QFontMetrics fontNameMetrics(headingFont_);
int top_y = 2 * Padding + fontNameMetrics.ascent() / 2; int top_y = 2 * Padding + fontNameMetrics.ascent() / 2;
auto name = metrics.elidedText( const auto name =
roomName(), Qt::ElideRight, (width() - IconSize - 2 * Padding) * 0.8); metrics.elidedText(roomName(),
Qt::ElideRight,
(width() - IconSize - 2 * Padding - msgStampWidth) * 0.8);
p.drawText(QPoint(2 * Padding + IconSize, top_y), name); p.drawText(QPoint(2 * Padding + IconSize, top_y), name);
if (roomType_ == RoomType::Joined) { if (roomType_ == RoomType::Joined) {
font.setPixelSize(conf::fontSize); p.setFont(font_);
p.setFont(font);
p.setPen(subtitlePen); p.setPen(subtitlePen);
auto msgStampWidth = QFontMetrics(font).width(lastMsgInfo_.timestamp) + 5;
// The limit is the space between the end of the avatar and the start of the // The limit is the space between the end of the avatar and the start of the
// timestamp. // timestamp.
int usernameLimit = int usernameLimit =
@ -175,14 +192,12 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
auto userName = auto userName =
metrics.elidedText(lastMsgInfo_.username, Qt::ElideRight, usernameLimit); metrics.elidedText(lastMsgInfo_.username, Qt::ElideRight, usernameLimit);
font.setWeight(60); p.setFont(usernameFont_);
p.setFont(font);
p.drawText(QPoint(2 * Padding + IconSize, bottom_y), userName); p.drawText(QPoint(2 * Padding + IconSize, bottom_y), userName);
int nameWidth = QFontMetrics(font).width(userName); int nameWidth = QFontMetrics(usernameFont_).width(userName);
font.setBold(false); p.setFont(font_);
p.setFont(font);
// The limit is the space between the end of the username and the start of // The limit is the space between the end of the username and the start of
// the timestamp. // the timestamp.
@ -193,12 +208,10 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
p.drawText(QPoint(2 * Padding + IconSize + nameWidth, bottom_y), p.drawText(QPoint(2 * Padding + IconSize + nameWidth, bottom_y),
description); description);
// We either show the bubble or the last message timestamp. // We show the last message timestamp.
if (unreadMsgCount_ == 0) { p.setFont(timestampFont_);
font.setBold(true); p.drawText(QPoint(width() - Padding - msgStampWidth, top_y),
p.drawText(QPoint(width() - Padding - msgStampWidth, bottom_y),
lastMsgInfo_.timestamp); lastMsgInfo_.timestamp);
}
} else { } else {
int btnWidth = (width() - IconSize - 6 * Padding) / 2; int btnWidth = (width() - IconSize - 6 * Padding) / 2;
@ -221,13 +234,12 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
p.drawPath(declinePath); p.drawPath(declinePath);
p.setPen(QPen(btnTextColor_)); p.setPen(QPen(btnTextColor_));
p.setFont(font); p.setFont(font_);
p.drawText(acceptBtnRegion_, Qt::AlignCenter, tr("Accept")); p.drawText(acceptBtnRegion_, Qt::AlignCenter, tr("Accept"));
p.drawText(declineBtnRegion_, Qt::AlignCenter, tr("Decline")); p.drawText(declineBtnRegion_, Qt::AlignCenter, tr("Decline"));
} }
} }
font.setBold(false);
p.setPen(Qt::NoPen); p.setPen(Qt::NoPen);
// We using the first letter of room's name. // We using the first letter of room's name.
@ -241,8 +253,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
p.drawEllipse(avatarRegion.center(), IconSize / 2, IconSize / 2); p.drawEllipse(avatarRegion.center(), IconSize / 2, IconSize / 2);
font.setPixelSize(conf::roomlist::fonts::bubble); p.setFont(bubbleFont_);
p.setFont(font);
p.setPen(QColor("#333")); p.setPen(QColor("#333"));
p.setBrush(Qt::NoBrush); p.setBrush(Qt::NoBrush);
p.drawText( p.drawText(
@ -269,13 +280,9 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
if (isPressed_) if (isPressed_)
brush.setColor(textColor); brush.setColor(textColor);
QFont unreadCountFont;
unreadCountFont.setPixelSize(conf::roomlist::fonts::badge);
unreadCountFont.setBold(true);
p.setBrush(brush); p.setBrush(brush);
p.setPen(Qt::NoPen); p.setPen(Qt::NoPen);
p.setFont(unreadCountFont); p.setFont(unreadCountFont_);
int diameter = 20; int diameter = 20;

View file

@ -679,13 +679,17 @@ TimelineView::createDateSeparator(QDateTime datetime)
fmt = QString("ddd d MMMM"); fmt = QString("ddd d MMMM");
if (days == 0) if (days == 0)
separator = new QLabel(tr("Today")); separator = new QLabel(tr("Today"), this);
else if (std::abs(days) == 1) else if (std::abs(days) == 1)
separator = new QLabel(tr("Yesterday")); separator = new QLabel(tr("Yesterday"), this);
else else
separator = new QLabel(datetime.toString(fmt)); separator = new QLabel(datetime.toString(fmt), this);
if (separator) { if (separator) {
QFont font;
font.setWeight(60);
separator->setFont(font);
separator->setStyleSheet( separator->setStyleSheet(
QString("font-size: %1px").arg(conf::timeline::fonts::dateSeparator)); QString("font-size: %1px").arg(conf::timeline::fonts::dateSeparator));
separator->setAlignment(Qt::AlignCenter); separator->setAlignment(Qt::AlignCenter);