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 | ||
| 26 | import org.kde.plasma.extras 2.0 as PlasmaExtras | ||||
| 25 | 27 | | |||
| 26 | Item { | 28 | Item { | ||
| 27 | id: wrapper | 29 | id: wrapper | ||
| 28 | 30 | | |||
| 29 | property bool isCurrent: true | 31 | property bool isCurrent: true | ||
| 30 | 32 | | |||
| 31 | readonly property var m: model | 33 | readonly property var m: model | ||
| 32 | property string name | 34 | property string name | ||
| 33 | property string userName | 35 | property string userName | ||
| 34 | property string avatarPath | 36 | property string avatarPath | ||
| 35 | property string iconSource | 37 | property string iconSource | ||
| 36 | property bool constrainText: true | 38 | property bool constrainText: true | ||
| 37 | signal clicked() | 39 | signal clicked() | ||
| 38 | 40 | | |||
| 39 | property real faceSize: Math.min(width, height - usernameDelegate.height - units.largeSpacing) | 41 | property real faceSize: Math.min(width, height - usernameDelegate.height - units.smallSpacing) | ||
| 40 | 42 | | |||
| 41 | opacity: isCurrent ? 1.0 : 0.5 | 43 | opacity: isCurrent ? 1.0 : 0.5 | ||
| 42 | 44 | | |||
| 43 | Behavior on opacity { | 45 | Behavior on opacity { | ||
| 44 | OpacityAnimator { | 46 | OpacityAnimator { | ||
| 45 | duration: units.longDuration | 47 | duration: units.longDuration | ||
| 46 | } | 48 | } | ||
| 47 | } | 49 | } | ||
| 48 | 50 | | |||
| 51 | // Draw a translucent background circle under the user picture | ||||
| 52 | Rectangle { | ||||
| 53 | anchors.centerIn: imageSource | ||||
| 54 | | ||||
| 55 | width: imageSource.width + 2 | ||||
pstefan: I am not sure the 10px(?) padding are needed. The white circle is already a border around the… | |||||
| 56 | height: width | ||||
| 57 | radius: width / 2 | ||||
| 58 | | ||||
| 59 | color: "#232629" // Breeze Shade 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… | |||||
| 60 | opacity: 0.5 | ||||
| 61 | } | ||||
| 62 | | ||||
| 49 | Item { | 63 | Item { | ||
| 50 | id: imageSource | 64 | id: imageSource | ||
| 51 | anchors.horizontalCenter: parent.horizontalCenter | 65 | anchors.horizontalCenter: parent.horizontalCenter | ||
| 52 | width: faceSize | 66 | width: faceSize | ||
| 53 | height: faceSize | 67 | height: faceSize | ||
| 54 | 68 | | |||
| 55 | //Image takes priority, taking a full path to a file, if that doesn't exist we show an icon | 69 | //Image takes priority, taking a full path to a file, if that doesn't exist we show an icon | ||
| 56 | Image { | 70 | Image { | ||
| ▲ Show 20 Lines • Show All 68 Lines • ▼ Show 20 Line(s) | 125 | void main() { | |||
| 125 | else | 139 | else | ||
| 126 | gl_FragColor = colorEmpty ; | 140 | gl_FragColor = colorEmpty ; | ||
| 127 | 141 | | |||
| 128 | gl_FragColor = gl_FragColor * qt_Opacity; | 142 | gl_FragColor = gl_FragColor * qt_Opacity; | ||
| 129 | } | 143 | } | ||
| 130 | " | 144 | " | ||
| 131 | } | 145 | } | ||
| 132 | 146 | | |||
| 133 | 147 | DropShadow { | |||
| 134 | 148 | id: labelShadow | |||
| 135 | PlasmaComponents.Label { | 149 | anchors.fill: usernameDelegate | ||
| 150 | source: usernameDelegate | ||||
| 151 | horizontalOffset: 0 | ||||
| 152 | verticalOffset: 1 | ||||
| 153 | radius: 12 | ||||
| 154 | samples: 32 | ||||
| 155 | spread: 0.2 | ||||
| 156 | color: "#232629" // Breeze Icon Grey | ||||
| 157 | } | ||||
| 158 | PlasmaExtras.Heading { | ||||
| 136 | id: usernameDelegate | 159 | id: usernameDelegate | ||
| 137 | anchors { | 160 | anchors { | ||
| 138 | bottom: parent.bottom | 161 | bottom: parent.bottom | ||
| 139 | horizontalCenter: parent.horizontalCenter | 162 | horizontalCenter: parent.horizontalCenter | ||
| 140 | } | 163 | } | ||
| 141 | height: implicitHeight // work around stupid bug in Plasma Components that sets the height | 164 | height: implicitHeight // work around stupid bug in Plasma Components that sets the height | ||
| 142 | width: constrainText ? parent.width : implicitWidth | 165 | width: constrainText ? parent.width : implicitWidth | ||
| 143 | text: wrapper.name | 166 | text: wrapper.name | ||
| 144 | elide: Text.ElideRight | 167 | elide: Text.ElideRight | ||
| 145 | horizontalAlignment: Text.AlignHCenter | 168 | horizontalAlignment: Text.AlignHCenter | ||
| 146 | //make an indication that this has active focus, this only happens when reached with keyboard navigation | 169 | //make an indication that this has active focus, this only happens when reached with keyboard navigation | ||
| 147 | font.underline: wrapper.activeFocus | 170 | font.underline: wrapper.activeFocus | ||
| 171 | level: 4 | ||||
| 172 | style: Text.Outline | ||||
| 173 | styleColor: "#232629" // Breeze Icon Grey | ||||
| 148 | } | 174 | } | ||
| 149 | 175 | | |||
| 150 | MouseArea { | 176 | MouseArea { | ||
| 151 | anchors.fill: parent | 177 | anchors.fill: parent | ||
| 152 | hoverEnabled: true | 178 | hoverEnabled: true | ||
| 153 | 179 | | |||
| 154 | onClicked: wrapper.clicked(); | 180 | onClicked: wrapper.clicked(); | ||
| 155 | } | 181 | } | ||
| 156 | 182 | | |||
| 157 | Accessible.name: name | 183 | Accessible.name: name | ||
| 158 | Accessible.role: Accessible.Button | 184 | Accessible.role: Accessible.Button | ||
| 159 | function accessiblePressAction() { wrapper.clicked() } | 185 | function accessiblePressAction() { wrapper.clicked() } | ||
| 160 | } | 186 | } | ||
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.