Commit 2edca0b1 authored by Kai Uwe Broulik's avatar Kai Uwe Broulik 🍇

[Task Manager] Let badge become pill-shaped and limit to 0 through 9,999 items

There's no point in showing a gazillion, however, when the number gets bigger, let the circle become pill-shaped.
While at it, also locale-format the number (e.g. thousand separator)

Differential Revision: https://phabricator.kde.org/D9827
parent 1062a6a2
/***************************************************************************
* Copyright (C) 2018 Kai Uwe Broulik <kde@privat.broulik.de> *
* *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 2 of the License, or *
* (at your option) any later version. *
* *
* This program is distributed in the hope that it will be useful, *
* but WITHOUT ANY WARRANTY; without even the implied warranty of *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
* GNU General Public License for more details. *
* *
* You should have received a copy of the GNU General Public License *
* along with this program; if not, write to the *
* Free Software Foundation, Inc., *
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA . *
***************************************************************************/
import QtQuick 2.4
import org.kde.plasma.components 2.0 as PlasmaComponents
Rectangle {
id: badgeRect
property alias text: label.text
property alias textColor: label.color
property int number: 0
implicitWidth: Math.max(height, Math.round(label.contentWidth + radius / 2)) // Add some padding around.
color: theme.highlightColor
radius: height / 2
PlasmaComponents.Label {
id: label
anchors.centerIn: parent
width: height
height: Math.round(parent.height)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
fontSizeMode: Text.VerticalFit
font.pointSize: 1024
minimumPointSize: 5
color: theme.backgroundColor
text: {
if (badgeRect.number < 0) {
return i18nc("Invalid number of new messages, overlay, keep short", "");
} else if (badgeRect.number > 9999) {
return i18nc("Over 9999 new messages, overlay, keep short", "9,999+");
} else {
return badgeRect.number.toLocaleString(Qt.locale(), 'f', 0);
}
}
}
}
......@@ -34,24 +34,35 @@ Item {
y: -offset
width: badgeRect.width + offset * 2
height: badgeRect.height + offset * 2
radius: width
radius: badgeRect.radius + offset * 2
// Badge changes width based on number.
onWidthChanged: maskShaderSource.scheduleUpdate()
}
}
ShaderEffectSource {
id: iconShaderSource
sourceItem: icon
hideSource: true
}
ShaderEffectSource {
id: maskShaderSource
sourceItem: badgeMask
hideSource: true
live: false
}
ShaderEffect {
id: shader
anchors.fill: parent
property var source: ShaderEffectSource {
sourceItem: icon
hideSource: true
}
property var mask: ShaderEffectSource {
sourceItem: badgeMask
hideSource: true
live: false
}
property var source: iconShaderSource
property var mask: maskShaderSource
onWidthChanged: mask.scheduleUpdate()
onHeightChanged: mask.scheduleUpdate()
onWidthChanged: maskShaderSource.scheduleUpdate()
onHeightChanged: maskShaderSource.scheduleUpdate()
supportsAtlasTextures: true
......@@ -66,25 +77,11 @@ Item {
"
}
Rectangle {
Badge {
id: badgeRect
x: Qt.application.layoutDirection === Qt.RightToLeft ? iconWidthDelta : parent.width - width - iconWidthDelta
width: height
height: Math.round(parent.height * 0.4)
color: theme.highlightColor
radius: width
PlasmaComponents.Label {
anchors.centerIn: parent
width: height
height: Math.round(parent.height)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
fontSizeMode: Text.Fit
font.pointSize: 1024
minimumPointSize: 5
color: theme.backgroundColor
text: task.smartLauncherItem.count
}
number: task.smartLauncherItem.count
}
}
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