Move timestamps to the right

This commit is contained in:
Konstantinos Sideris 2018-01-14 12:29:54 +02:00
parent fe9d8a6534
commit dfeb0c833a
3 changed files with 78 additions and 48 deletions

View file

@ -83,7 +83,7 @@ static constexpr int headerSpacing = 7;
static constexpr int headerLeftMargin = 15; static constexpr int headerLeftMargin = 15;
namespace fonts { namespace fonts {
static constexpr int timestamp = 10; static constexpr int timestamp = 13;
static constexpr int dateSeparator = conf::fontSize - 2; static constexpr int dateSeparator = conf::fontSize - 2;
} // namespace fonts } // namespace fonts
} // namespace timeline } // namespace timeline

View file

@ -122,10 +122,14 @@ private:
QAction *showReadReceipts_; QAction *showReadReceipts_;
QHBoxLayout *topLayout_; QHBoxLayout *topLayout_;
QVBoxLayout *sideLayout_; // Avatar or Timestamp //! The message and the timestamp/checkmark.
QVBoxLayout *mainLayout_; // Header & Message body QHBoxLayout *messageLayout_;
//! Avatar or Timestamp
QVBoxLayout *sideLayout_;
//! Header & Message body
QVBoxLayout *mainLayout_;
QHBoxLayout *headerLayout_; // Username (&) Timestamp QVBoxLayout *headerLayout_; // Username (&) Timestamp
Avatar *userAvatar_; Avatar *userAvatar_;
@ -159,17 +163,25 @@ TimelineItem::setupLocalWidgetLayout(Widget *widget,
widgetLayout->addWidget(widget); widgetLayout->addWidget(widget);
widgetLayout->addStretch(1); widgetLayout->addStretch(1);
messageLayout_->setContentsMargins(0, 0, 20, 4);
messageLayout_->setSpacing(20);
if (withSender) { if (withSender) {
generateBody(displayName, ""); generateBody(displayName, "");
setupAvatarLayout(displayName); setupAvatarLayout(displayName);
mainLayout_->addLayout(headerLayout_);
headerLayout_->addLayout(widgetLayout);
messageLayout_->addLayout(headerLayout_, 1);
AvatarProvider::resolve(userid, [=](const QImage &img) { setUserAvatar(img); }); AvatarProvider::resolve(userid, [=](const QImage &img) { setUserAvatar(img); });
} else { } else {
setupSimpleLayout(); setupSimpleLayout();
messageLayout_->addLayout(widgetLayout, 1);
} }
mainLayout_->addLayout(widgetLayout); messageLayout_->addWidget(timestamp_);
mainLayout_->addLayout(messageLayout_);
} }
template<class Event, class Widget> template<class Event, class Widget>
@ -201,16 +213,23 @@ TimelineItem::setupWidgetLayout(Widget *widget,
widgetLayout->addWidget(widget); widgetLayout->addWidget(widget);
widgetLayout->addStretch(1); widgetLayout->addStretch(1);
messageLayout_->setContentsMargins(0, 0, 20, 4);
messageLayout_->setSpacing(20);
if (withSender) { if (withSender) {
generateBody(displayName, ""); generateBody(displayName, "");
setupAvatarLayout(displayName); setupAvatarLayout(displayName);
mainLayout_->addLayout(headerLayout_); headerLayout_->addLayout(widgetLayout);
messageLayout_->addLayout(headerLayout_, 1);
AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); }); AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); });
} else { } else {
setupSimpleLayout(); setupSimpleLayout();
messageLayout_->addLayout(widgetLayout, 1);
} }
mainLayout_->addLayout(widgetLayout); messageLayout_->addWidget(timestamp_);
mainLayout_->addLayout(messageLayout_);
} }

View file

@ -50,19 +50,15 @@ TimelineItem::init()
ChatPage::instance()->showReadReceipts(event_id_); ChatPage::instance()->showReadReceipts(event_id_);
}); });
topLayout_ = new QHBoxLayout(this); topLayout_ = new QHBoxLayout(this);
sideLayout_ = new QVBoxLayout; mainLayout_ = new QVBoxLayout;
mainLayout_ = new QVBoxLayout; messageLayout_ = new QHBoxLayout;
topLayout_->setContentsMargins(conf::timeline::msgMargin, conf::timeline::msgMargin, 0, 0); topLayout_->setContentsMargins(conf::timeline::msgMargin, conf::timeline::msgMargin, 0, 0);
topLayout_->setSpacing(0); topLayout_->setSpacing(0);
topLayout_->addLayout(sideLayout_);
topLayout_->addLayout(mainLayout_, 1); topLayout_->addLayout(mainLayout_, 1);
sideLayout_->setMargin(0);
sideLayout_->setSpacing(0);
mainLayout_->setContentsMargins(conf::timeline::headerLeftMargin, 0, 0, 0); mainLayout_->setContentsMargins(conf::timeline::headerLeftMargin, 0, 0, 0);
mainLayout_->setSpacing(0); mainLayout_->setSpacing(0);
} }
@ -95,18 +91,25 @@ TimelineItem::TimelineItem(mtx::events::MessageType ty,
body.replace("\n", "<br/>"); body.replace("\n", "<br/>");
generateTimestamp(timestamp); generateTimestamp(timestamp);
messageLayout_->setContentsMargins(0, 0, 20, 4);
messageLayout_->setSpacing(20);
if (withSender) { if (withSender) {
generateBody(displayName, body); generateBody(displayName, body);
setupAvatarLayout(displayName); setupAvatarLayout(displayName);
mainLayout_->addLayout(headerLayout_);
messageLayout_->addLayout(headerLayout_, 1);
AvatarProvider::resolve(userid, [=](const QImage &img) { setUserAvatar(img); }); AvatarProvider::resolve(userid, [=](const QImage &img) { setUserAvatar(img); });
} else { } else {
generateBody(body); generateBody(body);
setupSimpleLayout(); setupSimpleLayout();
messageLayout_->addWidget(body_, 1);
} }
mainLayout_->addWidget(body_); messageLayout_->addWidget(timestamp_);
mainLayout_->addLayout(messageLayout_);
} }
TimelineItem::TimelineItem(ImageItem *image, TimelineItem::TimelineItem(ImageItem *image,
@ -217,21 +220,27 @@ TimelineItem::TimelineItem(const mtx::events::RoomEvent<mtx::events::msg::Notice
body.replace("\n", "<br/>"); body.replace("\n", "<br/>");
body = "<i>" + body + "</i>"; body = "<i>" + body + "</i>";
messageLayout_->setContentsMargins(0, 0, 20, 4);
messageLayout_->setSpacing(20);
if (with_sender) { if (with_sender) {
auto displayName = TimelineViewManager::displayName(sender); auto displayName = TimelineViewManager::displayName(sender);
generateBody(displayName, body); generateBody(displayName, body);
setupAvatarLayout(displayName); setupAvatarLayout(displayName);
mainLayout_->addLayout(headerLayout_); messageLayout_->addLayout(headerLayout_, 1);
AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); }); AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); });
} else { } else {
generateBody(body); generateBody(body);
setupSimpleLayout(); setupSimpleLayout();
messageLayout_->addWidget(body_, 1);
} }
mainLayout_->addWidget(body_); messageLayout_->addWidget(timestamp_);
mainLayout_->addLayout(messageLayout_);
} }
/* /*
@ -259,18 +268,25 @@ TimelineItem::TimelineItem(const mtx::events::RoomEvent<mtx::events::msg::Emote>
emoteMsg.replace(conf::strings::url_regex, conf::strings::url_html); emoteMsg.replace(conf::strings::url_regex, conf::strings::url_html);
emoteMsg.replace("\n", "<br/>"); emoteMsg.replace("\n", "<br/>");
messageLayout_->setContentsMargins(0, 0, 20, 4);
messageLayout_->setSpacing(20);
if (with_sender) { if (with_sender) {
generateBody(displayName, emoteMsg); generateBody(displayName, emoteMsg);
setupAvatarLayout(displayName); setupAvatarLayout(displayName);
mainLayout_->addLayout(headerLayout_);
messageLayout_->addLayout(headerLayout_, 1);
AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); }); AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); });
} else { } else {
generateBody(emoteMsg); generateBody(emoteMsg);
setupSimpleLayout(); setupSimpleLayout();
messageLayout_->addWidget(body_, 1);
} }
mainLayout_->addWidget(body_); messageLayout_->addWidget(timestamp_);
mainLayout_->addLayout(messageLayout_);
} }
/* /*
@ -303,19 +319,25 @@ TimelineItem::TimelineItem(const mtx::events::RoomEvent<mtx::events::msg::Text>
body.replace(conf::strings::url_regex, conf::strings::url_html); body.replace(conf::strings::url_regex, conf::strings::url_html);
body.replace("\n", "<br/>"); body.replace("\n", "<br/>");
messageLayout_->setContentsMargins(0, 0, 20, 4);
messageLayout_->setSpacing(20);
if (with_sender) { if (with_sender) {
generateBody(displayName, body); generateBody(displayName, body);
setupAvatarLayout(displayName); setupAvatarLayout(displayName);
mainLayout_->addLayout(headerLayout_); messageLayout_->addLayout(headerLayout_, 1);
AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); }); AvatarProvider::resolve(sender, [=](const QImage &img) { setUserAvatar(img); });
} else { } else {
generateBody(body); generateBody(body);
setupSimpleLayout(); setupSimpleLayout();
messageLayout_->addWidget(body_, 1);
} }
mainLayout_->addWidget(body_); messageLayout_->addWidget(timestamp_);
mainLayout_->addLayout(messageLayout_);
} }
// Only the body is displayed. // Only the body is displayed.
@ -377,8 +399,10 @@ TimelineItem::generateTimestamp(const QDateTime &time)
int topMargin = QFontMetrics(font_).ascent() - fm.ascent(); int topMargin = QFontMetrics(font_).ascent() - fm.ascent();
timestamp_ = new QLabel(this); timestamp_ = new QLabel(this);
timestamp_->setAlignment(Qt::AlignTop);
timestamp_->setFont(timestampFont); timestamp_->setFont(timestampFont);
timestamp_->setText(time.toString("HH:mm")); timestamp_->setText(
QString("<span style=\"color: #999\"> %1 </span>").arg(time.toString("HH:mm")));
timestamp_->setContentsMargins(0, topMargin, 0, 0); timestamp_->setContentsMargins(0, topMargin, 0, 0);
timestamp_->setStyleSheet( timestamp_->setStyleSheet(
QString("font-size: %1px;").arg(conf::timeline::fonts::timestamp)); QString("font-size: %1px;").arg(conf::timeline::fonts::timestamp));
@ -418,41 +442,28 @@ TimelineItem::setupAvatarLayout(const QString &userName)
if (userName[0] == '@' && userName.size() > 1) if (userName[0] == '@' && userName.size() > 1)
userAvatar_->setLetter(QChar(userName[1]).toUpper()); userAvatar_->setLetter(QChar(userName[1]).toUpper());
sideLayout_ = new QVBoxLayout;
sideLayout_->setMargin(0);
sideLayout_->setSpacing(0);
sideLayout_->addWidget(userAvatar_); sideLayout_->addWidget(userAvatar_);
sideLayout_->addStretch(1); sideLayout_->addStretch(1);
topLayout_->insertLayout(0, sideLayout_);
headerLayout_ = new QHBoxLayout; headerLayout_ = new QVBoxLayout;
headerLayout_->setMargin(0); headerLayout_->setMargin(0);
headerLayout_->setSpacing(conf::timeline::headerSpacing); headerLayout_->setSpacing(0);
headerLayout_->addWidget(userName_); headerLayout_->addWidget(userName_);
headerLayout_->addWidget(timestamp_, 1); headerLayout_->addWidget(body_);
} }
void void
TimelineItem::setupSimpleLayout() TimelineItem::setupSimpleLayout()
{ {
sideLayout_->addWidget(timestamp_); topLayout_->setContentsMargins(conf::timeline::avatarSize + conf::timeline::msgMargin + 1,
conf::timeline::msgMargin / 3,
// Keep only the time in plain text. 0,
QTextEdit htmlText(timestamp_->text()); 0);
QString plainText = htmlText.toPlainText();
timestamp_->adjustSize();
// Align the end of the avatar bubble with the end of the timestamp for
// messages with and without avatar. Otherwise their bodies would not be
// aligned.
int tsWidth = timestamp_->fontMetrics().width(plainText);
int offset = std::max(0, conf::timeline::avatarSize - tsWidth);
int defaultFontHeight = QFontMetrics(font_).ascent();
timestamp_->setAlignment(Qt::AlignTop);
timestamp_->setContentsMargins(
offset + 1, defaultFontHeight - timestamp_->fontMetrics().ascent(), 0, 0);
topLayout_->setContentsMargins(
conf::timeline::msgMargin, conf::timeline::msgMargin / 3, 0, 0);
} }
void void