From 038293a77d5eb11fd6480fe266abd92e62b6a6eb Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Sun, 6 Dec 2020 17:23:22 +0100 Subject: [PATCH] Rework the styling mechanism --- nymea-app/main.cpp | 20 +- nymea-app/resources.qrc | 8 +- nymea-app/stylecontroller.cpp | 5 + nymea-app/styles.qrc | 21 +- nymea-app/styles/dark/ApplicationWindow.qml | 79 -- nymea-app/styles/dark/Button.qml | 3 +- nymea-app/styles/dark/Style.qml | 13 + nymea-app/styles/dark/logo-wide.svg | 827 ++++++++++++++++++ nymea-app/styles/dark/logo.svg | 604 +------------ .../styles/energize/ApplicationWindow.qml | 75 -- nymea-app/styles/energize/Button.qml | 2 +- nymea-app/styles/energize/Style.qml | 22 + nymea-app/styles/energize/logo-wide.svg | 1 + nymea-app/styles/light/ApplicationWindow.qml | 78 -- nymea-app/styles/light/Style.qml | 7 + nymea-app/styles/light/logo-wide.svg | 822 +++++++++++++++++ nymea-app/styles/lime/ApplicationWindow.qml | 81 -- nymea-app/styles/lime/Style.qml | 14 + nymea-app/styles/lime/logo-wide.svg | 1 + nymea-app/styles/lime/logo.svg | 604 +------------ nymea-app/styles/noir/ApplicationWindow.qml | 75 -- nymea-app/styles/noir/Button.qml | 2 +- nymea-app/styles/noir/Page.qml | 4 +- nymea-app/styles/noir/Style.qml | 16 + .../{ui => styles/noir}/fonts/Oswald-Bold.ttf | Bin .../noir}/fonts/Oswald-ExtraLight.ttf | Bin .../noir}/fonts/Oswald-Light.ttf | Bin .../noir}/fonts/Oswald-Medium.ttf | Bin .../noir}/fonts/Oswald-Regular.ttf | Bin .../noir}/fonts/Oswald-SemiBold.ttf | Bin nymea-app/styles/noir/logo-wide.svg | 1 + nymea-app/styles/noir/logo.svg | 604 +------------ nymea-app/ui/MagicPage.qml | 2 +- nymea-app/ui/MainMenu.qml | 15 +- nymea-app/ui/MainPage.qml | 6 +- nymea-app/ui/Nymea.qml | 59 +- nymea-app/ui/PushButtonAuthPage.qml | 2 +- nymea-app/ui/StyleBase.qml | 46 + nymea-app/ui/appsettings/AppLogPage.qml | 2 +- nymea-app/ui/appsettings/CloudLoginPage.qml | 4 +- nymea-app/ui/components/BigTile.qml | 13 +- nymea-app/ui/components/BrightnessSlider.qml | 6 +- .../ui/components/ClosableArrowAnimation.qml | 3 +- .../ui/components/ClosablesControlLarge.qml | 4 +- nymea-app/ui/components/ColorIcon.qml | 34 +- nymea-app/ui/components/ColorPickerCt.qml | 3 +- nymea-app/ui/components/ColorPickerPre510.qml | 5 +- .../ui/components/ColorTemperaturePicker.qml | 4 +- .../ui/components/ConnectionStatusIcon.qml | 2 +- nymea-app/ui/components/DatePicker.qml | 2 +- nymea-app/ui/components/Dial.qml | 6 +- .../ui/components/EmptyViewPlaceholder.qml | 3 +- nymea-app/ui/components/FancyHeader.qml | 194 ---- nymea-app/ui/components/HeaderButton.qml | 1 - nymea-app/ui/components/InfoPaneBase.qml | 3 +- nymea-app/ui/components/KeypadButton.qml | 4 +- nymea-app/ui/components/Led.qml | 5 +- nymea-app/ui/components/ListFilterInput.qml | 2 +- nymea-app/ui/components/MainPageTabButton.qml | 5 +- nymea-app/ui/components/MainPageTile.qml | 15 +- nymea-app/ui/components/MeaDialog.qml | 5 +- nymea-app/ui/components/MediaControls.qml | 2 +- nymea-app/ui/components/MediaPlayer.qml | 16 +- nymea-app/ui/components/NavigationPad.qml | 2 +- nymea-app/ui/components/NymeaHeader.qml | 5 +- nymea-app/ui/components/NymeaItemDelegate.qml | 6 +- .../ui/components/NymeaSwipeDelegate.qml | 8 +- nymea-app/ui/components/PasswordTextField.qml | 5 +- nymea-app/ui/components/ProgressButton.qml | 6 +- nymea-app/ui/components/SettingsPageBase.qml | 2 +- .../components/SettingsPageSectionHeader.qml | 3 +- nymea-app/ui/components/SetupStatusIcon.qml | 2 +- .../components/ShuffleRepeatVolumeControl.qml | 6 +- nymea-app/ui/components/ShutterControls.qml | 4 +- nymea-app/ui/components/SmartMeterChart.qml | 8 +- nymea-app/ui/components/ThinDivider.qml | 3 +- nymea-app/ui/components/ThingInfoPane.qml | 6 +- nymea-app/ui/components/ThingStatusIcons.qml | 11 +- nymea-app/ui/components/TimePicker.qml | 4 +- .../ui/components/UpdateRunningOverlay.qml | 2 +- nymea-app/ui/components/UpdateStatusIcon.qml | 2 +- nymea-app/ui/connection/CertificateDialog.qml | 4 +- nymea-app/ui/connection/ConnectPage.qml | 22 +- nymea-app/ui/connection/LoginPage.qml | 2 +- .../wifisetup/BluetoothDiscoveryPage.qml | 2 +- .../connection/wifisetup/ConnectWiFiPage.qml | 4 +- .../wifisetup/WirelessSetupPage.qml | 2 +- nymea-app/ui/customviews/GarageController.qml | 2 +- nymea-app/ui/customviews/GenericTypeGraph.qml | 16 +- nymea-app/ui/customviews/WeatherView.qml | 2 +- nymea-app/ui/delegates/InterfaceTile.qml | 6 +- nymea-app/ui/delegates/ParamDelegate.qml | 2 +- nymea-app/ui/delegates/ThingDelegate.qml | 4 +- nymea-app/ui/delegates/ThingTile.qml | 4 +- .../ClosablesDeviceListPage.qml | 4 +- .../devicelistpages/GarageThingListPage.qml | 4 +- .../devicelistpages/GenericDeviceListPage.qml | 2 +- .../devicelistpages/LightsDeviceListPage.qml | 14 +- .../devicelistpages/MediaDeviceListPage.qml | 2 +- .../PowerSocketsDeviceListPage.qml | 2 +- .../ui/devicepages/BoolSensorDevicePage.qml | 2 +- nymea-app/ui/devicepages/DeviceLogPage.qml | 10 +- .../ui/devicepages/DoorbellDevicePage.qml | 20 +- .../FingerprintReaderDevicePage.qml | 6 +- .../ui/devicepages/GenericDevicePage.qml | 2 +- .../ui/devicepages/HeatingDevicePage.qml | 6 +- .../ui/devicepages/IrrigationDevicePage.qml | 8 +- nymea-app/ui/devicepages/LightDevicePage.qml | 6 +- .../devicepages/NotificationsDevicePage.qml | 2 +- .../ui/devicepages/PowersocketDevicePage.qml | 4 +- nymea-app/ui/devicepages/SensorDevicePage.qml | 2 +- .../ui/devicepages/ShutterDevicePage.qml | 9 +- .../ui/devicepages/VentilationDevicePage.qml | 4 +- nymea-app/ui/experiences/heating/Main.qml | 22 +- nymea-app/ui/magic/DeviceRulesPage.qml | 4 +- nymea-app/ui/magic/EditRulePage.qml | 4 +- nymea-app/ui/magic/ScriptEditor.qml | 6 +- nymea-app/ui/magic/SelectThingPage.qml | 2 +- .../ui/magic/SimpleStateEvaluatorDelegate.qml | 4 +- nymea-app/ui/magic/WriteNfcTagPage.qml | 6 +- .../ui/magic/scripting/CompletionBox.qml | 10 +- nymea-app/ui/magic/scripting/EditorPane.qml | 7 +- nymea-app/ui/magic/scripting/LineNumbers.qml | 3 +- nymea-app/ui/mainviews/EnergyView.qml | 16 +- nymea-app/ui/mainviews/GroupsView.qml | 6 +- nymea-app/ui/mainviews/ScenesView.qml | 2 +- .../ui/system/ConnectionInterfaceDelegate.qml | 4 +- .../ui/system/ConnectionInterfacesPage.qml | 4 +- nymea-app/ui/system/GeneralSettingsPage.qml | 4 +- nymea-app/ui/system/LogViewerPage.qml | 8 +- nymea-app/ui/system/MqttPolicyPage.qml | 8 +- nymea-app/ui/system/NetworkSettingsPage.qml | 2 +- nymea-app/ui/system/PluginsPage.qml | 2 +- nymea-app/ui/system/SystemUpdatePage.qml | 10 +- .../ui/thingconfiguration/EditThingsPage.qml | 2 +- .../ui/thingconfiguration/NewThingPage.qml | 6 +- .../ui/thingconfiguration/SetupWizard.qml | 4 +- 137 files changed, 2141 insertions(+), 2733 deletions(-) delete mode 100644 nymea-app/styles/dark/ApplicationWindow.qml create mode 100644 nymea-app/styles/dark/Style.qml create mode 100644 nymea-app/styles/dark/logo-wide.svg mode change 100644 => 120000 nymea-app/styles/dark/logo.svg delete mode 100644 nymea-app/styles/energize/ApplicationWindow.qml create mode 100644 nymea-app/styles/energize/Style.qml create mode 120000 nymea-app/styles/energize/logo-wide.svg delete mode 100644 nymea-app/styles/light/ApplicationWindow.qml create mode 100644 nymea-app/styles/light/Style.qml create mode 100644 nymea-app/styles/light/logo-wide.svg delete mode 100644 nymea-app/styles/lime/ApplicationWindow.qml create mode 100644 nymea-app/styles/lime/Style.qml create mode 120000 nymea-app/styles/lime/logo-wide.svg mode change 100644 => 120000 nymea-app/styles/lime/logo.svg delete mode 100644 nymea-app/styles/noir/ApplicationWindow.qml create mode 100644 nymea-app/styles/noir/Style.qml rename nymea-app/{ui => styles/noir}/fonts/Oswald-Bold.ttf (100%) rename nymea-app/{ui => styles/noir}/fonts/Oswald-ExtraLight.ttf (100%) rename nymea-app/{ui => styles/noir}/fonts/Oswald-Light.ttf (100%) rename nymea-app/{ui => styles/noir}/fonts/Oswald-Medium.ttf (100%) rename nymea-app/{ui => styles/noir}/fonts/Oswald-Regular.ttf (100%) rename nymea-app/{ui => styles/noir}/fonts/Oswald-SemiBold.ttf (100%) create mode 120000 nymea-app/styles/noir/logo-wide.svg mode change 100644 => 120000 nymea-app/styles/noir/logo.svg create mode 100644 nymea-app/ui/StyleBase.qml delete mode 100644 nymea-app/ui/components/FancyHeader.qml diff --git a/nymea-app/main.cpp b/nymea-app/main.cpp index b755f554..4d325b56 100644 --- a/nymea-app/main.cpp +++ b/nymea-app/main.cpp @@ -95,15 +95,13 @@ int main(int argc, char *argv[]) parser.addOption(kioskOption); QCommandLineOption connectOption = QCommandLineOption({"c", "connect"}, "Connect to nymea:core without discovery.", "host"); parser.addOption(connectOption); + QCommandLineOption styleOption = QCommandLineOption({"s", "style"}, "Override the style. Style in settings will be disabled.", "style"); + parser.addOption(styleOption); parser.process(application); // Initialize app log controller as early as possible, but after setting app name etc AppLogController::instance(); - foreach (const QFileInfo &fi, QDir(":/ui/fonts/").entryInfoList()) { - QFontDatabase::addApplicationFont(fi.absoluteFilePath()); - } - QTranslator qtTranslator; qtTranslator.load("qt_" + QLocale::system().name(), QLibraryInfo::location(QLibraryInfo::TranslationsPath)); application.installTranslator(&qtTranslator); @@ -125,10 +123,24 @@ int main(int argc, char *argv[]) QQmlApplicationEngine *engine = new QQmlApplicationEngine(); StyleController styleController; + if (parser.isSet(styleOption)) { + qDebug() << "Setting style to" << parser.value(styleOption); + styleController.setCurrentStyle(parser.value(styleOption)); + } QQmlFileSelector *styleSelector = new QQmlFileSelector(engine); styleSelector->setExtraSelectors({styleController.currentStyle()}); + foreach (const QFileInfo &fi, QDir(":/ui/fonts/").entryInfoList()) { + QFontDatabase::addApplicationFont(fi.absoluteFilePath()); + } + foreach (const QFileInfo &fi, QDir(":/styles/" + styleController.currentStyle() + "/fonts/").entryInfoList()) { + qDebug() << "Adding style font:" << fi.absoluteFilePath(); + QFontDatabase::addApplicationFont(fi.absoluteFilePath()); + } + + qmlRegisterSingletonType(QUrl("qrc:///styles/" + styleController.currentStyle() + "/Style.qml"), "Nymea", 1, 0, "Style" ); + engine->rootContext()->setContextProperty("styleController", &styleController); qmlRegisterSingletonType("Nymea", 1, 0, "PlatformHelper", platformHelperProvider); diff --git a/nymea-app/resources.qrc b/nymea-app/resources.qrc index ca760f85..5e21b685 100644 --- a/nymea-app/resources.qrc +++ b/nymea-app/resources.qrc @@ -35,7 +35,6 @@ ui/components/AutoSizeMenu.qml ui/components/EmptyViewPlaceholder.qml ui/components/RemoveDeviceMethodDialog.qml - ui/components/FancyHeader.qml ui/components/MainPageTile.qml ui/components/BusyOverlay.qml ui/components/SwipeDelegateGroup.qml @@ -154,12 +153,6 @@ ui/thingconfiguration/ConfigureThingPage.qml ui/connection/CertificateDialog.qml ui/experiences/heating/Main.qml - ui/fonts/Oswald-Bold.ttf - ui/fonts/Oswald-ExtraLight.ttf - ui/fonts/Oswald-Light.ttf - ui/fonts/Oswald-Medium.ttf - ui/fonts/Oswald-Regular.ttf - ui/fonts/Oswald-SemiBold.ttf ui/system/WebServerSettingsPage.qml ui/system/WebServerConfigurationDialog.qml ui/system/DeveloperTools.qml @@ -236,5 +229,6 @@ ui/utils/ActionQueue.qml ui/components/ColorTemperaturePicker.qml ui/components/ThingContextMenu.qml + ui/StyleBase.qml diff --git a/nymea-app/stylecontroller.cpp b/nymea-app/stylecontroller.cpp index 1074226b..03ab3ff6 100644 --- a/nymea-app/stylecontroller.cpp +++ b/nymea-app/stylecontroller.cpp @@ -61,9 +61,14 @@ QString StyleController::currentStyle() const void StyleController::setCurrentStyle(const QString ¤tStyle) { + if (!allStyles().contains(currentStyle)) { + qWarning().nospace() << "No style named: " << currentStyle << ". Available styles are: " << allStyles().join(", "); + return; + } QSettings settings; if (settings.value("style").toString() != currentStyle) { settings.setValue("style", currentStyle); + QQuickStyle::setStyle(QString(":/styles/%1").arg(currentStyle)); emit currentStyleChanged(); } } diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc index cab2e807..0adf708f 100644 --- a/nymea-app/styles.qrc +++ b/nymea-app/styles.qrc @@ -1,24 +1,35 @@ - styles/light/ApplicationWindow.qml styles/light/Page.qml styles/light/logo.svg styles/light/Button.qml - styles/dark/ApplicationWindow.qml styles/dark/Page.qml styles/dark/logo.svg styles/dark/Button.qml - styles/noir/ApplicationWindow.qml styles/noir/Page.qml styles/noir/logo.svg styles/noir/Button.qml - styles/lime/ApplicationWindow.qml + styles/noir/fonts/Oswald-Bold.ttf + styles/noir/fonts/Oswald-ExtraLight.ttf + styles/noir/fonts/Oswald-Light.ttf + styles/noir/fonts/Oswald-Medium.ttf + styles/noir/fonts/Oswald-Regular.ttf + styles/noir/fonts/Oswald-SemiBold.ttf styles/lime/Page.qml styles/lime/logo.svg styles/lime/Button.qml - styles/energize/ApplicationWindow.qml styles/energize/Button.qml styles/energize/logo.svg styles/energize/Page.qml + styles/dark/Style.qml + styles/light/Style.qml + styles/noir/Style.qml + styles/lime/Style.qml + styles/energize/Style.qml + styles/light/logo-wide.svg + styles/dark/logo-wide.svg + styles/energize/logo-wide.svg + styles/lime/logo-wide.svg + styles/noir/logo-wide.svg diff --git a/nymea-app/styles/dark/ApplicationWindow.qml b/nymea-app/styles/dark/ApplicationWindow.qml deleted file mode 100644 index ee5c1cbf..00000000 --- a/nymea-app/styles/dark/ApplicationWindow.qml +++ /dev/null @@ -1,79 +0,0 @@ -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -* -* Copyright 2013 - 2020, nymea GmbH -* Contact: contact@nymea.io -* -* This file is part of nymea. -* This project including source code and documentation is protected by -* copyright law, and remains the property of nymea GmbH. All rights, including -* reproduction, publication, editing and translation, are reserved. The use of -* this project is subject to the terms of a license agreement to be concluded -* with nymea GmbH in accordance with the terms of use of nymea GmbH, available -* under https://nymea.io/license -* -* GNU General Public License Usage -* Alternatively, this project may be redistributed and/or modified under the -* terms of the GNU General Public License as published by the Free Software -* Foundation, GNU version 3. This project is distributed in the hope that it -* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty -* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General -* Public License for more details. -* -* You should have received a copy of the GNU General Public License along with -* this project. If not, see . -* -* For any further details and any questions please contact us under -* contact@nymea.io or see our FAQ/Licensing Information on -* https://nymea.io/license/faq -* -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -import QtQuick 2.9 -import QtQuick.Templates 2.2 -import QtQuick.Controls.Material 2.2 - -ApplicationWindow { - Material.theme: Material.Dark - - font.pixelSize: 16 - font.weight: Font.Normal - font.capitalization: Font.MixedCase - font.family: "Ubuntu" - - // The core system name. - property string systemName: "nymea" - - // The app name - property string appName: "nymea:app" - - // The header background color - property color primaryColor: Material.background - - // Header font color - property color headerForegroundColor: Material.foreground - - // The font color - property color foregroundColor: Material.foreground - - // The color of selected/highlighted things - property color accentColor: "#ff57baae" - - // colors for interfaces, e.g. icons - property var interfaceColors: { - "temperaturesensor": "red", - "humiditysensor": "deepskyblue", - "moisturesensor":"blue", - "lightsensor": "orange", - "conductivitysensor": "green", - "pressuresensor": "grey", - "noisesensor": "darkviolet", - "co2sensor": "turquoise", - "smartmeterproducer": "lightgreen", - "smartmeterconsumer": "orange", - "extendedsmartmeterproducer": "blue", - "extendedsmartmeterconsumer": "blue" - } - - // Optional: Set this to override the cloud environment - //property string cloudEnvironment: "Community" -} diff --git a/nymea-app/styles/dark/Button.qml b/nymea-app/styles/dark/Button.qml index 86f2eb36..40bcbe36 100644 --- a/nymea-app/styles/dark/Button.qml +++ b/nymea-app/styles/dark/Button.qml @@ -34,6 +34,7 @@ import QtQuick.Controls 2.2 import QtQuick.Controls.impl 2.2 import QtQuick.Controls.Material 2.2 import QtQuick.Controls.Material.impl 2.2 +import Nymea 1.0 T.Button { id: control @@ -55,7 +56,7 @@ T.Button { contentItem: Text { text: control.text - color: app.foregroundColor + color: Style.foregroundColor font.bold: control.font.bold font.capitalization: Font.AllUppercase font.family: control.font.family diff --git a/nymea-app/styles/dark/Style.qml b/nymea-app/styles/dark/Style.qml new file mode 100644 index 00000000..cd3ffbeb --- /dev/null +++ b/nymea-app/styles/dark/Style.qml @@ -0,0 +1,13 @@ +pragma Singleton +import QtQuick 2.0 +import "../../ui" + +StyleBase { + backgroundColor: "#303030" + foregroundColor: "#ffffff" + + headerBackgroundColor: "#303030" + headerForegroundColor: "#ffffff" + + iconColor: "#fafafa" +} diff --git a/nymea-app/styles/dark/logo-wide.svg b/nymea-app/styles/dark/logo-wide.svg new file mode 100644 index 00000000..50afccfd --- /dev/null +++ b/nymea-app/styles/dark/logo-wide.svg @@ -0,0 +1,827 @@ + + + + + + image/svg+xml + + Artboard 1 copy 5 Kopie 2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Artboard 1 copy 5 Kopie 2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nymea-app/styles/dark/logo.svg b/nymea-app/styles/dark/logo.svg deleted file mode 100644 index 9d1907c3..00000000 --- a/nymea-app/styles/dark/logo.svg +++ /dev/null @@ -1,603 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/nymea-app/styles/dark/logo.svg b/nymea-app/styles/dark/logo.svg new file mode 120000 index 00000000..6437d5e5 --- /dev/null +++ b/nymea-app/styles/dark/logo.svg @@ -0,0 +1 @@ +../light/logo.svg \ No newline at end of file diff --git a/nymea-app/styles/energize/ApplicationWindow.qml b/nymea-app/styles/energize/ApplicationWindow.qml deleted file mode 100644 index 30e63822..00000000 --- a/nymea-app/styles/energize/ApplicationWindow.qml +++ /dev/null @@ -1,75 +0,0 @@ -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -* -* Copyright 2013 - 2020, nymea GmbH -* Contact: contact@nymea.io -* -* This file is part of nymea. -* This project including source code and documentation is protected by -* copyright law, and remains the property of nymea GmbH. All rights, including -* reproduction, publication, editing and translation, are reserved. The use of -* this project is subject to the terms of a license agreement to be concluded -* with nymea GmbH in accordance with the terms of use of nymea GmbH, available -* under https://nymea.io/license -* -* GNU General Public License Usage -* Alternatively, this project may be redistributed and/or modified under the -* terms of the GNU General Public License as published by the Free Software -* Foundation, GNU version 3. This project is distributed in the hope that it -* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty -* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General -* Public License for more details. -* -* You should have received a copy of the GNU General Public License along with -* this project. If not, see . -* -* For any further details and any questions please contact us under -* contact@nymea.io or see our FAQ/Licensing Information on -* https://nymea.io/license/faq -* -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -import QtQuick 2.0 -import QtQuick.Templates 2.2 -import QtQuick.Controls.Material 2.2 - -ApplicationWindow { - // The app style - Material.theme: Material.Light - - // Main background color - Material.background: "#FFFFFF" - - font.pixelSize: 14 - font.weight: Font.Normal - font.capitalization: Font.MixedCase - font.family: "Ubuntu" - - // The core system name. - property string systemName: "nymea" - - // The app name - property string appName: "nymea:app" - - // The header background color - property color primaryColor: Material.background - - - // Header font color - property color headerForegroundColor: "#79a79f" - - // The font color - property color foregroundColor: "#638B87" - - // The color of selected/highlighted things - property color accentColor: "#8cc1b6" - - // colors for interfaces, e.g. icons - property var interfaceColors: { - "temperaturesensor": "#FF0000", - "humiditysensor": "#00BFFF", - "moisturesensor":"#0000FF", - "lightsensor": "#FFA500", - "conductivitysensor": "#008000", - "pressuresensor": "#808080" - } -} diff --git a/nymea-app/styles/energize/Button.qml b/nymea-app/styles/energize/Button.qml index 975ba9ac..e90bc513 100644 --- a/nymea-app/styles/energize/Button.qml +++ b/nymea-app/styles/energize/Button.qml @@ -64,7 +64,7 @@ T.Button { font.overline: control.font.overline font.pixelSize: app.smallFont font.weight: Font.Bold - color: app.backgroundColor + color: Style.backgroundColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight diff --git a/nymea-app/styles/energize/Style.qml b/nymea-app/styles/energize/Style.qml new file mode 100644 index 00000000..4807908a --- /dev/null +++ b/nymea-app/styles/energize/Style.qml @@ -0,0 +1,22 @@ +pragma Singleton +import QtQuick 2.0 +import "../../ui" + +StyleBase { + backgroundColor: "#ffffff" + foregroundColor: "#638B87" + + headerBackgroundColor: "#ffffff" + headerForegroundColor: "#79a79f" + + accentColor: "#8cc1b6" + + interfaceColors: { + "temperaturesensor": "#FF0000", + "humiditysensor": "#00BFFF", + "moisturesensor":"#0000FF", + "lightsensor": "#FFA500", + "conductivitysensor": "#008000", + "pressuresensor": "#808080" + } +} diff --git a/nymea-app/styles/energize/logo-wide.svg b/nymea-app/styles/energize/logo-wide.svg new file mode 120000 index 00000000..f8d1ac00 --- /dev/null +++ b/nymea-app/styles/energize/logo-wide.svg @@ -0,0 +1 @@ +../light/logo-wide.svg \ No newline at end of file diff --git a/nymea-app/styles/light/ApplicationWindow.qml b/nymea-app/styles/light/ApplicationWindow.qml deleted file mode 100644 index 3ca9019f..00000000 --- a/nymea-app/styles/light/ApplicationWindow.qml +++ /dev/null @@ -1,78 +0,0 @@ -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -* -* Copyright 2013 - 2020, nymea GmbH -* Contact: contact@nymea.io -* -* This file is part of nymea. -* This project including source code and documentation is protected by -* copyright law, and remains the property of nymea GmbH. All rights, including -* reproduction, publication, editing and translation, are reserved. The use of -* this project is subject to the terms of a license agreement to be concluded -* with nymea GmbH in accordance with the terms of use of nymea GmbH, available -* under https://nymea.io/license -* -* GNU General Public License Usage -* Alternatively, this project may be redistributed and/or modified under the -* terms of the GNU General Public License as published by the Free Software -* Foundation, GNU version 3. This project is distributed in the hope that it -* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty -* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General -* Public License for more details. -* -* You should have received a copy of the GNU General Public License along with -* this project. If not, see . -* -* For any further details and any questions please contact us under -* contact@nymea.io or see our FAQ/Licensing Information on -* https://nymea.io/license/faq -* -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -import QtQuick 2.0 -import QtQuick.Templates 2.2 -import QtQuick.Controls.Material 2.2 - -ApplicationWindow { - - font.pixelSize: 16 - font.weight: Font.Normal - font.capitalization: Font.MixedCase - font.family: "Ubuntu" - - // The core system name. - property string systemName: "nymea" - - // The app name - property string appName: "nymea:app" - - // The header background color - property color primaryColor: "white" - - // Header font color - property color headerForegroundColor: Material.foreground - - // The font color - property color foregroundColor: Material.foreground - - // The color of selected/highlighted things - property color accentColor: "#ff57baae" - - // colors for interfaces, e.g. icons - property var interfaceColors: { - "temperaturesensor": "red", - "humiditysensor": "deepskyblue", - "moisturesensor":"blue", - "lightsensor": "orange", - "conductivitysensor": "green", - "pressuresensor": "grey", - "noisesensor": "darkviolet", - "co2sensor": "turquoise", - "smartmeterproducer": "lightgreen", - "smartmeterconsumer": "orange", - "extendedsmartmeterproducer": "blue", - "extendedsmartmeterconsumer": "blue" - } - - // Optional: Set this to override the cloud environment - //property string cloudEnvironment: "Community" -} diff --git a/nymea-app/styles/light/Style.qml b/nymea-app/styles/light/Style.qml new file mode 100644 index 00000000..39a42232 --- /dev/null +++ b/nymea-app/styles/light/Style.qml @@ -0,0 +1,7 @@ +pragma Singleton +import QtQuick 2.0 +import "../../ui" + +StyleBase { + // This is the default style. No overrides +} diff --git a/nymea-app/styles/light/logo-wide.svg b/nymea-app/styles/light/logo-wide.svg new file mode 100644 index 00000000..387e77ea --- /dev/null +++ b/nymea-app/styles/light/logo-wide.svg @@ -0,0 +1,822 @@ + + + + + + image/svg+xml + + Artboard 1 copy 5 Kopie 2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Artboard 1 copy 5 Kopie 2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nymea-app/styles/lime/ApplicationWindow.qml b/nymea-app/styles/lime/ApplicationWindow.qml deleted file mode 100644 index 3f12e907..00000000 --- a/nymea-app/styles/lime/ApplicationWindow.qml +++ /dev/null @@ -1,81 +0,0 @@ -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -* -* Copyright 2013 - 2020, nymea GmbH -* Contact: contact@nymea.io -* -* This file is part of nymea. -* This project including source code and documentation is protected by -* copyright law, and remains the property of nymea GmbH. All rights, including -* reproduction, publication, editing and translation, are reserved. The use of -* this project is subject to the terms of a license agreement to be concluded -* with nymea GmbH in accordance with the terms of use of nymea GmbH, available -* under https://nymea.io/license -* -* GNU General Public License Usage -* Alternatively, this project may be redistributed and/or modified under the -* terms of the GNU General Public License as published by the Free Software -* Foundation, GNU version 3. This project is distributed in the hope that it -* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty -* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General -* Public License for more details. -* -* You should have received a copy of the GNU General Public License along with -* this project. If not, see . -* -* For any further details and any questions please contact us under -* contact@nymea.io or see our FAQ/Licensing Information on -* https://nymea.io/license/faq -* -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -import QtQuick 2.9 -import QtQuick.Templates 2.2 -import QtQuick.Controls.Material 2.2 - -ApplicationWindow { - Material.theme: Material.Dark - - font.pixelSize: 16 - font.weight: Font.Normal - font.capitalization: Font.MixedCase - font.family: "Ubuntu" - - Material.background: "#151515" - - // The core system name. - property string systemName: "nymea" - - // The app name - property string appName: "nymea:app" - - // The header background color - property color primaryColor: Material.background - - // Header font color - property color headerForegroundColor: Material.foreground - - // The font color - property color foregroundColor: Material.foreground - - // The color of selected/highlighted things - property color accentColor: "#ffb0d827" - - // colors for interfaces, e.g. icons - property var interfaceColors: { - "temperaturesensor": "red", - "humiditysensor": "deepskyblue", - "moisturesensor":"blue", - "lightsensor": "orange", - "conductivitysensor": "green", - "pressuresensor": "grey", - "noisesensor": "darkviolet", - "co2sensor": "turquoise", - "smartmeterproducer": "lightgreen", - "smartmeterconsumer": "orange", - "extendedsmartmeterproducer": "blue", - "extendedsmartmeterconsumer": "blue" - } - - // Optional: Set this to override the cloud environment - //property string cloudEnvironment: "Community" -} diff --git a/nymea-app/styles/lime/Style.qml b/nymea-app/styles/lime/Style.qml new file mode 100644 index 00000000..f6e00c5e --- /dev/null +++ b/nymea-app/styles/lime/Style.qml @@ -0,0 +1,14 @@ +pragma Singleton +import QtQuick 2.0 +import "../../ui" + +StyleBase { + backgroundColor: "#151515" + foregroundColor: "#fefefe" + + headerBackgroundColor: backgroundColor + headerForegroundColor: foregroundColor + + accentColor: "#ffb0d827" + iconColor: "#fafafa" +} diff --git a/nymea-app/styles/lime/logo-wide.svg b/nymea-app/styles/lime/logo-wide.svg new file mode 120000 index 00000000..300078d8 --- /dev/null +++ b/nymea-app/styles/lime/logo-wide.svg @@ -0,0 +1 @@ +../dark/logo-wide.svg \ No newline at end of file diff --git a/nymea-app/styles/lime/logo.svg b/nymea-app/styles/lime/logo.svg deleted file mode 100644 index 9d1907c3..00000000 --- a/nymea-app/styles/lime/logo.svg +++ /dev/null @@ -1,603 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/nymea-app/styles/lime/logo.svg b/nymea-app/styles/lime/logo.svg new file mode 120000 index 00000000..13fc5e97 --- /dev/null +++ b/nymea-app/styles/lime/logo.svg @@ -0,0 +1 @@ +../dark/logo.svg \ No newline at end of file diff --git a/nymea-app/styles/noir/ApplicationWindow.qml b/nymea-app/styles/noir/ApplicationWindow.qml deleted file mode 100644 index a41bdc27..00000000 --- a/nymea-app/styles/noir/ApplicationWindow.qml +++ /dev/null @@ -1,75 +0,0 @@ -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -* -* Copyright 2013 - 2020, nymea GmbH -* Contact: contact@nymea.io -* -* This file is part of nymea. -* This project including source code and documentation is protected by -* copyright law, and remains the property of nymea GmbH. All rights, including -* reproduction, publication, editing and translation, are reserved. The use of -* this project is subject to the terms of a license agreement to be concluded -* with nymea GmbH in accordance with the terms of use of nymea GmbH, available -* under https://nymea.io/license -* -* GNU General Public License Usage -* Alternatively, this project may be redistributed and/or modified under the -* terms of the GNU General Public License as published by the Free Software -* Foundation, GNU version 3. This project is distributed in the hope that it -* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty -* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General -* Public License for more details. -* -* You should have received a copy of the GNU General Public License along with -* this project. If not, see . -* -* For any further details and any questions please contact us under -* contact@nymea.io or see our FAQ/Licensing Information on -* https://nymea.io/license/faq -* -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -import QtQuick 2.0 -import QtQuick.Templates 2.2 -import QtQuick.Controls.Material 2.2 - -ApplicationWindow { - // The app style - Material.theme: Material.Dark - - // Main background color - Material.background: "#50514f" - - font.pixelSize: 16 - font.weight: Font.Normal - font.capitalization: Font.MixedCase - font.family: "Oswald" - - // The core system name. - property string systemName: "nymea" - - // The app name - property string appName: "nymea:app" - - // The header background color - property color primaryColor: "#494948" - - - // Header font color - property color headerForegroundColor: "#ebebeb" - - // The font color - property color foregroundColor: "#ebebeb" - - // The color of selected/highlighted things - property color accentColor: "#f45b69" - - // colors for interfaces, e.g. icons - property var interfaceColors: { - "temperaturesensor": "#FF0000", - "humiditysensor": "#00BFFF", - "moisturesensor":"#0000FF", - "lightsensor": "#FFA500", - "conductivitysensor": "#008000", - "pressuresensor": "#808080" - } -} diff --git a/nymea-app/styles/noir/Button.qml b/nymea-app/styles/noir/Button.qml index e65426b7..276465e4 100644 --- a/nymea-app/styles/noir/Button.qml +++ b/nymea-app/styles/noir/Button.qml @@ -64,7 +64,7 @@ T.Button { font.overline: control.font.overline font.pixelSize: app.smallFont font.weight: Font.Bold - color: app.foregroundColor + color: Style.foregroundColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight diff --git a/nymea-app/styles/noir/Page.qml b/nymea-app/styles/noir/Page.qml index aa70bdf8..7c8b3b33 100644 --- a/nymea-app/styles/noir/Page.qml +++ b/nymea-app/styles/noir/Page.qml @@ -31,10 +31,10 @@ import QtQuick 2.0 import QtQuick.Templates 2.2 import QtQuick.Controls.Material 2.2 +import Nymea 1.0 Page { - background: Rectangle { - color: Material.background + color: Style.backgroundColor } } diff --git a/nymea-app/styles/noir/Style.qml b/nymea-app/styles/noir/Style.qml new file mode 100644 index 00000000..d58c3e6c --- /dev/null +++ b/nymea-app/styles/noir/Style.qml @@ -0,0 +1,16 @@ +pragma Singleton +import QtQuick 2.0 +import "../../ui" + +StyleBase { + backgroundColor: "#50514f" + foregroundColor: "#ebebeb" + + headerBackgroundColor: "#494948" + headerForegroundColor: foregroundColor + + accentColor: "#f45b69" + iconColor: foregroundColor + + fontFamily: "Oswald" +} diff --git a/nymea-app/ui/fonts/Oswald-Bold.ttf b/nymea-app/styles/noir/fonts/Oswald-Bold.ttf similarity index 100% rename from nymea-app/ui/fonts/Oswald-Bold.ttf rename to nymea-app/styles/noir/fonts/Oswald-Bold.ttf diff --git a/nymea-app/ui/fonts/Oswald-ExtraLight.ttf b/nymea-app/styles/noir/fonts/Oswald-ExtraLight.ttf similarity index 100% rename from nymea-app/ui/fonts/Oswald-ExtraLight.ttf rename to nymea-app/styles/noir/fonts/Oswald-ExtraLight.ttf diff --git a/nymea-app/ui/fonts/Oswald-Light.ttf b/nymea-app/styles/noir/fonts/Oswald-Light.ttf similarity index 100% rename from nymea-app/ui/fonts/Oswald-Light.ttf rename to nymea-app/styles/noir/fonts/Oswald-Light.ttf diff --git a/nymea-app/ui/fonts/Oswald-Medium.ttf b/nymea-app/styles/noir/fonts/Oswald-Medium.ttf similarity index 100% rename from nymea-app/ui/fonts/Oswald-Medium.ttf rename to nymea-app/styles/noir/fonts/Oswald-Medium.ttf diff --git a/nymea-app/ui/fonts/Oswald-Regular.ttf b/nymea-app/styles/noir/fonts/Oswald-Regular.ttf similarity index 100% rename from nymea-app/ui/fonts/Oswald-Regular.ttf rename to nymea-app/styles/noir/fonts/Oswald-Regular.ttf diff --git a/nymea-app/ui/fonts/Oswald-SemiBold.ttf b/nymea-app/styles/noir/fonts/Oswald-SemiBold.ttf similarity index 100% rename from nymea-app/ui/fonts/Oswald-SemiBold.ttf rename to nymea-app/styles/noir/fonts/Oswald-SemiBold.ttf diff --git a/nymea-app/styles/noir/logo-wide.svg b/nymea-app/styles/noir/logo-wide.svg new file mode 120000 index 00000000..300078d8 --- /dev/null +++ b/nymea-app/styles/noir/logo-wide.svg @@ -0,0 +1 @@ +../dark/logo-wide.svg \ No newline at end of file diff --git a/nymea-app/styles/noir/logo.svg b/nymea-app/styles/noir/logo.svg deleted file mode 100644 index 9d1907c3..00000000 --- a/nymea-app/styles/noir/logo.svg +++ /dev/null @@ -1,603 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/nymea-app/styles/noir/logo.svg b/nymea-app/styles/noir/logo.svg new file mode 120000 index 00000000..13fc5e97 --- /dev/null +++ b/nymea-app/styles/noir/logo.svg @@ -0,0 +1 @@ +../dark/logo.svg \ No newline at end of file diff --git a/nymea-app/ui/MagicPage.qml b/nymea-app/ui/MagicPage.qml index c0456591..44d08c47 100644 --- a/nymea-app/ui/MagicPage.qml +++ b/nymea-app/ui/MagicPage.qml @@ -141,7 +141,7 @@ Page { id: ruleDelegate width: parent.width iconName: "../images/" + (model.executable ? (iconTag.value.length > 0 ? iconTag.value : "slideshow") : "magic") + ".svg" - iconColor: model.executable ? (colorTag.value.length > 0 ? colorTag.value : app.accentColor) : !model.enabled ? "red" : (model.active ? app.accentColor : "grey") + iconColor: model.executable ? (colorTag.value.length > 0 ? colorTag.value : Style.accentColor) : !model.enabled ? "red" : (model.active ? Style.accentColor : "grey") text: model.name canDelete: true diff --git a/nymea-app/ui/MainMenu.qml b/nymea-app/ui/MainMenu.qml index 855070fe..fba2901a 100644 --- a/nymea-app/ui/MainMenu.qml +++ b/nymea-app/ui/MainMenu.qml @@ -20,7 +20,7 @@ Drawer { signal startDemoMode(); background: Rectangle { - color: app.backgroundColor + color: Style.backgroundColor } @@ -31,20 +31,21 @@ Drawer { Rectangle { Layout.fillWidth: true Layout.preferredHeight: topSectionLayout.implicitHeight + app.margins * 2 - color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, 0.05)) + color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.05)) ColumnLayout { id: topSectionLayout anchors { left: parent.left; top: parent.top; right: parent.right; margins: app.margins } + spacing: app.margins Image { Layout.preferredHeight: app.hugeIconSize - Layout.preferredWidth: height - sourceSize.width: width - sourceSize.height: height - source: "qrc:/styles/%1/logo.svg".arg(styleController.currentStyle) + // w : h = ss.w : ss.h + Layout.preferredWidth: app.hugeIconSize * sourceSize.width / sourceSize.height + source: "qrc:/styles/%1/logo-wide.svg".arg(styleController.currentStyle) } RowLayout { + visible: root.currentEngine && root.currentEngine.jsonRpcClient.currentHost ColumnLayout { Label { Layout.fillWidth: true @@ -55,13 +56,11 @@ Drawer { text: root.currentEngine.jsonRpcClient.currentConnection.url font.pixelSize: app.extraSmallFont enabled: false - visible: root.currentEngine && root.currentEngine.jsonRpcClient.currentHost } } ProgressButton { longpressEnabled: false imageSource: "../images/close.svg" - visible: root.currentEngine && root.currentEngine.jsonRpcClient.currentHost onClicked: { root.currentEngine.jsonRpcClient.disconnectFromHost(); root.close(); diff --git a/nymea-app/ui/MainPage.qml b/nymea-app/ui/MainPage.qml index d0b6353a..7980b6aa 100644 --- a/nymea-app/ui/MainPage.qml +++ b/nymea-app/ui/MainPage.qml @@ -54,6 +54,7 @@ Page { HeaderButton { imageSource: "../images/navigation-menu.svg" + color: Style.headerForegroundColor onClicked: { if (d.configOverlay != null) { d.configOverlay.destroy(); @@ -64,6 +65,7 @@ Page { Label { Layout.fillWidth: true + color: Style.headerForegroundColor text: d.configOverlay !== null ? qsTr("Configure main view") : swipeView.currentItem.item.title.length > 0 ? swipeView.currentItem.item.title : filteredContentModel.data(swipeView.currentIndex, "displayName") @@ -455,7 +457,7 @@ Page { width: Math.min(parent.width, parent.height) * .8 height: width name: Qt.resolvedUrl("images/" + model.icon + ".svg") - color: configDelegate.isEnabled ? app.accentColor : keyColor + color: configDelegate.isEnabled ? Style.accentColor : Style.iconColor } } @@ -519,7 +521,7 @@ Page { width: Math.min(parent.width, parent.height) * .8 height: width name: Qt.resolvedUrl("images/" + dndItem.icon + ".svg") - color: dndItem.isEnabled ? app.accentColor : keyColor + color: dndItem.isEnabled ? Style.accentColor : Style.iconColor } } diff --git a/nymea-app/ui/Nymea.qml b/nymea-app/ui/Nymea.qml index f367f90a..20f074b2 100644 --- a/nymea-app/ui/Nymea.qml +++ b/nymea-app/ui/Nymea.qml @@ -46,18 +46,25 @@ ApplicationWindow { minimumHeight: 480 visibility: kioskMode ? ApplicationWindow.FullScreen : settings.viewMode color: Material.background + title: app.appName - // Those variables must be present in the Style - title: appName - Material.primary: primaryColor - Material.accent: accentColor - Material.foreground: foregroundColor + Material.theme: NymeaUtils.isDark(Style.backgroundColor) ? Material.Dark : Material.Light + Material.background: Style.backgroundColor + Material.primary: Style.headerBackgroundColor + Material.accent: Style.accentColor + Material.foreground: Style.foregroundColor + + font.pixelSize: mediumFont + font.weight: Font.Normal + font.capitalization: Font.MixedCase + font.family: Style.fontFamily + + property string appName: "appBranding" in app ? app.appBranding : "nymea:app" + property string systemName: "coreBranding" in app ? app.coreBranding : "nymea" property int margins: 16 property int bigMargins: 20 - property int radius: 6 - property int extraSmallFont: 10 property int smallFont: 13 property int mediumFont: 16 @@ -69,7 +76,6 @@ ApplicationWindow { property int hugeIconSize: 64 property int delegateHeight: 60 - property color backgroundColor: Material.background readonly property bool landscape: app.width > app.height @@ -91,8 +97,8 @@ ApplicationWindow { Component.onCompleted: { styleController.setSystemFont(app.font) - PlatformHelper.topPanelColor = app.primaryColor - PlatformHelper.bottomPanelColor = Material.background + PlatformHelper.topPanelColor = Style.headerBackgroundColor + PlatformHelper.bottomPanelColor = Style.backgroundColor } Binding { @@ -374,37 +380,20 @@ ApplicationWindow { return ""; } - property var fallbackColors: { - "temperaturesensor": "red", - "humiditysensor": "deepskyblue", - "moisturesensor":"blue", - "lightsensor": "orange", - "conductivitysensor": "green", - "pressuresensor": "grey", - "noisesensor": "darkviolet", - "co2sensor": "turquoise", - "daylightsensor": "gold", - "presencesensor": "darkblue", - "closablesensor": "green", - "smartmeterproducer": "lightgreen", - "smartmeterconsumer": "orange", - "extendedsmartmeterproducer": "blue", - "extendedsmartmeterconsumer": "blue", - "heating" : "gainsboro", - "thermostat": "dodgerblue", - "irrigation": "lightblue", - "windspeedsensor": "blue", - "ventilation": "lightblue" + + + StyleBase { + id: styleBase } function interfaceToColor(name) { // Try to load color map from style - if (interfaceColors[name]) { - return interfaceColors[name]; + if (Style.interfaceColors[name]) { + return Style.interfaceColors[name]; } - if (fallbackColors[name]) { - return fallbackColors[name]; + if (styleBase.interfaceColors[name]) { + return styleBase.interfaceColors[name]; } return "grey"; diff --git a/nymea-app/ui/PushButtonAuthPage.qml b/nymea-app/ui/PushButtonAuthPage.qml index badce5e1..9d010707 100644 --- a/nymea-app/ui/PushButtonAuthPage.qml +++ b/nymea-app/ui/PushButtonAuthPage.qml @@ -68,7 +68,7 @@ Page { Label { Layout.fillWidth: true horizontalAlignment: Text.AlignHCenter - color: app.accentColor + color: Style.accentColor text: qsTr("Authentication required") wrapMode: Text.WordWrap font.pixelSize: app.largeFont diff --git a/nymea-app/ui/StyleBase.qml b/nymea-app/ui/StyleBase.qml new file mode 100644 index 00000000..a6d11e11 --- /dev/null +++ b/nymea-app/ui/StyleBase.qml @@ -0,0 +1,46 @@ +import QtQuick 2.0 + +Item { + property color backgroundColor: "#fafafa" + property color foregroundColor: "#202020" + + property color headerBackgroundColor: "#ffffff" + property color headerForegroundColor: "#202020" + + property color tileBackgroundColor: Qt.tint(backgroundColor, Qt.rgba(foregroundColor.r, foregroundColor.g, foregroundColor.b, 0.05)) + property color tileForegroundColor: foregroundColor + property color tileOverlayColor: Qt.tint(backgroundColor, Qt.rgba(foregroundColor.r, foregroundColor.g, foregroundColor.b, 0.1)) + property color tileOverlayForegroundColor: foregroundColor + property int tileRadius: 6 + + property color accentColor: "#ff57baae" + + property color iconColor: "#808080" + + // Note: Font files need to be provided in a "fonts" folder in the style + property string fontFamily: "Ubuntu" + + // Icon/graph colors for various interfaces + property var interfaceColors: { + "temperaturesensor": "red", + "humiditysensor": "deepskyblue", + "moisturesensor":"blue", + "lightsensor": "orange", + "conductivitysensor": "green", + "pressuresensor": "grey", + "noisesensor": "darkviolet", + "co2sensor": "turquoise", + "daylightsensor": "gold", + "presencesensor": "darkblue", + "closablesensor": "green", + "smartmeterproducer": "lightgreen", + "smartmeterconsumer": "orange", + "extendedsmartmeterproducer": "blue", + "extendedsmartmeterconsumer": "blue", + "heating" : "gainsboro", + "thermostat": "dodgerblue", + "irrigation": "lightblue", + "windspeedsensor": "blue", + "ventilation": "lightblue" + } +} diff --git a/nymea-app/ui/appsettings/AppLogPage.qml b/nymea-app/ui/appsettings/AppLogPage.qml index cf24af8a..9a3e4aaa 100644 --- a/nymea-app/ui/appsettings/AppLogPage.qml +++ b/nymea-app/ui/appsettings/AppLogPage.qml @@ -57,7 +57,7 @@ Page { maximumLineCount: 2 wrapMode: Text.WrapAtWordBoundaryOrAnywhere text: model.text - color: model.type === AppLogController.TypeWarning ? "red" : app.foregroundColor + color: model.type === AppLogController.TypeWarning ? "red" : Style.foregroundColor font.pixelSize: app.smallFont } } diff --git a/nymea-app/ui/appsettings/CloudLoginPage.qml b/nymea-app/ui/appsettings/CloudLoginPage.qml index 2079a00b..916d736b 100644 --- a/nymea-app/ui/appsettings/CloudLoginPage.qml +++ b/nymea-app/ui/appsettings/CloudLoginPage.qml @@ -452,7 +452,7 @@ SettingsPageBase { wrapMode: Text.WordWrap text: qsTr("Password forgotten?") font.pixelSize: app.largeFont - color: app.accentColor + color: Style.accentColor } Label { Layout.fillWidth: true; Layout.leftMargin: app.margins; Layout.rightMargin: app.margins @@ -508,7 +508,7 @@ SettingsPageBase { Layout.margins: app.margins wrapMode: Text.WordWrap text: qsTr("Check your email!") - color: app.accentColor + color: Style.accentColor font.pixelSize: app.largeFont } diff --git a/nymea-app/ui/components/BigTile.qml b/nymea-app/ui/components/BigTile.qml index 6266cc8a..63ad4ea3 100644 --- a/nymea-app/ui/components/BigTile.qml +++ b/nymea-app/ui/components/BigTile.qml @@ -1,6 +1,7 @@ import QtQuick 2.9 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.1 +import QtQuick.Controls.Material 2.1 import Nymea 1.0 Item { @@ -25,6 +26,8 @@ import Nymea 1.0 signal clicked(); signal pressAndHold(); + Material.foreground: Style.tileForegroundColor + function wobble() { wobbleAnimation.start(); } @@ -66,18 +69,18 @@ import Nymea 1.0 id: background anchors.fill: parent anchors.margins: app.margins / 2 - radius: 6 + radius: Style.tileRadius gradient: Gradient { GradientStop { position: (headerRow.height + app.margins) / background.height - color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .05)) + color: Style.tileBackgroundColor } GradientStop { position: (headerRow.height + app.margins) / background.height color:root.showHeader ? - Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .1)) - : Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .05)) + Style.tileOverlayColor + : Style.tileBackgroundColor } } } @@ -95,9 +98,11 @@ import Nymea 1.0 Layout.fillWidth: true text: root.thing.name elide: Text.ElideRight + color: Style.tileOverlayForegroundColor } ThingStatusIcons { thing: root.thing +// color: Style.tileOverlayForegroundColor } } diff --git a/nymea-app/ui/components/BrightnessSlider.qml b/nymea-app/ui/components/BrightnessSlider.qml index cfc4f009..28466a1e 100644 --- a/nymea-app/ui/components/BrightnessSlider.qml +++ b/nymea-app/ui/components/BrightnessSlider.qml @@ -55,8 +55,8 @@ Item { Rectangle { id: clipRect anchors.fill: parent - radius: app.radius - color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, 0.1)) + radius: Style.tileRadius + color: Style.tileOverlayColor } LinearGradient { @@ -87,7 +87,7 @@ Item { height: root.orientation === Qt.Horizontal ? parent.height : 8 width: root.orientation === Qt.Horizontal ? 8 : parent.width radius: 4 - color: app.foregroundColor + color: Style.foregroundColor } MouseArea { diff --git a/nymea-app/ui/components/ClosableArrowAnimation.qml b/nymea-app/ui/components/ClosableArrowAnimation.qml index 6602952d..cc8e170b 100644 --- a/nymea-app/ui/components/ClosableArrowAnimation.qml +++ b/nymea-app/ui/components/ClosableArrowAnimation.qml @@ -29,6 +29,7 @@ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ import QtQuick 2.0 +import Nymea 1.0 Item { id: arrows @@ -71,7 +72,7 @@ Item { name: arrows.up ? "../images/up.svg" : "../images/down.svg" width: parent.width height: width - color: app.accentColor + color: Style.accentColor } } } diff --git a/nymea-app/ui/components/ClosablesControlLarge.qml b/nymea-app/ui/components/ClosablesControlLarge.qml index 4e6dcedd..93e516e5 100644 --- a/nymea-app/ui/components/ClosablesControlLarge.qml +++ b/nymea-app/ui/components/ClosablesControlLarge.qml @@ -95,7 +95,7 @@ Item { width: parent.width height: parent.height name: "../images/" + root.type + "/" + root.type + "-inlay.svg" - color: app.foregroundColor + color: Style.foregroundColor } } OpacityMask { @@ -131,7 +131,7 @@ Item { anchors.right: parent.right anchors.margins: parent.width / 6 height: 2 - color: app.accentColor + color: Style.accentColor y: Math.max(parent.minY, Math.min(parent.maxY, dragArea.mouseY)) visible: root.isExtended && dragArea.containsMouse } diff --git a/nymea-app/ui/components/ColorIcon.qml b/nymea-app/ui/components/ColorIcon.qml index 715069cd..01af32e7 100644 --- a/nymea-app/ui/components/ColorIcon.qml +++ b/nymea-app/ui/components/ColorIcon.qml @@ -31,17 +31,15 @@ import QtQuick 2.4 import QtGraphicalEffects 1.0 +import Nymea 1.0 Item { id: icon property string name - property alias color: colorizedImage.color + property alias color: colorizedImage.outColor property int margins: 0 - //TODO: Should be in the style - readonly property color keyColor: "#808080" - property alias status: image.status Image { @@ -59,12 +57,32 @@ Item { cache: true } - ColorOverlay { + ShaderEffect { id: colorizedImage + objectName: "shader" anchors.fill: parent - anchors.margins: parent ? parent.margins : 0 - visible: image.status == Image.Ready - source: image + + // Whether or not a color has been set. + visible: image.status == Image.Ready && outColor != inColor + + property Image source: image + property color outColor: Style.iconColor + // Colorize only pixels of this color, leave the rest untouched. + // This needs to match the basic color of the icon set + property color inColor: "#808080" + property real threshold: 0.1 + + fragmentShader: " + varying highp vec2 qt_TexCoord0; + uniform sampler2D source; + uniform highp vec4 outColor; + uniform highp vec4 inColor; + uniform lowp float threshold; + uniform lowp float qt_Opacity; + void main() { + lowp vec4 sourceColor = texture2D(source, qt_TexCoord0); + gl_FragColor = mix(vec4(outColor.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, inColor.rgb))) * qt_Opacity; + }" } } diff --git a/nymea-app/ui/components/ColorPickerCt.qml b/nymea-app/ui/components/ColorPickerCt.qml index 1f3ea0d9..1b0d9f2c 100644 --- a/nymea-app/ui/components/ColorPickerCt.qml +++ b/nymea-app/ui/components/ColorPickerCt.qml @@ -29,6 +29,7 @@ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ import QtQuick 2.3 +import Nymea 1.0 Item { id: root @@ -46,7 +47,7 @@ Item { anchors.centerIn: parent rotation: -90 border.width: 1 - border.color: app.foregroundColor + border.color: Style.foregroundColor gradient: Gradient { GradientStop { position: 0.0; color: "#efffff" } diff --git a/nymea-app/ui/components/ColorPickerPre510.qml b/nymea-app/ui/components/ColorPickerPre510.qml index 0010dcb9..5ff067f8 100644 --- a/nymea-app/ui/components/ColorPickerPre510.qml +++ b/nymea-app/ui/components/ColorPickerPre510.qml @@ -29,6 +29,7 @@ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ import QtQuick 2.5 +import Nymea 1.0 Item { id: root @@ -43,7 +44,7 @@ Item { height: 15 width: height radius: height / 2 - color: app.accentColor + color: Style.accentColor Rectangle { @@ -176,7 +177,7 @@ Item { Rectangle { anchors.fill: parent - border.color: app.foregroundColor + border.color: Style.foregroundColor border.width: 1 gradient: Gradient { GradientStop { position: 0.0; color: "transparent" } diff --git a/nymea-app/ui/components/ColorTemperaturePicker.qml b/nymea-app/ui/components/ColorTemperaturePicker.qml index ec133b34..7c4b0178 100644 --- a/nymea-app/ui/components/ColorTemperaturePicker.qml +++ b/nymea-app/ui/components/ColorTemperaturePicker.qml @@ -25,7 +25,7 @@ Item { Rectangle { id: clipRect anchors.fill: parent - radius: app.radius + radius: Style.tileRadius } LinearGradient { @@ -48,7 +48,7 @@ Item { height: root.orientation == Qt.Horizontal ? parent.height : 8 width: root.orientation == Qt.Horizontal ? 8 : parent.width radius: 4 - color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, 0.5)) + color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.5)) } MouseArea { diff --git a/nymea-app/ui/components/ConnectionStatusIcon.qml b/nymea-app/ui/components/ConnectionStatusIcon.qml index d3556547..fe4d3cbd 100644 --- a/nymea-app/ui/components/ConnectionStatusIcon.qml +++ b/nymea-app/ui/components/ConnectionStatusIcon.qml @@ -31,5 +31,5 @@ ColorIcon { color: connectedState && connectedState.value === false ? "red" : signalStrengthState && signalStrengthState.value < 20 - ? "orange" : keyColor + ? "orange" : Style.iconColor } diff --git a/nymea-app/ui/components/DatePicker.qml b/nymea-app/ui/components/DatePicker.qml index 9ddc862e..5de471bd 100644 --- a/nymea-app/ui/components/DatePicker.qml +++ b/nymea-app/ui/components/DatePicker.qml @@ -142,7 +142,7 @@ ColumnLayout { property bool isNextMonth: dayOfMonth > daysGrid.daysInMonth property int correctedDayOfMonth: isPreviousMonth ? daysGrid.daysInPreviousMonth + dayOfMonth : isNextMonth ? dayOfMonth - daysGrid.daysInMonth : dayOfMonth - color: !isPreviousMonth && !isNextMonth && correctedDayOfMonth == root.date.getDate() ? app.accentColor : "transparent" + color: !isPreviousMonth && !isNextMonth && correctedDayOfMonth == root.date.getDate() ? Style.accentColor : "transparent" Label { anchors.centerIn: parent opacity: isPreviousMonth || isNextMonth ? 0.6 : 1 diff --git a/nymea-app/ui/components/Dial.qml b/nymea-app/ui/components/Dial.qml index 8749c781..ea29109a 100644 --- a/nymea-app/ui/components/Dial.qml +++ b/nymea-app/ui/components/Dial.qml @@ -42,7 +42,7 @@ ColumnLayout { property bool showValueLabel: true property int steps: 10 - property color color: app.accentColor + property color color: Style.accentColor property int maxAngle: 235 // value : max = angle : maxAngle @@ -157,7 +157,7 @@ ColumnLayout { Rectangle { anchors.fill: rotationButton radius: height / 2 - border.color: app.foregroundColor + border.color: Style.foregroundColor border.width: 2 color: "transparent" opacity: rotateMouseArea.pressed && !rotateMouseArea.grabbed ? .7 : 1 @@ -223,7 +223,7 @@ ColumnLayout { width: height anchors.centerIn: parent radius: height / 2 - border.color: app.foregroundColor + border.color: Style.foregroundColor opacity: .3 border.width: width * .025 color: "transparent" diff --git a/nymea-app/ui/components/EmptyViewPlaceholder.qml b/nymea-app/ui/components/EmptyViewPlaceholder.qml index 4a10a516..b37dbfcc 100644 --- a/nymea-app/ui/components/EmptyViewPlaceholder.qml +++ b/nymea-app/ui/components/EmptyViewPlaceholder.qml @@ -31,6 +31,7 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 +import Nymea 1.0 ColumnLayout { id: root @@ -51,7 +52,7 @@ ColumnLayout { Layout.fillWidth: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter - color: app.accentColor + color: Style.accentColor } Label { id: textLabel diff --git a/nymea-app/ui/components/FancyHeader.qml b/nymea-app/ui/components/FancyHeader.qml deleted file mode 100644 index ce07fcae..00000000 --- a/nymea-app/ui/components/FancyHeader.qml +++ /dev/null @@ -1,194 +0,0 @@ -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -* -* Copyright 2013 - 2020, nymea GmbH -* Contact: contact@nymea.io -* -* This file is part of nymea. -* This project including source code and documentation is protected by -* copyright law, and remains the property of nymea GmbH. All rights, including -* reproduction, publication, editing and translation, are reserved. The use of -* this project is subject to the terms of a license agreement to be concluded -* with nymea GmbH in accordance with the terms of use of nymea GmbH, available -* under https://nymea.io/license -* -* GNU General Public License Usage -* Alternatively, this project may be redistributed and/or modified under the -* terms of the GNU General Public License as published by the Free Software -* Foundation, GNU version 3. This project is distributed in the hope that it -* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty -* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General -* Public License for more details. -* -* You should have received a copy of the GNU General Public License along with -* this project. If not, see . -* -* For any further details and any questions please contact us under -* contact@nymea.io or see our FAQ/Licensing Information on -* https://nymea.io/license/faq -* -* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - -import QtQuick 2.9 -import QtQuick.Controls 2.2 -import QtQuick.Layouts 1.3 -import QtQuick.Controls.Material 2.1 - -ToolBar { - id: root - height: 50 + (menuOpen ? app.iconSize * 3 + app.margins / 2 : 0) - Behavior on height { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } - - property string title - property alias model: menuRepeater.model - - property alias leftButtonVisible: leftButton.visible - property alias leftButtonImageSource: leftButton.imageSource - - signal clicked(int index); - signal leftButtonClicked(); - - property bool menuOpen: false - - RowLayout { - id: mainRow - height: 50 - width: parent.width - opacity: menuOpen ? 0 : 1 - Behavior on opacity { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } - - ToolButton { - id: leftButton - property string imageSource: "../images/navigation-menu.svg" - visible: false - onClicked: root.leftButtonClicked() - - contentItem: Item { - height: 20 - width: 20 - Loader { - id: image - anchors.fill: parent - anchors.margins: app.margins / 2 - opacity: enabled ? 1 : .5 - sourceComponent: leftButton.imageSource.endsWith(".gif") ? animatedImageComponent : stillImageComponent - Component { - id: animatedImageComponent - AnimatedImage { - source: leftButton.imageSource - } - } - Component { - id: stillImageComponent - Image { - source: leftButton.imageSource - } - } - - } - } - } - - Label { - id: label - Layout.fillWidth: true - Layout.fillHeight: true - Layout.topMargin: app.margins; Layout.bottomMargin: app.margins; Layout.leftMargin: leftButton.visible ? 0 : app.margins - verticalAlignment: Text.AlignVCenter - font.pixelSize: app.mediumFont - elide: Text.ElideRight - text: root.title - color: app.headerForegroundColor - } - - HeaderButton { - id: menuButton - imageSource: "../images/navigation-menu.svg" - onClicked: menuOpen = true - } - } - - RowLayout { - height: 50 - anchors.bottom: menuPanel.top - width: parent.width - opacity: menuOpen ? 1 : 0 - visible: opacity > 0 - Behavior on opacity { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } - - Label { - Layout.fillWidth: true - Layout.fillHeight: true - Layout.margins: app.margins - verticalAlignment: Text.AlignVCenter - font.pixelSize: app.mediumFont - elide: Text.ElideRight - text: qsTr("Menu") - color: app.headerForegroundColor - } - - HeaderButton { - imageSource:"../images/close.svg" - onClicked: menuOpen = false - } - } - - Flickable { - id: menuPanel - anchors.bottom: parent.bottom - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottomMargin: app.margins / 2 - width: Math.min(menuRow.childrenRect.width, parent.width) - height: app.iconSize * 3 - contentWidth: menuRow.childrenRect.width - opacity: menuOpen ? 1 : 0 - visible: opacity > 0 - Behavior on opacity { NumberAnimation { easing.type: Easing.InOutQuad; duration: 200 } } - - Row { - id: menuRow - Repeater { - id: menuRepeater - - MouseArea { - height: 80 - width: height - - onClicked: { - menuOpen = false - root.clicked(index) - } - - Rectangle { - anchors.fill: parent - anchors.margins: app.margins / 2 - border.width: 1 - border.color: app.accentColor - color: "transparent" - ColumnLayout { - anchors.fill: parent - anchors.margins: app.margins / 2 - spacing: 0 - ColorIcon { - name: model.iconSource - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize - Layout.alignment: Qt.AlignHCenter - } - Label { - text: model.text - Layout.fillWidth: true - wrapMode: Text.WrapAtWordBoundaryOrAnywhere - maximumLineCount: 2 - elide: Text.ElideRight - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.pixelSize: app.extraSmallFont - color: app.headerForegroundColor - } - } - } - } - } - } - } -} diff --git a/nymea-app/ui/components/HeaderButton.qml b/nymea-app/ui/components/HeaderButton.qml index 859fb1fd..fe0f7cf1 100644 --- a/nymea-app/ui/components/HeaderButton.qml +++ b/nymea-app/ui/components/HeaderButton.qml @@ -34,7 +34,6 @@ import QtQuick.Controls 2.1 ToolButton { property alias imageSource: image.name property alias color: image.color - property alias keyColor: image.keyColor contentItem: Item { height: 20 diff --git a/nymea-app/ui/components/InfoPaneBase.qml b/nymea-app/ui/components/InfoPaneBase.qml index 1664484f..04dfaad6 100644 --- a/nymea-app/ui/components/InfoPaneBase.qml +++ b/nymea-app/ui/components/InfoPaneBase.qml @@ -2,6 +2,7 @@ import QtQuick 2.0 import QtQuick.Controls 2.2 import QtQuick.Controls.Material 2.2 import QtQuick.Layouts 1.2 +import Nymea 1.0 Item { id: root @@ -44,7 +45,7 @@ Item { Rectangle { id: background - color: app.accentColor + color: Style.accentColor anchors.fill: parent } diff --git a/nymea-app/ui/components/KeypadButton.qml b/nymea-app/ui/components/KeypadButton.qml index ff6317c0..397c8d4c 100644 --- a/nymea-app/ui/components/KeypadButton.qml +++ b/nymea-app/ui/components/KeypadButton.qml @@ -39,7 +39,7 @@ Item { property alias imageSource: icon.name - property color activeColor: app.accentColor + property color activeColor: Style.accentColor function activate() { t.start(); @@ -48,7 +48,7 @@ Item { ColorIcon { id: icon anchors.fill: parent - color: active ? root.activeColor : keyColor + color: active ? root.activeColor : Style.iconColor Behavior on color { ColorAnimation { duration: 200 } } property bool active: t.running diff --git a/nymea-app/ui/components/Led.qml b/nymea-app/ui/components/Led.qml index 0acd8ff4..3fc7a994 100644 --- a/nymea-app/ui/components/Led.qml +++ b/nymea-app/ui/components/Led.qml @@ -29,6 +29,7 @@ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ import QtQuick 2.9 +import Nymea 1.0 Item { id: root @@ -46,7 +47,7 @@ Item { color: { switch (root.state) { case "on": - return app.accentColor + return Style.accentColor case "green": return "#73c0b3"; case "off": @@ -58,6 +59,6 @@ Item { } } border.width: 1 - border.color: app.foregroundColor + border.color: Style.foregroundColor } } diff --git a/nymea-app/ui/components/ListFilterInput.qml b/nymea-app/ui/components/ListFilterInput.qml index 526153b0..822be4b8 100644 --- a/nymea-app/ui/components/ListFilterInput.qml +++ b/nymea-app/ui/components/ListFilterInput.qml @@ -60,7 +60,7 @@ Item { imageSource: "../images/erase.svg" onClicked: searchTextField.text = "" enabled: searchTextField.displayText.length > 0 - color: enabled ? app.accentColor : keyColor + color: enabled ? Style.accentColor : Style.iconColor } } ThinDivider {} diff --git a/nymea-app/ui/components/MainPageTabButton.qml b/nymea-app/ui/components/MainPageTabButton.qml index 27c01103..b706caa0 100644 --- a/nymea-app/ui/components/MainPageTabButton.qml +++ b/nymea-app/ui/components/MainPageTabButton.qml @@ -32,6 +32,7 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Controls.Material 2.2 import QtQuick.Layouts 1.3 +import Nymea 1.0 TabButton { id: root @@ -57,13 +58,13 @@ TabButton { width: app.iconSize height: app.iconSize name: root.iconSource - color: root.checked ? app.accentColor : keyColor + color: root.checked ? Style.accentColor : Style.iconColor } Label { id: textLabel text: root.text font.pixelSize: app.smallFont - color: root.checked ? app.accentColor : Material.foreground + color: root.checked ? Style.accentColor : Material.foreground } } } diff --git a/nymea-app/ui/components/MainPageTile.qml b/nymea-app/ui/components/MainPageTile.qml index 250ea509..b4f8b141 100644 --- a/nymea-app/ui/components/MainPageTile.qml +++ b/nymea-app/ui/components/MainPageTile.qml @@ -62,15 +62,15 @@ Item { gradient: Gradient { GradientStop { position: 1 - innerContent.height / background.height - color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .1)) + color: Style.tileOverlayColor } GradientStop { position: 1 - innerContent.height / background.height - color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .05)) + color: Style.tileBackgroundColor } } - radius: 6 + radius: Style.tileRadius } Image { @@ -159,6 +159,7 @@ Item { horizontalAlignment: Text.AlignHCenter maximumLineCount: 2 elide: Text.ElideRight + color: Style.tileForegroundColor } } } @@ -169,6 +170,7 @@ Item { id: innerContent anchors { left: parent.left; bottom: parent.bottom; right: parent.right; margins: app.margins / 2 } height: app.iconSize + app.margins * 2 + Material.foreground: Style.tileOverlayForegroundColor MouseArea { anchors.fill: parent @@ -182,7 +184,7 @@ Item { height: app.smallIconSize width: height name: "../images/system-update.svg" - color: app.accentColor + color: Style.accentColor visible: root.updateStatus } @@ -191,13 +193,13 @@ Item { width: height name: root.isWireless ? "../images/connections/nm-signal-00.svg" : "../images/connections/network-wired-offline.svg" color: root.disconnected ? "red" : "orange" - visible: root.setupStatus == Thing.ThingSetupStatusComplete && (root.disconnected || (root.isWireless && root.signalStrength < 20)) + visible: root.setupStatus == Thing.ThingSetupStatusComplete && (root.disconnected || (root.isWireless && root.signalStrength < 20 && root.signalStrength >= 0)) } ColorIcon { height: app.smallIconSize width: height name: root.setupStatus === Thing.ThingSetupStatusFailed ? "../images/dialog-warning-symbolic.svg" : "../images/settings.svg" - color: root.setupStatus === Thing.ThingSetupStatusFailed ? "red" : keyColor + color: root.setupStatus === Thing.ThingSetupStatusFailed ? "red" : Style.tileForegroundColor visible: root.setupStatus === Thing.ThingSetupStatusFailed || root.setupStatus === Thing.ThingSetupStatusInProgress } ColorIcon { @@ -205,6 +207,7 @@ Item { width: height name: "../images/battery/battery-010.svg" visible: root.setupStatus == Thing.ThingSetupStatusComplete && root.batteryCritical + color: Style.tileForegroundColor } } } diff --git a/nymea-app/ui/components/MeaDialog.qml b/nymea-app/ui/components/MeaDialog.qml index 3ef50105..797ea43e 100644 --- a/nymea-app/ui/components/MeaDialog.qml +++ b/nymea-app/ui/components/MeaDialog.qml @@ -31,6 +31,7 @@ import QtQuick 2.8 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.2 +import Nymea 1.0 Dialog { id: root @@ -70,7 +71,7 @@ Dialog { id: headerColorIcon Layout.preferredHeight: app.hugeIconSize Layout.preferredWidth: height - color: app.accentColor + color: Style.accentColor visible: name.length > 0 } @@ -80,7 +81,7 @@ Dialog { Layout.margins: app.margins wrapMode: Text.WrapAtWordBoundaryOrAnywhere text: root.title - color: app.accentColor + color: Style.accentColor font.pixelSize: app.largeFont } } diff --git a/nymea-app/ui/components/MediaControls.qml b/nymea-app/ui/components/MediaControls.qml index 533a1ed4..fa7daf22 100644 --- a/nymea-app/ui/components/MediaControls.qml +++ b/nymea-app/ui/components/MediaControls.qml @@ -133,7 +133,7 @@ RowLayout { Layout.preferredHeight: app.iconSize Layout.preferredWidth: height imageSource: root.repeatState.value === "One" ? "../images/media-playlist-repeat-one.svg" : "../images/media-playlist-repeat.svg" - color: root.repeatState.value === "None" ? keyColor : app.accentColor + color: root.repeatState.value === "None" ? Style.iconColor : Style.accentColor longpressEnabled: false enabled: root.repeatState !== null opacity: enabled ? 1 : .5 diff --git a/nymea-app/ui/components/MediaPlayer.qml b/nymea-app/ui/components/MediaPlayer.qml index af8b820f..e790acf7 100644 --- a/nymea-app/ui/components/MediaPlayer.qml +++ b/nymea-app/ui/components/MediaPlayer.qml @@ -117,7 +117,7 @@ Item { gradient: Gradient { GradientStop { position: gradientMask.gradientEnd - .5; color: "transparent"} - GradientStop { position: gradientMask.gradientEnd; color: app.backgroundColor } + GradientStop { position: gradientMask.gradientEnd; color: Style.backgroundColor } } } @@ -169,7 +169,7 @@ Item { longpressEnabled: false imageSource: "../images/like.svg" visible: root.likeState !== null - color: root.likeState && root.likeState.value === true ? app.accentColor : keyColor + color: root.likeState && root.likeState.value === true ? Style.accentColor : Style.iconColor onClicked: { engine.thingManager.executeAction(root.thing.id, root.likeState.stateTypeId, [{ paramTypeId: root.likeState.stateTypeId, value: !root.likeState.value}]) } @@ -273,7 +273,7 @@ Item { Layout.preferredWidth: app.iconSize * 3 visible: root.ambeoModeState !== null name: "../images/media/ambeo.svg" - color: root.ambeoModeState && root.ambeoModeState.value !== "Off" ? app.accentColor : keyColor + color: root.ambeoModeState && root.ambeoModeState.value !== "Off" ? Style.accentColor : Style.iconColor MouseArea { anchors.fill: parent onClicked: { @@ -288,7 +288,7 @@ Item { longpressEnabled: false visible: root.nightModeState !== null imageSource: "../images/weathericons/weather-clear-night.svg" - color: root.nightModeState && root.nightModeState.value === true ? app.accentColor : keyColor + color: root.nightModeState && root.nightModeState.value === true ? Style.accentColor : Style.iconColor onClicked: d.pendingCallId = engine.thingManager.executeAction(root.thing.id, root.nightModeState.stateTypeId, [{paramTypeId: root.nightModeState.stateTypeId, value: !root.nightModeState.value}]) } ProgressButton { @@ -375,7 +375,7 @@ Item { visible: root.muteState !== null Layout.alignment: Qt.AlignHCenter imageSource: "../images/audio-speakers-muted-symbolic.svg" - color: root.muteState.value === true ? app.accentColor : keyColor + color: root.muteState.value === true ? Style.accentColor : Style.iconColor onClicked: engine.thingManager.executeAction(root.thing.id, root.muteState.stateTypeId, [{paramTypeId: root.muteState.stateTypeId, value: !root.muteState.value}]); } } @@ -436,10 +436,10 @@ Item { Rectangle { height: pathFlickable.height width: Math.min(150, folderLabel.implicitWidth + app.margins) - border.color: app.backgroundColor + border.color: Style.backgroundColor border.width: 1 radius: 4 - color: Qt.lighter(app.backgroundColor) + color: Qt.lighter(Style.backgroundColor) Label { id: folderLabel text: modelData @@ -548,7 +548,7 @@ Item { Layout.preferredWidth: app.hugeIconSize * 3 Layout.alignment: Qt.AlignHCenter name: "../images/media/ambeo.svg" - color: app.accentColor + color: Style.accentColor } ListView { diff --git a/nymea-app/ui/components/NavigationPad.qml b/nymea-app/ui/components/NavigationPad.qml index 4f29e803..f1386050 100644 --- a/nymea-app/ui/components/NavigationPad.qml +++ b/nymea-app/ui/components/NavigationPad.qml @@ -103,7 +103,7 @@ Item { height: app.iconSize width: app.iconSize radius: width / 2 - border.color: t.running ? app.accentColor : "#808080" + border.color: t.running ? Style.accentColor : "#808080" Behavior on border.color { ColorAnimation { duration: 200 } } Timer { id: t; interval: 400 } border.width: 3 diff --git a/nymea-app/ui/components/NymeaHeader.qml b/nymea-app/ui/components/NymeaHeader.qml index 7741040e..f591586f 100644 --- a/nymea-app/ui/components/NymeaHeader.qml +++ b/nymea-app/ui/components/NymeaHeader.qml @@ -32,6 +32,7 @@ import QtQuick 2.5 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.1 import QtQuick.Controls.Material 2.1 +import Nymea 1.0 Item { id: root @@ -90,7 +91,7 @@ Item { elide: Text.ElideRight text: root.text visible: text.length > 0 - color: app.headerForegroundColor + color: Style.headerForegroundColor } } } @@ -111,7 +112,7 @@ Item { padding: 0 contentItem: Rectangle { - color: infoPane.isError ? "red" : app.accentColor + color: infoPane.isError ? "red" : Style.accentColor implicitHeight: contentRow.implicitHeight RowLayout { id: contentRow diff --git a/nymea-app/ui/components/NymeaItemDelegate.qml b/nymea-app/ui/components/NymeaItemDelegate.qml index 473063cd..555d55d3 100644 --- a/nymea-app/ui/components/NymeaItemDelegate.qml +++ b/nymea-app/ui/components/NymeaItemDelegate.qml @@ -32,6 +32,7 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import QtQuick.Controls.Material 2.2 +import Nymea 1.0 // There's a bug in QtQuick.Controls' SwipeDelegate in that it appears with wrong // background when used in Popups/Dialogs So we need a non-swipable one for those cases @@ -53,15 +54,12 @@ ItemDelegate { property string iconName property string thumbnail property int iconSize: app.iconSize - property color iconColor: app.accentColor - property alias iconKeyColor: icon.keyColor + property color iconColor: Style.accentColor property alias secondaryIconName: secondaryIcon.name property alias secondaryIconColor: secondaryIcon.color - property alias secondaryIconKeyColor: secondaryIcon.keyColor property alias secondaryIconClickable: secondaryIconMouseArea.enabled property alias tertiaryIconName: tertiaryIcon.name property alias tertiaryIconColor: tertiaryIcon.color - property alias tertiaryIconKeyColor: tertiaryIcon.keyColor property alias tertiaryIconClickable: tertiaryIconMouseArea.enabled property var contextOptions: [] diff --git a/nymea-app/ui/components/NymeaSwipeDelegate.qml b/nymea-app/ui/components/NymeaSwipeDelegate.qml index 577a2eec..7c30f16d 100644 --- a/nymea-app/ui/components/NymeaSwipeDelegate.qml +++ b/nymea-app/ui/components/NymeaSwipeDelegate.qml @@ -32,6 +32,7 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import QtQuick.Controls.Material 2.2 +import Nymea 1.0 SwipeDelegate { id: root @@ -48,15 +49,12 @@ SwipeDelegate { property string iconName property string thumbnail property int iconSize: app.iconSize - property color iconColor: app.accentColor - property alias iconKeyColor: icon.keyColor + property color iconColor: Style.accentColor property alias secondaryIconName: secondaryIcon.name property alias secondaryIconColor: secondaryIcon.color - property alias secondaryIconKeyColor: secondaryIcon.keyColor property alias secondaryIconClickable: secondaryIconMouseArea.enabled property alias tertiaryIconName: tertiaryIcon.name property alias tertiaryIconColor: tertiaryIcon.color - property alias tertiaryIconKeyColor: tertiaryIcon.keyColor property alias tertiaryIconClickable: tertiaryIconMouseArea.enabled property var contextOptions: [] @@ -214,7 +212,7 @@ SwipeDelegate { anchors.fill: parent anchors.margins: app.margins name: entry.icon - color: entry.hasOwnProperty("foregroundColor") ? entry.foregroundColor : keyColor + color: entry.hasOwnProperty("foregroundColor") ? entry.foregroundColor : Style.iconColor } onClicked: { swipe.close(); diff --git a/nymea-app/ui/components/PasswordTextField.qml b/nymea-app/ui/components/PasswordTextField.qml index 6a62f7ab..a8d5dd67 100644 --- a/nymea-app/ui/components/PasswordTextField.qml +++ b/nymea-app/ui/components/PasswordTextField.qml @@ -31,6 +31,7 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.2 +import Nymea 1.0 ColumnLayout { id: root @@ -99,7 +100,7 @@ ColumnLayout { } var ret = [] for (var i = 0; i < texts.length; i++) { - var entry = "• ".arg(checks[i] ? "#ffffff" : app.accentColor) + var entry = "• ".arg(checks[i] ? "#ffffff" : Style.accentColor) entry += texts[i] entry += "" ret.push(entry) @@ -112,7 +113,7 @@ ColumnLayout { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: "../images/eye.svg" - color: root.hiddenPassword ? keyColor : app.accentColor + color: root.hiddenPassword ? Style.iconColor : Style.accentColor MouseArea { anchors.fill: parent onClicked: { diff --git a/nymea-app/ui/components/ProgressButton.qml b/nymea-app/ui/components/ProgressButton.qml index 52ef6279..333b68c7 100644 --- a/nymea-app/ui/components/ProgressButton.qml +++ b/nymea-app/ui/components/ProgressButton.qml @@ -30,6 +30,7 @@ import QtQuick 2.9 import QtQuick.Layouts 1.3 +import Nymea 1.0 Item { id: root @@ -39,7 +40,6 @@ Item { property string imageSource property string longpressImageSource: imageSource property bool repeat: false - property alias keyColor: icon.keyColor property alias color: icon.color property bool longpressEnabled: true @@ -98,7 +98,7 @@ Item { anchors.fill: parent anchors.margins: -app.margins / 2 radius: width / 2 - color: app.foregroundColor + color: Style.foregroundColor opacity: buttonDelegate.pressed || buttonDelegate.containsMouse ? .08 : 0 Behavior on opacity { NumberAnimation { duration: 200 } @@ -132,7 +132,7 @@ Item { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = Qt.rgba(1, 0, 0, 1); ctx.lineWidth = canvas.penWidth - ctx.strokeStyle = app.accentColor + ctx.strokeStyle = Style.accentColor var start = -Math.PI / 2; var stop = -Math.PI / 2; diff --git a/nymea-app/ui/components/SettingsPageBase.qml b/nymea-app/ui/components/SettingsPageBase.qml index 4618763b..6cafcc28 100644 --- a/nymea-app/ui/components/SettingsPageBase.qml +++ b/nymea-app/ui/components/SettingsPageBase.qml @@ -47,7 +47,7 @@ Page { Flickable { anchors.fill: parent - contentHeight: contentColumn.height + contentHeight: contentColumn.height + app.margins interactive: contentHeight > height ScrollBar.vertical: ScrollBar {} diff --git a/nymea-app/ui/components/SettingsPageSectionHeader.qml b/nymea-app/ui/components/SettingsPageSectionHeader.qml index de274e45..25ab43fb 100644 --- a/nymea-app/ui/components/SettingsPageSectionHeader.qml +++ b/nymea-app/ui/components/SettingsPageSectionHeader.qml @@ -31,6 +31,7 @@ import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.2 +import Nymea 1.0 Label { Layout.fillWidth: true @@ -38,6 +39,6 @@ Label { Layout.leftMargin: app.margins Layout.rightMargin: app.margins Layout.bottomMargin: app.margins - color: app.accentColor + color: Style.accentColor wrapMode: Text.WordWrap } diff --git a/nymea-app/ui/components/SetupStatusIcon.qml b/nymea-app/ui/components/SetupStatusIcon.qml index 62d800c3..434e343f 100644 --- a/nymea-app/ui/components/SetupStatusIcon.qml +++ b/nymea-app/ui/components/SetupStatusIcon.qml @@ -12,7 +12,7 @@ ColorIcon { name: setupFailed ? "../images/dialog-warning-symbolic.svg" : setupInProgress ? "../images/settings.svg" : "../images/tick.svg" - color: setupFailed ? "red" : keyColor + color: setupFailed ? "red" : Style.iconColor RotationAnimation on rotation { from: 0; to: 360 diff --git a/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml b/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml index 28391abe..92867a38 100644 --- a/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml +++ b/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml @@ -54,7 +54,7 @@ RowLayout { HeaderButton { anchors.centerIn: parent imageSource: root.repeatState.value === "One" ? "../images/media-playlist-repeat-one.svg" : "../images/media-playlist-repeat.svg" - color: root.repeatState.value === "None" ? keyColor : app.accentColor + color: root.repeatState.value === "None" ? Style.iconColor : Style.accentColor property var allowedValues: ["None", "All", "One"] onClicked: { var params = [] @@ -75,7 +75,7 @@ RowLayout { HeaderButton { anchors.centerIn: parent imageSource: "../images/media-playlist-shuffle.svg" - color: root.shuffleState.value === true ? app.accentColor: keyColor + color: root.shuffleState.value === true ? Style.accentColor: Style.iconColor onClicked: { var params = [] var param = {} @@ -151,7 +151,7 @@ RowLayout { HeaderButton { visible: root.muteState !== null imageSource: "../images/audio-speakers-muted-symbolic.svg" - color: root.muteState.value === true ? app.accentColor : keyColor + color: root.muteState.value === true ? Style.accentColor : Style.iconColor onClicked: engine.thingManager.executeAction(root.thing.id, root.muteState.stateTypeId, [{paramTypeId: root.muteState.stateTypeId, value: !root.muteState.value}]); } } diff --git a/nymea-app/ui/components/ShutterControls.qml b/nymea-app/ui/components/ShutterControls.qml index e845d395..a168082c 100644 --- a/nymea-app/ui/components/ShutterControls.qml +++ b/nymea-app/ui/components/ShutterControls.qml @@ -52,7 +52,7 @@ RowLayout { ProgressButton { longpressEnabled: false imageSource: root.invert ? "../images/down.svg" : "../images/up.svg" - color: root.openState && root.openState.value === "opening" ? Material.accent : keyColor + color: root.openState && root.openState.value === "opening" ? Material.accent : Style.iconColor onClicked: { engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("open").id) root.activated("open") @@ -76,7 +76,7 @@ RowLayout { ProgressButton { imageSource: root.invert ? "../images/up.svg" : "../images/down.svg" longpressEnabled: false - color: root.openState && root.openState.value === "closing" ? Material.accent : keyColor + color: root.openState && root.openState.value === "closing" ? Material.accent : Style.iconColor onClicked: { engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("close").id) root.activated("close") diff --git a/nymea-app/ui/components/SmartMeterChart.qml b/nymea-app/ui/components/SmartMeterChart.qml index 540d40d4..1d14fee1 100644 --- a/nymea-app/ui/components/SmartMeterChart.qml +++ b/nymea-app/ui/components/SmartMeterChart.qml @@ -37,12 +37,12 @@ import Nymea 1.0 ChartView { id: chart - backgroundColor: app.backgroundColor + backgroundColor: Style.backgroundColor theme: ChartView.ChartThemeLight - legend.labelColor: app.foregroundColor + legend.labelColor: Style.foregroundColor legend.font.pixelSize: app.smallFont legend.alignment: Qt.AlignRight - titleColor: app.foregroundColor + titleColor: Style.foregroundColor property ThingsProxy meters: null property int multiplier: 1 @@ -78,7 +78,7 @@ ChartView { value = value - (totalProducedState.value * chart.multiplier) } var slice = pieSeries.append(thing.name, Math.max(0, value)) - var color = app.accentColor + var color = Style.accentColor for (var j = 0; j < i; j+=2) { if (i % 2 == 0) { color = Qt.lighter(color, 1.2); diff --git a/nymea-app/ui/components/ThinDivider.qml b/nymea-app/ui/components/ThinDivider.qml index 6ff353e9..195a04e1 100644 --- a/nymea-app/ui/components/ThinDivider.qml +++ b/nymea-app/ui/components/ThinDivider.qml @@ -30,9 +30,10 @@ import QtQuick 2.0 import QtQuick.Layouts 1.2 +import Nymea 1.0 Rectangle { height: 1 Layout.fillWidth: true - color: app.accentColor + color: Style.accentColor } diff --git a/nymea-app/ui/components/ThingInfoPane.qml b/nymea-app/ui/components/ThingInfoPane.qml index 66b2945d..f9d387c9 100644 --- a/nymea-app/ui/components/ThingInfoPane.qml +++ b/nymea-app/ui/components/ThingInfoPane.qml @@ -28,7 +28,7 @@ InfoPaneBase { shown: setupInProgress || setupFailure || batteryState !== null || (connectedState !== null && connectedState.value === false) || signalStrengthState !== null || updateAvailable color: alertState ? "red" - : highlightState ? app.accentColor : "transparent" + : highlightState ? Style.accentColor : "transparent" contentItem: RowLayout { id: contentRow @@ -36,7 +36,7 @@ InfoPaneBase { Label { id: textLabel - color: root.alertState || root.highlightState ? "white" : app.foregroundColor + color: root.alertState || root.highlightState ? "white" : Style.foregroundColor font.pixelSize: app.smallFont Layout.fillWidth: true horizontalAlignment: Text.AlignRight @@ -59,7 +59,7 @@ InfoPaneBase { ThingStatusIcons { thing: root.thing - color: root.alertState || root.highlightState ? "white" : keyColor + color: root.alertState || root.highlightState ? "white" : Style.iconColor } } diff --git a/nymea-app/ui/components/ThingStatusIcons.qml b/nymea-app/ui/components/ThingStatusIcons.qml index f2bfaadb..953730e1 100644 --- a/nymea-app/ui/components/ThingStatusIcons.qml +++ b/nymea-app/ui/components/ThingStatusIcons.qml @@ -10,8 +10,7 @@ RowLayout { property Thing thing: null - property color color: keyColor - readonly property color keyColor: updateStatusIcon.keyColor + property color color: Style.iconColor signal updateIconClicked(); signal batteryIconClicked(); @@ -24,7 +23,7 @@ RowLayout { Layout.preferredWidth: height thing: root.thing visible: setupStatusIcon.setupStatus == Thing.ThingSetupStatusComplete && connectionStatusIcon.isConnected && (updateAvailable || updateRunning) - Binding { target: updateStatusIcon; property: "color"; value: root.color; when: root.color !== root.keyColor } + Binding { target: updateStatusIcon; property: "color"; value: root.color; when: root.color !== Style.iconColor } MouseArea { anchors.fill: parent anchors.margins: -app.margins / 4 @@ -62,7 +61,7 @@ RowLayout { Layout.preferredWidth: height thing: root.thing visible: root.thing.setupStatus == Thing.ThingSetupStatusComplete && (hasBatteryLevel || isCritical) - Binding { target: batteryStatusIcon; property: "color"; value: root.color; when: root.color !== root.keyColor } + Binding { target: batteryStatusIcon; property: "color"; value: root.color; when: root.color !== Style.iconColor } MouseArea { anchors.fill: parent anchors.margins: -app.margins / 4 @@ -91,7 +90,7 @@ RowLayout { Layout.preferredWidth: height thing: root.thing visible: root.thing.setupStatus == Thing.ThingSetupStatusComplete && (hasSignalStrength || !isConnected) - Binding { target: connectionStatusIcon; property: "color"; value: root.color; when: root.color !== root.keyColor } + Binding { target: connectionStatusIcon; property: "color"; value: root.color; when: root.color !== Style.iconColor } MouseArea { anchors.fill: parent anchors.margins: -app.margins / 4 @@ -120,7 +119,7 @@ RowLayout { Layout.preferredWidth: height thing: root.thing visible: setupFailed || setupInProgress - Binding { target: setupStatusIcon; property: "color"; value: root.color; when: root.color !== root.keyColor } + Binding { target: setupStatusIcon; property: "color"; value: root.color; when: root.color !== Style.iconColor } MouseArea { anchors.fill: parent anchors.margins: -app.margins / 4 diff --git a/nymea-app/ui/components/TimePicker.qml b/nymea-app/ui/components/TimePicker.qml index 9e2fc6af..f2ee0b04 100644 --- a/nymea-app/ui/components/TimePicker.qml +++ b/nymea-app/ui/components/TimePicker.qml @@ -206,7 +206,7 @@ ColumnLayout { Rectangle { anchors { left: parent.left; top: parent.top; right: parent.right } height: width - color: app.accentColor + color: Style.accentColor radius: width / 2 } Rectangle { @@ -214,7 +214,7 @@ ColumnLayout { anchors.horizontalCenter: parent.horizontalCenter width: 5 height: parent.height / 2 - color: app.accentColor + color: Style.accentColor radius: width / 2 } } diff --git a/nymea-app/ui/components/UpdateRunningOverlay.qml b/nymea-app/ui/components/UpdateRunningOverlay.qml index f3c29652..cf487b39 100644 --- a/nymea-app/ui/components/UpdateRunningOverlay.qml +++ b/nymea-app/ui/components/UpdateRunningOverlay.qml @@ -53,7 +53,7 @@ Rectangle { width: height Layout.alignment: Qt.AlignHCenter name: Qt.resolvedUrl("../images/system-update.svg") - color: app.accentColor + color: Style.accentColor PropertyAnimation on rotation { from: 0; to: 360; duration: 2000 diff --git a/nymea-app/ui/components/UpdateStatusIcon.qml b/nymea-app/ui/components/UpdateStatusIcon.qml index f59e90b5..36b271db 100644 --- a/nymea-app/ui/components/UpdateStatusIcon.qml +++ b/nymea-app/ui/components/UpdateStatusIcon.qml @@ -11,7 +11,7 @@ ColorIcon { readonly property bool updateRunning: updateStatusState && updateStatusState.value === "updating" name: "../images/system-update.svg" - color: app.accentColor + color: Style.accentColor RotationAnimation on rotation { from: 0; to: 360 diff --git a/nymea-app/ui/connection/CertificateDialog.qml b/nymea-app/ui/connection/CertificateDialog.qml index 85fcf792..2ebb4477 100644 --- a/nymea-app/ui/connection/CertificateDialog.qml +++ b/nymea-app/ui/connection/CertificateDialog.qml @@ -57,7 +57,7 @@ Dialog { Layout.preferredHeight: app.iconSize * 2 Layout.preferredWidth: height name: "../images/lock-closed.svg" - color: app.accentColor + color: Style.accentColor } Label { @@ -65,7 +65,7 @@ Dialog { Layout.fillWidth: true wrapMode: Text.WordWrap text: qsTr("Certificate information") - color: app.accentColor + color: Style.accentColor font.pixelSize: app.largeFont } } diff --git a/nymea-app/ui/connection/ConnectPage.qml b/nymea-app/ui/connection/ConnectPage.qml index 6d2f3b3f..70dd5ae0 100644 --- a/nymea-app/ui/connection/ConnectPage.qml +++ b/nymea-app/ui/connection/ConnectPage.qml @@ -54,24 +54,6 @@ Page { } } -// header: FancyHeader { -// title: qsTr("Connect %1").arg(app.systemName) -// model: ListModel { -// ListElement { iconSource: "../images/connections/network-vpn.svg"; text: qsTr("Manual connection"); page: "ManualConnectPage.qml" } -// ListElement { iconSource: "../images/connections/bluetooth.svg"; text: qsTr("Wireless setup"); page: "wifisetup/BluetoothDiscoveryPage.qml"; } -// ListElement { iconSource: "../images/private-browsing.svg"; text: qsTr("Demo mode"); page: "" } -// ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "../appsettings/AppSettingsPage.qml" } -// } -// onClicked: { -// if (index === 2) { -// var host = discovery.nymeaHosts.createWanHost("Demo server", "nymea://nymea.nymea.io:2222") -// engine.jsonRpcClient.connectToHost(host) -// } else { -// pageStack.push(model.get(index).page, {nymeaDiscovery: discovery}); -// } -// } -// } - readonly property bool haveHosts: hostsProxy.count > 0 @@ -312,7 +294,7 @@ Page { Layout.preferredHeight: app.iconSize * 2 Layout.preferredWidth: height name: "../images/info.svg" - color: app.accentColor + color: Style.accentColor } Label { @@ -320,7 +302,7 @@ Page { Layout.fillWidth: true wrapMode: Text.WrapAtWordBoundaryOrAnywhere text: dialog.title - color: app.accentColor + color: Style.accentColor font.pixelSize: app.largeFont } } diff --git a/nymea-app/ui/connection/LoginPage.qml b/nymea-app/ui/connection/LoginPage.qml index 4affb1b4..13968d4c 100644 --- a/nymea-app/ui/connection/LoginPage.qml +++ b/nymea-app/ui/connection/LoginPage.qml @@ -96,7 +96,7 @@ Page { Layout.preferredHeight: app.iconSize * 2 Layout.preferredWidth: app.iconSize * 2 name: "../images/lock-closed.svg" - color: app.accentColor + color: Style.accentColor } Label { diff --git a/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml b/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml index a68ea609..4d1f3a3a 100644 --- a/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml +++ b/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml @@ -159,7 +159,7 @@ Page { Label { Layout.fillWidth: true text: qsTr("Uh oh") - color: app.accentColor + color: Style.accentColor font.pixelSize: app.largeFont } diff --git a/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml b/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml index 008aedac..2c1025fa 100644 --- a/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml +++ b/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml @@ -79,7 +79,7 @@ Page { enabled: !networkManagerController.manager.working subText: model.hostAddress - iconColor: model.selectedNetwork ? app.accentColor : "#808080" + iconColor: model.selectedNetwork ? Style.accentColor : "#808080" iconName: { if (model.protected) { if (model.signalStrength <= 25) @@ -175,7 +175,7 @@ Page { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: "../images/eye.svg" - color: passwordTextField.showPassword ? app.accentColor : keyColor + color: passwordTextField.showPassword ? Style.accentColor : Style.iconColor MouseArea { anchors.fill: parent onClicked: passwordTextField.showPassword = !passwordTextField.showPassword diff --git a/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml b/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml index 0738dd56..00b0943d 100644 --- a/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml +++ b/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml @@ -115,7 +115,7 @@ Page { Layout.preferredWidth: height Layout.alignment: Qt.AlignCenter name: "../images/tick.svg" - color: app.accentColor + color: Style.accentColor } Label { Layout.fillWidth: true diff --git a/nymea-app/ui/customviews/GarageController.qml b/nymea-app/ui/customviews/GarageController.qml index 5f77fa2c..27912478 100644 --- a/nymea-app/ui/customviews/GarageController.qml +++ b/nymea-app/ui/customviews/GarageController.qml @@ -93,7 +93,7 @@ Item { name: arrows.up ? "../images/up.svg" : "../images/down.svg" width: parent.width height: width - color: app.accentColor + color: Style.accentColor } } } diff --git a/nymea-app/ui/customviews/GenericTypeGraph.qml b/nymea-app/ui/customviews/GenericTypeGraph.qml index 0bfe093e..f9bb17b4 100644 --- a/nymea-app/ui/customviews/GenericTypeGraph.qml +++ b/nymea-app/ui/customviews/GenericTypeGraph.qml @@ -49,7 +49,7 @@ Item { readonly property bool hasConnectable: deviceClass.interfaces.indexOf("connectable") >= 0 readonly property var connectedStateType: hasConnectable ? deviceClass.stateTypes.findByName("connected") : null - property color color: app.accentColor + property color color: Style.accentColor property string iconSource: "" LogsModelNg { @@ -127,7 +127,7 @@ Item { margins.right: 0 backgroundColor: Material.background legend.visible: false - legend.labelColor: app.foregroundColor + legend.labelColor: Style.foregroundColor animationDuration: 300 animationOptions: ChartView.SeriesAnimations @@ -154,9 +154,9 @@ Item { return "%d"; } } - labelsColor: app.foregroundColor + labelsColor: Style.foregroundColor tickCount: root.stateType.type.toLowerCase() === "bool" ? 2 : chartView.height / 40 - color: Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .2) + color: Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, .2) gridLineColor: color } @@ -170,10 +170,10 @@ Item { DateTimeAxis { id: xAxis gridVisible: false - color: Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .2) + color: Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, .2) tickCount: chartView.width / 70 labelsFont.pixelSize: app.smallFont - labelsColor: app.foregroundColor + labelsColor: Style.foregroundColor property int timeDiff: (xAxis.max.getTime() - xAxis.min.getTime()) / 1000 function getTimeSpanString() { @@ -213,7 +213,7 @@ Item { } return Qt.formatDate(xAxis.min) + " - " + Qt.formatDate(xAxis.max) + " (" + getTimeSpanString() + ")" } - titleBrush: app.foregroundColor + titleBrush: Style.foregroundColor format: { if (timeDiff < 60) { // one minute return "mm:ss" @@ -354,7 +354,7 @@ Item { axisX: xAxis axisY: yAxis pointLabelsVisible: root.stateType.type.toLowerCase() !== "bool" - pointLabelsColor: app.foregroundColor + pointLabelsColor: Style.foregroundColor pointLabelsFont.pixelSize: app.smallFont pointLabelsFormat: "@yPoint" pointLabelsClipping: false diff --git a/nymea-app/ui/customviews/WeatherView.qml b/nymea-app/ui/customviews/WeatherView.qml index a35b8ad5..c509e34a 100644 --- a/nymea-app/ui/customviews/WeatherView.qml +++ b/nymea-app/ui/customviews/WeatherView.qml @@ -98,7 +98,7 @@ Item { Layout.preferredWidth: parent.mainImageSize Layout.preferredHeight: width name: weatherConditionState ? "../images/weathericons/weather-" + weatherConditionState.value + ".svg" : "" - color: app.foregroundColor + color: Style.foregroundColor } Item { diff --git a/nymea-app/ui/delegates/InterfaceTile.qml b/nymea-app/ui/delegates/InterfaceTile.qml index 44631a85..d7791b5a 100644 --- a/nymea-app/ui/delegates/InterfaceTile.qml +++ b/nymea-app/ui/delegates/InterfaceTile.qml @@ -39,7 +39,7 @@ MainPageTile { id: root text: iface ? iface.displayName.toUpperCase() : qsTr("uncategorized").toUpperCase() iconName: iface ? interfaceToIcon(iface.name) : interfaceToIcon("uncategorized") - iconColor: app.accentColor + iconColor: Style.accentColor disconnected: devicesSubProxyConnectables.count > 0 isWireless: devicesSubProxyConnectables.count > 0 && devicesSubProxyConnectables.get(0).thingClass.interfaces.indexOf("wirelessconnectable") >= 0 batteryCritical: devicesSubProxyBattery.count > 0 @@ -683,7 +683,7 @@ MainPageTile { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: sensorsRoot.currentSensor >= 0 && sensorsRoot.shownSensors.length > sensorsRoot.currentSensor ? app.interfaceToIcon(sensorsRoot.shownSensors[sensorsRoot.currentSensor].ifaceName) : "" - color: sensorsRoot.currentSensor >= 0 && sensorsRoot.shownSensors.length > sensorsRoot.currentSensor ? app.interfaceToColor(sensorsRoot.shownSensors[sensorsRoot.currentSensor].ifaceName) : keyColor + color: sensorsRoot.currentSensor >= 0 && sensorsRoot.shownSensors.length > sensorsRoot.currentSensor ? app.interfaceToColor(sensorsRoot.shownSensors[sensorsRoot.currentSensor].ifaceName) : Style.iconColor } ColumnLayout { @@ -698,7 +698,7 @@ MainPageTile { text: sensorsRoot.shownStateType ? (Math.round(Types.toUiValue(sensorsRoot.device.states.getState(sensorsRoot.shownStateType.id).value, sensorsRoot.shownStateType.unit) * 100) / 100) + " " + Types.toUiUnit(sensorsRoot.shownStateType.unit) : "" - // font.pixelSize: app.smallFont + font.pixelSize: app.smallFont Layout.fillWidth: true visible: sensorsRoot.shownStateType && sensorsRoot.shownStateType.type.toLowerCase() !== "bool" elide: Text.ElideRight diff --git a/nymea-app/ui/delegates/ParamDelegate.qml b/nymea-app/ui/delegates/ParamDelegate.qml index 846a01f9..2d71dee8 100644 --- a/nymea-app/ui/delegates/ParamDelegate.qml +++ b/nymea-app/ui/delegates/ParamDelegate.qml @@ -336,7 +336,7 @@ ItemDelegate { touchDelegate: Rectangle { height: colorPickerCt.height width: 5 - color: app.accentColor + color: Style.accentColor } } } diff --git a/nymea-app/ui/delegates/ThingDelegate.qml b/nymea-app/ui/delegates/ThingDelegate.qml index 5df7ebdb..5ab29fca 100644 --- a/nymea-app/ui/delegates/ThingDelegate.qml +++ b/nymea-app/ui/delegates/ThingDelegate.qml @@ -62,12 +62,12 @@ NymeaSwipeDelegate { return "red" } if (thing.setupStatus == Thing.ThingSetupStatusInProgress) { - return iconKeyColor + return Style.iconColor } if (connectedState && connectedState.value === false) { return "red" } - return iconKeyColor + return Style.iconColor } property Device device: null diff --git a/nymea-app/ui/delegates/ThingTile.qml b/nymea-app/ui/delegates/ThingTile.qml index 07f76191..96584526 100644 --- a/nymea-app/ui/delegates/ThingTile.qml +++ b/nymea-app/ui/delegates/ThingTile.qml @@ -39,7 +39,7 @@ MainPageTile { id: root text: device.name.toUpperCase() iconName: app.interfacesToIcon(deviceClass.interfaces) - iconColor: app.accentColor + iconColor: Style.accentColor isWireless: deviceClass.interfaces.indexOf("wirelessconnectable") >= 0 batteryCritical: batteryCriticalState && batteryCriticalState.value === true disconnected: connectedState && connectedState.value === false @@ -128,7 +128,7 @@ MainPageTile { name: deviceClass.interfaces.indexOf("light") >= 0 ? (powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg") : app.interfacesToIcon(deviceClass.interfaces) - color: powerState.value === true ? app.accentColor : keyColor + color: powerState.value === true ? Style.accentColor : Style.iconColor } onClicked: { var deviceClass = engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId); diff --git a/nymea-app/ui/devicelistpages/ClosablesDeviceListPage.qml b/nymea-app/ui/devicelistpages/ClosablesDeviceListPage.qml index 9f773d8a..4c42ff95 100644 --- a/nymea-app/ui/devicelistpages/ClosablesDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/ClosablesDeviceListPage.qml @@ -124,8 +124,8 @@ DeviceListPageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize color: itemDelegate.movingState && itemDelegate.movingState.value === true - ? app.accentColor - : keyColor + ? Style.accentColor + : Style.iconColor name: itemDelegate.percentageState ? root.iconBasename + "-" + app.pad(Math.round(itemDelegate.percentageState.value / 10) * 10, 3) + ".svg" : root.iconBasename + "-050.svg" diff --git a/nymea-app/ui/devicelistpages/GarageThingListPage.qml b/nymea-app/ui/devicelistpages/GarageThingListPage.qml index 15e22786..1d0898ac 100644 --- a/nymea-app/ui/devicelistpages/GarageThingListPage.qml +++ b/nymea-app/ui/devicelistpages/GarageThingListPage.qml @@ -90,8 +90,8 @@ DeviceListPageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize color: itemDelegate.movingState && itemDelegate.movingState.value === true - ? app.accentColor - : keyColor + ? Style.accentColor + : Style.iconColor name: itemDelegate.percentageState ? root.iconBasename + "-" + app.pad(Math.round(itemDelegate.percentageState.value / 10) * 10, 3) + ".svg" : root.iconBasename + "-050.svg" diff --git a/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml b/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml index af130a1a..02d5c402 100644 --- a/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/GenericDeviceListPage.qml @@ -94,7 +94,7 @@ DeviceListPageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: app.interfacesToIcon(itemDelegate.thing.thingClass.interfaces) - color: itemDelegate.powerState && itemDelegate.powerState.value === true ? app.accentColor : keyColor + color: itemDelegate.powerState && itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor } Label { diff --git a/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml b/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml index 491b43c7..c0a83849 100644 --- a/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/LightsDeviceListPage.qml @@ -103,7 +103,7 @@ DeviceListPageBase { property State colorTemperatureState: thing.stateByName("colorTemperature") property bool tileColored: isEnabled && colorState && powerState.value === true - property bool colorInverted: tileColored && NymeaUtils.isDark(app.foregroundColor) === NymeaUtils.isDark(colorState.value) + property bool colorInverted: tileColored && NymeaUtils.isDark(Style.foregroundColor) === NymeaUtils.isDark(colorState.value) onClicked: { if (isEnabled && (colorState || colorTemperatureState)) { @@ -123,7 +123,7 @@ DeviceListPageBase { color: itemDelegate.tileColored ? itemDelegate.colorState.value : "#00000000" implicitHeight: contentColumn.implicitHeight Behavior on implicitHeight { NumberAnimation { duration: 100 } } - radius: 6 + radius: Style.tileRadius ColumnLayout { id: contentColumn @@ -139,11 +139,11 @@ DeviceListPageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: itemDelegate.powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg" - color: itemDelegate.powerState.value === true ? app.accentColor : keyColor + color: itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor Binding { target: lightIcon property: "color" - value: itemDelegate.colorInverted ? app.backgroundColor : app.foregroundColor + value: itemDelegate.colorInverted ? Style.backgroundColor : Style.foregroundColor when: itemDelegate.tileColored } } @@ -158,7 +158,7 @@ DeviceListPageBase { Binding { target: nameLabel property: "color" - value: itemDelegate.colorInverted ? app.backgroundColor : app.foregroundColor + value: itemDelegate.colorInverted ? Style.backgroundColor : Style.foregroundColor when: itemDelegate.tileColored } } @@ -253,8 +253,8 @@ DeviceListPageBase { Layout.fillWidth: true Layout.preferredHeight: 12 visible: itemDelegate.powerState.value === true && itemDelegate.brightnessState != null - radius: 6 - color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .1)) + radius: Style.tileRadius + color: Style.tileOverlayColor enabled: itemDelegate.isEnabled Rectangle { diff --git a/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml b/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml index 9c44229f..9f31566d 100644 --- a/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/MediaDeviceListPage.qml @@ -150,7 +150,7 @@ DeviceListPageBase { anchors.centerIn: parent height: parent.width width: parent.height - radius: 6 + radius: Style.tileRadius gradient: Gradient { GradientStop { position: 0; color: "#00FF0000" } GradientStop { position: 0.2; color: "#15FF0000" } diff --git a/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml b/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml index ee9b6117..7cbecc2c 100644 --- a/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml @@ -88,7 +88,7 @@ DeviceListPageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: app.interfaceToIcon("powersocket") - color: itemDelegate.powerState.value === true ? app.accentColor : keyColor + color: itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor } Label { diff --git a/nymea-app/ui/devicepages/BoolSensorDevicePage.qml b/nymea-app/ui/devicepages/BoolSensorDevicePage.qml index fb4f1d04..82511cb8 100644 --- a/nymea-app/ui/devicepages/BoolSensorDevicePage.qml +++ b/nymea-app/ui/devicepages/BoolSensorDevicePage.qml @@ -59,7 +59,7 @@ Item { anchors.fill: parent anchors.margins: app.margins * 1.5 name: root.powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg" - color: root.powerState.value === true ? app.accentColor : keyColor + color: root.powerState.value === true ? Style.accentColor : Style.iconColor } } diff --git a/nymea-app/ui/devicepages/DeviceLogPage.qml b/nymea-app/ui/devicepages/DeviceLogPage.qml index cbd952a8..0cbb75da 100644 --- a/nymea-app/ui/devicepages/DeviceLogPage.qml +++ b/nymea-app/ui/devicepages/DeviceLogPage.qml @@ -49,7 +49,7 @@ Page { HeaderButton { imageSource: "../images/filters.svg" - color: logsModelNg.filterEnabled ? app.accentColor : keyColor + color: logsModelNg.filterEnabled ? Style.accentColor : Style.iconColor onClicked: logsModelNg.filterEnabled = !logsModelNg.filterEnabled visible: root.filterTypeIds.length === 0 } @@ -179,12 +179,12 @@ Page { case LogEntry.LoggingSourceSystem: case LogEntry.LoggingSourceActions: case LogEntry.LoggingSourceEvents: - return app.accentColor + return Style.accentColor case LogEntry.LoggingSourceRules: if (model.loggingEventType === LogEntry.LoggingEventTypeActiveChange) { - return model.value === true ? "green" : keyColor + return model.value === true ? "green" : Style.iconColor } - return app.accentColor + return Style.accentColor } } name: { @@ -310,7 +310,7 @@ Page { width: height * 2 color: parent.value // radius: width / 2 - border.color: app.foregroundColor + border.color: Style.foregroundColor border.width: 1 } } diff --git a/nymea-app/ui/devicepages/DoorbellDevicePage.qml b/nymea-app/ui/devicepages/DoorbellDevicePage.qml index 549fd165..0895af09 100644 --- a/nymea-app/ui/devicepages/DoorbellDevicePage.qml +++ b/nymea-app/ui/devicepages/DoorbellDevicePage.qml @@ -58,18 +58,16 @@ DevicePageBase { width: height name: "../images/notification.svg" - color: keyColor - SequentialAnimation { id: ringAnimation - ColorAnimation { target: doorbellIcon; property: "color"; from: doorbellIcon.keyColor; to: app.accentColor; duration: 200 } - ColorAnimation { target: doorbellIcon; property: "color"; from: app.accentColor; to: doorbellIcon.keyColor; duration: 300 } - ColorAnimation { target: doorbellIcon; property: "color"; from: doorbellIcon.keyColor; to: app.accentColor; duration: 200 } - ColorAnimation { target: doorbellIcon; property: "color"; from: app.accentColor; to: doorbellIcon.keyColor; duration: 300 } - ColorAnimation { target: doorbellIcon; property: "color"; from: doorbellIcon.keyColor; to: app.accentColor; duration: 200 } - ColorAnimation { target: doorbellIcon; property: "color"; from: app.accentColor; to: doorbellIcon.keyColor; duration: 300 } - ColorAnimation { target: doorbellIcon; property: "color"; from: doorbellIcon.keyColor; to: app.accentColor; duration: 200 } - ColorAnimation { target: doorbellIcon; property: "color"; from: app.accentColor; to: doorbellIcon.keyColor; duration: 300 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.iconColor; to: Style.accentColor; duration: 200 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.accentColor; to: Style.iconColor; duration: 300 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.iconColor; to: Style.accentColor; duration: 200 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.accentColor; to: Style.iconColor; duration: 300 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.iconColor; to: Style.accentColor; duration: 200 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.accentColor; to: Style.iconColor; duration: 300 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.iconColor; to: Style.accentColor; duration: 200 } + ColorAnimation { target: doorbellIcon; property: "color"; from: Style.accentColor; to: Style.iconColor; duration: 300 } } Connections { @@ -106,7 +104,7 @@ DevicePageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: "../images/alarm-clock.svg" - color: app.accentColor + color: Style.accentColor } Label { diff --git a/nymea-app/ui/devicepages/FingerprintReaderDevicePage.qml b/nymea-app/ui/devicepages/FingerprintReaderDevicePage.qml index 16c17bbf..889d7a41 100644 --- a/nymea-app/ui/devicepages/FingerprintReaderDevicePage.qml +++ b/nymea-app/ui/devicepages/FingerprintReaderDevicePage.qml @@ -281,7 +281,7 @@ DevicePageBase { : qsTr("All done!") Layout.fillWidth: true font.pixelSize: app.largeFont - color: app.accentColor + color: Style.accentColor horizontalAlignment: Text.AlignHCenter } @@ -296,8 +296,8 @@ DevicePageBase { width: height anchors.centerIn: parent color: addUserPage.done ? - (addUserPage.error ? "red" : app.accentColor) - : keyColor + (addUserPage.error ? "red" : Style.accentColor) + : Style.iconColor } } Label { diff --git a/nymea-app/ui/devicepages/GenericDevicePage.qml b/nymea-app/ui/devicepages/GenericDevicePage.qml index 487c0df7..1cb59460 100644 --- a/nymea-app/ui/devicepages/GenericDevicePage.qml +++ b/nymea-app/ui/devicepages/GenericDevicePage.qml @@ -419,7 +419,7 @@ DevicePageBase { Layout.preferredWidth: height color: "lightgray" radius: width / 2 - border.color: app.foregroundColor + border.color: Style.foregroundColor border.width: 1 SequentialAnimation on color { diff --git a/nymea-app/ui/devicepages/HeatingDevicePage.qml b/nymea-app/ui/devicepages/HeatingDevicePage.qml index 0857e771..6bd0d36d 100644 --- a/nymea-app/ui/devicepages/HeatingDevicePage.qml +++ b/nymea-app/ui/devicepages/HeatingDevicePage.qml @@ -77,10 +77,10 @@ DevicePageBase { Layout.preferredWidth: app.landscape ? parent.width / 2 : parent.width Layout.preferredHeight: 50 visible: root.boostStateType - border.color: boostMouseArea.pressed || root.boostStateType && root.boostState.value === true ? app.accentColor : app.foregroundColor + border.color: boostMouseArea.pressed || root.boostStateType && root.boostState.value === true ? Style.accentColor : Style.foregroundColor border.width: 1 radius: height / 2 - color: root.boostStateType && root.boostState.value === true ? app.accentColor : "transparent" + color: root.boostStateType && root.boostState.value === true ? Style.accentColor : "transparent" Row { anchors.centerIn: parent @@ -89,7 +89,7 @@ DevicePageBase { height: app.iconSize width: app.iconSize name: "../images/sensors/temperature.svg" - color: root.boostStateType && root.boostState.value === true ? "red" : keyColor + color: root.boostStateType && root.boostState.value === true ? "red" : Style.iconColor } Label { diff --git a/nymea-app/ui/devicepages/IrrigationDevicePage.qml b/nymea-app/ui/devicepages/IrrigationDevicePage.qml index f38c5bff..842205ff 100644 --- a/nymea-app/ui/devicepages/IrrigationDevicePage.qml +++ b/nymea-app/ui/devicepages/IrrigationDevicePage.qml @@ -166,7 +166,7 @@ DevicePageBase { Rectangle { anchors.fill: parent color: "transparent" - border.color: root.powerState.value === true ? app.accentColor : irrigationIcon.keyColor + border.color: root.powerState.value === true ? Style.accentColor : Style.iconColoor border.width: 4 radius: width / 2 } @@ -176,7 +176,7 @@ DevicePageBase { anchors.fill: parent anchors.margins: app.margins * 1.5 name: "../images/irrigation.svg" - color: root.powerState.value === true ? app.accentColor : keyColor + color: root.powerState.value === true ? Style.accentColor : Style.iconColor } onClicked: { var params = [] @@ -209,7 +209,7 @@ DevicePageBase { horizontalAlignment: Text.AlignHCenter text: history.lastWatering ? Qt.formatDateTime(history.lastWatering) : "" font.pixelSize: app.largeFont - color: app.accentColor + color: Style.accentColor } Label { Layout.fillWidth: true @@ -303,7 +303,7 @@ DevicePageBase { horizontalAlignment: Text.AlignHCenter visible: tagsProxy.count > 0 font.pixelSize: app.largeFont - color: app.accentColor + color: Style.accentColor text: tagsProxy.count == 0 ? "" : Qt.formatDateTime(engine.ruleManager.rules.getRule(tagsProxy.get(0).ruleId).timeDescriptor.timeEventItems.get(0).dateTime) } Label { diff --git a/nymea-app/ui/devicepages/LightDevicePage.qml b/nymea-app/ui/devicepages/LightDevicePage.qml index eeb54373..0ed37005 100644 --- a/nymea-app/ui/devicepages/LightDevicePage.qml +++ b/nymea-app/ui/devicepages/LightDevicePage.qml @@ -101,7 +101,7 @@ DevicePageBase { contentItem: Rectangle { color: model.color - radius: 6 + radius: Style.tileRadius ColorIcon { anchors.fill: parent @@ -162,9 +162,9 @@ DevicePageBase { Rectangle { Layout.preferredWidth: app.hugeIconSize Layout.preferredHeight: width - radius: app.radius + radius: Style.tileRadius color: root.colorState ? root.colorState.value : "red" -// color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, 0.1)) +// color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.1)) ColorIcon { anchors.centerIn: parent height: app.largeIconSize diff --git a/nymea-app/ui/devicepages/NotificationsDevicePage.qml b/nymea-app/ui/devicepages/NotificationsDevicePage.qml index 8530a367..609fb56e 100644 --- a/nymea-app/ui/devicepages/NotificationsDevicePage.qml +++ b/nymea-app/ui/devicepages/NotificationsDevicePage.qml @@ -134,7 +134,7 @@ DevicePageBase { height: app.iconSize width: app.iconSize name: "../images/send.svg" - color: titleTextField.displayText.length > 0 ? app.accentColor : keyColor + color: titleTextField.displayText.length > 0 ? Style.accentColor : Style.iconColor visible: d.pendingAction == -1 } diff --git a/nymea-app/ui/devicepages/PowersocketDevicePage.qml b/nymea-app/ui/devicepages/PowersocketDevicePage.qml index 11e8af3f..4ee72cea 100644 --- a/nymea-app/ui/devicepages/PowersocketDevicePage.qml +++ b/nymea-app/ui/devicepages/PowersocketDevicePage.qml @@ -66,7 +66,7 @@ DevicePageBase { Rectangle { anchors.fill: parent color: "transparent" - border.color: root.powerState.value === true ? app.accentColor : bulbIcon.keyColor + border.color: root.powerState.value === true ? Style.accentColor : Style.iconColor border.width: 4 radius: width / 2 } @@ -76,7 +76,7 @@ DevicePageBase { anchors.fill: parent anchors.margins: app.margins * 1.5 name: "../images/powersocket.svg" - color: root.powerState.value === true ? app.accentColor : keyColor + color: root.powerState.value === true ? Style.accentColor : Style.iconColor } onClicked: { var params = [] diff --git a/nymea-app/ui/devicepages/SensorDevicePage.qml b/nymea-app/ui/devicepages/SensorDevicePage.qml index 6f36c459..224379a8 100644 --- a/nymea-app/ui/devicepages/SensorDevicePage.qml +++ b/nymea-app/ui/devicepages/SensorDevicePage.qml @@ -135,7 +135,7 @@ DevicePageBase { case "closablesensor": return device.states.getState(boolView.stateType.id).value === true ? "green" : "red" default: - device.states.getState(boolView.stateType.id).value === true ? app.interfaceToColor(boolView.interfaceName) : keyColor + device.states.getState(boolView.stateType.id).value === true ? app.interfaceToColor(boolView.interfaceName) : Style.iconColor } } } diff --git a/nymea-app/ui/devicepages/ShutterDevicePage.qml b/nymea-app/ui/devicepages/ShutterDevicePage.qml index 1758e5f2..7a2d0ba2 100644 --- a/nymea-app/ui/devicepages/ShutterDevicePage.qml +++ b/nymea-app/ui/devicepages/ShutterDevicePage.qml @@ -155,7 +155,7 @@ DevicePageBase { width: parent.width height: width / 4 rotation: angleMovable.angle - color: app.foregroundColor + color: Style.foregroundColor opacity: 0.1 } } @@ -170,7 +170,7 @@ DevicePageBase { Rectangle { id: angleSlider anchors.fill: parent - color: Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, 0.1) + color: Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.1) visible: false ColorIcon { anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: app.margins } @@ -187,7 +187,7 @@ DevicePageBase { Rectangle { width: parent.width height: 2 - color: angleMouseArea.containsMouse ? app.accentColor : "transparent" + color: angleMouseArea.containsMouse ? Style.accentColor : "transparent" y: angleMouseArea.mouseY onYChanged: sliderMask.update() } @@ -196,7 +196,7 @@ DevicePageBase { Rectangle { id: mask anchors.fill: parent - radius: app.radius + radius: Style.tileRadius color: "blue" visible: false } @@ -207,7 +207,6 @@ DevicePageBase { maskSource: mask } - MouseArea { id: angleMouseArea anchors.fill: parent diff --git a/nymea-app/ui/devicepages/VentilationDevicePage.qml b/nymea-app/ui/devicepages/VentilationDevicePage.qml index 63cef114..01a35aaf 100644 --- a/nymea-app/ui/devicepages/VentilationDevicePage.qml +++ b/nymea-app/ui/devicepages/VentilationDevicePage.qml @@ -66,7 +66,7 @@ DevicePageBase { Rectangle { anchors.fill: parent color: "transparent" - border.color: root.powerState.value === true ? app.accentColor : bulbIcon.keyColor + border.color: root.powerState.value === true ? Style.accentColor : Style.iconColor border.width: 4 radius: width / 2 } @@ -76,7 +76,7 @@ DevicePageBase { anchors.fill: parent anchors.margins: app.margins * 1.5 name: "../images/ventilation.svg" - color: root.powerState.value === true ? app.accentColor : keyColor + color: root.powerState.value === true ? Style.accentColor : Style.iconColor PropertyAnimation on rotation { running: root.powerState.value === true diff --git a/nymea-app/ui/experiences/heating/Main.qml b/nymea-app/ui/experiences/heating/Main.qml index 2bc8e387..ec9f589e 100644 --- a/nymea-app/ui/experiences/heating/Main.qml +++ b/nymea-app/ui/experiences/heating/Main.qml @@ -181,7 +181,7 @@ Item { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: "qrc:/ui/images/weathericons/wind.svg" - color: app.accentColor + color: Style.accentColor } Led { state: { @@ -209,7 +209,7 @@ Item { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: "qrc:/ui/images/sensors/temperature.svg" - color: app.accentColor + color: Style.accentColor } Label { text: root.temperatureState ? root.temperatureState.value.toFixed(1) + "°C" : "N/A" @@ -240,7 +240,7 @@ Item { Layout.preferredHeight: app.iconSize //* 1.5 Layout.preferredWidth: height Layout.alignment: Qt.AlignHCenter - color: app.accentColor + color: Style.accentColor name: "qrc:/ui/images/magic.svg" MouseArea { anchors.fill: parent @@ -249,7 +249,7 @@ Item { } Label { text: qsTr("Automate this thing") - color: app.accentColor + color: Style.accentColor font.pixelSize: app.smallFont } } @@ -263,7 +263,7 @@ Item { ColorIcon { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize - color: app.accentColor + color: Style.accentColor name: "qrc:/ui/images/ventilation.svg" PropertyAnimation on rotation { running: root.ventilationLevelState !== null @@ -296,8 +296,8 @@ Item { Layout.fillWidth: true Layout.fillHeight: true border.width: 1 - border.color: app.accentColor - color: root.ventilationModeState && root.ventilationModeToUiMode(root.ventilationModeState.value) === index ? app.accentColor : "transparent" + border.color: Style.accentColor + color: root.ventilationModeState && root.ventilationModeToUiMode(root.ventilationModeState.value) === index ? Style.accentColor : "transparent" Label { anchors.centerIn: parent text: model.text @@ -362,14 +362,14 @@ Item { radius: width / 2 border.width: 3 color: "transparent" - border.color: app.accentColor + border.color: Style.accentColor } Glow { anchors.fill: parent source: outerRadius // color: "#f45b69" - color: Qt.rgba(app.accentColor.r, app.accentColor.g, app.accentColor.b, .5) + color: Qt.rgba(Style.accentColor.r, Style.accentColor.g, Style.accentColor.b, .5) radius: 8 samples: 17 spread: 0.5 @@ -382,7 +382,7 @@ Item { radius: width / 2 border.width: 2 color: "transparent" - border.color: app.accentColor + border.color: Style.accentColor Repeater { id: ticksRepeater @@ -396,7 +396,7 @@ Item { readonly property int isBold: index % 10 === 0 // Rectangle { anchors.fill: parent; color: "blue" } - Rectangle { height: parent.height; width: parent.isBold ? 20 : 10; color: app.accentColor } + Rectangle { height: parent.height; width: parent.isBold ? 20 : 10; color: Style.accentColor } } } diff --git a/nymea-app/ui/magic/DeviceRulesPage.qml b/nymea-app/ui/magic/DeviceRulesPage.qml index 0804e311..854e8d80 100644 --- a/nymea-app/ui/magic/DeviceRulesPage.qml +++ b/nymea-app/ui/magic/DeviceRulesPage.qml @@ -145,7 +145,7 @@ Page { delegate: NymeaSwipeDelegate { width: parent.width iconName: "../images/magic.svg" - iconColor: !model.enabled ? "red" : (model.active ? app.accentColor : "grey") + iconColor: !model.enabled ? "red" : (model.active ? Style.accentColor : "grey") text: model.name canDelete: true @@ -183,7 +183,7 @@ Page { horizontalAlignment: Text.AlignHCenter text: qsTr("There's no magic involving %1.").arg(root.device.name) font.pixelSize: app.largeFont - color: app.accentColor + color: Style.accentColor } Label { width: parent.width diff --git a/nymea-app/ui/magic/EditRulePage.qml b/nymea-app/ui/magic/EditRulePage.qml index 0e893108..54e0a2ac 100644 --- a/nymea-app/ui/magic/EditRulePage.qml +++ b/nymea-app/ui/magic/EditRulePage.qml @@ -395,7 +395,7 @@ Page { width: height color: "transparent" border.width: 2 - border.color: modelData === root.ruleColor ? app.accentColor : "transparent" + border.color: modelData === root.ruleColor ? Style.accentColor : "transparent" anchors.centerIn: parent } @@ -425,7 +425,7 @@ Page { width: height color: "transparent" border.width: 2 - border.color: modelData === root.ruleIcon ? app.accentColor : "transparent" + border.color: modelData === root.ruleIcon ? Style.accentColor : "transparent" anchors.centerIn: parent } diff --git a/nymea-app/ui/magic/ScriptEditor.qml b/nymea-app/ui/magic/ScriptEditor.qml index ae383235..6550d1bf 100644 --- a/nymea-app/ui/magic/ScriptEditor.qml +++ b/nymea-app/ui/magic/ScriptEditor.qml @@ -104,7 +104,7 @@ Page { HeaderButton { imageSource: "../images/save.svg" enabled: d.script && d.script.name !== nameTextField.text || d.oldContent !== scriptEdit.text - color: enabled ? app.accentColor : keyColor + color: enabled ? Style.accentColor : Style.iconColor hoverEnabled: true ToolTip.text: qsTr("Deploy script") ToolTip.visible: hovered @@ -188,7 +188,7 @@ Page { if (scriptId !== d.scriptId) { return; } - var str = "".arg(type == "ScriptMessageTypeWarning" ? app.accentColor : app.foregroundColor) + message + "" + var str = "".arg(type == "ScriptMessageTypeWarning" ? Style.accentColor : Style.foregroundColor) + message + "" consoleOutput.append(str) } } @@ -472,7 +472,7 @@ Page { ScriptSyntaxHighlighter { id: syntax document: scriptEdit.textDocument - backgroundColor: app.backgroundColor + backgroundColor: Style.backgroundColor } CodeCompletion { diff --git a/nymea-app/ui/magic/SelectThingPage.qml b/nymea-app/ui/magic/SelectThingPage.qml index 8e89fcda..0c3fbe37 100644 --- a/nymea-app/ui/magic/SelectThingPage.qml +++ b/nymea-app/ui/magic/SelectThingPage.qml @@ -60,7 +60,7 @@ Page { HeaderButton { imageSource: "../images/find.svg" - color: filterInput.shown ? app.accentColor : keyColor + color: filterInput.shown ? Style.accentColor : Style.iconColor onClicked: filterInput.shown = !filterInput.shown } } diff --git a/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml b/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml index 1e07e7b8..6a9d5741 100644 --- a/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml +++ b/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml @@ -64,7 +64,7 @@ SwipeDelegate { Layout.preferredHeight: childEvaluatorsRepeater.count > 0 ? app.iconSize * .6 : app.iconSize Layout.preferredWidth: height name: root.stateEvaluator && root.stateEvaluator.stateDescriptor.interfaceName.length === 0 ? "../images/state.svg" : "../images/state-interface.svg" - color: app.accentColor + color: Style.accentColor } Label { @@ -134,7 +134,7 @@ SwipeDelegate { Layout.preferredHeight: app.iconSize * .6 Layout.preferredWidth: height name: childEvaluatorDelegate.stateDescriptor.interfaceName.length === 0 ? "../images/state.svg" : "../images/state-interface.svg" - color: app.accentColor + color: Style.accentColor } Label { font.pixelSize: app.smallFont diff --git a/nymea-app/ui/magic/WriteNfcTagPage.qml b/nymea-app/ui/magic/WriteNfcTagPage.qml index e4f216cb..5b3cbf8a 100644 --- a/nymea-app/ui/magic/WriteNfcTagPage.qml +++ b/nymea-app/ui/magic/WriteNfcTagPage.qml @@ -135,7 +135,7 @@ Page { anchors.rightMargin: phoneIcon.width * .21 anchors.topMargin: phoneIcon.height * .1 anchors.bottomMargin: phoneIcon.height * .1 - color: app.backgroundColor + color: Style.backgroundColor } ColorIcon { @@ -150,9 +150,9 @@ Page { height: app.iconSize * 6 width: app.iconSize * 6 radius: width / 2 - color: app.backgroundColor + color: Style.backgroundColor border.width: 4 - border.color: app.foregroundColor + border.color: Style.foregroundColor opacity: nfcWriter.status == NfcThingActionWriter.TagStatusWaiting ? 0 : 1 Behavior on opacity { NumberAnimation { duration: 300 } } diff --git a/nymea-app/ui/magic/scripting/CompletionBox.qml b/nymea-app/ui/magic/scripting/CompletionBox.qml index cf34d8cf..d67e2472 100644 --- a/nymea-app/ui/magic/scripting/CompletionBox.qml +++ b/nymea-app/ui/magic/scripting/CompletionBox.qml @@ -37,8 +37,8 @@ import "../../components" Rectangle { id: root border.width: 1 - border.color: app.foregroundColor - color: app.backgroundColor + border.color: Style.foregroundColor + color: Style.backgroundColor height: (Math.min(model.count, 10) * d.entryHeight) + (border.width * 2) width: 200 @@ -118,7 +118,7 @@ Rectangle { delegate: Rectangle { height: d.entryHeight width: parent.width - color: index == root.currentIndex ? app.accentColor : "transparent" + color: index == root.currentIndex ? Style.accentColor : "transparent" RowLayout { anchors.fill: parent spacing: 0 @@ -161,7 +161,7 @@ Rectangle { width: height anchors.centerIn: parent visible: name != "" - color: root.currentIndex == index ? app.backgroundColor : app.accentColor + color: root.currentIndex == index ? Style.backgroundColor : Style.accentColor name: { switch (model.decoration) { case "thing": @@ -184,7 +184,7 @@ Rectangle { Layout.alignment: Qt.AlignVCenter Layout.fillWidth: true text: model.displayText - color: app.foregroundColor + color: Style.foregroundColor width: parent.width elide: Text.ElideRight font: root.font diff --git a/nymea-app/ui/magic/scripting/EditorPane.qml b/nymea-app/ui/magic/scripting/EditorPane.qml index 0db66e8f..601906d1 100644 --- a/nymea-app/ui/magic/scripting/EditorPane.qml +++ b/nymea-app/ui/magic/scripting/EditorPane.qml @@ -32,6 +32,7 @@ import QtQuick 2.2 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.1 import "../../components" +import Nymea 1.0 Item { id: pane @@ -72,7 +73,7 @@ Item { background: Rectangle { implicitWidth: 200 implicitHeight: panelHeader.height - color: app.backgroundColor + color: Style.backgroundColor Label { anchors.centerIn: parent text: contentContainer.data[index].title @@ -102,7 +103,7 @@ Item { ColorIcon { name: "../images/edit-clear.svg" enabled: contentContainer.data[panelTabs.currentIndex].clearEnabled - color: enabled ? app.accentColor : keyColor + color: enabled ? Style.accentColor : Style.iconColor Layout.preferredHeight: app.iconSize / 2 Layout.preferredWidth: height MouseArea { @@ -116,7 +117,7 @@ Item { name: pane.shown ? "../images/down.svg" : "../images/up.svg" Layout.preferredHeight: app.iconSize / 2 Layout.preferredWidth: height - color: app.accentColor + color: Style.accentColor MouseArea { anchors.fill: parent anchors.margins: -5 diff --git a/nymea-app/ui/magic/scripting/LineNumbers.qml b/nymea-app/ui/magic/scripting/LineNumbers.qml index 35ee86f0..f6f2212a 100644 --- a/nymea-app/ui/magic/scripting/LineNumbers.qml +++ b/nymea-app/ui/magic/scripting/LineNumbers.qml @@ -30,6 +30,7 @@ import QtQuick 2.4 import QtQuick.Controls 2.2 +import Nymea 1.0 Rectangle { id: root @@ -60,7 +61,7 @@ Rectangle { width: textMetrics.advanceWidth + app.margins / 2 height: root.textArea.height - 10 - color: (app.backgroundColor.r * 0.2126 + app.backgroundColor.g * 0.7152 + app.backgroundColor.b * 0.0722) * 255 < 128 ? "#202020" : "#e0e0e0" + color: (Style.backgroundColor.r * 0.2126 + Style.backgroundColor.g * 0.7152 + Style.backgroundColor.b * 0.0722) * 255 < 128 ? "#202020" : "#e0e0e0" Column { id: lineNumbersColumn diff --git a/nymea-app/ui/mainviews/EnergyView.qml b/nymea-app/ui/mainviews/EnergyView.qml index 4c0c949b..f6d34874 100644 --- a/nymea-app/ui/mainviews/EnergyView.qml +++ b/nymea-app/ui/mainviews/EnergyView.qml @@ -79,8 +79,8 @@ MainViewBase { legend.alignment: Qt.AlignBottom legend.font.pixelSize: app.smallFont legend.visible: false - backgroundColor: app.backgroundColor - titleColor: app.foregroundColor + backgroundColor: Style.backgroundColor + titleColor: Style.foregroundColor title: qsTr("Power usage history") property var startTime: xAxis.min @@ -161,7 +161,7 @@ MainViewBase { areaSeries.lowerSeries = lowerSeries; } - var color = app.accentColor + var color = Style.accentColor for (var j = 0; j < index; j+=2) { if (index % 2 == 0) { color = Qt.lighter(color, 1.2); @@ -186,18 +186,18 @@ MainViewBase { // onMaxChanged: applyNiceNumbers(); labelsFont.pixelSize: app.smallFont labelFormat: "%d" - labelsColor: app.foregroundColor - color: Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .2) + labelsColor: Style.foregroundColor + color: Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, .2) gridLineColor: color } DateTimeAxis { id: xAxis gridVisible: false - color: Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .2) + color: Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, .2) tickCount: chartView.width / 70 labelsFont.pixelSize: app.smallFont - labelsColor: app.foregroundColor + labelsColor: Style.foregroundColor property int timeDiff: (xAxis.max.getTime() - xAxis.min.getTime()) / 1000 function getTimeSpanString() { @@ -237,7 +237,7 @@ MainViewBase { } return Qt.formatDate(xAxis.min) + " - " + Qt.formatDate(xAxis.max) + " (" + getTimeSpanString() + ")" } - titleBrush: app.foregroundColor + titleBrush: Style.foregroundColor format: { if (timeDiff < 60) { // one minute return "mm:ss" diff --git a/nymea-app/ui/mainviews/GroupsView.qml b/nymea-app/ui/mainviews/GroupsView.qml index 8966bc21..3acb49ae 100644 --- a/nymea-app/ui/mainviews/GroupsView.qml +++ b/nymea-app/ui/mainviews/GroupsView.qml @@ -62,7 +62,7 @@ MainViewBase { width: groupsGridView.cellWidth height: groupsGridView.cellHeight iconName: "../images/view-grid-symbolic.svg" - iconColor: app.accentColor + iconColor: Style.accentColor text: model.tagId.substring(6) onClicked: { pageStack.push(Qt.resolvedUrl("../grouping/GroupInterfacesPage.qml"), {groupTag: model.tagId}) @@ -88,7 +88,7 @@ MainViewBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: "../images/powersocket.svg" - color: isOn ? app.accentColor : keyColor + color: isOn ? Style.accentColor : Style.iconColor property bool isOn: { for (var i = 0; i < sockets.count; i++) { @@ -172,7 +172,7 @@ MainViewBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: isOn ? "../images/light-on.svg" : "../images/light-off.svg" - color: isOn ? app.accentColor : keyColor + color: isOn ? Style.accentColor : Style.iconColor property bool isOn: { for (var i = 0; i < lights.count; i++) { diff --git a/nymea-app/ui/mainviews/ScenesView.qml b/nymea-app/ui/mainviews/ScenesView.qml index 7ad53e79..3087e021 100644 --- a/nymea-app/ui/mainviews/ScenesView.qml +++ b/nymea-app/ui/mainviews/ScenesView.qml @@ -58,7 +58,7 @@ MainViewBase { height: interfacesGridView.cellHeight iconName: iconTag ? "../images/" + iconTag.value + ".svg" : "../images/slideshow.svg"; fallbackIconName: "../images/slideshow.svg" - iconColor: colorTag.value.length > 0 ? colorTag.value : app.accentColor; + iconColor: colorTag.value.length > 0 ? colorTag.value : Style.accentColor; text: model.name.toUpperCase() property var colorTag: engine.tagsManager.tags.findRuleTag(model.id, "color") diff --git a/nymea-app/ui/system/ConnectionInterfaceDelegate.qml b/nymea-app/ui/system/ConnectionInterfaceDelegate.qml index e1a7158e..4bbdebe3 100644 --- a/nymea-app/ui/system/ConnectionInterfaceDelegate.qml +++ b/nymea-app/ui/system/ConnectionInterfaceDelegate.qml @@ -40,7 +40,7 @@ NymeaSwipeDelegate { iconName: "../images/connections/network-vpn.svg" progressive: false secondaryIconName: "../images/account.svg" - secondaryIconColor: model.authenticationEnabled ? app.accentColor : secondaryIconKeyColor + secondaryIconColor: model.authenticationEnabled ? Style.accentColor : Style.iconColor tertiaryIconName: "../images/connections/network-secure.svg" - tertiaryIconColor: model.sslEnabled ? app.accentColor : tertiaryIconKeyColor + tertiaryIconColor: model.sslEnabled ? Style.accentColor : Style.iconColor } diff --git a/nymea-app/ui/system/ConnectionInterfacesPage.qml b/nymea-app/ui/system/ConnectionInterfacesPage.qml index a683e214..90362107 100644 --- a/nymea-app/ui/system/ConnectionInterfacesPage.qml +++ b/nymea-app/ui/system/ConnectionInterfacesPage.qml @@ -47,7 +47,7 @@ SettingsPageBase { model: engine.nymeaConfiguration.tcpServerConfigurations delegate: ConnectionInterfaceDelegate { Layout.fillWidth: true - iconColor: inUse ? app.accentColor : iconKeyColor + iconColor: inUse ? Style.accentColor : Style.iconColor readonly property bool inUse: (engine.jsonRpcClient.currentConnection.hostAddress === model.address || model.address === "0.0.0.0") && engine.jsonRpcClient.currentConnection.port === model.port canDelete: !inUse @@ -95,7 +95,7 @@ SettingsPageBase { model: engine.nymeaConfiguration.webSocketServerConfigurations delegate: ConnectionInterfaceDelegate { Layout.fillWidth: true - iconColor: inUse ? app.accentColor : iconKeyColor + iconColor: inUse ? Style.accentColor : Style.iconColor readonly property bool inUse: (engine.jsonRpcClient.currentConnection.hostAddress === model.address || model.address === "0.0.0.0") && engine.jsonRpcClient.currentConnection.port === model.port canDelete: !inUse diff --git a/nymea-app/ui/system/GeneralSettingsPage.qml b/nymea-app/ui/system/GeneralSettingsPage.qml index a746318c..e21fcd06 100644 --- a/nymea-app/ui/system/GeneralSettingsPage.qml +++ b/nymea-app/ui/system/GeneralSettingsPage.qml @@ -132,7 +132,7 @@ SettingsPageBase { contentItem: Item { ColorIcon { name: "../images/edit.svg" - color: app.foregroundColor + color: Style.foregroundColor anchors.centerIn: parent height: parent.height width: height @@ -172,7 +172,7 @@ SettingsPageBase { contentItem: Item { ColorIcon { name: "../images/edit.svg" - color: app.foregroundColor + color: Style.foregroundColor anchors.centerIn: parent height: parent.height width: height diff --git a/nymea-app/ui/system/LogViewerPage.qml b/nymea-app/ui/system/LogViewerPage.qml index 520cc592..7e1c9cac 100644 --- a/nymea-app/ui/system/LogViewerPage.qml +++ b/nymea-app/ui/system/LogViewerPage.qml @@ -43,7 +43,7 @@ Page { HeaderButton { imageSource: "../images/go-down.svg" - color: root.autoScroll ? app.accentColor : keyColor + color: root.autoScroll ? Style.accentColor : Style.iconColor onClicked: { listView.positionViewAtEnd(); root.autoScroll = !root.autoScroll @@ -106,12 +106,12 @@ Page { case LogEntry.LoggingSourceSystem: case LogEntry.LoggingSourceActions: case LogEntry.LoggingSourceEvents: - return app.accentColor + return Style.accentColor case LogEntry.LoggingSourceRules: if (model.loggingEventType === LogEntry.LoggingEventTypeActiveChange) { - return model.value === true ? "green" : keyColor + return model.value === true ? "green" : Style.iconColor } - return app.accentColor + return Style.accentColor } } name: { diff --git a/nymea-app/ui/system/MqttPolicyPage.qml b/nymea-app/ui/system/MqttPolicyPage.qml index 7e851808..af829e81 100644 --- a/nymea-app/ui/system/MqttPolicyPage.qml +++ b/nymea-app/ui/system/MqttPolicyPage.qml @@ -61,7 +61,7 @@ SettingsPageBase { Layout.fillWidth: true Layout.margins: app.margins text: qsTr("Client info") - color: app.accentColor + color: Style.accentColor } RowLayout { @@ -131,7 +131,7 @@ SettingsPageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: height name: "../images/eye.svg" - color: passwordTextField.hiddenPassword ? keyColor : app.accentColor + color: passwordTextField.hiddenPassword ? Style.iconColor : Style.accentColor MouseArea { anchors.fill: parent onClicked: passwordTextField.hiddenPassword = !passwordTextField.hiddenPassword @@ -144,7 +144,7 @@ SettingsPageBase { Layout.fillWidth: true Layout.margins: app.margins text: qsTr("Allowed publish topics") - color: app.accentColor + color: Style.accentColor } Repeater { @@ -191,7 +191,7 @@ SettingsPageBase { Layout.fillWidth: true Layout.margins: app.margins text: qsTr("Allowed subscribe filters") - color: app.accentColor + color: Style.accentColor } Repeater { model: root.policy.allowedSubscribeTopicFilters diff --git a/nymea-app/ui/system/NetworkSettingsPage.qml b/nymea-app/ui/system/NetworkSettingsPage.qml index 34cbc0b2..aa13723b 100644 --- a/nymea-app/ui/system/NetworkSettingsPage.qml +++ b/nymea-app/ui/system/NetworkSettingsPage.qml @@ -494,7 +494,7 @@ SettingsPageBase { Layout.preferredHeight: app.iconSize Layout.preferredWidth: app.iconSize name: "../images/eye.svg" - color: passwordTextField.showPassword ? app.accentColor : keyColor + color: passwordTextField.showPassword ? Style.accentColor : Style.iconColor MouseArea { anchors.fill: parent onClicked: passwordTextField.showPassword = !passwordTextField.showPassword diff --git a/nymea-app/ui/system/PluginsPage.qml b/nymea-app/ui/system/PluginsPage.qml index 3344eee1..42b2c33c 100644 --- a/nymea-app/ui/system/PluginsPage.qml +++ b/nymea-app/ui/system/PluginsPage.qml @@ -44,7 +44,7 @@ SettingsPageBase { HeaderButton { imageSource: "../images/configure.svg" - color: pluginsProxy.showOnlyConfigurable ? app.accentColor : keyColor + color: pluginsProxy.showOnlyConfigurable ? Style.accentColor : Style.iconColor onClicked: { pluginsProxy.showOnlyConfigurable = !pluginsProxy.showOnlyConfigurable } diff --git a/nymea-app/ui/system/SystemUpdatePage.qml b/nymea-app/ui/system/SystemUpdatePage.qml index 6a7cbf7e..efef3802 100644 --- a/nymea-app/ui/system/SystemUpdatePage.qml +++ b/nymea-app/ui/system/SystemUpdatePage.qml @@ -86,7 +86,7 @@ Page { Layout.preferredWidth: height Layout.alignment: Qt.AlignHCenter name: "../images/system-update.svg" - color: app.accentColor + color: Style.accentColor RotationAnimation on rotation { from: 0; to: 360 duration: 2000 @@ -127,7 +127,7 @@ Page { Layout.preferredHeight: app.iconSize * 2 Layout.preferredWidth: height name: "../images/system-update.svg" - color: app.accentColor + color: Style.accentColor RotationAnimation on rotation { from: 0; to: 360 duration: 2000 @@ -195,7 +195,7 @@ Page { : Qt.resolvedUrl("../images/view-" + (model.installedVersion.length > 0 ? "expand" : "collapse") + ".svg") iconColor: model.updateAvailable ? "green" - : model.installedVersion.length > 0 ? "blue" : iconKeyColor + : model.installedVersion.length > 0 ? "blue" : Style.iconColor onClicked: { pageStack.push(packageDetailsComponent, {pkg: updatesModel.get(index)}) } @@ -286,7 +286,7 @@ Page { : Qt.resolvedUrl("../images/view-" + (model.installedVersion.length > 0 ? "expand" : "collapse") + ".svg") iconColor: model.updateAvailable ? "green" - : model.installedVersion.length > 0 ? "blue" : iconKeyColor + : model.installedVersion.length > 0 ? "blue" : Style.iconColor onClicked: { pageStack.push(packageDetailsComponent, {pkg: filterModel.get(index)}) } @@ -319,7 +319,7 @@ Page { Layout.preferredHeight: app.iconSize * 2 Layout.preferredWidth: app.iconSize * 2 name: "../images/plugin.svg" - color: app.accentColor + color: Style.accentColor } Label { Layout.fillWidth: true diff --git a/nymea-app/ui/thingconfiguration/EditThingsPage.qml b/nymea-app/ui/thingconfiguration/EditThingsPage.qml index 9ebf4a3f..568729e8 100644 --- a/nymea-app/ui/thingconfiguration/EditThingsPage.qml +++ b/nymea-app/ui/thingconfiguration/EditThingsPage.qml @@ -43,7 +43,7 @@ Page { HeaderButton { imageSource: "../images/find.svg" - color: filterInput.shown ? app.accentColor : keyColor + color: filterInput.shown ? Style.accentColor : Style.iconColor onClicked: filterInput.shown = !filterInput.shown } diff --git a/nymea-app/ui/thingconfiguration/NewThingPage.qml b/nymea-app/ui/thingconfiguration/NewThingPage.qml index 50d94d76..0872b4a6 100644 --- a/nymea-app/ui/thingconfiguration/NewThingPage.qml +++ b/nymea-app/ui/thingconfiguration/NewThingPage.qml @@ -66,7 +66,7 @@ Page { columns: Math.max(1, Math.floor(width / 250)) * 2 Label { text: qsTr("Vendor") - color: app.headerForegroundColor + color: Style.headerForegroundColor } ComboBox { @@ -94,7 +94,7 @@ Page { } Label { text: qsTr("Type") - color: app.headerForegroundColor + color: Style.headerForegroundColor } ComboBox { @@ -135,7 +135,7 @@ Page { TextField { id: displayNameFilterField Layout.fillWidth: true - color: app.headerForegroundColor + color: Style.headerForegroundColor } } } diff --git a/nymea-app/ui/thingconfiguration/SetupWizard.qml b/nymea-app/ui/thingconfiguration/SetupWizard.qml index 967fcf8b..160d44d2 100644 --- a/nymea-app/ui/thingconfiguration/SetupWizard.qml +++ b/nymea-app/ui/thingconfiguration/SetupWizard.qml @@ -479,7 +479,7 @@ Page { wrapMode: Text.WordWrap font.pixelSize: app.largeFont text: qsTr("Pairing...") - color: app.accentColor + color: Style.accentColor horizontalAlignment: Text.AlignHCenter } @@ -598,7 +598,7 @@ Page { horizontalAlignment: Text.AlignHCenter text: resultsView.success ? root.device ? qsTr("Thing reconfigured!") : qsTr("Thing added!") : qsTr("Uh oh") font.pixelSize: app.largeFont - color: app.accentColor + color: Style.accentColor } Label { Layout.fillWidth: true