From 51f1585df6c78b0a2f4265b8933f3f5d3428f16c Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Tue, 16 Jul 2019 00:11:07 +0200 Subject: [PATCH] Add a lime theme --- nymea-app/styles.qrc | 4 + nymea-app/styles/lime/ApplicationWindow.qml | 51 ++ nymea-app/styles/lime/Button.qml | 86 +++ nymea-app/styles/lime/Page.qml | 10 + nymea-app/styles/lime/logo.svg | 603 ++++++++++++++++++++ 5 files changed, 754 insertions(+) create mode 100644 nymea-app/styles/lime/ApplicationWindow.qml create mode 100644 nymea-app/styles/lime/Button.qml create mode 100644 nymea-app/styles/lime/Page.qml create mode 100644 nymea-app/styles/lime/logo.svg diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc index f6b0e151..dada34d6 100644 --- a/nymea-app/styles.qrc +++ b/nymea-app/styles.qrc @@ -12,5 +12,9 @@ styles/noir/Page.qml styles/noir/logo.svg styles/noir/Button.qml + styles/lime/ApplicationWindow.qml + styles/lime/Page.qml + styles/lime/logo.svg + styles/lime/Button.qml diff --git a/nymea-app/styles/lime/ApplicationWindow.qml b/nymea-app/styles/lime/ApplicationWindow.qml new file mode 100644 index 00000000..f946ec85 --- /dev/null +++ b/nymea-app/styles/lime/ApplicationWindow.qml @@ -0,0 +1,51 @@ +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: "black" + + // 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/Button.qml b/nymea-app/styles/lime/Button.qml new file mode 100644 index 00000000..6cb40a2a --- /dev/null +++ b/nymea-app/styles/lime/Button.qml @@ -0,0 +1,86 @@ +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 + +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 + color: app.backgroundColor + 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 + + 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: 40 + + // external vertical padding is 6 (to increase touch area) + y: 6 + width: parent.width + height: parent.height - 12 + radius: height / 2 + 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/lime/Page.qml b/nymea-app/styles/lime/Page.qml new file mode 100644 index 00000000..43c4f49e --- /dev/null +++ b/nymea-app/styles/lime/Page.qml @@ -0,0 +1,10 @@ +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/lime/logo.svg b/nymea-app/styles/lime/logo.svg new file mode 100644 index 00000000..9d1907c3 --- /dev/null +++ b/nymea-app/styles/lime/logo.svg @@ -0,0 +1,603 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +