diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc index b05c2acf..5d39fea5 100644 --- a/nymea-app/styles.qrc +++ b/nymea-app/styles.qrc @@ -3,6 +3,13 @@ styles/light/Page.qml styles/light/logo.svg styles/light/Button.qml + styles/light/Style.qml + styles/light/logo-wide.svg + styles/mellow/Page.qml + styles/mellow/logo.svg + styles/mellow/Button.qml + styles/mellow/Style.qml + styles/mellow/logo-wide.svg styles/dark/Page.qml styles/dark/logo.svg styles/dark/Button.qml @@ -22,11 +29,9 @@ 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 diff --git a/nymea-app/styles/mellow/Button.qml b/nymea-app/styles/mellow/Button.qml new file mode 100644 index 00000000..f3602b80 --- /dev/null +++ b/nymea-app/styles/mellow/Button.qml @@ -0,0 +1,116 @@ +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +* +* 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 as T +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 + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + baselineOffset: contentItem.y + contentItem.baselineOffset + + // external vertical padding is 6 (to increase touch area) + padding: 12 + leftPadding: padding - 4 + rightPadding: padding - 4 + + Material.elevation: flat ? control.down || control.hovered ? 2 : 0 + : control.down ? 8 : 2 + Material.background: flat ? "transparent" : undefined + + contentItem: Text { + text: control.text + font.bold: control.font.bold + font.capitalization: Font.AllUppercase + font.family: control.font.family + font.hintingPreference: control.font.hintingPreference + font.italic: control.font.italic + font.letterSpacing: 2 + font.overline: control.font.overline + font.pixelSize: app.smallFont + font.weight: Font.Bold + color: Style.backgroundColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state + background: Rectangle { + implicitWidth: 64 + implicitHeight: Style.smallDelegateHeight + + // external vertical padding is 6 (to increase touch area) + y: 6 + width: parent.width + height: parent.height - 12 + radius: Style.smallCornerRadius + color: !control.enabled ? control.Material.buttonDisabledColor : + control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor + + PaddedRectangle { + y: parent.height - 4 + width: parent.width + height: 4 + radius: 2 + topPadding: -2 + clip: true + visible: control.checkable && (!control.highlighted || control.flat) + color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor + } + + // The layer is disabled when the button color is transparent so you can do + // Material.background: "transparent" and get a proper flat button without needing + // to set Material.elevation as well + layer.enabled: control.enabled && control.Material.buttonColor.a > 0 + layer.effect: ElevationEffect { + elevation: control.Material.elevation + } + + Ripple { + clipRadius: 2 + width: parent.width + height: parent.height + pressed: control.pressed + anchor: control + active: control.down || control.visualFocus || control.hovered + color: control.Material.rippleColor + } + } +} diff --git a/nymea-app/styles/mellow/Page.qml b/nymea-app/styles/mellow/Page.qml new file mode 100644 index 00000000..aa70bdf8 --- /dev/null +++ b/nymea-app/styles/mellow/Page.qml @@ -0,0 +1,40 @@ +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +* +* 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 + +Page { + + background: Rectangle { + color: Material.background + } +} diff --git a/nymea-app/styles/mellow/Style.qml b/nymea-app/styles/mellow/Style.qml new file mode 100644 index 00000000..b97317c0 --- /dev/null +++ b/nymea-app/styles/mellow/Style.qml @@ -0,0 +1,28 @@ +pragma Singleton +import QtQuick 2.0 +import "../../ui" + +StyleBase { + // This is the default style. No overrides + + backgroundColor: "#ffffff" + foregroundColor: darkGray + accentColor: orange + tileBackgroundColor: lightestGray + + + property color lightestGray: "#F4F4F4" + + red: "#EB5E65" + green: "#49BF84" + yellow: "#FFCC00" + white: "#f1f1f1" + gray: "#B4B1AA" + darkGray: "#4E4D42" + orange: "#F4A506" + blue: "#3C99D5" + darkBlue: "#237CAE" + lime: "#99EA53" + purple: "#F57F7C" + +} diff --git a/nymea-app/styles/mellow/logo-wide.svg b/nymea-app/styles/mellow/logo-wide.svg new file mode 100644 index 00000000..a925e1f9 --- /dev/null +++ b/nymea-app/styles/mellow/logo-wide.svg @@ -0,0 +1,1298 @@ + + + + + + image/svg+xml + + Artboard 1 copy 5 Kopie 2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Artboard 1 copy 5 Kopie 2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nymea-app/styles/mellow/logo.svg b/nymea-app/styles/mellow/logo.svg new file mode 100644 index 00000000..03fb23c5 --- /dev/null +++ b/nymea-app/styles/mellow/logo.svg @@ -0,0 +1,602 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nymea-app/ui/components/MainPageTile.qml b/nymea-app/ui/components/MainPageTile.qml index 41606ad1..c08ac0f4 100644 --- a/nymea-app/ui/components/MainPageTile.qml +++ b/nymea-app/ui/components/MainPageTile.qml @@ -204,14 +204,14 @@ Item { height: Style.smallIconSize width: height name: root.isWireless ? "../images/connections/nm-signal-00.svg" : "../images/connections/network-wired-offline.svg" - color: root.disconnected ? "red" : "orange" + color: root.disconnected ? Style.red : Style.orange visible: root.setupStatus == Thing.ThingSetupStatusComplete && (root.disconnected || (root.isWireless && root.signalStrength < 20 && root.signalStrength >= 0)) } ColorIcon { height: Style.smallIconSize width: height name: root.setupStatus === Thing.ThingSetupStatusFailed ? "../images/dialog-warning-symbolic.svg" : "../images/settings.svg" - color: root.setupStatus === Thing.ThingSetupStatusFailed ? "red" : Style.tileForegroundColor + color: root.setupStatus === Thing.ThingSetupStatusFailed ? Style.red : Style.tileForegroundColor visible: root.setupStatus === Thing.ThingSetupStatusFailed || root.setupStatus === Thing.ThingSetupStatusInProgress } ColorIcon { diff --git a/nymea-app/ui/components/ShutterControls.qml b/nymea-app/ui/components/ShutterControls.qml index a34a02ed..20f546f5 100644 --- a/nymea-app/ui/components/ShutterControls.qml +++ b/nymea-app/ui/components/ShutterControls.qml @@ -57,6 +57,7 @@ Item { ProgressButton { imageSource: root.invert ? "../images/down.svg" : "../images/up.svg" backgroundColor: root.backgroundEnabled ? Style.green : "transparent" + color: root.backgroundEnabled ? Style.white : Style.iconColor size: root.size busy: root.openState ? root.openState.value === "opening" : openBusyTimer.running onClicked: { @@ -77,6 +78,7 @@ Item { ProgressButton { visible: root.canStop backgroundColor: root.backgroundEnabled ? Style.yellow : "transparent" + color: root.backgroundEnabled ? Style.white : Style.iconColor size: root.size imageSource: "../images/media-playback-stop.svg" onClicked: { @@ -92,6 +94,7 @@ Item { ProgressButton { imageSource: root.invert ? "../images/up.svg" : "../images/down.svg" backgroundColor: root.backgroundEnabled ? Style.red : "transparent" + color: root.backgroundEnabled ? Style.white : Style.iconColor size: root.size busy: root.openState ? root.openState.value === "closing" : closeBusyTimer.running onClicked: { diff --git a/nymea-app/ui/delegates/ThingDelegate.qml b/nymea-app/ui/delegates/ThingDelegate.qml index e8272ba1..dd39e688 100644 --- a/nymea-app/ui/delegates/ThingDelegate.qml +++ b/nymea-app/ui/delegates/ThingDelegate.qml @@ -59,13 +59,13 @@ NymeaSwipeDelegate { tertiaryIconColor: { if (thing.setupStatus == Thing.ThingSetupStatusFailed) { - return "red" + return Style.red } if (thing.setupStatus == Thing.ThingSetupStatusInProgress) { return Style.iconColor } if (connectedState && connectedState.value === false) { - return "red" + return Style.red } return Style.iconColor }