qt-chat-app

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

MessageInput.qml (4061B)

      1 import QtQuick
      2 import QtQuick.Layouts
      3 import "../styles"
      4 
      5 Rectangle {
      6     id: root
      7     height: TelegramStyle.inputBarHeight
      8     color: "white"
      9     border.color: TelegramStyle.divider
     10     border.width: 1
     11 
     12     signal sendMessage(string text)
     13     signal attachClicked()
     14 
     15     RowLayout {
     16         anchors.fill: parent
     17         anchors.margins: TelegramStyle.smallMargin
     18         spacing: TelegramStyle.smallMargin
     19 
     20         // Attach button
     21         Rectangle {
     22             id: attachButton
     23             Layout.preferredWidth: 40
     24             Layout.preferredHeight: 40
     25             radius: 20
     26             color: activeFocus ? TelegramStyle.divider : "transparent"
     27             border.color: activeFocus ? TelegramStyle.primaryColor : "transparent"
     28             border.width: activeFocus ? 2 : 0
     29             activeFocusOnTab: true
     30             KeyNavigation.tab: messageInput
     31 
     32             Keys.onReturnPressed: root.attachClicked()
     33             Keys.onSpacePressed: root.attachClicked()
     34 
     35             Text {
     36                 anchors.centerIn: parent
     37                 text: "\ud83d\udcce"  // Paperclip emoji
     38                 font.pixelSize: 24
     39             }
     40 
     41             MouseArea {
     42                 anchors.fill: parent
     43                 cursorShape: Qt.PointingHandCursor
     44                 onClicked: root.attachClicked()
     45             }
     46         }
     47 
     48         // Text input
     49         Rectangle {
     50             Layout.fillWidth: true
     51             Layout.fillHeight: true
     52             radius: 20
     53             color: "#f5f5f5"
     54             border.color: messageInput.activeFocus ? TelegramStyle.primaryColor : TelegramStyle.divider
     55             border.width: messageInput.activeFocus ? 2 : 1
     56 
     57             TextInput {
     58                 id: messageInput
     59                 anchors.fill: parent
     60                 anchors.margins: 12
     61                 verticalAlignment: TextInput.AlignVCenter
     62                 font.pixelSize: TelegramStyle.fontSizeNormal
     63                 color: TelegramStyle.textPrimary
     64                 clip: true
     65                 activeFocusOnTab: true
     66                 KeyNavigation.tab: sendButton
     67 
     68                 // Placeholder text
     69                 Text {
     70                     visible: messageInput.text.length === 0
     71                     anchors.verticalCenter: parent.verticalCenter
     72                     text: "Type a message..."
     73                     color: TelegramStyle.textSecondary
     74                     font.pixelSize: TelegramStyle.fontSizeNormal
     75                 }
     76 
     77                 Keys.onReturnPressed: {
     78                     if (messageInput.text.trim().length > 0) {
     79                         sendButton.clicked()
     80                     }
     81                 }
     82             }
     83         }
     84 
     85         // Send button
     86         Rectangle {
     87             id: sendButton
     88             Layout.preferredWidth: 40
     89             Layout.preferredHeight: 40
     90             radius: 20
     91             color: messageInput.text.trim().length > 0 ? TelegramStyle.primaryColor : TelegramStyle.divider
     92             border.color: activeFocus ? TelegramStyle.textPrimary : "transparent"
     93             border.width: activeFocus ? 2 : 0
     94             activeFocusOnTab: true
     95             KeyNavigation.tab: attachButton
     96 
     97             Keys.onReturnPressed: clicked()
     98             Keys.onSpacePressed: clicked()
     99 
    100             Behavior on color {
    101                 ColorAnimation { duration: 150 }
    102             }
    103 
    104             Text {
    105                 anchors.centerIn: parent
    106                 text: "\u27a4"  // Right arrow
    107                 font.pixelSize: 20
    108                 color: "white"
    109             }
    110 
    111             MouseArea {
    112                 anchors.fill: parent
    113                 enabled: messageInput.text.trim().length > 0
    114                 cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
    115                 onClicked: sendButton.clicked()
    116             }
    117 
    118             function clicked() {
    119                 if (messageInput.text.trim().length > 0) {
    120                     root.sendMessage(messageInput.text)
    121                     messageInput.text = ""
    122                     messageInput.forceActiveFocus()
    123                 }
    124             }
    125         }
    126     }
    127 }