qt-chat-app

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

AttachmentPreview.qml (3684B)

      1 import QtQuick
      2 import QtQuick.Layouts
      3 import "../styles"
      4 
      5 ColumnLayout {
      6     id: root
      7     spacing: 4
      8 
      9     property var attachments: []
     10 
     11     Repeater {
     12         model: attachments
     13 
     14         Loader {
     15             Layout.maximumWidth: 300
     16             sourceComponent: {
     17                 if (modelData.type === "image") return imagePreview
     18                 if (modelData.type === "video") return videoPreview
     19                 if (modelData.type === "file") return filePreview
     20                 return null
     21             }
     22 
     23             property var attachmentData: modelData
     24         }
     25     }
     26 
     27     // Image preview component
     28     Component {
     29         id: imagePreview
     30 
     31         Rectangle {
     32             width: 200
     33             height: 150
     34             radius: TelegramStyle.bubbleRadius
     35             color: "#e0e0e0"
     36 
     37             Text {
     38                 anchors.centerIn: parent
     39                 text: "\ud83d\uddbc"  // Frame with picture emoji
     40                 font.pixelSize: 48
     41             }
     42 
     43             Text {
     44                 anchors.bottom: parent.bottom
     45                 anchors.left: parent.left
     46                 anchors.margins: 8
     47                 text: attachmentData.filename || "Image"
     48                 font.pixelSize: TelegramStyle.fontSizeSmall
     49                 color: TelegramStyle.textSecondary
     50             }
     51         }
     52     }
     53 
     54     // Video preview component
     55     Component {
     56         id: videoPreview
     57 
     58         Rectangle {
     59             width: 200
     60             height: 150
     61             radius: TelegramStyle.bubbleRadius
     62             color: "#333333"
     63 
     64             Text {
     65                 anchors.centerIn: parent
     66                 text: "\u25b6"  // Play button
     67                 font.pixelSize: 48
     68                 color: "white"
     69             }
     70 
     71             Text {
     72                 anchors.bottom: parent.bottom
     73                 anchors.left: parent.left
     74                 anchors.margins: 8
     75                 text: attachmentData.filename || "Video"
     76                 font.pixelSize: TelegramStyle.fontSizeSmall
     77                 color: "white"
     78             }
     79         }
     80     }
     81 
     82     // File preview component
     83     Component {
     84         id: filePreview
     85 
     86         Rectangle {
     87             width: 250
     88             height: 60
     89             radius: TelegramStyle.bubbleRadius
     90             color: "#f5f5f5"
     91             border.color: TelegramStyle.divider
     92             border.width: 1
     93 
     94             RowLayout {
     95                 anchors.fill: parent
     96                 anchors.margins: 8
     97                 spacing: 12
     98 
     99                 // File icon
    100                 Rectangle {
    101                     Layout.preferredWidth: 44
    102                     Layout.preferredHeight: 44
    103                     radius: 4
    104                     color: TelegramStyle.primaryColor
    105 
    106                     Text {
    107                         anchors.centerIn: parent
    108                         text: "\ud83d\udcc4"  // Page facing up emoji
    109                         font.pixelSize: 24
    110                     }
    111                 }
    112 
    113                 // File info
    114                 ColumnLayout {
    115                     Layout.fillWidth: true
    116                     spacing: 2
    117 
    118                     Text {
    119                         Layout.fillWidth: true
    120                         text: attachmentData.filename || "Document"
    121                         font.pixelSize: TelegramStyle.fontSizeNormal
    122                         color: TelegramStyle.textPrimary
    123                         elide: Text.ElideRight
    124                     }
    125 
    126                     Text {
    127                         text: attachmentData.size || "Unknown size"
    128                         font.pixelSize: TelegramStyle.fontSizeSmall
    129                         color: TelegramStyle.textSecondary
    130                     }
    131                 }
    132             }
    133         }
    134     }
    135 }