qt-chat-app

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

ChatListItem.qml (3290B)

      1 import QtQuick
      2 import QtQuick.Layouts
      3 import "../styles"
      4 
      5 Rectangle {
      6     id: root
      7     height: 72
      8     color: isSelected ? TelegramStyle.primaryColor + "22" : (mouseArea.containsMouse ? "#f5f5f5" : "white")
      9     border.color: isSelected ? TelegramStyle.primaryColor : "transparent"
     10     border.width: isSelected ? 2 : 0
     11 
     12     property var chatData: null
     13     property bool isSelected: false
     14     signal clicked()
     15 
     16     RowLayout {
     17         anchors.fill: parent
     18         anchors.margins: TelegramStyle.standardMargin
     19         spacing: TelegramStyle.standardMargin
     20 
     21         // Avatar
     22         Avatar {
     23             size: TelegramStyle.avatarSize
     24             name: chatData ? chatData.title : ""
     25             chatId: chatData ? chatData.id : 0
     26             imageSource: chatData ? chatData.avatar : ""
     27             showOnlineIndicator: chatData ? chatData.is_online : false
     28         }
     29 
     30         // Content
     31         ColumnLayout {
     32             Layout.fillWidth: true
     33             spacing: 4
     34 
     35             // Name and timestamp row
     36             RowLayout {
     37                 Layout.fillWidth: true
     38 
     39                 Text {
     40                     Layout.fillWidth: true
     41                     text: chatData ? chatData.title : ""
     42                     font.bold: chatData ? chatData.unread_count > 0 : false
     43                     font.pixelSize: TelegramStyle.fontSizeNormal
     44                     color: TelegramStyle.textPrimary
     45                     elide: Text.ElideRight
     46                 }
     47 
     48                 Text {
     49                     text: chatData ? chatData.created_at : ""
     50                     font.pixelSize: TelegramStyle.fontSizeSmall
     51                     color: chatData && chatData.unread_count > 0 ? TelegramStyle.unreadBadge : TelegramStyle.textSecondary
     52                 }
     53             }
     54 
     55             // Last message and unread badge row
     56             RowLayout {
     57                 Layout.fillWidth: true
     58 
     59                 Text {
     60                     Layout.fillWidth: true
     61                     text: chatData ? chatData.last_message : ""
     62                     font.pixelSize: TelegramStyle.fontSizeSmall
     63                     color: TelegramStyle.textSecondary
     64                     elide: Text.ElideRight
     65                 }
     66 
     67                 // Unread badge
     68                 Rectangle {
     69                     visible: chatData ? chatData.unread_count > 0 : false
     70                     width: 20
     71                     height: 20
     72                     radius: 10
     73                     color: TelegramStyle.unreadBadge
     74 
     75                     Text {
     76                         anchors.centerIn: parent
     77                         text: chatData ? chatData.unread_count : ""
     78                         color: "white"
     79                         font.pixelSize: 11
     80                         font.bold: true
     81                     }
     82                 }
     83             }
     84         }
     85     }
     86 
     87     MouseArea {
     88         id: mouseArea
     89         anchors.fill: parent
     90         hoverEnabled: true
     91         cursorShape: Qt.PointingHandCursor
     92         onClicked: root.clicked()
     93     }
     94 
     95     // Divider
     96     Rectangle {
     97         anchors.bottom: parent.bottom
     98         anchors.left: parent.left
     99         anchors.right: parent.right
    100         anchors.leftMargin: TelegramStyle.standardMargin + TelegramStyle.avatarSize + TelegramStyle.standardMargin
    101         height: 1
    102         color: TelegramStyle.divider
    103     }
    104 }