Changeset View
Changeset View
Standalone View
Standalone View
lookandfeel/contents/components/UserDelegate.qml
Show All 13 Lines | |||||
14 | * | 14 | * | ||
15 | * You should have received a copy of the GNU Library General Public | 15 | * You should have received a copy of the GNU Library General Public | ||
16 | * License along with this program; if not, write to the | 16 | * License along with this program; if not, write to the | ||
17 | * Free Software Foundation, Inc., | 17 | * Free Software Foundation, Inc., | ||
18 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | 18 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
19 | */ | 19 | */ | ||
20 | 20 | | |||
21 | import QtQuick 2.8 | 21 | import QtQuick 2.8 | ||
22 | import QtGraphicalEffects 1.0 | ||||
22 | 23 | | |||
23 | import org.kde.plasma.core 2.0 as PlasmaCore | 24 | import org.kde.plasma.core 2.0 as PlasmaCore | ||
24 | import org.kde.plasma.components 2.0 as PlasmaComponents | 25 | import org.kde.plasma.components 2.0 as PlasmaComponents | ||
25 | 26 | | |||
26 | Item { | 27 | Item { | ||
27 | id: wrapper | 28 | id: wrapper | ||
28 | 29 | | |||
29 | property bool isCurrent: true | 30 | property bool isCurrent: true | ||
Show All 11 Lines | |||||
41 | opacity: isCurrent ? 1.0 : 0.5 | 42 | opacity: isCurrent ? 1.0 : 0.5 | ||
42 | 43 | | |||
43 | Behavior on opacity { | 44 | Behavior on opacity { | ||
44 | OpacityAnimator { | 45 | OpacityAnimator { | ||
45 | duration: units.longDuration | 46 | duration: units.longDuration | ||
46 | } | 47 | } | ||
47 | } | 48 | } | ||
48 | 49 | | |||
50 | // Draw a translucent background circle under the user picture | ||||
51 | Rectangle { | ||||
52 | anchors.centerIn: imageSource | ||||
53 | | ||||
54 | width: imageSource.width + 2 | ||||
pstefan: I am not sure the 10px(?) padding are needed. The white circle is already a border around the… | |||||
55 | height: width | ||||
56 | radius: width / 2 | ||||
57 | | ||||
58 | color: "black" | ||||
If we hardcode this color we should use the same color as in the icons or vice versa. I used #232627 50% opacity. pstefan: If we hardcode this color we should use the same color as in the icons or vice versa. I used… | |||||
59 | opacity: 0.3 | ||||
60 | } | ||||
61 | | ||||
49 | Item { | 62 | Item { | ||
50 | id: imageSource | 63 | id: imageSource | ||
51 | anchors.horizontalCenter: parent.horizontalCenter | 64 | anchors.horizontalCenter: parent.horizontalCenter | ||
52 | width: faceSize | 65 | width: faceSize | ||
53 | height: faceSize | 66 | height: faceSize | ||
54 | 67 | | |||
55 | //Image takes priority, taking a full path to a file, if that doesn't exist we show an icon | 68 | //Image takes priority, taking a full path to a file, if that doesn't exist we show an icon | ||
56 | Image { | 69 | Image { | ||
▲ Show 20 Lines • Show All 68 Lines • ▼ Show 20 Line(s) | 124 | void main() { | |||
125 | else | 138 | else | ||
126 | gl_FragColor = colorEmpty ; | 139 | gl_FragColor = colorEmpty ; | ||
127 | 140 | | |||
128 | gl_FragColor = gl_FragColor * qt_Opacity; | 141 | gl_FragColor = gl_FragColor * qt_Opacity; | ||
129 | } | 142 | } | ||
130 | " | 143 | " | ||
131 | } | 144 | } | ||
132 | 145 | | |||
133 | 146 | DropShadow { | |||
134 | 147 | id: labelShadow | |||
148 | anchors.fill: usernameDelegate | ||||
149 | source: usernameDelegate | ||||
150 | horizontalOffset: 0 | ||||
151 | verticalOffset: 1 | ||||
152 | radius: 12 | ||||
153 | samples: 32 | ||||
154 | spread: 0.4 | ||||
155 | color: PlasmaCore.ColorScope.windowColor | ||||
156 | } | ||||
135 | PlasmaComponents.Label { | 157 | PlasmaComponents.Label { | ||
136 | id: usernameDelegate | 158 | id: usernameDelegate | ||
137 | anchors { | 159 | anchors { | ||
138 | bottom: parent.bottom | 160 | bottom: parent.bottom | ||
139 | horizontalCenter: parent.horizontalCenter | 161 | horizontalCenter: parent.horizontalCenter | ||
140 | } | 162 | } | ||
141 | height: implicitHeight // work around stupid bug in Plasma Components that sets the height | 163 | height: implicitHeight // work around stupid bug in Plasma Components that sets the height | ||
142 | width: constrainText ? parent.width : implicitWidth | 164 | width: constrainText ? parent.width : implicitWidth | ||
Show All 18 Lines |
I am not sure the 10px(?) padding are needed. The white circle is already a border around the image i.e. it's always shown, no matter the icon used. So this background circle is akin to drawing a dark rectangle behind the input field and button.