diff --git a/nymea-app/styles/noir/ApplicationWindow.qml b/nymea-app/styles/noir/ApplicationWindow.qml new file mode 100644 index 00000000..e67e8f8d --- /dev/null +++ b/nymea-app/styles/noir/ApplicationWindow.qml @@ -0,0 +1,36 @@ +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.family: "Oswald" + + // The header background color + property color primaryColor: Qt.darker("#50514f", 1.1) + + + // 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 new file mode 100644 index 00000000..35779675 --- /dev/null +++ b/nymea-app/styles/noir/Button.qml @@ -0,0 +1,77 @@ +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 + font: control.font + color: app.primaryColor + 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/noir/Page.qml b/nymea-app/styles/noir/Page.qml new file mode 100644 index 00000000..43c4f49e --- /dev/null +++ b/nymea-app/styles/noir/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/noir/logo.svg b/nymea-app/styles/noir/logo.svg new file mode 100644 index 00000000..9d1907c3 --- /dev/null +++ b/nymea-app/styles/noir/logo.svg @@ -0,0 +1,603 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +