d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-26 04:58:49 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dark theme revisited

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
include/RoomInfoListItem.h
View file

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

79
resources/styles/nheko-dark.qss
View file

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

6
resources/styles/nheko.qss
View file

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

3
resources/styles/system.qss
View file

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

22
src/RoomInfoListItem.cc
View file

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

1
src/Splitter.cc
View file

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