Dark theme revisited

This commit is contained in:
Konstantinos Sideris 2018-03-18 23:38:04 +02:00
parent 48ee36f6b2
commit bac1f46127
6 changed files with 92 additions and 40 deletions

View File

@ -48,9 +48,16 @@ class RoomInfoListItem : public QWidget
QColor hoverBackgroundColor READ hoverBackgroundColor WRITE setHoverBackgroundColor)
Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)
Q_PROPERTY(QColor avatarBgColor READ avatarBgColor WRITE setAvatarBgColor)
Q_PROPERTY(QColor avatarFgColor READ avatarFgColor WRITE setAvatarFgColor)
Q_PROPERTY(QColor titleColor READ titleColor WRITE setTitleColor)
Q_PROPERTY(QColor subtitleColor READ subtitleColor WRITE setSubtitleColor)
Q_PROPERTY(QColor timestampColor READ timestampColor WRITE setTimestampColor)
Q_PROPERTY(QColor highlightedTimestampColor READ highlightedTimestampColor WRITE
setHighlightedTimestampColor)
Q_PROPERTY(
QColor highlightedTitleColor READ highlightedTitleColor WRITE setHighlightedTitleColor)
Q_PROPERTY(QColor highlightedSubtitleColor READ highlightedSubtitleColor WRITE
@ -87,21 +94,29 @@ public:
QColor highlightedBackgroundColor() const { return highlightedBackgroundColor_; }
QColor hoverBackgroundColor() const { return hoverBackgroundColor_; }
QColor backgroundColor() const { return backgroundColor_; }
QColor avatarBgColor() const { return avatarBgColor_; }
QColor avatarFgColor() const { return avatarFgColor_; }
QColor highlightedTitleColor() const { return highlightedTitleColor_; }
QColor highlightedSubtitleColor() const { return highlightedSubtitleColor_; }
QColor highlightedTimestampColor() const { return highlightedTimestampColor_; }
QColor titleColor() const { return titleColor_; }
QColor subtitleColor() const { return subtitleColor_; }
QColor timestampColor() const { return timestampColor_; }
QColor btnColor() const { return btnColor_; }
QColor btnTextColor() const { return btnTextColor_; }
void setHighlightedBackgroundColor(QColor &color) { highlightedBackgroundColor_ = color; }
void setHoverBackgroundColor(QColor &color) { hoverBackgroundColor_ = color; }
void setBackgroundColor(QColor &color) { backgroundColor_ = color; }
void setTimestampColor(QColor &color) { timestampColor_ = color; }
void setAvatarFgColor(QColor &color) { avatarFgColor_ = color; }
void setAvatarBgColor(QColor &color) { avatarBgColor_ = color; }
void setHighlightedTitleColor(QColor &color) { highlightedTitleColor_ = color; }
void setHighlightedSubtitleColor(QColor &color) { highlightedSubtitleColor_ = color; }
void setHighlightedTimestampColor(QColor &color) { highlightedTimestampColor_ = color; }
void setTitleColor(QColor &color) { titleColor_ = color; }
void setSubtitleColor(QColor &color) { subtitleColor_ = color; }
@ -192,4 +207,10 @@ private:
QFont timestampFont_;
QFont usernameFont_;
QFont unreadCountFont_;
QColor timestampColor_;
QColor highlightedTimestampColor_;
QColor avatarBgColor_;
QColor avatarFgColor_;
};

View File

