diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc
index c61fc393..fa2a73c6 100644
--- a/nymea-app/styles.qrc
+++ b/nymea-app/styles.qrc
@@ -38,5 +38,6 @@
styles/noir/logo-wide.svg
ui/Configuration.qml
styles/dark/Dialog.qml
+ styles/light/Dialog.qml
diff --git a/nymea-app/styles/dark/Dialog.qml b/nymea-app/styles/dark/Dialog.qml
index 85ed9852..080f34b7 100644
--- a/nymea-app/styles/dark/Dialog.qml
+++ b/nymea-app/styles/dark/Dialog.qml
@@ -74,7 +74,7 @@ T.Dialog {
}
background: Rectangle {
- radius: Style.smallCornerRadius
+ radius: Style.cornerRadius
color: control.Material.dialogColor
layer.enabled: control.Material.elevation > 0
diff --git a/nymea-app/styles/light/Dialog.qml b/nymea-app/styles/light/Dialog.qml
new file mode 100644
index 00000000..080f34b7
--- /dev/null
+++ b/nymea-app/styles/light/Dialog.qml
@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import QtQuick.Templates 2.2 as T
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material.impl 2.2
+import Nymea 1.0
+
+T.Dialog {
+ id: control
+
+ implicitWidth: Math.max(background ? background.implicitWidth : 0,
+ header && header.visible ? header.implicitWidth : 0,
+ footer && footer.visible ? footer.implicitWidth : 0,
+ contentWidth > 0 ? contentWidth + leftPadding + rightPadding : 0)
+ implicitHeight: Math.max(background ? background.implicitHeight : 0,
+ (header && header.visible ? header.implicitHeight + spacing : 0)
+ + (footer && footer.visible ? footer.implicitHeight + spacing : 0)
+ + (contentHeight > 0 ? contentHeight + topPadding + bottomPadding : 0))
+
+ contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
+ contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
+
+ padding: 24
+ topPadding: 20
+
+ Material.elevation: 24
+
+ enter: Transition {
+ // grow_fade_in
+ NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+ NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+ }
+
+ exit: Transition {
+ // shrink_fade_out
+ NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+ NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+ }
+
+ background: Rectangle {
+ radius: Style.cornerRadius
+ color: control.Material.dialogColor
+
+ layer.enabled: control.Material.elevation > 0
+ layer.effect: ElevationEffect {
+ elevation: control.Material.elevation
+ }
+ }
+
+ header: Label {
+ text: control.title
+ visible: control.title
+ elide: Label.ElideRight
+ padding: 24
+ bottomPadding: 0
+ // TODO: QPlatformTheme::TitleBarFont
+ font.bold: true
+ font.pixelSize: 16
+ background: Rectangle {
+ radius: 2
+ color: control.Material.dialogColor
+ clip: true
+ }
+ }
+
+ footer: DialogButtonBox {
+ visible: count > 0
+ }
+}
diff --git a/nymea-app/ui/StyleBase.qml b/nymea-app/ui/StyleBase.qml
index a425bffa..f145ffdd 100644
--- a/nymea-app/ui/StyleBase.qml
+++ b/nymea-app/ui/StyleBase.qml
@@ -17,8 +17,8 @@ Item {
property color tooltipBackgroundColor: tileOverlayColor
- property int cornerRadius: 6
- property int smallCornerRadius: 4
+ property int cornerRadius: 10
+ property int smallCornerRadius: 6
readonly property int smallMargins: 8
readonly property int margins: 16
diff --git a/nymea-app/ui/components/NymeaComboBox.qml b/nymea-app/ui/components/NymeaComboBox.qml
new file mode 100644
index 00000000..5d3bb7b0
--- /dev/null
+++ b/nymea-app/ui/components/NymeaComboBox.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+
+ComboBox {
+ id: control
+ background: Item {
+ implicitWidth: 120
+ implicitHeight: control.Material.buttonHeight
+
+ Ripple {
+ clip: control.flat
+ clipRadius: control.flat ? 0 : 2
+ x: control.editable && control.indicator ? control.indicator.x : 0
+ width: control.editable && control.indicator ? control.indicator.width : parent.width
+ height: parent.height
+ pressed: control.pressed
+ anchor: control.editable && control.indicator ? control.indicator : control
+ active: control.pressed || control.visualFocus || control.hovered
+ color: control.Material.rippleColor
+ }
+ }
+}