Rework tiles

nymea-app/main.cpp

@@ -124,6 +124,13 @@ int main(int argc, char *argv[])
 
     QQmlApplicationEngine *engine = new QQmlApplicationEngine();
 
+    StyleController styleController;
+
+    QQmlFileSelector *styleSelector = new QQmlFileSelector(engine);
+    styleSelector->setExtraSelectors({styleController.currentStyle()});
+
+    engine->rootContext()->setContextProperty("styleController", &styleController);
+
     qmlRegisterSingletonType<PlatformHelper>("Nymea", 1, 0, "PlatformHelper", platformHelperProvider);
     qmlRegisterSingletonType<NfcHelper>("Nymea", 1, 0, "NfcHelper", NfcHelper::nfcHelperProvider);
     qmlRegisterType<NfcThingActionWriter>("Nymea", 1, 0, "NfcThingActionWriter");
@@ -141,9 +148,6 @@ int main(int argc, char *argv[])
     engine->rootContext()->setContextProperty("qtBuildVersion", QT_VERSION_STR);
     engine->rootContext()->setContextProperty("qtVersion", qVersion());
 
-    StyleController styleController;
-    engine->rootContext()->setContextProperty("styleController", &styleController);
-
     engine->rootContext()->setContextProperty("kioskMode", parser.isSet(kioskOption));
     engine->rootContext()->setContextProperty("autoConnectHost", parser.value(connectOption));
 

nymea-app/ui/components/MainPageTile.qml

@@ -33,6 +33,7 @@ import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
 import QtQuick.Layouts 1.3
 import Nymea 1.0
