From c6b8abd53e0c402d22ffca3284d9b4160beaca43 Mon Sep 17 00:00:00 2001
From: casper <c.lamboo@ultimaker.com>
Date: Fri, 11 Mar 2022 13:22:45 +0100
Subject: [PATCH] Update materials slot

CURA-8979
---
 .../Preferences/Materials/MaterialsSlot.qml   | 119 ++++++++++--------
 1 file changed, 65 insertions(+), 54 deletions(-)

diff --git a/resources/qml/Preferences/Materials/MaterialsSlot.qml b/resources/qml/Preferences/Materials/MaterialsSlot.qml
index 236ceafb0b..46384262cd 100644
--- a/resources/qml/Preferences/Materials/MaterialsSlot.qml
+++ b/resources/qml/Preferences/Materials/MaterialsSlot.qml
@@ -13,23 +13,31 @@ import Cura 1.5 as Cura
 Rectangle
 {
     id: materialSlot
+
     property var material: null
-    property var hovered: false
-    property var is_favorite: material != null && material.is_favorite
+    property bool hovered: false
 
     height: UM.Theme.getSize("favorites_row").height
     width: parent.width
-    color:
-    {
-        if (material !== null && base.currentItem !== null)
+    color: UM.Theme.getColor("main_background")
+
+    states:
+    [
+        State
         {
-            if (base.currentItem.root_material_id === material.root_material_id)
-            {
-                return UM.Theme.getColor("favorites_row_selected");
-            }
+            name: "selected"
+            when: material !== null && base.currentItem !== null && base.currentItem.root_material_id === material.root_material_id
+            PropertyChanges { target: materialSlot; color: UM.Theme.getColor("background_3") }
+            PropertyChanges { target: materialLabel; font: UM.Theme.getFont("default_italic") }
+        },
+        State
+        {
+            name: "hovered"
+            when: hovered
+            PropertyChanges { target: materialSlot; color: UM.Theme.getColor("background_3") }
         }
-        return "transparent";
-    }
+    ]
+
     Rectangle
     {
         id: swatch
@@ -43,79 +51,82 @@ Rectangle
     }
     UM.Label
     {
-        text: material != null ? material.brand + " " + material.name : ""
+        id: materialLabel
+        text: material != null ? `${material.brand} ${material.name}` : ""
         verticalAlignment: Text.AlignVCenter
-        height: parent.height
         anchors.left: swatch.right
         anchors.verticalCenter: materialSlot.verticalCenter
-        anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
-        font.italic: material != null && Cura.MachineManager.currentRootMaterialId[Cura.ExtruderManager.activeExtruderIndex] == material.root_material_id
+        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        font: UM.Theme.getFont("default")
     }
+
     MouseArea
     {
         anchors.fill: parent
         onClicked:
         {
-            materialList.currentBrand = material.brand
-            materialList.currentType = material.brand + "_" + material.material
-            base.setExpandedActiveMaterial(material.root_material_id)
+            materialList.currentBrand = material.brand;
+            materialList.currentType = `${material.brand}_${material.material}`;
+            base.setExpandedActiveMaterial(material.root_material_id);
         }
         hoverEnabled: true
         onEntered: { materialSlot.hovered = true }
         onExited: { materialSlot.hovered = false }
     }
-    Button
+
+    Item
     {
-        id: favorite_button
-        text: ""
-        implicitWidth: UM.Theme.getSize("favorites_button").width
-        implicitHeight: UM.Theme.getSize("favorites_button").height
-        visible: materialSlot.hovered || materialSlot.is_favorite || favorite_button.hovered
-        anchors
-        {
-            right: materialSlot.right
-            verticalCenter: materialSlot.verticalCenter
-        }
-        onClicked:
-        {
-            if (materialSlot.is_favorite)
+        id: favoriteButton
+
+        states:
+        [
+            State
             {
-                CuraApplication.getMaterialManagementModel().removeFavorite(material.root_material_id)
-            }
-            else
+                name: "favorite"
+                when: material !== null && material.is_favorite
+                PropertyChanges { target: favoriteIndicator; source: UM.Theme.getIcon("StarFilled"); color: UM.Theme.getColor("primary") }
+                PropertyChanges { target: favoriteButton; visible: true }
+            },
+            State
             {
-                CuraApplication.getMaterialManagementModel().addFavorite(material.root_material_id)
+                name: "hovered"
+                when: hovered
+                PropertyChanges { target: favoriteButton; visible: true }
             }
-        }
+        ]
+
+        implicitHeight: parent.height
+        implicitWidth: height
+        anchors.right: materialSlot.right
+        visible: false
 
         UM.RecolorImage
         {
-            anchors
+            id: favoriteIndicator
+            anchors.centerIn: parent
+            width: UM.Theme.getSize("small_button_icon").width
+            height: UM.Theme.getSize("small_button_icon").height
+            color: UM.Theme.getColor("text_inactive")
+            source: UM.Theme.getIcon("Star")
+        }
+
+        MouseArea
+        {
+            anchors.fill: parent
+            onClicked:
             {
-                verticalCenter: favorite_button.verticalCenter
-                horizontalCenter: favorite_button.horizontalCenter
-            }
-            width: UM.Theme.getSize("favorites_button_icon").width
-            height: UM.Theme.getSize("favorites_button_icon").height
-            color:
-            {
-                if (favorite_button.hovered)
+                if (material !== null)
                 {
-                    return UM.Theme.getColor("primary_hover")
-                }
-                else
-                {
-                    if (materialSlot.is_favorite)
+                    if (material.is_favorite)
                     {
-                        return UM.Theme.getColor("primary")
+                        CuraApplication.getMaterialManagementModel().removeFavorite(material.root_material_id)
                     }
                     else
                     {
-                        UM.Theme.getColor("text_inactive")
+                        CuraApplication.getMaterialManagementModel().addFavorite(material.root_material_id)
                     }
                 }
             }
-            source: materialSlot.is_favorite ? UM.Theme.getIcon("StarFilled") : UM.Theme.getIcon("Star")
         }
     }
 }