Fix desigin of QueryDialog

examples/touch/content/QueryDialogPage.qml

@@ -42,10 +42,14 @@ Page {
     headerTools: HeaderToolsLayout { showBackButton: true; title: "Query dialog example" }
 
     QueryDialog {
-        cancelText: "Cancel"
-        acceptText: "Delete"
-        headingText: "Are you sure you want to delete this?"
-        subLabelText: "Continue?"
+        cancelText: qsTr("Cancel")
+        acceptText: qsTr("Delete")
+        headingText: qsTr("Are you sure you want to delete this?")
+        subLabelText: qsTr("Do you want to continue?")
+
+        icon: "image://theme/trash"
+        image: "/usr/share/glacier-components/images/example.jpg"
+
         onAccepted: {
             result.text = "User accepted"
         }

examples/touch/touch.pro

@@ -31,6 +31,7 @@ qml.files += \
 qml.path = /usr/share/glacier-components/content
 
 images.files = images/*.png
+images.files += images/*.jpg
 images.path = /usr/share/glacier-components/images
 
 OTHER_FILES += $$qml.files

src/dialogs/QueryDialog.qml

@@ -11,30 +11,61 @@ Item {
     property alias headingText: heading.text
     property alias subLabelText: subLabel.text
 
+    property string icon: ""
+    property string image: ""
 
-    Rectangle {
+    Image{
         anchors.fill: parent
+        fillMode: Image.PreserveAspectCrop
+        source: shell.image
+        visible: shell.image != ""
+    }
+
+    Rectangle {
+        id: shadow
+        width: parent.width
+        height: (shell.image != "" && shell.icon == "") ? (parent.height-cancel.height)/3 : parent.height-cancel.height
         opacity: 0.65
         color: Theme.backgroundColor
+        anchors.bottom: cancel.top
+    }
 
+    Image{
+        id: icon
+        source: shell.icon
+        width: Theme.itemHeightMedium
+        height: width
+        anchors{
+            top: shell.top
+            topMargin: Theme.itemSpacingHuge
+            horizontalCenter: shell.horizontalCenter
+        }
+        visible: shell.icon != ""
+        fillMode: Image.PreserveAspectCrop
     }
+
     Label {
-        width: parent.width*0.8
         id: heading
-        anchors.centerIn: parent
+        width: parent.width*0.95
+        anchors{
+            centerIn: (shell.image != "" && shell.icon == "") ? shadow : parent
+        }
         horizontalAlignment: Text.AlignHCenter
         font.weight: Theme.fontWeightLarge
+        font.pixelSize:  (shell.image != "" && shell.icon == "") ? Theme.fontSizeTiny : Theme.fontSizeSmall
         wrapMode: Text.Wrap
     }
+
     Label {
          id:subLabel
-         width: parent.width*0.8
+         width: parent.width*0.95
          wrapMode: Text.Wrap
          font.weight: Theme.fontWeightMedium
+         font.pixelSize:  (shell.image != "" && shell.icon == "") ? Theme.fontSizeTiny : Theme.fontSizeSmall
          horizontalAlignment: Text.AlignHCenter
          anchors {
              top:heading.bottom
-             topMargin: Theme.itemSpacingLarge
+             topMargin: (shell.image != "" && shell.icon == "") ? Theme.itemSpacingSmall : Theme.itemSpacingLarge
              horizontalCenter: shell.horizontalCenter
          }
     }

src/dialogs/dialogs.pro

+TEMPLATE = lib
+TARGET = nemouxdialogs
+
 PLUGIN_IMPORT_PATH = Nemo/Dialogs
 
 qmlfiles.files = qmldir