Make reusable NotificationIcon

CURA-6151

resources/qml/Widgets/NotificationIcon.qml

@@ -0,0 +1,35 @@
+// 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.4 as UM
+
+
+//
+// A notification icon which is a circle with a number at the center, that can be used to indicate, for example, how
+// many new messages that are available.
+//
+Rectangle
+{
+    id: notificationIcon
+    color: UM.Theme.getColor("notification_icon")
+    width: UM.Theme.getSize("notification_icon").width
+    height: UM.Theme.getSize("notification_icon").height
+    radius: (0.5 * width) | 0
+
+    property alias labelText: notificationLabel.text
+    property alias labelFont: notificationLabel.font
+
+    Label
+    {
+        id: notificationLabel
+        anchors.centerIn: parent
+        anchors.fill: parent
+        color: UM.Theme.getColor("primary_text")
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        font: UM.Theme.getFont("small")
+    }
+}

resources/qml/qmldir

@@ -17,3 +17,5 @@ SettingView 1.0 SettingView.qml
 ProfileMenu 1.0 ProfileMenu.qml
 CheckBoxWithTooltip 1.0 CheckBoxWithTooltip.qml
 ToolTip 1.0 ToolTip.qml
+
+NotificationIcon 1.0 NotificationIcon.qml

resources/themes/cura-light/theme.json

@@ -596,6 +596,8 @@
         "toolbox_action_button": [8.0, 2.5],
         "toolbox_loader": [2.0, 2.0],
 
+        "notification_icon": [1.4, 1.4],
+
         "avatar_image": [6.8, 6.8],
 
         "monitor_config_override_box": [1.0, 14.0],