Use pixels to specify the font sizes

Basically reverts the last font related commits since pointSize isn't
as reliable as pixelSize.

Also some layout values (margins, spacings) have been moved out to Config.h.
remotes/origin/HEAD
Konstantinos Sideris 7 years ago
parent 847ae37df2
commit 30fb46e25b
  1. 63
      include/Config.h
  2. 6
      include/RoomInfoListItem.h
  3. 3
      include/TextInputWidget.h
  4. 10
      include/TimelineItem.h
  5. 3
      include/TopRoomBar.h
  6. 3
      include/UserInfoWidget.h
  7. 7
      include/ui/Menu.h
  8. 11
      src/EmojiCategory.cc
  9. 9
      src/LoginPage.cc
  10. 10
      src/LogoutDialog.cc
  11. 11
      src/RegisterPage.cc
  12. 25
      src/RoomInfoListItem.cc
  13. 7
      src/TextInputWidget.cc
  14. 37
      src/TimelineItem.cc
  15. 14
      src/TopRoomBar.cc
  16. 16
      src/UserInfoWidget.cc
  17. 9
      src/WelcomePage.cc
  18. 2
      src/ui/FlatButton.cc
  19. 2
      src/ui/TextField.cc

@ -0,0 +1,63 @@
#pragma once
// Non-theme app configuration. Layouts, fonts spacing etc.
//
// Font sizes are in pixels.
namespace conf
{
// Global settings.
static const int fontSize = 12;
static const int emojiSize = 14;
static const int headerFontSize = 21;
// Button settings.
namespace btn
{
static const int fontSize = 20;
static const int cornerRadius = 3;
}
// RoomList specific.
namespace roomlist
{
namespace fonts
{
static const int heading = 13;
static const int badge = 10;
static const int bubble = 20;
} // namespace fonts
} // namespace roomlist
namespace userInfoWidget
{
namespace fonts
{
static const int displayName = 16;
static const int userid = 14;
} // namespace fonts
} // namespace userInfoWidget
namespace topRoomBar
{
namespace fonts
{
static const int roomName = 15;
static const int roomDescription = 13;
} // namespace fonts
} // namespace topRoomBar
namespace timeline
{
static const int msgMargin = 11;
static const int avatarSize = 36;
static const int headerSpacing = 5;
static const int headerLeftMargin = 12;
namespace fonts
{
static const int timestamp = 9;
}
}
} // namespace conf

@ -75,12 +75,6 @@ private:
QPixmap roomAvatar_;
// Sizes are relative to the default font size of the Widget.
static const float UnreadCountFontRatio;
static const float RoomNameFontRatio;
static const float RoomDescriptionFontRatio;
static const float RoomAvatarLetterFontRatio;
Menu *menu_;
QAction *toggleNotifications_;

@ -63,7 +63,4 @@ private:
FlatButton *send_file_button_;
FlatButton *send_message_button_;
EmojiPickButton *emoji_button_;
const float TextFontRatio = 1.1;
const float EmojiFontRatio = 1.3;
};

@ -69,16 +69,10 @@ private:
QHBoxLayout *headerLayout_; // Username (&) Timestamp
int MessageMargin;
const int AvatarSize = 36;
const float TimestampFontRatio = 0.8;
const float EmojiFontRatio = 1.4;
float EmojiSize = 13;
Avatar *userAvatar_;
QFont font_;
QLabel *timestamp_;
QLabel *userName_;
QLabel *body_;

@ -68,9 +68,6 @@ private:
Avatar *avatar_;
int buttonSize_;
const float RoomNameFontRatio = 1.2;
const float RoomDescriptionFontRatio = 1;
};
inline void TopRoomBar::updateRoomAvatar(const QImage &avatar_image)

@ -72,7 +72,4 @@ private:
LogoutDialog *logoutDialog_;
int logoutButtonSize_;
const float DisplayNameFontRatio = 1.3;
const float UserIdFontRatio = 1.1;
};

@ -2,13 +2,18 @@
#include <QMenu>
#include "Config.h"
class Menu : public QMenu
{
public:
Menu(QWidget *parent = nullptr)
: QMenu(parent)
{
setFont(QFont("Open Sans", 10));
QFont font;
font.setPixelSize(conf::fontSize);
setFont(font);
setStyleSheet(
"QMenu { color: black; background-color: white; margin: 0px;}"
"QMenu::item { color: black; padding: 7px 20px; border: 1px solid transparent; margin: 2px 0px; }"

@ -18,6 +18,7 @@
#include <QDebug>
#include <QScrollBar>
#include "Config.h"
#include "EmojiCategory.h"
EmojiCategory::EmojiCategory(QString category, QList<Emoji> emoji, QWidget *parent)
@ -62,12 +63,12 @@ EmojiCategory::EmojiCategory(QString category, QList<Emoji> emoji, QWidget *pare
itemModel_->appendRow(item);
}
QFont font("Open Sans SemiBold");
font.setPixelSize(conf::fontSize);
category_ = new QLabel(category, this);
category_->setStyleSheet(
"color: #ccc;"
"margin: 20px 0px 15px 8px;"
"font-weight: 500;"
"font-size: 12px;");
category_->setFont(font);
category_->setStyleSheet("color: #ccc; margin: 20px 0px 15px 8px;");
auto labelLayout_ = new QHBoxLayout();
labelLayout_->addWidget(category_);

@ -17,6 +17,7 @@
#include <QDebug>
#include "Config.h"
#include "InputValidator.h"
#include "LoginPage.h"
@ -119,15 +120,19 @@ LoginPage::LoginPage(QSharedPointer<MatrixClient> client, QWidget *parent)
login_button_->setBackgroundColor(QColor("#333333"));
login_button_->setForegroundColor(QColor("white"));
login_button_->setMinimumSize(350, 65);
login_button_->setFontSize(17);
login_button_->setFontSize(20);
login_button_->setCornerRadius(3);
button_layout_->addStretch(1);
button_layout_->addWidget(login_button_);
button_layout_->addStretch(1);
QFont font;
font.setPixelSize(conf::fontSize);
error_label_ = new QLabel(this);
error_label_->setStyleSheet("color: #E22826; font-size: 11pt;");
error_label_->setFont(font);
error_label_->setStyleSheet("color: #E22826");
top_layout_->addLayout(top_bar_layout_);
top_layout_->addStretch(1);

@ -18,6 +18,7 @@
#include <QLabel>
#include <QVBoxLayout>
#include "Config.h"
#include "LogoutDialog.h"
#include "Theme.h"
@ -36,17 +37,20 @@ LogoutDialog::LogoutDialog(QWidget *parent)
buttonLayout->setMargin(0);
confirmBtn_ = new FlatButton("OK", this);
confirmBtn_->setFontSize(12);
confirmBtn_->setFontSize(conf::btn::fontSize);
cancelBtn_ = new FlatButton(tr("CANCEL"), this);
cancelBtn_->setFontSize(12);
cancelBtn_->setFontSize(conf::btn::fontSize);
buttonLayout->addStretch(1);
buttonLayout->addWidget(confirmBtn_);
buttonLayout->addWidget(cancelBtn_);
QFont font;
font.setPixelSize(conf::headerFontSize);
auto label = new QLabel(tr("Logout. Are you sure?"), this);
label->setFont(QFont("Open Sans", 14));
label->setFont(font);
label->setStyleSheet("color: #333333");
layout->addWidget(label);

@ -18,6 +18,7 @@
#include <QDebug>
#include <QToolTip>
#include "Config.h"
#include "InputValidator.h"
#include "RegisterPage.h"
@ -101,15 +102,19 @@ RegisterPage::RegisterPage(QSharedPointer<MatrixClient> client, QWidget *parent)
button_layout_->setSpacing(0);
button_layout_->setMargin(0);
QFont font;
font.setPixelSize(conf::fontSize);
error_label_ = new QLabel(this);
error_label_->setStyleSheet("margin-bottom: 10px; color: #E22826; font-size: 11pt;");
error_label_->setFont(font);
error_label_->setStyleSheet("color: #E22826");
register_button_ = new RaisedButton(tr("REGISTER"), this);
register_button_->setBackgroundColor(QColor("#333333"));
register_button_->setForegroundColor(QColor("white"));
register_button_->setMinimumSize(350, 65);
register_button_->setFontSize(17);
register_button_->setCornerRadius(3);
register_button_->setFontSize(conf::btn::fontSize);
register_button_->setCornerRadius(conf::btn::cornerRadius);
button_layout_->addStretch(1);
button_layout_->addWidget(register_button_);

@ -19,16 +19,12 @@
#include <QMouseEvent>
#include <QPainter>
#include "Config.h"
#include "Ripple.h"
#include "RoomInfoListItem.h"
#include "RoomState.h"
#include "Theme.h"
const float RoomInfoListItem::UnreadCountFontRatio = 0.8;
const float RoomInfoListItem::RoomNameFontRatio = 1.1;
const float RoomInfoListItem::RoomDescriptionFontRatio = 1.1;
const float RoomInfoListItem::RoomAvatarLetterFontRatio = 1.8;
RoomInfoListItem::RoomInfoListItem(QSharedPointer<RoomSettings> settings,
RoomState state,
QString room_id,
@ -90,14 +86,15 @@ void RoomInfoListItem::paintEvent(QPaintEvent *event)
p.fillRect(rect(), QColor("#F8FBFE"));
QFont font;
font.setPixelSize(conf::fontSize);
QFontMetrics metrics(font);
p.setPen(QColor("#333"));
QRect avatarRegion(Padding, Padding, IconSize, IconSize);
// Description line
int bottom_y = maxHeight_ - Padding - metrics.height() / 2 + Padding / 2;
// Description line with the default font.
int bottom_y = maxHeight_ - Padding - Padding / 3 - metrics.ascent() / 2;
if (width() > ui::sidebar::SmallSize) {
if (isPressed_) {
@ -105,11 +102,15 @@ void RoomInfoListItem::paintEvent(QPaintEvent *event)
p.setPen(pen);
}
font.setPointSize(this->font().pointSize() * RoomNameFontRatio);
font.setPixelSize(conf::roomlist::fonts::heading);
p.setFont(font);
// Name line.
QFontMetrics fontNameMetrics(font);
int top_y = 2 * Padding + fontNameMetrics.ascent() / 2;
auto name = metrics.elidedText(state_.getName(), Qt::ElideRight, (width() - IconSize - 2 * Padding) * 0.8);
p.drawText(QPoint(2 * Padding + IconSize, Padding + metrics.height()), name);
p.drawText(QPoint(2 * Padding + IconSize, top_y), name);
if (!isPressed_) {
QPen pen(QColor("#5d6565"));
@ -121,7 +122,7 @@ void RoomInfoListItem::paintEvent(QPaintEvent *event)
if (unreadMsgCount_ > 0)
descPercentage = 0.8;
font.setPointSize(this->font().pointSize() * RoomDescriptionFontRatio);
font.setPixelSize(conf::fontSize);
p.setFont(font);
auto description = metrics.elidedText(state_.getTopic(), Qt::ElideRight, width() * descPercentage - 2 * Padding - IconSize);
@ -141,7 +142,7 @@ void RoomInfoListItem::paintEvent(QPaintEvent *event)
p.drawEllipse(avatarRegion.center(), IconSize / 2, IconSize / 2);
font.setPointSize(this->font().pointSize() * RoomAvatarLetterFontRatio);
font.setPixelSize(conf::roomlist::fonts::bubble);
p.setFont(font);
p.setPen(QColor("#333"));
p.setBrush(Qt::NoBrush);
@ -169,7 +170,7 @@ void RoomInfoListItem::paintEvent(QPaintEvent *event)
brush.setColor(textColor);
QFont unreadCountFont;
unreadCountFont.setPointSize(this->font().pointSize() * UnreadCountFontRatio);
unreadCountFont.setPixelSize(conf::roomlist::fonts::badge);
unreadCountFont.setBold(true);
p.setBrush(brush);

@ -20,6 +20,7 @@
#include <QPainter>
#include <QStyleOption>
#include "Config.h"
#include "TextInputWidget.h"
FilteredTextEdit::FilteredTextEdit(QWidget *parent)
@ -58,7 +59,7 @@ TextInputWidget::TextInputWidget(QWidget *parent)
send_file_button_->setIconSize(QSize(24, 24));
QFont font;
font.setPointSize(this->font().pointSize() * TextFontRatio);
font.setPixelSize(conf::fontSize);
input_ = new FilteredTextEdit(this);
input_->setFixedHeight(45);
@ -99,10 +100,10 @@ void TextInputWidget::addSelectedEmoji(const QString &emoji)
QTextCursor cursor = input_->textCursor();
QFont emoji_font("Emoji One");
emoji_font.setPointSize(this->font().pointSize() * EmojiFontRatio);
emoji_font.setPixelSize(conf::emojiSize);
QFont text_font("Open Sans");
text_font.setPixelSize(this->font().pointSize() * TextFontRatio);
text_font.setPixelSize(conf::fontSize);
QTextCharFormat charfmt;
charfmt.setFont(emoji_font);

@ -22,6 +22,7 @@
#include <QTextEdit>
#include "AvatarProvider.h"
#include "Config.h"
#include "ImageItem.h"
#include "TimelineItem.h"
#include "TimelineViewManager.h"
@ -39,19 +40,16 @@ void TimelineItem::init()
userName_ = nullptr;
body_ = nullptr;
// Initialize layout spacing variables based on the current font.
QFontMetrics fm(this->font());
const int baseWidth = fm.width('A');
MessageMargin = baseWidth * 1.5;
font_.setPixelSize(conf::fontSize);
EmojiSize = this->font().pointSize() * EmojiFontRatio;
QFontMetrics fm(font_);
topLayout_ = new QHBoxLayout(this);
sideLayout_ = new QVBoxLayout();
mainLayout_ = new QVBoxLayout();
headerLayout_ = new QHBoxLayout();
topLayout_->setContentsMargins(MessageMargin, MessageMargin, 0, 0);
topLayout_->setContentsMargins(conf::timeline::msgMargin, conf::timeline::msgMargin, 0, 0);
topLayout_->setSpacing(0);
topLayout_->addLayout(sideLayout_);
@ -60,11 +58,11 @@ void TimelineItem::init()
sideLayout_->setMargin(0);
sideLayout_->setSpacing(0);
mainLayout_->setContentsMargins(baseWidth * 2, 0, 0, 0);
mainLayout_->setContentsMargins(conf::timeline::headerLeftMargin, 0, 0, 0);
mainLayout_->setSpacing(0);
headerLayout_->setMargin(0);
headerLayout_->setSpacing(baseWidth / 2);
headerLayout_->setSpacing(conf::timeline::headerSpacing);
}
/*
@ -228,6 +226,7 @@ void TimelineItem::generateBody(const QString &body)
QString content("<span style=\"color: black;\"> %1 </span>");
body_ = new QLabel(this);
body_->setFont(font_);
body_->setWordWrap(true);
body_->setText(content.arg(replaceEmoji(body)));
body_->setMargin(0);
@ -248,7 +247,7 @@ void TimelineItem::generateBody(const QString &userid, const QString &color, con
QString userContent("<span style=\"color: %1\"> %2 </span>");
QString bodyContent("<span style=\"color: #171717;\"> %1 </span>");
QFont usernameFont;
QFont usernameFont = font_;
usernameFont.setBold(true);
userName_ = new QLabel(this);
@ -259,6 +258,7 @@ void TimelineItem::generateBody(const QString &userid, const QString &color, con
return;
body_ = new QLabel(this);
body_->setFont(font_);
body_->setWordWrap(true);
body_->setText(bodyContent.arg(replaceEmoji(body)));
body_->setTextInteractionFlags(Qt::TextSelectableByMouse | Qt::TextBrowserInteraction);
@ -271,10 +271,10 @@ void TimelineItem::generateTimestamp(const QDateTime &time)
QString msg("<span style=\"color: #5d6565;\"> %1 </span>");
QFont timestampFont;
timestampFont.setPointSize(this->font().pointSize() * TimestampFontRatio);
timestampFont.setPixelSize(conf::timeline::fonts::timestamp);
QFontMetrics fm(timestampFont);
int topMargin = QFontMetrics(this->font()).height() - fm.height();
int topMargin = QFontMetrics(font_).ascent() - fm.ascent();
timestamp_ = new QLabel(this);
timestamp_->setFont(timestampFont);
@ -291,7 +291,7 @@ QString TimelineItem::replaceEmoji(const QString &body)
// TODO: Be more precise here.
if (code > 9000)
fmtBody += QString("<span style=\"font-family: Emoji One; font-size: %1px\">").arg(EmojiSize) +
fmtBody += QString("<span style=\"font-family: Emoji One; font-size: %1px\">").arg(conf::emojiSize) +
QString(c) +
"</span>";
else
@ -303,13 +303,13 @@ QString TimelineItem::replaceEmoji(const QString &body)
void TimelineItem::setupAvatarLayout(const QString &userName)
{
topLayout_->setContentsMargins(MessageMargin, MessageMargin, 0, 0);
topLayout_->setContentsMargins(conf::timeline::msgMargin, conf::timeline::msgMargin, 0, 0);
userAvatar_ = new Avatar(this);
userAvatar_->setLetter(QChar(userName[0]).toUpper());
userAvatar_->setBackgroundColor(QColor("#eee"));
userAvatar_->setTextColor(QColor("black"));
userAvatar_->setSize(AvatarSize);
userAvatar_->setSize(conf::timeline::avatarSize);
// TODO: The provided user name should be a UserId class
if (userName[0] == '@' && userName.size() > 1)
@ -332,14 +332,13 @@ void TimelineItem::setupSimpleLayout()
// 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 timestampWidth = timestamp_->fontMetrics().boundingRect(plainText).width();
int offset = std::max(0, AvatarSize - timestampWidth) / 2;
int offset = std::max(0, conf::timeline::avatarSize - timestamp_->fontMetrics().width(plainText));
int defaultFontHeight = QFontMetrics(this->font()).height();
int defaultFontHeight = QFontMetrics(font_).ascent();
timestamp_->setAlignment(Qt::AlignTop);
timestamp_->setContentsMargins(offset, defaultFontHeight - timestamp_->fontMetrics().height(), offset, 0);
topLayout_->setContentsMargins(MessageMargin, MessageMargin / 3, 0, 0);
timestamp_->setContentsMargins(offset, defaultFontHeight - timestamp_->fontMetrics().ascent(), 0, 0);
topLayout_->setContentsMargins(conf::timeline::msgMargin, conf::timeline::msgMargin / 3, 0, 0);
}
void TimelineItem::setUserAvatar(const QImage &avatar)

@ -17,6 +17,7 @@
#include <QStyleOption>
#include "Config.h"
#include "TopRoomBar.h"
TopRoomBar::TopRoomBar(QWidget *parent)
@ -41,18 +42,17 @@ TopRoomBar::TopRoomBar(QWidget *parent)
text_layout_->setSpacing(0);
text_layout_->setContentsMargins(0, 0, 0, 0);
QFont font;
font.setPointSize(this->font().pointSize() * RoomNameFontRatio);
font.setBold(true);
QFont roomFont("Open Sans SemiBold");
roomFont.setPixelSize(conf::topRoomBar::fonts::roomName);
name_label_ = new QLabel(this);
name_label_->setFont(font);
name_label_->setFont(roomFont);
font.setBold(false);
font.setPointSize(this->font().pointSize() * RoomDescriptionFontRatio);
QFont descriptionFont("Open Sans");
descriptionFont.setPixelSize(conf::topRoomBar::fonts::roomDescription);
topic_label_ = new QLabel(this);
topic_label_->setFont(font);
topic_label_->setFont(descriptionFont);
text_layout_->addWidget(name_label_);
text_layout_->addWidget(topic_label_);

@ -18,6 +18,7 @@
#include <QDebug>
#include <QTimer>
#include "Config.h"
#include "FlatButton.h"
#include "MainWindow.h"
#include "UserInfoWidget.h"
@ -47,20 +48,19 @@ UserInfoWidget::UserInfoWidget(QWidget *parent)
userAvatar_->setBackgroundColor("#f9f9f9");
userAvatar_->setTextColor("#333333");
QFont font;
font.setBold(true);
font.setPointSize(this->font().pointSize() * DisplayNameFontRatio);
QFont nameFont("Open Sans SemiBold");
nameFont.setPixelSize(conf::userInfoWidget::fonts::displayName);
displayNameLabel_ = new QLabel(this);
displayNameLabel_->setFont(font);
displayNameLabel_->setFont(nameFont);
displayNameLabel_->setStyleSheet("padding: 0 9px; color: #171919; margin-bottom: -10px;");
displayNameLabel_->setAlignment(Qt::AlignLeading | Qt::AlignLeft | Qt::AlignTop);
font.setBold(false);
font.setPointSize(this->font().pointSize() * UserIdFontRatio);
QFont useridFont("Open Sans");
useridFont.setPixelSize(conf::userInfoWidget::fonts::userid);
userIdLabel_ = new QLabel(this);
userIdLabel_->setFont(font);
userIdLabel_->setFont(useridFont);
userIdLabel_->setStyleSheet("padding: 0 8px 8px 8px; color: #555459;");
userIdLabel_->setAlignment(Qt::AlignLeading | Qt::AlignLeft | Qt::AlignVCenter);
@ -129,7 +129,7 @@ void UserInfoWidget::resizeEvent(QResizeEvent *event)
Q_UNUSED(event);
if (width() <= ui::sidebar::SmallSize) {
topLayout_->setContentsMargins(0, 0, 10, 0);
topLayout_->setContentsMargins(0, 0, logoutButtonSize_ / 2 - 5 / 2, 0);
userAvatar_->hide();
displayNameLabel_->hide();

@ -18,6 +18,7 @@
#include <QApplication>
#include <QLayout>
#include "Config.h"
#include "WelcomePage.h"
WelcomePage::WelcomePage(QWidget *parent)
@ -61,15 +62,15 @@ WelcomePage::WelcomePage(QWidget *parent)
register_button_->setBackgroundColor(QColor("#333333"));
register_button_->setForegroundColor(QColor("white"));
register_button_->setMinimumSize(240, 60);
register_button_->setFontSize(14);
register_button_->setCornerRadius(3);
register_button_->setFontSize(conf::btn::fontSize);
register_button_->setCornerRadius(conf::btn::cornerRadius);
login_button_ = new RaisedButton(tr("LOGIN"), this);
login_button_->setBackgroundColor(QColor("#333333"));
login_button_->setForegroundColor(QColor("white"));
login_button_->setMinimumSize(240, 60);
login_button_->setFontSize(14);
login_button_->setCornerRadius(3);
login_button_->setFontSize(conf::btn::fontSize);
login_button_->setCornerRadius(conf::btn::cornerRadius);
button_spacer_ = new QSpacerItem(20, 20, QSizePolicy::MinimumExpanding, QSizePolicy::Minimum);

@ -189,7 +189,7 @@ void FlatButton::setFontSize(qreal size)
font_size_ = size;
QFont f(font());
f.setPointSizeF(size);
f.setPixelSize(size);
setFont(f);
update();

@ -74,7 +74,7 @@ void TextField::setLabelFontSize(qreal size)
if (label_) {
QFont font(label_->font());
font.setPointSizeF(size);
font.setPixelSize(size);
label_->setFont(font);
label_->update();
}

Loading…
Cancel
Save