+import QtGraphicalEffects 1.0
 
 Item {
     id: root
@@ -40,7 +41,7 @@ Item {
     property alias iconName: colorIcon.name
     property alias fallbackIconName: fallbackIcon.name
     property alias iconColor: colorIcon.color
-    property alias backgroundImage: background.source
+    property alias backgroundImage: backgroundImg.source
     property string text
     property bool disconnected: false
     property bool isWireless: false
@@ -53,97 +54,123 @@ Item {
     signal clicked();
     signal pressAndHold();
 
-    Pane {
+    Rectangle {
+        id: background
         anchors.fill: parent
         anchors.margins: app.margins / 2
-        Material.elevation: 1
+        gradient: Gradient {
-        padding: 0
+            GradientStop {
-
+                position: 1 - innerContent.height / background.height
-        Image {
+                color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .1))
-            id: background
+            }
-            anchors.fill: parent
+            GradientStop {
-            anchors.margins: 1
+                position: 1 - innerContent.height / background.height
-            z: -1
+                color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .05))
-            fillMode: Image.PreserveAspectCrop
+            }
-//            horizontalAlignment: Image.AlignTop
-//            opacity: .5
-//            Rectangle {
-//                anchors.fill: parent
-//                color: Material.background
-//                opacity: .5
-//            }
         }
 
-        contentItem: ItemDelegate {
+        radius: 6
-            padding: 0; topPadding: 0; bottomPadding: 0
+    }
-            onClicked: root.clicked()
-            onPressAndHold: root.pressAndHold()
 
-            contentItem: ColumnLayout {
+    Image {
-                spacing: 0
+        id: backgroundImg
-                ColumnLayout {
+        anchors.fill: parent
-                    Layout.fillHeight: true
+        anchors.margins: app.margins / 2
-                    Layout.margins: app.margins
+        visible: false
-                    Item {
+        z: -1
-                        visible: background.status !== Image.Ready
+        fillMode: Image.PreserveAspectCrop
-                        Layout.fillWidth: true
+    }
-                        Layout.fillHeight: true
 
-                        ColorIcon {
+    Rectangle {
-                            id: colorIcon
+        id: backgroundImgClipper
-                            anchors.centerIn: parent
+        radius: background.radius
-                            height: app.hugeIconSize //* 1.5
+        anchors.fill: parent
-                            width: height
+        visible: false
-                            ColorIcon {
+        gradient: Gradient {
-                                id: fallbackIcon
+            GradientStop {
-                                anchors.fill: parent
+                position: 1 - innerContent.height / background.height
-                                color: root.iconColor
+                color: "transparent"
-                                visible: parent.status === Image.Error
+            }
-                            }
+            GradientStop {
-                        }
+                position: 1 - innerContent.height / background.height
-                    }
+                color: "white"
+            }
+        }
+    }
 
-                    Item {
+    OpacityMask {
-                        Layout.fillWidth: true
+        anchors.fill: parent
-                        Layout.fillHeight: true
+        anchors.margins: app.margins / 2
-                        visible: background.status !== Image.Ready
+        source: backgroundImg
+        maskSource: backgroundImgClipper
+//        visible: root.backgroundImage.length > 0
+    }
 
-                        Label {
+    ItemDelegate {
-                            id: label
+        anchors {
-                            anchors.centerIn: parent
+            top: parent.top; left: parent.left; right: parent.right; bottom: innerContent.top
-                            width: parent.width
+            topMargin: app.margins / 2; leftMargin: app.margins / 2; rightMargin: app.margins / 2
-                            text: root.text.toUpperCase()
+        }
-                            font.pixelSize: app.smallFont
+        padding: 0; topPadding: 0; bottomPadding: 0
-                            font.letterSpacing: 1
+        onClicked: root.clicked()
-                            wrapMode: Text.WordWrap
+        onPressAndHold: root.pressAndHold()
-                            horizontalAlignment: Text.AlignHCenter
-                            maximumLineCount: 2
-                            elide: Text.ElideRight
-                        }
-                    }
 
-                }
+        contentItem: ColumnLayout {
-                MouseArea {
+            spacing: 0
-                    id: innerContent
+            ColumnLayout {
+                Layout.fillHeight: true
+                Layout.margins: app.margins
+                Item {
+                    visible: backgroundImg.status !== Image.Ready
                     Layout.fillWidth: true
-                    Layout.preferredHeight: app.iconSize + app.margins * 2
+                    Layout.fillHeight: true
-                    visible: root.contentItem.length > 1
 
-                    Rectangle {
+                    ColorIcon {
-                        anchors.fill: parent
+                        id: colorIcon
-                        color: Material.background
+                        anchors.centerIn: parent
+                        height: app.hugeIconSize
+                        width: height
+                        ColorIcon {
+                            id: fallbackIcon
+                            anchors.fill: parent
+                            color: root.iconColor
+                            visible: parent.status === Image.Error
+                        }
                     }
+                }
 
-                    Rectangle {
+                Item {
-                        anchors.fill: parent
+                    Layout.fillWidth: true
-                        color: Material.foreground
+                    Layout.fillHeight: true
-                        opacity: 0.05
+                    visible: backgroundImg.status !== Image.Ready
+
+                    Label {
+                        id: label
+                        anchors.centerIn: parent
+                        width: parent.width
+                        text: root.text.toUpperCase()
+                        font.pixelSize: app.smallFont
+                        font.letterSpacing: 1
+                        wrapMode: Text.WordWrap
+                        horizontalAlignment: Text.AlignHCenter
+                        maximumLineCount: 2
+                        elide: Text.ElideRight
                     }
                 }
             }
         }
     }
 
+    Item {
+        id: innerContent
+        anchors { left: parent.left; bottom: parent.bottom; right: parent.right; margins: app.margins / 2 }
+        height: app.iconSize + app.margins * 2
+
+        MouseArea {
+            anchors.fill: parent
+        }
+    }
+
     Row {
         id: quickAlertPane
         anchors { top: parent.top; right: parent.right; margins: app.margins }

nymea-app/ui/utils/NymeaUtils.qml

@@ -64,4 +64,7 @@ Item {
         return page;
     }
 
+    function isDark(color) {
+        return ((color.r() * 299 + color.g() * 587 + color.b() * 114) / 1000) > 123
+    }
 }