initial commit on chatForm, messageOut

2 files changed, 102 insertions, 0 deletions

diff --git a/ChatForm.ui.qml b/ChatForm.ui.qml
new file mode 100644
index 0000000..f53342d
--- /dev/null
+++ b/ChatForm.ui.qml
@@ -0,0 +1,49 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import Bootstrap 5.3
+
+Item {
+	width: 360
+	height: 64
+
+	Rectangle {
+		id: roundedPill
+		color: "#cc95aac9"
+		radius: 100
+		anchors.fill: parent
+
+		RowLayout {
+			anchors.fill: parent
+			anchors.rightMargin: 8
+			anchors.leftMargin: 8
+			anchors.bottomMargin: 8
+			anchors.topMargin: 8
+			RoundButton {
+				id: attachment
+				display: AbstractButton.IconOnly
+				flat: true
+			}
+
+			TextField {
+				id: chatFormInput
+				Layout.fillWidth: true
+				placeholderText: qsTr("Type your message...")
+			}
+
+			RoundButton {
+				id: emoji
+				flat: true
+				display: AbstractButton.IconOnly
+				highlighted: false
+			}
+
+			RoundButton {
+				id: send
+				display: AbstractButton.IconOnly
+				highlighted: false
+			}
+		}
+	}
+}
diff --git a/MessageOut.ui.qml b/MessageOut.ui.qml
new file mode 100644
index 0000000..671d4d5
--- /dev/null
+++ b/MessageOut.ui.qml
@@ -0,0 +1,53 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import Bootstrap 5.3
+
+Item {
+    width: 360
+
+    RowLayout {
+        id: rowLayout
+        anchors.fill: parent
+
+        ColumnLayout {
+            Rectangle {
+                id: rectangle
+                width: 200
+                height: 200
+                color: "#2787f5"
+                radius: 16
+                Layout.fillWidth: true
+
+                Label {
+                    id: messageOut
+                    text: qsTr("Hey, Marshall! How are you? Can you please change the color theme of the website to pink and purple? 😂")
+                    anchors.fill: parent
+                    wrapMode: Text.Wrap
+                }
+            }
+
+            Label {
+                id: messageText
+                text: qsTr("08:45 PM")
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+            }
+        }
+
+        Rectangle {
+            id: messageOutAvatar
+            width: 64
+            height: 64
+            color: "#ffffff"
+            radius: 100
+            Layout.maximumHeight: 64
+            Layout.maximumWidth: 64
+            Layout.minimumHeight: 24
+            Layout.minimumWidth: 24
+            Layout.preferredHeight: 64
+            Layout.preferredWidth: 64
+            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+        }
+    }
+}