Merge PR #602: Some fixes in the Dashboard

nymea-app/ui/components/SelectionTabs.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick 2.9
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts 1.2
-import QtQuick.Controls 2.15
+import QtQuick.Controls 2.9
 import Nymea 1.0
 
 Rectangle {

nymea-app/ui/mainviews/dashboard/Dashboard.qml

@@ -48,6 +48,9 @@ Item {
             index = root.model.count
         }
         var addComponent = Qt.createComponent(Qt.resolvedUrl("DashboardAddWizard.qml"))
+        if (addComponent.status === Component.Error) {
+            console.warn(addComponent.errorString())
+        }
         var popup = addComponent.createObject(root, {dashboardModel: root.model, index: index})
         popup.open()
     }

nymea-app/ui/mainviews/dashboard/DashboardAddWizard.qml

@@ -42,6 +42,8 @@ MeaDialog {
 
     title: qsTr("Add item")
     standardButtons: Dialog.NoButton
+    width: Math.min(parent.width, 400)
+    closePolicy: Popup.CloseOnEscape
 
     property DashboardModel dashboardModel: null
     property int index: 0
@@ -92,7 +94,6 @@ MeaDialog {
                 Layout.fillWidth: true
                 text: qsTr("Web view")
                 iconName: "stock_website"
-                visible: Qt.platform.os != "android"
                 onClicked: {
                     internalPageStack.push(addWebViewComponent)
                 }
@@ -104,6 +105,8 @@ MeaDialog {
             id: addThingSelectionComponent
             ColumnLayout {
                 RowLayout {
+                    Layout.leftMargin: Style.margins
+                    Layout.rightMargin: Style.margins
                     ColorIcon {
                         name: "/ui/images/find.svg"
                     }
@@ -197,6 +200,8 @@ MeaDialog {
             id: addGraphSelectThingComponent
             ColumnLayout {
                 RowLayout {
+                    Layout.leftMargin: Style.margins
+                    Layout.rightMargin: Style.margins
                     ColorIcon {
                         name: "/ui/images/find.svg"
                     }
@@ -293,78 +298,87 @@ MeaDialog {
 
         Component {
             id: addWebViewComponent
-            ColumnLayout {
+            Flickable {
                 property bool needsOkButton: true
                 property bool okButtonEnabled: urlTextField.displayText.length > 0
+                implicitHeight: webViewColumn.implicitHeight
+                contentHeight: webViewColumn.height
 
-                Connections {
+                ColumnLayout {
-                    target: okButton
+                    id: webViewColumn
-                    onClicked: {
+                    width: parent.width
-                        root.dashboardModel.addWebViewItem(urlTextField.text, columnsTabs.currentValue, rowsTabs.currentValue, interactiveSwitch.checked, root.index)
+
-                        root.close();
+                    Connections {
+                        target: okButton
+                        onClicked: {
+                            root.dashboardModel.addWebViewItem(urlTextField.text, columnsTabs.currentValue, rowsTabs.currentValue, interactiveSwitch.checked, root.index)
+                            root.close();
+                        }
                     }
-                }
 
-                SettingsPageSectionHeader {
+                    SettingsPageSectionHeader {
-                    Layout.fillWidth: true
-                    text: qsTr("Location")
-                }
-
-                TextField {
-                    id: urlTextField
-                    Layout.fillWidth: true
-                    Layout.leftMargin: Style.margins
-                    Layout.rightMargin: Style.margins
-                    placeholderText: qsTr("Enter a URL")
-                    text: "https://"
-                }
-
-                SettingsPageSectionHeader {
-                    Layout.fillWidth: true
-                    text: qsTr("Size")
-                }
-
-                GridLayout {
-                    columns: width > 300 ? 2 : 1
-                    Layout.fillWidth: true
-                    Layout.leftMargin: Style.margins
-                    Layout.rightMargin: Style.margins
-                    columnSpacing: Style.smallMargins
-                    rowSpacing: Style.smallMargins
-                    Label {
-                        text: qsTr("Columns")
-                    }
-                    SelectionTabs {
-                        id: columnsTabs
                         Layout.fillWidth: true
-                        model: [1, 2, 3, 4, 5, 6]
+                        text: qsTr("Location")
-                        currentIndex: root.item.columnSpan - 1
                     }
-                    Label {
+
-                        text: qsTr("Rows")
+                    TextField {
-                    }
+                        id: urlTextField
-                    SelectionTabs {
-                        id: rowsTabs
                         Layout.fillWidth: true
-                        model: [1, 2, 3, 4, 5, 6]
+                        Layout.leftMargin: Style.margins
-                        currentIndex: root.item.rowSpan - 1
+                        Layout.rightMargin: Style.margins
+                        placeholderText: qsTr("Enter a URL")
+                        text: "https://"
+                        inputMethodHints: Qt.ImhNoAutoUppercase
                     }
-                }
 
-                SettingsPageSectionHeader {
+                    SettingsPageSectionHeader {
-                    Layout.fillWidth: true
+                        Layout.fillWidth: true
-                    text: qsTr("Behavior")
+                        text: qsTr("Size")
-                    visible: ["android", "ios"].indexOf(Qt.platform.os) < 0
+                    }
-                }
 
-                SwitchDelegate {
+                    GridLayout {
-                    id: interactiveSwitch
+                        columns: width > 300 ? 2 : 1
-                    Layout.fillWidth: true
+                        Layout.fillWidth: true
-                    checked: root.item.interactive
+                        Layout.leftMargin: Style.margins
-                    text: qsTr("Interactive")
+                        Layout.rightMargin: Style.margins
-                    visible: ["android", "ios"].indexOf(Qt.platform.os) < 0
+                        columnSpacing: Style.smallMargins
+                        rowSpacing: Style.smallMargins
+                        Label {
+                            text: qsTr("Columns")
+                        }
+                        SelectionTabs {
+                            id: columnsTabs
+                            Layout.fillWidth: true
+                            model: [1, 2, 3, 4, 5, 6]
+                            currentIndex: root.item.columnSpan - 1
+                        }
+                        Label {
+                            text: qsTr("Rows")
+                        }
+                        SelectionTabs {
+                            id: rowsTabs
+                            Layout.fillWidth: true
+                            model: [1, 2, 3, 4, 5, 6]
+                            currentIndex: root.item.rowSpan - 1
+                        }
+                    }
+
+                    SettingsPageSectionHeader {
+                        Layout.fillWidth: true
+                        text: qsTr("Behavior")
+                        visible: ["android", "ios"].indexOf(Qt.platform.os) < 0
+                    }
+
+                    SwitchDelegate {
+                        id: interactiveSwitch
+                        Layout.fillWidth: true
+                        checked: root.item.interactive
+                        text: qsTr("Interactive")
+                        visible: ["android", "ios"].indexOf(Qt.platform.os) < 0
+                    }
                 }
             }
+
         }
     }
 

nymea-app/ui/mainviews/dashboard/DashboardWebViewDelegate.qml

@@ -55,9 +55,19 @@ DashboardDelegateBase {
 
         Component.onCompleted: {
             // This might fail if qml-module-qtwebview isn't around
-            var webView = Qt.createQmlObject(webViewString, webViewContainer);
+            try {
-            print("created webView", webView)
+                var webView = Qt.createQmlObject(webViewString, webViewContainer);
+                print("created webView", webView)
+            } catch(e) {
+                console.warn("Error creating webview")
+                errorLabel.visible = true
+            }
         }
+
+        property bool needsHack: ["android", "ios"].indexOf(Qt.platform.os) >= 0
+        property bool webViewVisible: !needsHack ||
+                     (!app.mainMenu.visible && !root.editMode && root.topClip < root.height && root.bottomClip < height && !pageStack.busy)
+
         property string webViewString:
             '
             import QtQuick 2.8;
@@ -67,18 +77,29 @@ DashboardDelegateBase {
             WebView {
                 id: webView
                 anchors.fill: parent
-anchors.bottomMargin: root.bottomClip + Style.smallMargins
+                anchors.bottomMargin: root.bottomClip + Style.smallMargins
-anchors.topMargin: root.topClip + Style.smallMargins    
+                anchors.topMargin: root.topClip + Style.smallMargins
-                anchors.margins: Style.smallMargins
                 url: root.item.url
                 enabled: root.item.interactive
-                visible: !app.mainMenu.visible && !root.editMode && root.topClip < root.height && root.bottomClip < height
+                visible: delegateRoot.webViewVisible
             }
             '
 
         Item {
             id: webViewContainer
             anchors.fill: parent
+            anchors.margins: Style.smallMargins
+
+            Label {
+                id: errorLabel
+                visible: false
+                anchors.centerIn: parent
+                width: parent.width - Style.margins * 2
+                horizontalAlignment: Text.AlignHCenter
+
+                text: qsTr("Web view is not supported on this platform.")
+                wrapMode: Text.WordWrap
+            }
         }
 
         Rectangle {
@@ -86,6 +107,7 @@ anchors.topMargin: root.topClip + Style.smallMargins
             anchors.fill: parent
             anchors.margins: Style.smallMargins
             radius: Style.cornerRadius
+            color: Style.tileBackgroundColor
         }
 
         OpacityMask {
@@ -98,6 +120,30 @@ anchors.topMargin: root.topClip + Style.smallMargins
             }
             maskSource: mask
         }
+
+        ColumnLayout {
+            anchors.centerIn: parent
+            width: delegateRoot.width - Style.margins * 2
+            spacing: Style.margins
+            visible: !parent.webViewVisible
+
+            ColorIcon {
+                anchors.horizontalCenter: parent.horizontalCenter
+                size: Style.largeIconSize
+                name: "stock_website"
+                color: Style.accentColor
+            }
+
+            Label {
+                Layout.fillWidth: true
+                text: root.item.url
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                font.pixelSize: app.smallFont
+                horizontalAlignment: Text.AlignHCenter
+                maximumLineCount: 5
+                elide: Text.ElideRight
+            }
+        }
     }
 
     Component {