From e609e0414355b1bab3f68589ab3cc666f8afed83 Mon Sep 17 00:00:00 2001 From: simonseres Date: Thu, 27 Aug 2020 17:07:42 +0200 Subject: [PATCH] Add engergize style --- nymea-app/qtquickcontrols2.conf | 2 +- nymea-app/styles.qrc | 4 + .../styles/energize/ApplicationWindow.qml | 75 ++++++++++++ nymea-app/styles/energize/Button.qml | 115 ++++++++++++++++++ nymea-app/styles/energize/Page.qml | 43 +++++++ nymea-app/styles/energize/logo.svg | 1 + 6 files changed, 239 insertions(+), 1 deletion(-) create mode 100644 nymea-app/styles/energize/ApplicationWindow.qml create mode 100644 nymea-app/styles/energize/Button.qml create mode 100644 nymea-app/styles/energize/Page.qml create mode 120000 nymea-app/styles/energize/logo.svg diff --git a/nymea-app/qtquickcontrols2.conf b/nymea-app/qtquickcontrols2.conf index cf531d63..b7ad1d11 100644 --- a/nymea-app/qtquickcontrols2.conf +++ b/nymea-app/qtquickcontrols2.conf @@ -1,3 +1,3 @@ [Controls] -Style=Material FallbackStyle=Material +Style=Material diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc index dada34d6..cab2e807 100644 --- a/nymea-app/styles.qrc +++ b/nymea-app/styles.qrc @@ -16,5 +16,9 @@ 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 diff --git a/nymea-app/styles/energize/ApplicationWindow.qml b/nymea-app/styles/energize/ApplicationWindow.qml new file mode 100644 index 00000000..ad75f298 --- /dev/null +++ b/nymea-app/styles/energize/ApplicationWindow.qml @@ -0,0 +1,75 @@ +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +* +* 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: "676767" + + 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: "#69938c" + + // 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 new file mode 100644 index 00000000..e65426b7 --- /dev/null +++ b/nymea-app/styles/energize/Button.qml @@ -0,0 +1,115 @@ +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +* +* 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 + +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: control.font.letterSpacing + font.overline: control.font.overline + font.pixelSize: app.smallFont + font.weight: Font.Bold + color: app.foregroundColor + 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/energize/Page.qml b/nymea-app/styles/energize/Page.qml new file mode 100644 index 00000000..683758c2 --- /dev/null +++ b/nymea-app/styles/energize/Page.qml @@ -0,0 +1,43 @@ +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +* +* 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 { + gradient: Gradient { + GradientStop { position: 0.0; color: "#e3eae4" } + GradientStop { position: 1.0; color: "#cde2d8" } + } + } +} diff --git a/nymea-app/styles/energize/logo.svg b/nymea-app/styles/energize/logo.svg new file mode 120000 index 00000000..6437d5e5 --- /dev/null +++ b/nymea-app/styles/energize/logo.svg @@ -0,0 +1 @@ +../light/logo.svg \ No newline at end of file