Add circle with letter inside for non default intents

CURA-8849

2 files changed, 39 insertions, 8 deletions

diff --git a/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml b/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml
index edce3c59a0..569cf7f7d0 100644
--- a/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml
+++ b/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml
@@ -25,8 +25,8 @@ Item
 
             RecommendedQualityProfileSelectorButton
             {
-                text: model.name
-                iconSource: UM.Theme.getIcon(model.icon)
+                profileName: model.name
+                icon: model.icon
 
 
                 selected: Cura.MachineManager.activeIntentCategory == model.intent_category
diff --git a/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelectorButton.qml b/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelectorButton.qml
index 53b77812e2..a08cfab37a 100644
--- a/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelectorButton.qml
+++ b/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelectorButton.qml
@@ -16,9 +16,9 @@ Rectangle
     Layout.fillWidth: true
     color: mouseArea.containsMouse || selected ? UM.Theme.getColor("um_blue_1") : UM.Theme.getColor("background_1")
 
-    property alias iconSource: intentIcon.source
-    property alias text: qualityLabel.text
     property bool selected: false
+    property string profileName: ""
+    property string icon: ""
 
     signal clicked()
 
@@ -38,21 +38,52 @@ Rectangle
             top: parent.top
             bottom: qualityLabel.top
             horizontalCenter: parent.horizontalCenter
+            topMargin: UM.Theme.getSize("narrow_margin").height
         }
 
-        UM.ColorImage
+        Item
         {
             id: intentIcon
             width: UM.Theme.getSize("recommended_button_icon").width
-            height: width
-            anchors.centerIn: parent
-            color: UM.Theme.getColor("icon")
+            height: UM.Theme.getSize("recommended_button_icon").height
+            UM.ColorImage
+            {
+                anchors.fill: parent
+                anchors.centerIn: parent
+                visible: icon != ""
+                source: UM.Theme.getIcon(icon)
+                color: UM.Theme.getColor("icon")
+            }
+
+            Rectangle
+            {
+                id: circle
+                anchors.fill: parent
+                radius: width
+                anchors.verticalCenter: parent.verticalCenter
+                visible: icon == ""
+                color: transparent
+                border.width: UM.Theme.getSize("thick_lining").width
+                border.color: UM.Theme.getColor("text")
+
+                UM.Label
+                {
+                    id: initialLabel
+                    anchors.centerIn: parent
+                    text: profileName.charAt(0).toUpperCase()
+                    font: UM.Theme.getFont("small_bold")
+                    horizontalAlignment: Text.AlignHCenter
+                }
+            }
+
+
         }
     }
 
     UM.Label
     {
         id: qualityLabel
+        text: profileName
         anchors
         {
             bottom: parent.bottom