1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
/*
SPDX-FileCopyrightText: 2014 David Edmundson <davidedmundson@kde.org>
SPDX-FileCopyrightText: 2014 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
SPDX-License-Identifier: LGPL-2.0-or-later
*/
import QtQuick 2.8
import QtQuick.Window 2.15
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents3
Item {
id: wrapper
// If we're using software rendering, draw outlines instead of shadows
// See https://bugs.kde.org/show_bug.cgi?id=398317
readonly property bool softwareRendering: GraphicsInfo.api === GraphicsInfo.Software
property bool isCurrent: true
property string name
property string userName
property string avatarPath
property string iconSource
property bool needsPassword
property var vtNumber
property bool constrainText: true
property alias nameFontSize: usernameDelegate.font.pointSize
property int fontSize: PlasmaCore.Theme.defaultFont.pointSize + 2
signal clicked()
property real faceSize: PlasmaCore.Units.gridUnit * 7
opacity: isCurrent ? 1.0 : 0.5
Behavior on opacity {
OpacityAnimator {
duration: PlasmaCore.Units.longDuration
}
}
// Draw a translucent background circle under the user picture
Rectangle {
anchors.centerIn: imageSource
width: imageSource.width - 2 // Subtract to prevent fringing
height: width
radius: width / 2
color: PlasmaCore.ColorScope.backgroundColor
opacity: 0.6
}
Item {
id: imageSource
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
Behavior on width {
PropertyAnimation {
from: faceSize
duration: PlasmaCore.Units.longDuration;
}
}
width: isCurrent ? faceSize : faceSize - PlasmaCore.Units.largeSpacing
height: width
//Image takes priority, taking a full path to a file, if that doesn't exist we show an icon
Image {
id: face
source: wrapper.avatarPath
sourceSize: Qt.size(faceSize * Screen.devicePixelRatio, faceSize * Screen.devicePixelRatio)
fillMode: Image.PreserveAspectCrop
anchors.fill: parent
}
PlasmaCore.IconItem {
id: faceIcon
source: iconSource
visible: (face.status == Image.Error || face.status == Image.Null)
anchors.fill: parent
anchors.margins: PlasmaCore.Units.gridUnit * 0.5 // because mockup says so...
colorGroup: PlasmaCore.ColorScope.colorGroup
}
}
ShaderEffect {
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
width: imageSource.width
height: imageSource.height
supportsAtlasTextures: true
property var source: ShaderEffectSource {
sourceItem: imageSource
// software rendering is just a fallback so we can accept not having a rounded avatar here
hideSource: wrapper.GraphicsInfo.api !== GraphicsInfo.Software
live: true // otherwise the user in focus will show a blurred avatar
}
property var colorBorder: PlasmaCore.ColorScope.textColor
//draw a circle with an antialiased border
//innerRadius = size of the inner circle with contents
//outerRadius = size of the border
//blend = area to blend between two colours
//all sizes are normalised so 0.5 == half the width of the texture
//if copying into another project don't forget to connect themeChanged to update()
//but in SDDM that's a bit pointless
fragmentShader: "
varying highp vec2 qt_TexCoord0;
uniform highp float qt_Opacity;
uniform lowp sampler2D source;
uniform lowp vec4 colorBorder;
highp float blend = 0.01;
highp float innerRadius = 0.47;
highp float outerRadius = 0.49;
lowp vec4 colorEmpty = vec4(0.0, 0.0, 0.0, 0.0);
void main() {
lowp vec4 colorSource = texture2D(source, qt_TexCoord0.st);
highp vec2 m = qt_TexCoord0 - vec2(0.5, 0.5);
highp float dist = sqrt(m.x * m.x + m.y * m.y);
if (dist < innerRadius)
gl_FragColor = colorSource;
else if (dist < innerRadius + blend)
gl_FragColor = mix(colorSource, colorBorder, ((dist - innerRadius) / blend));
else if (dist < outerRadius)
gl_FragColor = colorBorder;
else if (dist < outerRadius + blend)
gl_FragColor = mix(colorBorder, colorEmpty, ((dist - outerRadius) / blend));
else
gl_FragColor = colorEmpty ;
gl_FragColor = gl_FragColor * qt_Opacity;
}
"
}
PlasmaComponents3.Label {
id: usernameDelegate
anchors.top: imageSource.bottom
anchors.horizontalCenter: parent.horizontalCenter
// Make it bigger than other fonts to match the scale of the avatar better
font.pointSize: wrapper.fontSize + 4
width: constrainText ? parent.width : implicitWidth
text: wrapper.name
style: softwareRendering ? Text.Outline : Text.Normal
styleColor: softwareRendering ? PlasmaCore.ColorScope.backgroundColor : "transparent" //no outline, doesn't matter
wrapMode: Text.WordWrap
maximumLineCount: wrapper.constrainText ? 3 : 1
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter
//make an indication that this has active focus, this only happens when reached with keyboard navigation
font.underline: wrapper.activeFocus
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: wrapper.clicked();
}
Accessible.name: name
Accessible.role: Accessible.Button
function accessiblePressAction() { wrapper.clicked() }
}
|