@ -4,29 +4,30 @@ QLabel {
#chatPage,
#chatPage > * {
background-color: #383c4a;
background-color: #202228;
}
#sideBar {
border: none;
border-right: 1px solid #414A59;
border-left: 1px solid #414A59;
border-right: 1px solid #202228;
border-left: 1px solid #202228;
}
TimelineView,
TimelineView > * {
background-color: #383c4a;
background-color: #202228;
}
RoomList,
RoomList > * {
background-color: #383c4a;
background-color: #2d3139;
}
CommunitiesList,
CommunitiesList > * {
background-color: #383c4a;
background-color: #2d3139;
}
FlatButton {
qproperty-foregroundColor: #caccd1;
qproperty-backgroundColor: #333;
@ -50,9 +51,9 @@ RaisedButton {
}
RoomInfoListItem {
qproperty-highlightedBackgroundColor: #5294e2;
qproperty-hoverBackgroundColor: #39679e;
qproperty-backgroundColor: #383c4a;
qproperty-highlightedBackgroundColor: #4d84c7;
qproperty-hoverBackgroundColor: rgba(57,103,158, 100) ;
qproperty-backgroundColor: #2d3139;
qproperty-titleColor: #e4e5e8;
qproperty-subtitleColor: #caccd1;
@ -62,12 +63,18 @@ RoomInfoListItem {
qproperty-btnColor: #414A59;
qproperty-btnTextColor: white;
qproperty-timestampColor: #727274;
qproperty-highlightedTimestampColor: #e7e7e9;
qproperty-avatarBgColor: #202228;
qproperty-avatarFgColor: white;
}
CommunitiesListItem {
qproperty-highlightedBackgroundColor: #5294e2;
qproperty-hoverBackgroundColor: #39679e;
qproperty-backgroundColor: #383c4a;
qproperty-backgroundColor: #2d3139;
}
LoadingIndicator {
@ -75,22 +82,22 @@ LoadingIndicator {
}
UserInfoWidget, UserInfoWidget > * {
background-color: #383c4a;
background-color: #2d3139;
color: #b0b3ba;
}
UserInfoWidget {
border: none;
qproperty-borderColor: #414A59;
qproperty-borderColor: #202228;
}
UserSettingsPage {
background-color: #383c4a;
background-color: #202228;
}
Avatar {
qproperty-textColor: black;
qproperty-backgroundColor: #b0b3ba;
qproperty-textColor: white;
qproperty-backgroundColor: #2d3139;
}
#displayNameLabel {
@ -108,8 +115,11 @@ dialogs--CreateRoom,
dialogs--InviteUsers,
dialogs--ReadReceipts,
dialogs--JoinRoom,
dialogs--PreviewUploadOverlay {
background-color: #383c4a;
dialogs--PreviewUploadOverlay,
dialogs--CreateRoom > QLineEdit,
dialogs--InviteUsers > QLineEdit,
dialogs--JoinRoom > QLineEdit {
background-color: #202228;
color: #caccd1;
}
@ -117,19 +127,19 @@ QListWidget,
WelcomePage,
LoginPage,
RegisterPage {
background-color: #383c4a;
background-color: #202228;
color: #caccd1;
}
emoji--Panel,
emoji--Panel > * {
background-color: #313440;
background-color: #202228;
color: #caccd1;
}
emoji--Category,
emoji--Category > * {
background-color: #383c4a;
background-color: #2d3139;
color: #caccd1;
}
@ -139,32 +149,37 @@ FloatingButton {
}
TextField {
qproperty-backgroundColor: #383c4e;
qproperty-backgroundColor: #202228;
qproperty-inkColor: #caccd1;
qproperty-labelColor: #caccd1;
}
QLineEdit,
QTextEdit {
background-color: #383c4a;
color: #caccd1;
}
ScrollBar {
qproperty-handleColor: #caccd1;
qproperty-backgroundColor: #383c4e;
qproperty-backgroundColor: #202228;
}
SideBarActions {
border: none;
qproperty-borderColor: #414A59;
qproperty-borderColor: #202228;
background-color: #2d3139;
}
TopRoomBar {
border: none;
qproperty-borderColor: #414A59;
qproperty-borderColor: #202228;
background-color: #2d3139;
}
TextInputWidget {
qproperty-borderColor: #414A59;
QLineEdit {
background-color: #202228;
color: #caccd1;
}
TextInputWidget,
TextInputWidget > QTextEdit,
TextInputWidget > QLineEdit {
qproperty-borderColor: #202228;
background-color: #2d3139;
color: #caccd1;
}

View File

@ -61,6 +61,12 @@ RoomInfoListItem {
qproperty-btnColor: #ccc;
qproperty-btnTextColor: #333;
qproperty-timestampColor: #707070;
qproperty-highlightedTimestampColor: #f4f4f5;
qproperty-avatarBgColor: #eee;
qproperty-avatarFgColor: black;
}
CommunitiesListItem {

View File

@ -64,6 +64,9 @@ RoomInfoListItem {
qproperty-btnColor: palette(light);
qproperty-btnTextColor: palette(text);
qproperty-timestampColor: palette(text);
qproperty-highlightedTimestampColor: palette(light);
}
CommunitiesListItem {

View File

@ -30,8 +30,8 @@
#include "Theme.h"
#include "Utils.h"
constexpr int Padding = 7;
constexpr int IconSize = 48;
constexpr int Padding = 9;
constexpr int IconSize = 44;
constexpr int MaxHeight = IconSize + 2 * Padding;
constexpr int InviteBtnX = IconSize + 2 * Padding;
@ -53,10 +53,9 @@ RoomInfoListItem::init(QWidget *parent)
ripple_overlay_->setClipPath(path);
ripple_overlay_->setClipping(true);
font_.setPixelSize(conf::fontSize);
font_.setPixelSize(conf::fontSize - 1);
usernameFont_ = font_;
usernameFont_.setWeight(60);
bubbleFont_ = font_;
bubbleFont_.setPixelSize(conf::roomlist::fonts::bubble);
@ -69,7 +68,7 @@ RoomInfoListItem::init(QWidget *parent)
timestampFont_.setBold(false);
headingFont_ = font_;
headingFont_.setPixelSize(conf::roomlist::fonts::heading);
headingFont_.setPixelSize(conf::roomlist::fonts::heading - 1);
headingFont_.setWeight(60);
}
@ -162,7 +161,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
QRect avatarRegion(Padding, Padding, IconSize, IconSize);
// Description line with the default font.
int bottom_y = MaxHeight - Padding - Padding / 3 - metrics.ascent() / 2;
int bottom_y = MaxHeight - Padding - metrics.ascent() / 2;
if (width() > ui::sidebar::SmallSize) {
p.setFont(headingFont_);
@ -209,9 +208,16 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
description);
// We show the last message timestamp.
p.save();
if (isPressed_)
p.setPen(QPen(highlightedTimestampColor_));
else
p.setPen(QPen(timestampColor_));
p.setFont(timestampFont_);
p.drawText(QPoint(width() - Padding - msgStampWidth, top_y),
lastMsgInfo_.timestamp);
p.restore();
} else {
int btnWidth = (width() - IconSize - 6 * Padding) / 2;
@ -246,7 +252,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
if (roomAvatar_.isNull()) {
QBrush brush;
brush.setStyle(Qt::SolidPattern);
brush.setColor("#eee");
brush.setColor(avatarBgColor());
p.setPen(Qt::NoPen);
p.setBrush(brush);
@ -254,7 +260,7 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
p.drawEllipse(avatarRegion.center(), IconSize / 2, IconSize / 2);
p.setFont(bubbleFont_);
p.setPen(QColor("#333"));
p.setPen(avatarFgColor());
p.setBrush(Qt::NoBrush);
p.drawText(
avatarRegion.translated(0, -1), Qt::AlignCenter, utils::firstChar(roomName()));

View File

@ -25,6 +25,7 @@ Splitter::Splitter(QWidget *parent)
{
connect(this, &QSplitter::splitterMoved, this, &Splitter::onSplitterMoved);
setChildrenCollapsible(false);
setStyleSheet("QSplitter::handle { image: none; }");
}
void