Use an ImageButton for the StatusIndicator

Incidentally, this allows ImageButtons to not change color.
This commit is contained in:
Loren Burkholder 2021-01-16 10:02:55 -05:00
parent f520f8ce16
commit 139ab146bb
2 changed files with 31 additions and 32 deletions

View file

@ -8,6 +8,7 @@ AbstractButton {
property string image: undefined property string image: undefined
property color highlightColor: colors.highlight property color highlightColor: colors.highlight
property color buttonTextColor: colors.buttonText property color buttonTextColor: colors.buttonText
property bool changeColorOnHover: true
focusPolicy: Qt.NoFocus focusPolicy: Qt.NoFocus
width: 16 width: 16
@ -18,7 +19,12 @@ AbstractButton {
// Workaround, can't get icon.source working for now... // Workaround, can't get icon.source working for now...
anchors.fill: parent anchors.fill: parent
source: "image://colorimage/" + image + "?" + (button.hovered ? highlightColor : buttonTextColor) source: {
var src = "image://colorimage/" + image;
if (changeColorOnHover)
src += "?" + (button.hovered ? highlightColor : buttonTextColor);
return src;
}
} }
MouseArea { MouseArea {

View file

@ -2,16 +2,16 @@ import QtQuick 2.5
import QtQuick.Controls 2.1 import QtQuick.Controls 2.1
import im.nheko 1.0 import im.nheko 1.0
Rectangle { ImageButton {
id: indicator id: indicator
property int state: 0 property int state: 0
property string eventId property string eventId
color: "transparent"
width: 16 width: 16
height: 16 height: 16
ToolTip.visible: ma.containsMouse && state != MtxEvent.Empty hoverEnabled: true
ToolTip.visible: hovered && state != MtxEvent.Empty
ToolTip.text: { ToolTip.text: {
switch (state) { switch (state) {
case MtxEvent.Failed: case MtxEvent.Failed:
@ -27,37 +27,30 @@ Rectangle {
} }
} }
MouseArea {
id: ma
anchors.fill: parent
hoverEnabled: true
onClicked: { onClicked: {
if (indicator.state == MtxEvent.Read) if (state == MtxEvent.Read)
TimelineManager.timeline.readReceiptsAction(indicator.eventId); TimelineManager.timeline.readReceiptsAction(eventId);
}
} }
Image { image: {
id: stateImg switch (state) {
// Workaround, can't get icon.source working for now...
anchors.fill: parent
source: {
switch (indicator.state) {
case MtxEvent.Failed: case MtxEvent.Failed:
return "image://colorimage/:/icons/icons/ui/remove-symbol.png?" + colors.buttonText; return ":/icons/icons/ui/remove-symbol.png";
case MtxEvent.Sent: case MtxEvent.Sent:
return "image://colorimage/:/icons/icons/ui/clock.png?" + colors.buttonText; return ":/icons/icons/ui/clock.png";
case MtxEvent.Received: case MtxEvent.Received:
return "image://colorimage/:/icons/icons/ui/checkmark.png?" + colors.buttonText; return ":/icons/icons/ui/checkmark.png";
case MtxEvent.Read: case MtxEvent.Read:
return "image://colorimage/:/icons/icons/ui/double-tick-indicator.png?" + colors.buttonText; return ":/icons/icons/ui/double-tick-indicator.png";
default: default:
return ""; return "";
} }
} }
}
changeColorOnHover: {
if (state == MtxEvent.Read)
return true;
else
return false;
}
} }