From 534a0358411293663f82f4f1c7ccf4f7594aac10 Mon Sep 17 00:00:00 2001
From: Diego Prado Gesto <d.pradogesto@ultimaker.com>
Date: Mon, 29 Apr 2019 14:50:14 +0200
Subject: [PATCH] Add a grid with images

Those images indicate the type of data we are collecting anonymously.

Contributes to CURA-6434.
---
 .../WelcomePages/DataCollectionsContent.qml   | 31 +++++++--
 resources/qml/WelcomePages/ImageTile.qml      | 39 +++++++++++
 .../images/first_run_share_data.svg           | 67 -------------------
 3 files changed, 66 insertions(+), 71 deletions(-)
 create mode 100644 resources/qml/WelcomePages/ImageTile.qml
 delete mode 100644 resources/themes/cura-light/images/first_run_share_data.svg

diff --git a/resources/qml/WelcomePages/DataCollectionsContent.qml b/resources/qml/WelcomePages/DataCollectionsContent.qml
index f2bfe10133..295dc3f8a1 100644
--- a/resources/qml/WelcomePages/DataCollectionsContent.qml
+++ b/resources/qml/WelcomePages/DataCollectionsContent.qml
@@ -61,11 +61,34 @@ Item
                 renderType: Text.NativeRendering
             }
 
-            Image
-            {
-                id: curaImage
+            Grid {
+                columns: 2
+                spacing: UM.Theme.getSize("wide_margin").height
                 anchors.horizontalCenter: parent.horizontalCenter
-                source: UM.Theme.getImage("first_run_share_data")
+
+                ImageTile
+                {
+                    text: catalog.i18nc("@text", "Machine types")
+                    imageSource: UM.Theme.getImage("first_run_machine_types")
+                }
+
+                ImageTile
+                {
+                    text: catalog.i18nc("@text", "Material usage")
+                    imageSource: UM.Theme.getImage("first_run_material_usage")
+                }
+
+                ImageTile
+                {
+                    text: catalog.i18nc("@text", "Number of slices")
+                    imageSource: UM.Theme.getImage("first_run_number_slices")
+                }
+
+                ImageTile
+                {
+                    text: catalog.i18nc("@text", "Print settings")
+                    imageSource: UM.Theme.getImage("first_run_print_settings")
+                }
             }
 
             Label
diff --git a/resources/qml/WelcomePages/ImageTile.qml b/resources/qml/WelcomePages/ImageTile.qml
new file mode 100644
index 0000000000..7ed07304e6
--- /dev/null
+++ b/resources/qml/WelcomePages/ImageTile.qml
@@ -0,0 +1,39 @@
+// Copyright (c) 2019 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+
+
+//
+// This component places a text on top of an image.
+//
+Column
+{
+    leftPadding: UM.Theme.getSize("default_margin").width
+    rightPadding: UM.Theme.getSize("default_margin").width
+    spacing: UM.Theme.getSize("default_margin").height
+    property alias text: label.text
+    property alias imageSource: image.source
+
+    Label
+    {
+        id: label
+        width: image.width
+        anchors.horizontalCenter: image.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        text: ""
+        wrapMode: Text.WordWrap
+        font: UM.Theme.getFont("default")
+        color: UM.Theme.getColor("text")
+        renderType: Text.NativeRendering
+    }
+
+    Image
+    {
+        id: image
+        source: ""
+    }
+}
\ No newline at end of file
diff --git a/resources/themes/cura-light/images/first_run_share_data.svg b/resources/themes/cura-light/images/first_run_share_data.svg
deleted file mode 100644
index cd87431067..0000000000
--- a/resources/themes/cura-light/images/first_run_share_data.svg
+++ /dev/null
@@ -1,67 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="200px" height="157px" viewBox="0 0 200 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>Group 2</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path id="path-1" d="M53.7324653,27.9792746 L73.5751295,47.6683938 L45.5958549,47.6683938 C45.5958549,39.9957681 48.7010421,33.0427857 53.7324653,27.9792746 Z" />
-        <filter x="-25.0%" y="-45.7%" width="150.0%" height="171.1%" filterUnits="objectBoundingBox" id="filter-2">
-            <feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path id="path-3" d="M139.896373,51.4765924 C139.896373,37.1181394 151.495214,25.4783134 165.803109,25.4783134 L165.803109,51.4765924 L139.896373,51.4765924 Z" />
-        <filter x="-27.0%" y="-19.2%" width="154.0%" height="153.8%" filterUnits="objectBoundingBox" id="filter-4">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path id="path-5" d="M106.813801,128.509823 C106.813801,114.15137 118.412641,102.511544 132.720536,102.511544 L132.720536,128.509823 L106.813801,128.509823 Z" />
-        <filter x="-27.0%" y="-19.2%" width="154.0%" height="153.8%" filterUnits="objectBoundingBox" id="filter-6">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path id="path-7" d="M123.936343,93.6963118 L142.124524,111.948762 L116.478164,111.948762 C116.478164,104.83599 119.324441,98.3903503 123.936343,93.6963118 Z" />
-        <filter x="-27.3%" y="-27.4%" width="154.6%" height="176.7%" filterUnits="objectBoundingBox" id="filter-8">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="Iteration-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect fill="#CCCCCC" x="13.4715026" y="14.507772" width="186.528497" height="141.968912"></rect>
-        <g>
-            <rect fill="#E5E5E5" x="0" y="11.4392428" width="189.637306" height="135.711016"></rect>
-            <rect fill="#E5E5E5" x="0" y="0" width="189.637306" height="10.3993116" rx="1"></rect>
-            <ellipse fill="#FFFFFF" cx="7.25388601" cy="5.1996558" rx="3.10880829" ry="3.11979348"></ellipse>
-            <ellipse fill="#FFFFFF" cx="16.5803109" cy="5.1996558" rx="3.10880829" ry="3.11979348"></ellipse>
-            <ellipse fill="#FFFFFF" cx="25.9067358" cy="5.1996558" rx="3.10880829" ry="3.11979348"></ellipse>
-            <ellipse fill="#2671E7" cx="50.7772021" cy="50.9566268" rx="25.9067358" ry="25.998279"></ellipse>
-            <rect fill="#CCCCCC" x="47.6683938" y="114.912393" width="19.1709845" height="3.63975906" rx="1"></rect>
-            <rect fill="#CCCCCC" x="47.6683938" y="106.592944" width="13.9896373" height="3.63975906" rx="1"></rect>
-            <rect fill="#CCCCCC" x="47.6683938" y="122.711877" width="12.9533679" height="3.63975906" rx="1"></rect>
-            <ellipse fill="#E8F2FC" cx="41.1917098" cy="124.531756" rx="2.33160622" ry="2.33984511"></ellipse>
-            <ellipse fill="#2671E7" cx="41.1917098" cy="116.732273" rx="2.33160622" ry="2.33984511"></ellipse>
-            <ellipse fill="#104CAA" cx="41.1917098" cy="108.412823" rx="2.33160622" ry="2.33984511"></ellipse>
-            <ellipse fill="#2671E7" cx="139.896373" cy="51.4765924" rx="25.9067358" ry="25.998279"></ellipse>
-            <ellipse fill="#2671E7" cx="138.341969" cy="115.952324" rx="25.9067358" ry="25.998279"></ellipse>
-            <g transform="translate(59.585492, 37.823834) rotate(90.000000) translate(-59.585492, -37.823834) ">
-                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                <use fill="#E8F2FC" fill-rule="evenodd" xlink:href="#path-1"></use>
-            </g>
-            <g transform="translate(152.849741, 38.477453) scale(-1, 1) translate(-152.849741, -38.477453) ">
-                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
-                <use fill="#E8F2FC" fill-rule="evenodd" xlink:href="#path-3"></use>
-            </g>
-            <g transform="translate(119.767168, 115.510684) scale(1, -1) rotate(-46.000000) translate(-119.767168, -115.510684) ">
-                <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
-                <use fill="#E8F2FC" fill-rule="evenodd" xlink:href="#path-5"></use>
-            </g>
-            <g transform="translate(129.301344, 102.822537) scale(-1, 1) rotate(90.000000) translate(-129.301344, -102.822537) ">
-                <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
-                <use fill="#104CAA" fill-rule="evenodd" xlink:href="#path-7"></use>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file