lookandfeel/components/UserDelegate.qml

0001 /*
0002     SPDX-FileCopyrightText: 2014 David Edmundson <davidedmundson@kde.org>
0003     SPDX-FileCopyrightText: 2014 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
0004
0005     SPDX-License-Identifier: LGPL-2.0-or-later
0006 */
0007
0008 import QtQuick 2.15
0009 import QtQuick.Window 2.15
0010
0011 import org.kde.plasma.components 3.0 as PlasmaComponents3
0012 import org.kde.kirigami 2.20 as Kirigami
0013
0014 Item {
0015     id: wrapper
0016
0017     // If we're using software rendering, draw outlines instead of shadows
0018     // See https://bugs.kde.org/show_bug.cgi?id=398317
0019     readonly property bool softwareRendering: GraphicsInfo.api === GraphicsInfo.Software
0020
0021     property bool isCurrent: true
0022
0023     property string name
0024     property string userName
0025     property string avatarPath
0026     property string iconSource
0027     property bool needsPassword
0028     property var vtNumber
0029     property bool constrainText: true
0030     property alias nameFontSize: usernameDelegate.font.pointSize
0031     property int fontSize: Kirigami.Theme.defaultFont.pointSize + 2
0032     signal clicked()
0033
0034     property real faceSize: Kirigami.Units.gridUnit * 7
0035
0036     opacity: isCurrent ? 1.0 : 0.5
0037
0038     Behavior on opacity {
0039         OpacityAnimator {
0040             duration: Kirigami.Units.longDuration
0041         }
0042     }
0043
0044     // Draw a translucent background circle under the user picture
0045     Rectangle {
0046         anchors.centerIn: imageSource
0047         width: imageSource.width - 2 // Subtract to prevent fringing
0048         height: width
0049         radius: width / 2
0050
0051         color: Kirigami.Theme.backgroundColor
0052         opacity: 0.6
0053     }
0054
0055     Item {
0056         id: imageSource
0057         anchors.top: parent.top
0058         anchors.horizontalCenter: parent.horizontalCenter
0059
0060         Behavior on width {
0061             PropertyAnimation {
0062                 from: faceSize
0063                 duration: Kirigami.Units.longDuration;
0064             }
0065         }
0066         width: isCurrent ? faceSize : faceSize - Kirigami.Units.gridUnit
0067         height: width
0068
0069         //Image takes priority, taking a full path to a file, if that doesn't exist we show an icon
0070         Image {
0071             id: face
0072             source: wrapper.avatarPath
0073             sourceSize: Qt.size(faceSize * Screen.devicePixelRatio, faceSize * Screen.devicePixelRatio)
0074             fillMode: Image.PreserveAspectCrop
0075             anchors.fill: parent
0076         }
0077
0078         Kirigami.Icon {
0079             id: faceIcon
0080             source: iconSource
0081             visible: face.status === Image.Error || face.status === Image.Null
0082             anchors.fill: parent
0083         }
0084     }
0085
0086     ShaderEffect {
0087         anchors.top: parent.top
0088         anchors.horizontalCenter: parent.horizontalCenter
0089
0090         width: imageSource.width
0091         height: imageSource.height
0092
0093         supportsAtlasTextures: true
0094
0095         readonly property Item source: ShaderEffectSource {
0096             sourceItem: imageSource
0097             // software rendering is just a fallback so we can accept not having a rounded avatar here
0098             hideSource: wrapper.GraphicsInfo.api !== GraphicsInfo.Software
0099             live: true // otherwise the user in focus will show a blurred avatar
0100         }
0101
0102         readonly property color colorBorder: Kirigami.Theme.textColor
0103
0104         fragmentShader: "qrc:/qt/qml/org/kde/breeze/components/shaders/UserDelegate.frag.qsb"
0105     }
0106
0107     PlasmaComponents3.Label {
0108         id: usernameDelegate
0109
0110         anchors.top: imageSource.bottom
0111         anchors.topMargin: Kirigami.Units.gridUnit
0112         anchors.horizontalCenter: parent.horizontalCenter
0113
0114         // Make it bigger than other fonts to match the scale of the avatar better
0115         font.pointSize: wrapper.fontSize + 4
0116
0117         width: constrainText ? parent.width : undefined
0118         text: wrapper.name
0119         textFormat: Text.PlainText
0120         style: softwareRendering ? Text.Outline : Text.Normal
0121         styleColor: softwareRendering ? Kirigami.Theme.backgroundColor : "transparent" //no outline, doesn't matter
0122         wrapMode: Text.WordWrap
0123         maximumLineCount: wrapper.constrainText ? 3 : 1
0124         elide: Text.ElideRight
0125         horizontalAlignment: Text.AlignHCenter
0126         //make an indication that this has active focus, this only happens when reached with keyboard navigation
0127         font.underline: wrapper.activeFocus
0128     }
0129
0130     MouseArea {
0131         anchors.fill: parent
0132         hoverEnabled: true
0133
0134         onClicked: wrapper.clicked()
0135     }
0136
0137     Keys.onSpacePressed: wrapper.clicked()
0138
0139     Accessible.name: name
0140     Accessible.role: Accessible.Button
0141     function accessiblePressAction() { wrapper.clicked() }
0142 }