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.
This commit is contained in:
Konstantinos Sideris 2017-07-15 17:11:46 +03:00
parent 847ae37df2
commit 30fb46e25b
19 changed files with 156 additions and 92 deletions

63
include/Config.h Normal file
View File

@ -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

View File

@ -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_;

View File

@ -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;
};

View File

@ -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_;

View File

@ -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)

View File

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

View File

@ -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; }"

View File

@ -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_);

View File

@ -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);

View File

@ -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);

View File

@ -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_);

View File

@ -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);

View File

@ -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);

View File

@ -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)

View File

@ -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_);

View File

@ -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();

View File

@ -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);

View File

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

View File

@ -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();
}