Members of the KDE Community are recommended to subscribe to the kde-community mailing list at to allow them to participate in important discussions and receive other important announcements

Commit 029754b9 authored by Johan Ouwerkerk's avatar Johan Ouwerkerk

Improve the visuals of the health indicator/life timer for TOTP tokens:

 - Increase height
 - Make the left edge sit flush with the edge of the list item
 - Fix colour contrast when a list item is being highlighted (pressed/checked)
parent 532f6061
Pipeline #22022 passed with stage
in 6 minutes and 46 seconds
......@@ -23,7 +23,8 @@ Kirigami.SwipeListItem {
property Models.Account account: null
property bool alive: account !== null
property bool tokenAvailable: alive && account.token && account.token.length > 0
property color labelColor: listItem.pressed || listItem.checked ? listItem.activeTextColor : listItem.textColor
property bool highlightActive: listItem.pressed || listItem.checked
property color labelColor: highlightActive ? listItem.activeTextColor : listItem.textColor
visible: alive
enabled: alive
......@@ -90,13 +90,28 @@ AccountEntryViewBase {
Rectangle {
id: health
x: - listItem.leftPadding
// make the indicator sit flush with the bottom edge of the list item
y: listItem.height - health.height - listItem.bottomPadding
radius: health.height
height: Kirigami.Units.smallSpacing
opacity: timeoutIndicatorAnimation.running ? 0.6 : 0
width: listItem.alive && listItem.interval > 0 ? listItem.width * listItem.healthIndicator / listItem.interval : 0
color: Kirigami.Theme.positiveTextColor
* Horizontal positioning of the rectangle relies on clippling of the list item. The idea is to make the health
* indicator sit flush with the left border while maintaining soft rounded corners on the right (asymmetry).
* To achieve this simply add a dummy amount of width to the rectangle and compensate for it by offseting it
* a corresponding amount further to the left; due to clipping the dummy amount will not be shown (but the
* portion being clipped will contain the rounded corners on the left). The required length for the dummy part
* depends on the corner radius of the rectangle.
x: - listItem.leftPadding - health.height
width: listItem.alive && listItem.interval > 0 ? health.height + listItem.width * listItem.healthIndicator / listItem.interval : 0
radius: health.height // right edge becomes a semi-circle
* Height and opacity are a bit of a balancing act between good looking visuals with few accounts and avoiding
* an overwhelming UI with many accounts (and therefore many running animations). Opacity is increased when
* highlighted to get better contrast.
height: Kirigami.Units.devicePixelRatio * 6
opacity: timeoutIndicatorAnimation.running ? listItem.highlightActive ? 0.6 : 0.4 : 0
color: listItem.highlightActive ? listItem.labelColor : Kirigami.Theme.positiveTextColor
NumberAnimation {
id: timeoutIndicatorAnimation
target: listItem
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment