Add material info button to show Ultimaker.com materials page

CURA-3810

Add a new info button for materials. When a user clicks on the button,
it will open the materials information page on the Ultimaker website.

resources/qml/SidebarHeader.qml

@@ -196,16 +196,60 @@ Column
             }
 
             anchors.verticalCenter: parent.verticalCenter
-            width: parent.width * 0.45 - UM.Theme.getSize("default_margin").width
+            width: parent.width * 0.30
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
         }
 
+        Text
+        {
+            width: parent.width * 0.05
+        }
+
+        Button
+        {
+            id: materialInfoButton
+            height: parent.height * 0.70
+            width: height
+            anchors.margins: UM.Theme.getSize("default_margin").width
+            anchors.verticalCenter: parent.verticalCenter
+
+            text: "i"
+            style: UM.Theme.styles.info_button
+
+            onClicked:
+            {
+                // open the material URL with web browser
+                var url = "https://ultimaker.com/en/resources/23121-materials";
+                Qt.openUrlExternally(url);
+            }
+
+            onHoveredChanged:
+            {
+                if (hovered)
+                {
+                    var content = catalog.i18nc("@tooltip", "Click to check the material compatibility on Ultimaker.com.");
+                    base.showTooltip(
+                        variantRow, Qt.point(0, variantRow.height / 2), catalog.i18nc("@tooltip", content)
+                    );
+                }
+                else
+                {
+                    base.hideTooltip();
+                }
+            }
+        }
+
+        Text
+        {
+            width: parent.width * 0.10 - materialInfoButton.width - UM.Theme.getSize("default_margin").width
+        }
+
         Item
         {
             anchors.verticalCenter: parent.verticalCenter
 
-            width: parent.width * 0.55 + UM.Theme.getSize("default_margin").width
+            width: parent.width * 0.50 + UM.Theme.getSize("default_margin").width
             height: UM.Theme.getSize("setting_control").height
 
             ToolButton {

resources/themes/cura/styles.qml

@@ -8,6 +8,37 @@ import QtQuick.Controls.Styles 1.1
 import UM 1.1 as UM
 
 QtObject {
+    property Component info_button: Component {
+        ButtonStyle {
+            label: Text {
+                renderType: Text.NativeRendering
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                font: UM.Theme.getFont("small")
+                color: UM.Theme.getColor("info_button_text")
+                text: control.text
+            }
+
+            background: Rectangle {
+                implicitHeight: UM.Theme.getSize("info_button").height
+                implicitWidth: width
+                border.width: 0
+                radius: height * 0.5
+
+                color: {
+                    if (control.pressed) {
+                        return UM.Theme.getColor("info_button_background_active");
+                    } else if (control.hovered) {
+                        return UM.Theme.getColor("info_button_background_hover");
+                    } else {
+                        return UM.Theme.getColor("info_button_background");
+                    }
+                }
+                Behavior on color { ColorAnimation { duration: 50; } }
+            }
+        }
+    }
+
     property Component mode_switch: Component {
         SwitchStyle {
             groove: Rectangle {

resources/themes/cura/theme.json

@@ -243,7 +243,12 @@
         "layerview_support_infill": [0,  255,  255, 255],
         "layerview_move_combing": [0,  0,  255, 255],
         "layerview_move_retraction": [128,  128,  255, 255],
-        "layerview_support_interface": [64, 192, 255, 255]
+        "layerview_support_interface": [64, 192, 255, 255],
+
+        "info_button_text": [255, 255, 255, 255],
+        "info_button_background": [127, 127, 127, 255],
+        "info_button_background_hover": [24, 41, 77, 255],
+        "info_button_background_active": [70, 84, 113, 255]
     },
 
     "sizes": {
@@ -329,6 +334,8 @@
 
         "infill_button_margin": [0.5, 0.5],
 
-        "jobspecs_line": [2.0, 2.0]
+        "jobspecs_line": [2.0, 2.0],
+
+        "info_button": [0.6, 0.6]
     }
 }