Merge pull request #161 from Nheko-Reborn/palettes

Use palettes for most theming

resources/qml/Avatar.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.6
+import QtQuick.Controls 2.3
 import QtGraphicalEffects 1.0
 
 Rectangle {
@@ -10,15 +11,15 @@ Rectangle {
 	property alias url: img.source
 	property string displayName
 
-	Text {
+	Label {
 		anchors.fill: parent
 		text: chat.model.escapeEmoji(String.fromCodePoint(displayName.codePointAt(0)))
 		textFormat: Text.RichText
-		color: colors.text
 		font.pixelSize: avatar.height/2
 		verticalAlignment: Text.AlignVCenter
 		horizontalAlignment: Text.AlignHCenter
 		visible: img.status != Image.Ready
+		color: colors.brightText
 	}
 
 	Image {
@@ -42,5 +43,5 @@ Rectangle {
 			}
 		}
 	}
-	color: colors.base
+	color: colors.dark
 }

resources/qml/TimelineRow.qml

@@ -54,6 +54,20 @@ MouseArea {
 			}
 		}
 
+		StatusIndicator {
+			state: model.state
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			Layout.preferredHeight: 16
+			width: 16
+		}
+
+		EncryptionIndicator {
+			visible: model.isEncrypted
+			Layout.alignment: Qt.AlignRight | Qt.AlignTop
+			Layout.preferredHeight: 16
+			width: 16
+		}
+
 		ImageButton {
 			visible: timelineSettings.buttons
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
@@ -87,21 +101,7 @@ MouseArea {
 
 		}
 
-		StatusIndicator {
+		Label {
-			state: model.state
-			Layout.alignment: Qt.AlignRight | Qt.AlignTop
-			Layout.preferredHeight: 16
-			width: 16
-		}
-
-		EncryptionIndicator {
-			visible: model.isEncrypted
-			Layout.alignment: Qt.AlignRight | Qt.AlignTop
-			Layout.preferredHeight: 16
-			width: 16
-		}
-
-		Text {
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			text: model.timestamp.toLocaleTimeString("HH:mm")
 			color: inactiveColors.text

resources/qml/TimelineView.qml

@@ -9,12 +9,14 @@ import im.nheko 1.0
 
 import "./delegates"
 
-Item {
+Page {
 	property var colors: currentActivePalette
 	property var systemInactive: SystemPalette { colorGroup: SystemPalette.Disabled }
 	property var inactiveColors: currentInactivePalette ? currentInactivePalette : systemInactive
 	property int avatarSize: 40
 
+	palette: colors
+
 	Settings {
 		id: settings
 		category: "user"
@@ -29,7 +31,6 @@ Item {
 
 	Menu {
 		id: messageContextMenu
-		palette: colors
 		modal: true
 
 		function show(eventId_, eventType_, showAt) {
@@ -73,12 +74,11 @@ Item {
 		anchors.fill: parent
 		color: colors.window
 
-		Text {
+		Label {
 			visible: !timelineManager.timeline && !timelineManager.isInitialSync
 			anchors.centerIn: parent
 			text: qsTr("No room open")
 			font.pointSize: 24
-			color: colors.windowText
 		}
 
 		BusyIndicator {
@@ -206,14 +206,14 @@ Item {
 						anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
 						visible: section.includes(" ")
 						text: chat.model.formatDateSeparator(modelData.timestamp)
-						color: colors.windowText
+						color: colors.brightText
 
 						height: contentHeight * 1.2
 						width: contentWidth * 1.2
 						horizontalAlignment: Text.AlignHCenter
 						background: Rectangle {
 							radius: parent.height / 2
-							color: colors.base
+							color: colors.dark
 						}
 					}
 					Row {
@@ -233,7 +233,7 @@ Item {
 							}
 						}
 
-						Text { 
+						Label { 
 							id: userName
 							text: chat.model.escapeEmoji(modelData.userName)
 							color: timelineManager.userColor(modelData.userId, colors.window)
@@ -268,7 +268,7 @@ Item {
 				anchors.left: parent.left
 				anchors.right: parent.right
 
-				Text {
+				Label {
 					id: typingDisplay
 					anchors.left: parent.left
 					anchors.right: parent.right
@@ -277,7 +277,6 @@ Item {
 
 					text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.window) : ""
 					textFormat: Text.RichText
-					color: colors.windowText
 				}
 
 				Rectangle {

resources/qml/delegates/FileMessage.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts 1.2
 
 Rectangle {
 	radius: 10
-	color: colors.base
+	color: colors.dark
 	height: row.height + 24
 	width: parent ? parent.width : undefined
 

resources/qml/delegates/NoticeMessage.qml

@@ -1,4 +1,4 @@
 TextMessage {
 	font.italic: true
-	color: inactiveColors.text
+	color: colors.buttonText
 }

resources/qml/delegates/Pill.qml

@@ -2,13 +2,13 @@ import QtQuick 2.5
 import QtQuick.Controls 2.1
 
 Label {
-	color: inactiveColors.text
+	color: colors.brightText
 	horizontalAlignment: Text.AlignHCenter
 
 	height: contentHeight * 1.2
 	width: contentWidth * 1.2
 	background: Rectangle {
 		radius: parent.height / 2
-		color: colors.base
+		color: colors.dark
 	}
 }

resources/qml/delegates/PlayableMediaMessage.qml

@@ -8,7 +8,7 @@ import im.nheko 1.0
 Rectangle {
 	id: bg
 	radius: 10
-	color: colors.base
+	color: colors.dark
 	height: content.height + 24
 	width: parent ? parent.width : undefined
 

resources/qtquickcontrols2.conf

@@ -0,0 +1,2 @@
+[Controls]
+FallbackStyle=Fusion

resources/res.qrc

@@ -109,6 +109,8 @@
         <file>styles/nheko-dark.qss</file>
     </qresource>
     <qresource prefix="/">
+        <file>qtquickcontrols2.conf</file>
+
         <file>qml/TimelineView.qml</file>
         <file>qml/Avatar.qml</file>
         <file>qml/ImageButton.qml</file>

resources/styles/nheko-dark.qss

@@ -31,7 +31,6 @@ UserMentionsWidget > * {
 }
 
 QLineEdit,
-QListWidget,
 WelcomePage,
 LoginPage,
 RegisterPage,
@@ -160,7 +159,7 @@ CommunitiesListItem {
     qproperty-backgroundColor: #2d3139;
 
     qproperty-avatarBgColor: #202228;
-    qproperty-avatarFgColor: white;
+    qproperty-avatarFgColor: palette(window);
 }
 
 LoadingIndicator {
@@ -177,14 +176,6 @@ UserInfoWidget {
     border-bottom: 1px solid #202228;
 }
 
-#UserSettingScrollWidget > QComboBox {
-    color: #202228;
-}
-
-#UserSettingScrollWidget > QComboBox {
-    color: #202228;
-}
-
 Avatar {
     qproperty-textColor: white;
     qproperty-backgroundColor: #2d3139;
@@ -246,6 +237,11 @@ Toggle {
     qproperty-trackColor: rgb(240, 240, 240);
 }
 
+QListWidget {
+    color: #caccd1;
+    background-color: #202228;
+}
+
 SnackBar {
     qproperty-textColor: #caccd1;
     qproperty-bgColor: #202228;

resources/styles/nheko.qss

@@ -183,6 +183,8 @@ TopSection {
 
 WelcomePage,
 LoginPage,
+QComboBox,
+QPushButton,
 RegisterPage {
     background-color: white;
     color: #333;
@@ -221,6 +223,14 @@ TextField {
     qproperty-labelColor: #333;
 }
 
+QListWidget,
+TextInputWidget,
+QTextEdit,
+QLineEdit {
+    background-color: white;
+    color: #333;
+}
+
 TextInputWidget {
     border: none;
     border-top: 1px solid #dcdcdc;

resources/styles/system.qss

@@ -70,7 +70,7 @@ FileItem {
 }
 
 RaisedButton {
-    qproperty-foregroundColor: palette(buttonText);
+    qproperty-foregroundColor: palette(button-text);
 }
 
 TextField {
@@ -95,18 +95,18 @@ UserMentionsWidget {
     qproperty-titleColor: palette(text);
     qproperty-subtitleColor: palette(text);
 
-    qproperty-highlightedTitleColor: palette(highlightedtext);
+    qproperty-highlightedTitleColor: palette(highlighted-text);
-    qproperty-highlightedSubtitleColor: palette(highlightedtext);
+    qproperty-highlightedSubtitleColor: palette(highlighted-text);
 
     qproperty-hoverTitleColor: palette(highlightedtext);
     qproperty-hoverSubtitleColor: palette(highlightedtext);
 
-    qproperty-btnColor: palette(button);
+    qproperty-btnColor: palette(dark);
-    qproperty-btnTextColor: palette(buttonText);
+    qproperty-btnTextColor: palette(bright-text);
 
     qproperty-timestampColor: palette(text);
-    qproperty-highlightedTimestampColor: palette(highlightedtext);
+    qproperty-highlightedTimestampColor: palette(highlighted-text);
-    qproperty-hoverTimestampColor: palette(highlightedtext);
+    qproperty-hoverTimestampColor: palette(highlighted-text);
 
     qproperty-bubbleBgColor: palette(base);
     qproperty-bubbleFgColor: palette(text);

src/Logging.cpp

@@ -25,11 +25,18 @@ qmlMessageHandler(QtMsgType type, const QMessageLogContext &context, const QStri
         const char *file     = context.file ? context.file : "";
         const char *function = context.function ? context.function : "";
 
-        // Surpress binding wrning for now, as we can't set restore mode to keep compat with qt 5.10
+        if (
-        if (msg.endsWith(
+          // Surpress binding wrning for now, as we can't set restore mode to keep compat with
+          // qt 5.10
+          msg.endsWith(
             "QML Binding: Not restoring previous value because restoreMode has not been set.This "
             "behavior is deprecated.In Qt < 6.0 the default is Binding.RestoreBinding.In Qt >= "
-              "6.0 the default is Binding.RestoreBindingOrValue."))
+            "6.0 the default is Binding.RestoreBindingOrValue.") ||
+          // The default style has the point size set. If you use pixel size anywhere, you get
+          // that warning, which is useless, since sometimes you need the pixel size to match the
+          // text to the size of the outer element for example. This is done in the avatar and
+          // without that you get one warning for every Avatar displayed, which is stupid!
+          msg.endsWith("Both point size and pixel size set. Using pixel size."))
                 return;
 
         switch (type) {

src/UserSettingsPage.cpp

@@ -103,12 +103,46 @@ UserSettings::applyTheme()
 {
         QFile stylefile;
 
-        if (theme() == "light") {
+        static QPalette original;
+        if (this->theme() == "light") {
                 stylefile.setFileName(":/styles/styles/nheko.qss");
-        } else if (theme() == "dark") {
+                QPalette lightActive(
+                  /*windowText*/ QColor("#333"),
+                  /*button*/ QColor("#333"),
+                  /*light*/ QColor(0xef, 0xef, 0xef),
+                  /*dark*/ QColor(220, 220, 220),
+                  /*mid*/ QColor(0, 0xff, 0), // not used anywhere, this is for debugging
+                  /*text*/ QColor("#333"),
+                  /*bright_text*/ QColor("#333"),
+                  /*base*/ QColor("white"),
+                  /*window*/ QColor("white"));
+                lightActive.setColor(QPalette::Highlight, QColor("#38a3d8"));
+                lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color());
+                lightActive.setColor(QPalette::ToolTipText, lightActive.text().color());
+                lightActive.setColor(QPalette::Link, QColor("#0077b5"));
+                lightActive.setColor(QPalette::ButtonText, QColor("gray"));
+                QApplication::setPalette(lightActive);
+        } else if (this->theme() == "dark") {
                 stylefile.setFileName(":/styles/styles/nheko-dark.qss");
+                QPalette darkActive(
+                  /*windowText*/ QColor("#caccd1"),
+                  /*button*/ QColor(0xff, 0xff, 0xff),
+                  /*light*/ QColor("#caccd1"),
+                  /*dark*/ QColor("#2d3139"),
+                  /*mid*/ QColor(0, 0xff, 0), // not used anywhere, this is for debugging
+                  /*text*/ QColor("#caccd1"),
+                  /*bright_text*/ QColor(0xff, 0xff, 0xff),
+                  /*base*/ QColor("#2d3139"),
+                  /*window*/ QColor("#202228"));
+                darkActive.setColor(QPalette::Highlight, QColor("#38a3d8"));
+                darkActive.setColor(QPalette::ToolTipBase, darkActive.base().color());
+                darkActive.setColor(QPalette::ToolTipText, darkActive.text().color());
+                darkActive.setColor(QPalette::Link, QColor("#38a3d8"));
+                darkActive.setColor(QPalette::ButtonText, QColor(77, 77, 77));
+                QApplication::setPalette(darkActive);
         } else {
                 stylefile.setFileName(":/styles/styles/system.qss");
+                QApplication::setPalette(original);
         }
 
         stylefile.open(QFile::ReadOnly);

src/dialogs/UserProfile.cpp

@@ -142,8 +142,6 @@ UserProfile::UserProfile(QWidget *parent)
         devices_->setSelectionMode(QAbstractItemView::NoSelection);
         devices_->setAttribute(Qt::WA_MacShowFocusRect, 0);
         devices_->setSpacing(DEVICE_SPACING);
-        devices_->setMinimumHeight(devices_->sizeHint().height() * 1.2);
-        devices_->hide();
 
         QFont descriptionLabelFont;
         descriptionLabelFont.setWeight(65);
@@ -151,6 +149,7 @@ UserProfile::UserProfile(QWidget *parent)
         devicesLabel_ = new QLabel(tr("Devices").toUpper(), this);
         devicesLabel_->setFont(descriptionLabelFont);
         devicesLabel_->hide();
+        devicesLabel_->setFixedSize(devicesLabel_->sizeHint());
 
         auto okBtn = new QPushButton("OK", this);
 
@@ -160,29 +159,24 @@ UserProfile::UserProfile(QWidget *parent)
         closeLayout->addWidget(okBtn);
 
         auto vlayout = new QVBoxLayout{this};
-        vlayout->addWidget(avatar_);
+        vlayout->addWidget(avatar_, 0, Qt::AlignCenter | Qt::AlignTop);
         vlayout->addLayout(textLayout);
         vlayout->addLayout(btnLayout);
-        vlayout->addWidget(devicesLabel_, Qt::AlignLeft);
+        vlayout->addWidget(devicesLabel_, 0, Qt::AlignLeft);
-        vlayout->addWidget(devices_);
+        vlayout->addWidget(devices_, 1);
         vlayout->addLayout(closeLayout);
-        vlayout->addStretch(1);
-
-        vlayout->setAlignment(avatar_, Qt::AlignCenter | Qt::AlignTop);
-        vlayout->setAlignment(userIdLabel_, Qt::AlignCenter | Qt::AlignTop);
 
         QFont largeFont;
         largeFont.setPointSizeF(largeFont.pointSizeF() * 1.5);
 
         setMinimumWidth(
           std::max(devices_->sizeHint().width() + 4 * WIDGET_MARGIN, conf::window::minModalWidth));
-        setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
+        setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
 
         vlayout->setSpacing(WIDGET_SPACING);
         vlayout->setContentsMargins(WIDGET_MARGIN, TOP_WIDGET_MARGIN, WIDGET_MARGIN, WIDGET_MARGIN);
 
-        static auto ignored = qRegisterMetaType<std::vector<DeviceInfo>>();
+        qRegisterMetaType<std::vector<DeviceInfo>>();
-        (void)ignored;
 
         auto closeShortcut = new QShortcut(QKeySequence(QKeySequence::Cancel), this);
         connect(closeShortcut, &QShortcut::activated, this, &UserProfile::close);
@@ -307,4 +301,5 @@ UserProfile::updateDeviceList(const QString &user_id, const std::vector<DeviceIn
 
         devicesLabel_->show();
         devices_->show();
+        adjustSize();
 }

src/timeline/TimelineViewManager.cpp

@@ -22,36 +22,11 @@ TimelineViewManager::updateColorPalette()
         userColors.clear();
 
         if (settings->theme() == "light") {
-                QPalette lightActive(/*windowText*/ QColor("#333"),
+                view->rootContext()->setContextProperty("currentActivePalette", QPalette());
-                                     /*button*/ QColor("#333"),
+                view->rootContext()->setContextProperty("currentInactivePalette", QPalette());
-                                     /*light*/ QColor(),
-                                     /*dark*/ QColor(220, 220, 220),
-                                     /*mid*/ QColor(),
-                                     /*text*/ QColor("#333"),
-                                     /*bright_text*/ QColor(),
-                                     /*base*/ QColor(220, 220, 220),
-                                     /*window*/ QColor("white"));
-                lightActive.setColor(QPalette::ToolTipBase, lightActive.base().color());
-                lightActive.setColor(QPalette::ToolTipText, lightActive.text().color());
-                lightActive.setColor(QPalette::Link, QColor("#0077b5"));
-                view->rootContext()->setContextProperty("currentActivePalette", lightActive);
-                view->rootContext()->setContextProperty("currentInactivePalette", lightActive);
         } else if (settings->theme() == "dark") {
-                QPalette darkActive(/*windowText*/ QColor("#caccd1"),
+                view->rootContext()->setContextProperty("currentActivePalette", QPalette());
-                                    /*button*/ QColor("#caccd1"),
+                view->rootContext()->setContextProperty("currentInactivePalette", QPalette());
-                                    /*light*/ QColor(),
-                                    /*dark*/ QColor("#2d3139"),
-                                    /*mid*/ QColor(),
-                                    /*text*/ QColor("#caccd1"),
-                                    /*bright_text*/ QColor(),
-                                    /*base*/ QColor("#2d3139"),
-                                    /*window*/ QColor("#202228"));
-                darkActive.setColor(QPalette::Highlight, QColor("#e7e7e9"));
-                darkActive.setColor(QPalette::ToolTipBase, darkActive.base().color());
-                darkActive.setColor(QPalette::ToolTipText, darkActive.text().color());
-                darkActive.setColor(QPalette::Link, QColor("#38a3d8"));
-                view->rootContext()->setContextProperty("currentActivePalette", darkActive);
-                view->rootContext()->setContextProperty("currentInactivePalette", darkActive);
         } else {
                 view->rootContext()->setContextProperty("currentActivePalette", QPalette());
                 view->rootContext()->setContextProperty("currentInactivePalette", nullptr);