From bac1f46127f030b2340792fdeb89c33d25373381 Mon Sep 17 00:00:00 2001 From: Konstantinos Sideris Date: Sun, 18 Mar 2018 23:38:04 +0200 Subject: [PATCH] Dark theme revisited --- include/RoomInfoListItem.h | 21 +++++++++ resources/styles/nheko-dark.qss | 79 ++++++++++++++++++++------------- resources/styles/nheko.qss | 6 +++ resources/styles/system.qss | 3 ++ src/RoomInfoListItem.cc | 22 +++++---- src/Splitter.cc | 1 + 6 files changed, 92 insertions(+), 40 deletions(-) diff --git a/include/RoomInfoListItem.h b/include/RoomInfoListItem.h index 389a8512..7da6c418 100644 --- a/include/RoomInfoListItem.h +++ b/include/RoomInfoListItem.h @@ -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_; }; diff --git a/resources/styles/nheko-dark.qss b/resources/styles/nheko-dark.qss index 99ca6c9b..9a354d3a 100644 --- a/resources/styles/nheko-dark.qss +++ b/resources/styles/nheko-dark.qss @@ -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; } diff --git a/resources/styles/nheko.qss b/resources/styles/nheko.qss index 849bcd6a..cb8f50e5 100644 --- a/resources/styles/nheko.qss +++ b/resources/styles/nheko.qss @@ -61,6 +61,12 @@ RoomInfoListItem { qproperty-btnColor: #ccc; qproperty-btnTextColor: #333; + + qproperty-timestampColor: #707070; + qproperty-highlightedTimestampColor: #f4f4f5; + + qproperty-avatarBgColor: #eee; + qproperty-avatarFgColor: black; } CommunitiesListItem { diff --git a/resources/styles/system.qss b/resources/styles/system.qss index 9f3ad240..4a4faeed 100644 --- a/resources/styles/system.qss +++ b/resources/styles/system.qss @@ -64,6 +64,9 @@ RoomInfoListItem { qproperty-btnColor: palette(light); qproperty-btnTextColor: palette(text); + + qproperty-timestampColor: palette(text); + qproperty-highlightedTimestampColor: palette(light); } CommunitiesListItem { diff --git a/src/RoomInfoListItem.cc b/src/RoomInfoListItem.cc index e84cb832..b504bdd7 100644 --- a/src/RoomInfoListItem.cc +++ b/src/RoomInfoListItem.cc @@ -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())); diff --git a/src/Splitter.cc b/src/Splitter.cc index 230bbcc3..ccc250be 100644 --- a/src/Splitter.cc +++ b/src/Splitter.cc @@ -25,6 +25,7 @@ Splitter::Splitter(QWidget *parent) { connect(this, &QSplitter::splitterMoved, this, &Splitter::onSplitterMoved); setChildrenCollapsible(false); + setStyleSheet("QSplitter::handle { image: none; }"); } void