Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community 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