Code reformatting && tooltip.

qml/component/ButtonDelegate.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.3
-import QtQuick.Controls 2.3
+import QtQuick 2.11
+import QtQuick.Controls 2.4
 
 ItemDelegate {
     id: itemDelegate

qml/component/ImageStatus.qml

@@ -1,17 +1,22 @@
 import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtGraphicalEffects 1.0
+import QtQuick.Controls.Material 2.4
 
 Item {
     property bool opaqueBackground: false
-    property alias source: avatar.source
+    property bool round: true
+    property string source: ""
+    property string displayText: ""
+    readonly property bool showImage: source
+    readonly property bool showInitial: !showImage && displayText
 
     id: item
 
     Rectangle {
         width: item.width
         height: item.width
-        radius: item.width / 2
+        radius: round ? item.width / 2 : 0
         color: "white"
         visible: opaqueBackground
     }
@@ -20,6 +25,8 @@ Item {
         id: avatar
         width: item.width
         height: item.width
+        visible: showImage
+        source: item.source
 
         mipmap: true
         layer.enabled: true
@@ -35,9 +42,42 @@ Item {
                     anchors.centerIn: parent
                     width: avatar.width
                     height: avatar.width
-                    radius: avatar.width / 2
+                    radius: round? avatar.width / 2 : 0
                 }
             }
         }
     }
+
+    Label {
+        anchors.fill: parent
+        color: "white"
+        visible: showInitial
+        text: showInitial ? getInitials(displayText)[0] : ""
+        font.pixelSize: 22
+        font.bold: true
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        background: Rectangle {
+            anchors.fill: parent
+            radius: round? width / 2 : 0
+            color: showInitial ? stringToColor(displayText) : Material.accent
+        }
+    }
+
+    function getInitials(text) {
+        return text.toUpperCase().replace(/[^a-zA-Z- ]/g, "").match(/\b\w/g);
+    }
+
+    function stringToColor(str) {
+        var hash = 0;
+        for (var i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        var colour = '#';
+        for (var i = 0; i < 3; i++) {
+            var value = (hash >> (i * 8)) & 0xFF;
+            colour += ('00' + value.toString(16)).substr(-2);
+        }
+        return colour;
+    }
 }

qml/component/MaterialIcon.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.3
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+import QtQuick.Controls.Material 2.4
 
 Item {
     property alias icon: iconText.text
@@ -17,5 +17,5 @@ Item {
         color: item.color
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
-   }
+    }
 }

qml/component/SideNav.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.3
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+import QtQuick.Controls.Material 2.4
 
 Item {
     Rectangle {

qml/component/SideNavButton.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
-import QtQuick.Controls.Material 2.3
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+import QtQuick.Controls.Material 2.4
 
 Item {
     property var page
@@ -29,7 +29,7 @@ Item {
         anchors.fill: parent
 
         onClicked: {
-            if(page != null && stackView.currentItem !== page) {
+            if(!page && stackView.currentItem !== page) {
                 if(stackView.depth === 1) {
                     stackView.replace(page)
                 } else {