feat: make RectangleCorner a component and show images in compact

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -6,6 +6,7 @@ Item {
     property var clickMessage: function () {}
     property int chatHorizontalPadding: 12
     property int chatVerticalPadding: 7
+    property bool showImages: messageItem.appSettings.displayChatImages && imageUrls != ""
 
     id: chatTextItem
     anchors.top: parent.top
@@ -95,4 +96,21 @@ Item {
         anchors.left: chatTime.right
         anchors.rightMargin: 5
     }
+
+    Loader {
+        id: imageLoader
+        active: showImages
+        sourceComponent: imageComponent
+        anchors.left: chatImage.right
+        anchors.leftMargin: 8
+        anchors.top: chatText.bottom
+    }
+
+    Component {
+        id: imageComponent
+        ImageMessage {
+            color: Style.current.transparent
+            chatHorizontalPadding: 0
+        }
+    }
 }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml

@@ -44,18 +44,5 @@ Rectangle {
         }
     }
 
-    // This rectangle's only job is to mask the corner to make it less rounded... yep
+    RectangleCorner {}
-    Rectangle {
-        color: parent.color
-        width: 18
-        height: 18
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
-        anchors.left: !isCurrentUser ? parent.left : undefined
-        anchors.leftMargin: 0
-        anchors.right: !isCurrentUser ? undefined : parent.right
-        anchors.rightMargin: 0
-        radius: 4
-        z: -1
-    }
 }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml

@@ -97,6 +97,11 @@ Item {
         MessageMouseArea {
             anchors.fill: parent
         }
+
+        RectangleCorner {
+            // TODO find a way to show the corner for stickers since they have a border
+            visible: isMessage || isEmoji
+        }
     }
 
     ChatTime {
@@ -115,24 +120,6 @@ Item {
         anchors.right: chatTime.left
         anchors.rightMargin: 5
     }
-
-    // This rectangle's only job is to mask the corner to make it less rounded... yep
-    Rectangle {
-        // TODO find a way to show the corner for stickers since they have a border
-        visible: isMessage || isEmoji
-        color: chatBox.color
-        width: 18
-        height: 18
-        anchors.bottom: chatBox.bottom
-        anchors.bottomMargin: 0
-        anchors.left: !isCurrentUser ? chatBox.left : undefined
-        anchors.leftMargin: 0
-        anchors.right: !isCurrentUser ? undefined : chatBox.right
-        anchors.rightMargin: 0
-        radius: 4
-        z: -1
-    }
-
     Loader {
         id: imageLoader
         active: showImages
@@ -141,7 +128,7 @@ Item {
         anchors.leftMargin: !isCurrentUser ? 8 : 0
         anchors.right: !isCurrentUser ? undefined : parent.right
         anchors.rightMargin: !isCurrentUser ? 0 : Style.current.padding
-        anchors.top: messageItem.appSettings.displayChatImages && imageUrls != "" ? chatBox.bottom : chatTime.bottom
+        anchors.top: chatBox.bottom
         anchors.topMargin: Style.current.smallPadding
     }
 

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/RectangleCorner.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.3
+
+// This rectangle's only job is to mask the corner to make it less rounded... yep
+Rectangle {
+    color: parent.color
+    width: 18
+    height: 18
+    anchors.bottom: parent.bottom
+    anchors.bottomMargin: 0
+    anchors.left: !isCurrentUser ? parent.left : undefined
+    anchors.leftMargin: 0
+    anchors.right: !isCurrentUser ? undefined : parent.right
+    anchors.rightMargin: 0
+    radius: 4
+    z: -1
+}

ui/nim-status-client.pro

@@ -66,6 +66,7 @@ DISTFILES += \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml \
+    app/AppLayouts/Chat/ChatColumn/MessageComponents/RectangleCorner.qml \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/SentMessage.qml \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/Sticker.qml \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml \