ubuntu-touch-coreapps-reviewers team mailing list archive

[Stefano Verzegnassi <stefano92.100@xxxxxxxxx>]

Stefano Verzegnassi has proposed merging lp:~verzegnassi-stefano/ubuntu-docviewer-app/new-empty-state into lp:ubuntu-docviewer-app.

Commit message:
Apply new style for empty state everywhere

Requested reviews:
  Ubuntu Document Viewer Developers (ubuntu-docviewer-dev)

For more details, see:
https://code.launchpad.net/~verzegnassi-stefano/ubuntu-docviewer-app/new-empty-state/+merge/283802

Apply new style for empty state everywhere
-- 
Your team Ubuntu Document Viewer Developers is requested to review the proposed merge of lp:~verzegnassi-stefano/ubuntu-docviewer-app/new-empty-state into lp:ubuntu-docviewer-app.

=== modified file 'src/app/qml/common/EmptyState.qml'
--- src/app/qml/common/EmptyState.qml	2015-11-01 16:50:23 +0000
+++ src/app/qml/common/EmptyState.qml	2016-01-25 13:07:58 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2014 Canonical Ltd
+ * Copyright (C) 2014, 2015, 2016 Canonical Ltd
  *
  * This file is part of Ubuntu Clock App
  *
@@ -24,39 +24,51 @@
  icon, title and subtitle to describe the empty state.
 */
 
-Item {
+Column {
     id: emptyState
+    spacing: units.gu(4)
+    width: units.gu(36)
 
     // Public APIs
+    default property alias iconPlaceholder: iconContainer.data
     property alias iconName: emptyIcon.name
     property alias title: emptyLabel.text
     property alias subTitle: emptySublabel.text
 
-    height: childrenRect.height
-
-    Icon {
-        id: emptyIcon
-        anchors.horizontalCenter: parent.horizontalCenter
-        height: units.gu(10)
-        width: height
-        color: "#BBBBBB"
+    Item {
+        width: childrenRect.width
+        height: childrenRect.height
+        Icon {
+            id: emptyIcon
+            height: visible ? units.gu(10) : 0
+            width: visible ? height : 0
+            color: "#BBBBBB"
+            visible: name || source
+        }
+        Row {
+            id: iconContainer
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
     }
 
     Label {
         id: emptyLabel
-        anchors.top: emptyIcon.bottom
-        anchors.topMargin: units.gu(5)
-        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        horizontalAlignment: Text.AlignLeft
+        textSize: Label.XLarge
+
+        elide: Text.ElideRight
+        wrapMode: Text.WordWrap
+        maximumLineCount: 2
+    }
+
+    Label {
+        id: emptySublabel
+        width: parent.width
+        horizontalAlignment: Text.AlignLeft
         textSize: Label.Large
-        font.bold: true
-    }
-
-    Label {
-        id: emptySublabel
-        anchors.top: emptyLabel.bottom
-
-        width: parent.width
-        wrapMode: Text.Wrap
-        horizontalAlignment: Text.AlignHCenter
+
+        elide: Text.ElideRight
+        wrapMode: Text.WordWrap
     }
 }

=== modified file 'src/app/qml/documentPage/DocumentEmptyState.qml'
--- src/app/qml/documentPage/DocumentEmptyState.qml	2015-12-10 16:53:39 +0000
+++ src/app/qml/documentPage/DocumentEmptyState.qml	2016-01-25 13:07:58 +0000
@@ -1,5 +1,5 @@
 /*
-  Copyright (C) 2015 Stefano Verzegnassi
+  Copyright (C) 2015, 2016 Stefano Verzegnassi
 
     This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License 3 as published by
@@ -17,73 +17,52 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
 
+import "../common"
+
 Item {
     anchors.fill: parent
 
-    Column {
+    EmptyState {
         anchors.centerIn: parent
-        spacing: units.gu(4)
-        width: units.gu(36)
-
-        Row {
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            Item {
-                height: parent.height
-                width: imageEmptyDownload.width + units.gu(2)
-
-                Image {
-                    id: imageEmptyDownload
-                    anchors.centerIn: parent
-                    antialiasing: true
-                    fillMode: Image.PreserveAspectFit
-                    height: units.gu(10)
-                    smooth: true
-                    source: Qt.resolvedUrl("graphics/document_download_icon.png")
-                }
-            }
-
-            Item {
-                height: parent.height
-                width: units.gu(7)
-
-                Image {
-                    anchors.centerIn: parent
-                    antialiasing: true
-                    fillMode: Image.PreserveAspectFit
-                    height: units.gu(6)
-                    smooth: true
-                    source: Qt.resolvedUrl("graphics/div.png")
-                }
-            }
-
-            Image {
-                anchors.verticalCenter: parent.verticalCenter
-                antialiasing: true
-                fillMode: Image.PreserveAspectFit
-                height: units.gu(7)
-                smooth: true
-                source: Qt.resolvedUrl("graphics/sd_phone_icon.png")
-            }
-        }
-
-        Label {
-            elide: Text.ElideRight
-            fontSize: "x-large"
-            horizontalAlignment: Text.AlignLeft
-            maximumLineCount: 2
-            text: i18n.tr("No document found")
-            width: parent.width
-            wrapMode: Text.WordWrap
-        }
-
-        Label {
-            elide: Text.ElideRight
-            fontSize: "large"
-            horizontalAlignment: Text.AlignLeft
-            text: i18n.tr("Connect your device to any computer and simply drag files to the Documents folder or insert removable media with documents.")
-            width: parent.width
-            wrapMode: Text.WordWrap
+        title: i18n.tr("No document found")
+        subTitle: i18n.tr("Connect your device to any computer and simply drag files to the Documents folder or insert removable media with documents.")
+
+        Item {
+            height: parent.height
+            width: imageEmptyDownload.width + units.gu(2)
+
+            Image {
+                id: imageEmptyDownload
+                anchors.centerIn: parent
+                antialiasing: true
+                fillMode: Image.PreserveAspectFit
+                height: units.gu(10)
+                smooth: true
+                source: Qt.resolvedUrl("graphics/document_download_icon.png")
+            }
+        }
+
+        Item {
+            height: parent.height
+            width: units.gu(7)
+
+            Image {
+                anchors.centerIn: parent
+                antialiasing: true
+                fillMode: Image.PreserveAspectFit
+                height: units.gu(6)
+                smooth: true
+                source: Qt.resolvedUrl("graphics/div.png")
+            }
+        }
+
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+            antialiasing: true
+            fillMode: Image.PreserveAspectFit
+            height: units.gu(7)
+            smooth: true
+            source: Qt.resolvedUrl("graphics/sd_phone_icon.png")
         }
     }
 }

=== modified file 'src/app/qml/documentPage/SearchEmptyState.qml'
--- src/app/qml/documentPage/SearchEmptyState.qml	2015-11-01 16:50:23 +0000
+++ src/app/qml/documentPage/SearchEmptyState.qml	2016-01-25 13:07:58 +0000
@@ -27,6 +27,5 @@
         iconName: "search"
 
         anchors.centerIn: parent
-        width: parent.width
     }
 }