qt-chat-app

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

ProfileView.qml (10270B)

      1 import QtQuick
      2 import QtQuick.Layouts
      3 import "../components"
      4 import "../styles"
      5 
      6 Item {
      7     id: root
      8 
      9     ColumnLayout {
     10         anchors.fill: parent
     11         spacing: 0
     12 
     13         // Top bar
     14         TopBar {
     15             Layout.fillWidth: true
     16             title: "Profile"
     17             showBackButton: true
     18             showMenuButton: false
     19             onBackClicked: {
     20                 if (typeof stackView !== 'undefined' && stackView) {
     21                     stackView.pop()
     22                 }
     23             }
     24         }
     25 
     26         // Profile content
     27         Rectangle {
     28             Layout.fillWidth: true
     29             Layout.fillHeight: true
     30             color: TelegramStyle.backgroundColor
     31 
     32             Flickable {
     33                 anchors.fill: parent
     34                 contentHeight: profileColumn.height
     35                 clip: true
     36 
     37                 ColumnLayout {
     38                     id: profileColumn
     39                     width: parent.width
     40                     spacing: 0
     41 
     42                     // Profile header with avatar
     43                     Rectangle {
     44                         Layout.fillWidth: true
     45                         Layout.preferredHeight: 200
     46                         color: "white"
     47 
     48                         ColumnLayout {
     49                             anchors.centerIn: parent
     50                             spacing: TelegramStyle.standardMargin
     51 
     52                             Avatar {
     53                                 Layout.alignment: Qt.AlignHCenter
     54                                 size: TelegramStyle.largeAvatarSize
     55                                 name: "User"
     56                                 imageSource: ""
     57                                 showOnlineIndicator: false
     58                             }
     59 
     60                             Text {
     61                                 Layout.alignment: Qt.AlignHCenter
     62                                 text: "User"
     63                                 font.pixelSize: 20
     64                                 font.bold: true
     65                                 color: TelegramStyle.textPrimary
     66                             }
     67 
     68                             Text {
     69                                 Layout.alignment: Qt.AlignHCenter
     70                                 text: "Available"
     71                                 font.pixelSize: TelegramStyle.fontSizeSmall
     72                                 color: TelegramStyle.textSecondary
     73                             }
     74                         }
     75                     }
     76 
     77                     // Spacer
     78                     Rectangle {
     79                         Layout.fillWidth: true
     80                         Layout.preferredHeight: TelegramStyle.standardMargin
     81                         color: "#f5f5f5"
     82                     }
     83 
     84                     // Account section
     85                     ProfileSection {
     86                         Layout.fillWidth: true
     87                         title: "Account"
     88                     }
     89 
     90                     ProfileInfoItem {
     91                         Layout.fillWidth: true
     92                         icon: "\ud83d\udcde"
     93                         label: "Phone"
     94                         value: "+1 000 000 0000"
     95                     }
     96 
     97                     ProfileInfoItem {
     98                         Layout.fillWidth: true
     99                         icon: "\ud83d\udd16"
    100                         label: "Username"
    101                         value: "@user"
    102                     }
    103 
    104                     ProfileInfoItem {
    105                         Layout.fillWidth: true
    106                         icon: "\u2139"
    107                         label: "Bio"
    108                         value: "Available"
    109                         showDivider: false
    110                     }
    111 
    112                     // Spacer
    113                     Rectangle {
    114                         Layout.fillWidth: true
    115                         Layout.preferredHeight: TelegramStyle.standardMargin
    116                         color: "#f5f5f5"
    117                     }
    118 
    119                     // Settings section
    120                     ProfileSection {
    121                         Layout.fillWidth: true
    122                         title: "Settings"
    123                     }
    124 
    125                     ProfileActionItem {
    126                         Layout.fillWidth: true
    127                         icon: "\ud83d\udd14"
    128                         label: "Notifications"
    129                     }
    130 
    131                     ProfileActionItem {
    132                         Layout.fillWidth: true
    133                         icon: "\ud83d\udd12"
    134                         label: "Privacy and Security"
    135                     }
    136 
    137                     // Spacer
    138                     Rectangle {
    139                         Layout.fillWidth: true
    140                         Layout.preferredHeight: TelegramStyle.standardMargin
    141                         color: "#f5f5f5"
    142                     }
    143 
    144                     // Logout button
    145                     Rectangle {
    146                         Layout.fillWidth: true
    147                         height: 50
    148                         color: logoutMouseArea.containsMouse ? "#ffebee" : "white"
    149 
    150                         Behavior on color {
    151                             ColorAnimation { duration: 100 }
    152                         }
    153 
    154                         RowLayout {
    155                             anchors.fill: parent
    156                             anchors.margins: TelegramStyle.standardMargin
    157                             spacing: TelegramStyle.standardMargin
    158 
    159                             Text {
    160                                 text: "\ud83d\udebb"
    161                                 font.pixelSize: 24
    162                             }
    163 
    164                             Text {
    165                                 Layout.fillWidth: true
    166                                 text: "Logout"
    167                                 font.pixelSize: TelegramStyle.fontSizeNormal
    168                                 color: "#f44336"
    169                             }
    170                         }
    171 
    172                         MouseArea {
    173                             id: logoutMouseArea
    174                             anchors.fill: parent
    175                             hoverEnabled: true
    176                             cursorShape: Qt.PointingHandCursor
    177                             onClicked: {
    178                                 NetworkManager.logout()
    179                                 // Navigate back to login screen
    180                                 if (typeof stackView !== 'undefined' && stackView) {
    181                                     stackView.replace(Qt.resolvedUrl("LoginView.qml"))
    182                                 }
    183                             }
    184                         }
    185                     }
    186                 }
    187             }
    188         }
    189     }
    190 
    191     // Profile section header component
    192     Component {
    193         id: profileSectionComponent
    194         Rectangle {
    195             height: 40
    196             color: "#f5f5f5"
    197 
    198             property string title: ""
    199 
    200             Text {
    201                 anchors.left: parent.left
    202                 anchors.leftMargin: TelegramStyle.standardMargin
    203                 anchors.verticalCenter: parent.verticalCenter
    204                 text: parent.title
    205                 font.pixelSize: TelegramStyle.fontSizeSmall
    206                 font.bold: true
    207                 color: TelegramStyle.primaryColor
    208             }
    209         }
    210     }
    211 }
    212 
    213 // Profile section header
    214 Rectangle {
    215     id: profileSection
    216     height: 40
    217     color: "#f5f5f5"
    218     property string title: ""
    219 
    220     Text {
    221         anchors.left: parent.left
    222         anchors.leftMargin: TelegramStyle.standardMargin
    223         anchors.verticalCenter: parent.verticalCenter
    224         text: parent.title
    225         font.pixelSize: TelegramStyle.fontSizeSmall
    226         font.bold: true
    227         color: TelegramStyle.primaryColor
    228     }
    229 }
    230 
    231 // Profile info item (non-clickable)
    232 Rectangle {
    233     id: profileInfoItem
    234     height: 60
    235     color: "white"
    236 
    237     property string icon: ""
    238     property string label: ""
    239     property string value: ""
    240     property bool showDivider: true
    241 
    242     RowLayout {
    243         anchors.fill: parent
    244         anchors.margins: TelegramStyle.standardMargin
    245         spacing: TelegramStyle.standardMargin
    246 
    247         Text {
    248             text: parent.parent.icon
    249             font.pixelSize: 24
    250         }
    251 
    252         ColumnLayout {
    253             Layout.fillWidth: true
    254             spacing: 2
    255 
    256             Text {
    257                 text: parent.parent.parent.label
    258                 font.pixelSize: TelegramStyle.fontSizeSmall
    259                 color: TelegramStyle.textSecondary
    260             }
    261 
    262             Text {
    263                 Layout.fillWidth: true
    264                 text: parent.parent.parent.value
    265                 font.pixelSize: TelegramStyle.fontSizeNormal
    266                 color: TelegramStyle.textPrimary
    267                 elide: Text.ElideRight
    268             }
    269         }
    270     }
    271 
    272     Rectangle {
    273         visible: showDivider
    274         anchors.bottom: parent.bottom
    275         anchors.left: parent.left
    276         anchors.right: parent.right
    277         anchors.leftMargin: TelegramStyle.standardMargin * 2 + 24
    278         height: 1
    279         color: TelegramStyle.divider
    280     }
    281 }
    282 
    283 // Profile action item (clickable)
    284 Rectangle {
    285     id: profileActionItem
    286     height: 50
    287     color: mouseArea.containsMouse ? "#f5f5f5" : "white"
    288 
    289     property string icon: ""
    290     property string label: ""
    291     property bool showDivider: true
    292 
    293     Behavior on color {
    294         ColorAnimation { duration: 100 }
    295     }
    296 
    297     RowLayout {
    298         anchors.fill: parent
    299         anchors.margins: TelegramStyle.standardMargin
    300         spacing: TelegramStyle.standardMargin
    301 
    302         Text {
    303             text: parent.parent.icon
    304             font.pixelSize: 24
    305         }
    306 
    307         Text {
    308             Layout.fillWidth: true
    309             text: parent.parent.label
    310             font.pixelSize: TelegramStyle.fontSizeNormal
    311             color: TelegramStyle.textPrimary
    312         }
    313 
    314         Text {
    315             text: "\u203a"
    316             font.pixelSize: 24
    317             color: TelegramStyle.textSecondary
    318         }
    319     }
    320 
    321     MouseArea {
    322         id: mouseArea
    323         anchors.fill: parent
    324         hoverEnabled: true
    325         cursorShape: Qt.PointingHandCursor
    326         onClicked: {
    327             // TODO: implement profile action
    328         }
    329     }
    330 
    331     Rectangle {
    332         visible: showDivider
    333         anchors.bottom: parent.bottom
    334         anchors.left: parent.left
    335         anchors.right: parent.right
    336         anchors.leftMargin: TelegramStyle.standardMargin * 2 + 24
    337         height: 1
    338         color: TelegramStyle.divider
    339     }
    340 }