From 1aed38d57ae651b2d9cbfc42056acd9f73777e9a Mon Sep 17 00:00:00 2001 From: Elias Steurer Date: Thu, 12 Mar 2020 16:48:56 +0100 Subject: [PATCH] Add basic dark/light/System switch --- ScreenPlay/main.qml | 35 ++++++++++++- ScreenPlay/qml/Common/GrowIconLink.qml | 17 +++--- ScreenPlay/qml/Create/CreateContentButton.qml | 2 + ScreenPlay/qml/Create/Footer.qml | 4 +- ScreenPlay/qml/Create/ImportContent.qml | 8 ++- ScreenPlay/qml/Installed/Installed.qml | 3 +- ScreenPlay/qml/Installed/Sidebar.qml | 2 +- ScreenPlay/qml/Monitors/MonitorSelection.qml | 4 +- ScreenPlay/qml/Navigation/Navigation.qml | 14 +++-- ScreenPlay/qml/Navigation/NavigationItem.qml | 11 ++-- ScreenPlay/qml/Settings/Settings.qml | 52 +++++++++++++++---- .../Settings/SettingsHorizontalSeperator.qml | 3 +- ScreenPlay/qtquickcontrols2.conf | 4 -- ScreenPlay/src/settings.cpp | 10 +++- ScreenPlay/src/settings.h | 33 ++++++++++-- 15 files changed, 156 insertions(+), 46 deletions(-) diff --git a/ScreenPlay/main.qml b/ScreenPlay/main.qml index f2a9bac5..08c915eb 100644 --- a/ScreenPlay/main.qml +++ b/ScreenPlay/main.qml @@ -1,11 +1,13 @@ import QtQuick 2.12 import QtQuick.Window 2.2 import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.12 import QtQuick.Layouts 1.3 import QtGraphicalEffects 1.0 import Qt.labs.platform 1.0 import ScreenPlay 1.0 +import Settings 1.0 import "qml/" import "qml/Monitors" @@ -16,7 +18,7 @@ import "qml/Workshop" ApplicationWindow { id: window - color: "#eeeeee" + color: Material.background // Set visible if the -silent parameter was not set (see app.cpp end of constructor). visible: false width: 1400 @@ -25,7 +27,33 @@ ApplicationWindow { minimumHeight: 450 minimumWidth: 1050 + Material.theme: { + switch (Settings.theme) { + case Settings.Auto: + return Material.System + case Settings.Dark: + return Material.Dark + case Settings.Light: + return Material.Light + } + } + + function setTheme(theme){ + switch (theme) { + case Settings.System: + window.Material.theme = Material.System + break + case Settings.Dark: + window.Material.theme = Material.Dark + break + case Settings.Light: + window.Material.theme = Material.Light + break + } + } + Component.onCompleted: { + if (!ScreenPlay.settings.silentStart) { window.show() ScreenPlay.setTrackerSendEvent("navigation", "Installed") @@ -72,6 +100,11 @@ ApplicationWindow { anchors.fill: parent } + Connections { + target: ScreenPlay.settings + onThemeChanged:setTheme(theme) + } + Connections { target: ScreenPlay.util onRequestNavigation: { diff --git a/ScreenPlay/qml/Common/GrowIconLink.qml b/ScreenPlay/qml/Common/GrowIconLink.qml index 59c2d0af..1d523e95 100644 --- a/ScreenPlay/qml/Common/GrowIconLink.qml +++ b/ScreenPlay/qml/Common/GrowIconLink.qml @@ -1,11 +1,13 @@ import QtQuick 2.0 import QtGraphicalEffects 1.0 +import QtQuick.Controls.Material 2.12 Rectangle { id: root - color: "gray" - width: 32 - height: 32 + color: Material.background + width: 42 + height: width + radius: width property alias iconSource: icon.source property string url @@ -13,9 +15,10 @@ Rectangle { Image { id: icon - sourceSize: Qt.size(32, 32) + sourceSize: Qt.size(28, 28) anchors.centerIn: parent visible: false + smooth: true source: "qrc:/assets/icons/icon_info.svg" } @@ -40,9 +43,9 @@ Rectangle { name: "hover" PropertyChanges { target: icon - width:40 - height:40 - sourceSize: Qt.size(40,40) + width: 34 + height: 34 + sourceSize: Qt.size(34,34) } } ] diff --git a/ScreenPlay/qml/Create/CreateContentButton.qml b/ScreenPlay/qml/Create/CreateContentButton.qml index 24b2b5b1..45bddd50 100644 --- a/ScreenPlay/qml/Create/CreateContentButton.qml +++ b/ScreenPlay/qml/Create/CreateContentButton.qml @@ -1,5 +1,6 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 +import QtQuick.Controls.Material 2.12 import QtGraphicalEffects 1.0 import ScreenPlay 1.0 @@ -39,6 +40,7 @@ Item { Rectangle { id: bg + color: Material.background height: parent.height - 10 anchors { top: parent.top diff --git a/ScreenPlay/qml/Create/Footer.qml b/ScreenPlay/qml/Create/Footer.qml index 9b168149..43933023 100644 --- a/ScreenPlay/qml/Create/Footer.qml +++ b/ScreenPlay/qml/Create/Footer.qml @@ -14,8 +14,8 @@ Rectangle { id: footer height: 80 z: 100 - anchors { - } + color: Material.background + Row { anchors.centerIn: parent spacing: 20 diff --git a/ScreenPlay/qml/Create/ImportContent.qml b/ScreenPlay/qml/Create/ImportContent.qml index 3bf5e469..1fecb227 100644 --- a/ScreenPlay/qml/Create/ImportContent.qml +++ b/ScreenPlay/qml/Create/ImportContent.qml @@ -1,8 +1,8 @@ import QtQuick 2.12 import QtGraphicalEffects 1.0 import QtQuick.Controls 2.3 -import Qt.labs.platform 1.0 import QtQuick.Controls.Material 2.2 +import Qt.labs.platform 1.0 import ScreenPlay 1.0 @@ -47,6 +47,8 @@ Item { Rectangle { id: importVideoBg + color: Material.background + radius: 3 z: 10 anchors { @@ -130,6 +132,8 @@ Item { Rectangle { id: convertVideoBg + color: Material.background + radius: 3 z: 10 anchors { @@ -232,6 +236,8 @@ Item { Rectangle { id: importVideoBg3 radius: 3 + color: Material.background + z: 10 anchors { fill: parent diff --git a/ScreenPlay/qml/Installed/Installed.qml b/ScreenPlay/qml/Installed/Installed.qml index 9cd3b0a5..2d274b00 100644 --- a/ScreenPlay/qml/Installed/Installed.qml +++ b/ScreenPlay/qml/Installed/Installed.qml @@ -1,5 +1,6 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 +import QtQuick.Controls.Material 2.12 import QtQuick.Controls.Styles 1.4 import QtGraphicalEffects 1.0 @@ -214,7 +215,7 @@ Item { Rectangle { id: nav - color: "#ffffff" + color: Material.background height: 50 anchors { top: parent.top diff --git a/ScreenPlay/qml/Installed/Sidebar.qml b/ScreenPlay/qml/Installed/Sidebar.qml index 0a080973..856c4cc0 100644 --- a/ScreenPlay/qml/Installed/Sidebar.qml +++ b/ScreenPlay/qml/Installed/Sidebar.qml @@ -134,7 +134,7 @@ Item { Rectangle { id: sidebarBackground - color: "white" + color: Material.background anchors { top: navBackground.bottom right: parent.right diff --git a/ScreenPlay/qml/Monitors/MonitorSelection.qml b/ScreenPlay/qml/Monitors/MonitorSelection.qml index 9533b0f4..01134812 100644 --- a/ScreenPlay/qml/Monitors/MonitorSelection.qml +++ b/ScreenPlay/qml/Monitors/MonitorSelection.qml @@ -1,10 +1,12 @@ import QtQuick 2.12 import QtGraphicalEffects 1.0 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 import ScreenPlay 1.0 Rectangle { id: rect - + color: Qt.darker(Material.background) height: availableHeight width: availableWidth diff --git a/ScreenPlay/qml/Navigation/Navigation.qml b/ScreenPlay/qml/Navigation/Navigation.qml index 6bd23239..1f2949d4 100644 --- a/ScreenPlay/qml/Navigation/Navigation.qml +++ b/ScreenPlay/qml/Navigation/Navigation.qml @@ -1,5 +1,6 @@ import QtQuick 2.12 -import QtQuick.Controls 2.3 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 import QtGraphicalEffects 1.0 import ScreenPlay 1.0 @@ -12,7 +13,7 @@ Rectangle { height: 60 clip: true width: 1366 - color: "#ffffff" + color: Material.background signal changePage(string name) @@ -24,7 +25,7 @@ Rectangle { onRequestNavigationActive: { setActive(isActive) } - onRequestNavigation:{ + onRequestNavigation: { onPageChanged(nav) } } @@ -38,11 +39,9 @@ Rectangle { } } - function onPageChanged(name) { - - ScreenPlay.setTrackerSendEvent("navigation",name); + ScreenPlay.setTrackerSendEvent("navigation", name) if (!navActive) return @@ -113,8 +112,7 @@ Rectangle { } } - NavigationWallpaperConfiguration { - } + NavigationWallpaperConfiguration {} states: [ State { name: "enabled" diff --git a/ScreenPlay/qml/Navigation/NavigationItem.qml b/ScreenPlay/qml/Navigation/NavigationItem.qml index 1231fbc0..2f67a834 100644 --- a/ScreenPlay/qml/Navigation/NavigationItem.qml +++ b/ScreenPlay/qml/Navigation/NavigationItem.qml @@ -1,5 +1,6 @@ import QtQuick 2.12 import QtGraphicalEffects 1.0 +import QtQuick.Controls.Material 2.12 import ScreenPlay 1.0 Item { @@ -63,7 +64,7 @@ Item { anchors.left: icon.right anchors.leftMargin: 10 font.pointSize: 14 - color: "#626262" + color: Material.foreground anchors.verticalCenter: parent.verticalCenter font.family: ScreenPlay.settings.font font.weight: Font.Normal @@ -77,7 +78,7 @@ Item { anchors.leftMargin: navigationItem.amount == "" ? 0 : 5 text: "name" font.pointSize: 14 - color: "#626262" + color: Material.foreground anchors.verticalCenter: parent.verticalCenter font.family: ScreenPlay.settings.font font.weight: Font.Normal @@ -87,14 +88,14 @@ Item { id: iconColorOverlay anchors.fill: icon source: icon - color: "#FFAB00" + color: Material.accentColor } Rectangle { id: navIndicator y: 83 height: 3 - color: "#FFAB00" + color: Material.accent anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom @@ -113,7 +114,7 @@ Item { PropertyChanges { target: iconColorOverlay - color: "#FFAB00" + color: Material.accent } }, State { diff --git a/ScreenPlay/qml/Settings/Settings.qml b/ScreenPlay/qml/Settings/Settings.qml index 7039ed6f..eb2cab9f 100644 --- a/ScreenPlay/qml/Settings/Settings.qml +++ b/ScreenPlay/qml/Settings/Settings.qml @@ -1,5 +1,6 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 +import QtQuick.Controls.Material 2.12 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.3 import QtGraphicalEffects 1.0 @@ -51,7 +52,7 @@ Item { Item { id: settingsGeneralWrapper - height: 540 + txtDirChangesInfo.paintedHeight + height: 620 + txtDirChangesInfo.paintedHeight width: parent.width RectangularGlow { @@ -74,6 +75,7 @@ Item { anchors.fill: parent radius: 4 clip: true + color: Material.backgroundColor SettingsHeader { id: headerGeneral @@ -185,33 +187,62 @@ Item { comboBox { onActivated: { - ScreenPlay.settings.setLanguage(settingsLanguage.comboBox.currentValue) + ScreenPlay.settings.setLanguage( + settingsLanguage.comboBox.currentValue) ScreenPlay.settings.retranslateUI() } model: [{ "value": Settings.En, "text": qsTr("English") }, { - "value": Settings.De, + "value": Settings.De, "text": qsTr("German") }, { - "value": Settings.Ru, + "value": Settings.Ru, "text": qsTr("Russian") }, { - "value": Settings.Fr, + "value": Settings.Fr, "text": qsTr("French") }, { - "value": Settings.Es, + "value": Settings.Es, "text": qsTr("Spanish") }, { - "value": Settings.Ko, + "value": Settings.Ko, "text": qsTr("Korean") }, { - "value": Settings.Vi, + "value": Settings.Vi, "text": qsTr("Vietnamese") }] } } + SettingsHorizontalSeperator {} + + SettingsComboBox { + id: settingsTheme + headline: qsTr("Theme") + description: qsTr("Switch dark/light theme") + Component.onCompleted: { + settingsTheme.comboBox.currentIndex = root.indexOfValue( + settingsTheme.comboBox.model, + ScreenPlay.settings.theme) + } + + comboBox { + onActivated: { + ScreenPlay.settings.setTheme(settingsTheme.comboBox.currentValue) + } + model: [{ + "value": Settings.System, + "text": qsTr("System Default") + }, { + "value": Settings.Dark, + "text": qsTr("Dark") + }, { + "value": Settings.Light, + "text": qsTr("Light") + }] + } + } } } } @@ -239,6 +270,7 @@ Item { Rectangle { anchors.fill: parent + color: Material.backgroundColor radius: 4 clip: true @@ -331,7 +363,7 @@ Item { } Rectangle { - + color: Material.backgroundColor anchors.fill: parent radius: 4 clip: true @@ -369,7 +401,7 @@ Item { verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft font.pointSize: 16 - font.family: ScreenPlay.settings.font + font.family: ScreenPlay.settings.font anchors { top: parent.top topMargin: 6 diff --git a/ScreenPlay/qml/Settings/SettingsHorizontalSeperator.qml b/ScreenPlay/qml/Settings/SettingsHorizontalSeperator.qml index 5a688b44..3768a7dd 100644 --- a/ScreenPlay/qml/Settings/SettingsHorizontalSeperator.qml +++ b/ScreenPlay/qml/Settings/SettingsHorizontalSeperator.qml @@ -1,9 +1,10 @@ import QtQuick 2.12 +import QtQuick.Controls.Material 2.12 Item { property real customWidth: parent.width property real customHeight: 1 - property color customColor: "#dddddd" + property color customColor: Material.background property real customMargin: 10 height: customMargin diff --git a/ScreenPlay/qtquickcontrols2.conf b/ScreenPlay/qtquickcontrols2.conf index 159b5f2b..97b48040 100644 --- a/ScreenPlay/qtquickcontrols2.conf +++ b/ScreenPlay/qtquickcontrols2.conf @@ -4,8 +4,4 @@ Style=Material [Material] Theme=Light Accent=Orange -Primary=White -Foreground=Grey -Font\Family=Roboto -Font\PixelSize=12 Variant=Dense diff --git a/ScreenPlay/src/settings.cpp b/ScreenPlay/src/settings.cpp index 76574755..9af55046 100644 --- a/ScreenPlay/src/settings.cpp +++ b/ScreenPlay/src/settings.cpp @@ -40,6 +40,8 @@ Settings::Settings(const shared_ptr& globalVariables, { qRegisterMetaType("Settings::FillMode"); qRegisterMetaType("Settings::Language"); + qRegisterMetaType("Settings::Theme"); + qmlRegisterUncreatableType("Settings", 1, 0, "Settings", "Error only for enums"); { @@ -60,12 +62,18 @@ Settings::Settings(const shared_ptr& globalVariables, } } - setCheckWallpaperVisible(m_qSettings.value("CheckWallpaperVisible", true).toBool()); + + setCheckWallpaperVisible(m_qSettings.value("CheckWallpaperVisible", false).toBool()); setHighPriorityStart(m_qSettings.value("ScreenPlayExecutable", false).toBool()); if (m_qSettings.contains("VideoFillMode")) { auto value = m_qSettings.value("VideoFillMode").toString(); setVideoFillMode(QStringToEnum(value, FillMode::Fill)); } + if (m_qSettings.contains("Theme")) { + auto value = m_qSettings.value("Theme").toString(); + setTheme(QStringToEnum(value, Theme::System)); + } + setAnonymousTelemetry(m_qSettings.value("AnonymousTelemetry", true).toBool()); // Wallpaper and Widgets config diff --git a/ScreenPlay/src/settings.h b/ScreenPlay/src/settings.h index 2dd7b9f8..c61498ba 100644 --- a/ScreenPlay/src/settings.h +++ b/ScreenPlay/src/settings.h @@ -69,6 +69,7 @@ class Settings : public QObject { Q_PROPERTY(FillMode videoFillMode READ videoFillMode WRITE setVideoFillMode NOTIFY videoFillModeChanged) Q_PROPERTY(Language language READ language WRITE setLanguage NOTIFY languageChanged) + Q_PROPERTY(Theme theme READ theme WRITE setTheme NOTIFY themeChanged) Q_PROPERTY(QString decoder READ decoder WRITE setDecoder NOTIFY decoderChanged) Q_PROPERTY(QString gitBuildHash READ gitBuildHash WRITE setGitBuildHash NOTIFY gitBuildHashChanged) @@ -99,6 +100,13 @@ public: }; Q_ENUM(Language) + enum class Theme { + System, + Dark, + Light + }; + Q_ENUM(Theme) + bool offlineMode() const { return m_offlineMode; @@ -162,6 +170,11 @@ public: return m_font; } + Theme theme() const + { + return m_theme; + } + signals: void requestRetranslation(); @@ -181,6 +194,8 @@ signals: void fontChanged(QString font); + void themeChanged(Theme theme); + public slots: void writeJsonFileFromResource(const QString& filename); void setupWidgetAndWindowPaths(); @@ -324,6 +339,17 @@ public slots: emit fontChanged(m_font); } + void setTheme(Theme theme) + { + if (m_theme == theme) + return; + + setqSetting("Theme", QVariant::fromValue(theme).toString()); + + m_theme = theme; + emit themeChanged(m_theme); + } + private: void restoreDefault(const QString& appConfigLocation, const QString& settingsFileType); @@ -342,8 +368,9 @@ private: QString m_gitBuildHash; QString m_decoder; - FillMode m_videoFillMode; - Language m_language = Language::En; - QString m_font {"Roboto"}; + FillMode m_videoFillMode { FillMode::Fill }; + Language m_language { Language::En }; + Theme m_theme { Theme::System }; + QString m_font { "Roboto" }; }; }