Improve game action discoverability

Show Favorite/Hide/Edit/Remove as labeled buttons in the game details sheet so actions remain visible and accessible even on narrow layouts.
This commit is contained in:
Marco Allegretti 2026-01-20 11:00:09 +01:00
parent ccffb1e49c
commit 95a3c20436

View file

@ -313,95 +313,48 @@ Kirigami.OverlaySheet {
Item { Layout.fillHeight: true }
RowLayout {
ColumnLayout {
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
QQC2.Button {
id: playButton
text: game && game.running ? i18n("Running...") : i18n("Play")
icon.name: "media-playback-start"
enabled: game && !game.running
highlighted: true
focus: true
RowLayout {
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
onClicked: detailsSheet.launchRequested()
QQC2.Button {
id: playButton
text: game && game.running ? i18n("Running...") : i18n("Play")
icon.name: "media-playback-start"
enabled: game && !game.running
highlighted: true
focus: true
Keys.onReturnPressed: clicked()
Keys.onEnterPressed: clicked()
onClicked: detailsSheet.launchRequested()
Keys.onReturnPressed: clicked()
Keys.onEnterPressed: clicked()
}
Item { Layout.fillWidth: true }
}
Item { Layout.fillWidth: true }
RowLayout {
Flow {
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
QQC2.Button {
icon.name: game && game.favorite ? "bookmark-remove" : "bookmark-new"
text: game && game.favorite ? i18n("Unfavorite") : i18n("Favorite")
display: QQC2.AbstractButton.IconOnly
implicitWidth: detailsSheet.actionIconButtonSize
implicitHeight: detailsSheet.actionIconButtonSize
icon.width: Kirigami.Units.iconSizes.smallMedium
icon.height: Kirigami.Units.iconSizes.smallMedium
hoverEnabled: true
flat: true
padding: 0
background: Rectangle {
radius: Kirigami.Units.smallSpacing
color: parent.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.alternateBackgroundColor
opacity: parent.activeFocus ? 0.18 : (parent.hovered ? 0.08 : 0.0)
border.width: parent.activeFocus ? 1 : 0
border.color: Kirigami.Theme.highlightColor
Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
Behavior on border.width {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
}
QQC2.ToolTip.text: text
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
display: detailsSheet.useCompactLayout ? QQC2.AbstractButton.TextUnderIcon : QQC2.AbstractButton.TextBesideIcon
enabled: !!game
onClicked: if (game) game.favorite = !game.favorite
}
QQC2.Button {
icon.name: game && game.hidden ? "view-visible" : "view-hidden"
text: game && game.hidden ? i18n("Unhide") : i18n("Hide")
display: QQC2.AbstractButton.IconOnly
implicitWidth: detailsSheet.actionIconButtonSize
implicitHeight: detailsSheet.actionIconButtonSize
icon.width: Kirigami.Units.iconSizes.smallMedium
icon.height: Kirigami.Units.iconSizes.smallMedium
hoverEnabled: true
flat: true
padding: 0
background: Rectangle {
radius: Kirigami.Units.smallSpacing
color: parent.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.alternateBackgroundColor
opacity: parent.activeFocus ? 0.18 : (parent.hovered ? 0.08 : 0.0)
border.width: parent.activeFocus ? 1 : 0
border.color: Kirigami.Theme.highlightColor
Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
Behavior on border.width {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
}
QQC2.ToolTip.text: text
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
display: detailsSheet.useCompactLayout ? QQC2.AbstractButton.TextUnderIcon : QQC2.AbstractButton.TextBesideIcon
enabled: !!game
onClicked: if (game) {
game.hidden = !game.hidden
App.saveLibrary()
@ -411,70 +364,16 @@ Kirigami.OverlaySheet {
QQC2.Button {
icon.name: "document-edit"
text: i18n("Edit")
display: QQC2.AbstractButton.IconOnly
implicitWidth: detailsSheet.actionIconButtonSize
implicitHeight: detailsSheet.actionIconButtonSize
icon.width: Kirigami.Units.iconSizes.smallMedium
icon.height: Kirigami.Units.iconSizes.smallMedium
hoverEnabled: true
flat: true
padding: 0
background: Rectangle {
radius: Kirigami.Units.smallSpacing
color: parent.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.alternateBackgroundColor
opacity: parent.activeFocus ? 0.18 : (parent.hovered ? 0.08 : 0.0)
border.width: parent.activeFocus ? 1 : 0
border.color: Kirigami.Theme.highlightColor
Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
Behavior on border.width {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
}
QQC2.ToolTip.text: text
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
display: detailsSheet.useCompactLayout ? QQC2.AbstractButton.TextUnderIcon : QQC2.AbstractButton.TextBesideIcon
enabled: !!game
onClicked: detailsSheet.editRequested()
}
QQC2.Button {
icon.name: "edit-delete"
text: i18n("Remove")
display: QQC2.AbstractButton.IconOnly
implicitWidth: detailsSheet.actionIconButtonSize
implicitHeight: detailsSheet.actionIconButtonSize
icon.width: Kirigami.Units.iconSizes.smallMedium
icon.height: Kirigami.Units.iconSizes.smallMedium
hoverEnabled: true
flat: true
padding: 0
background: Rectangle {
radius: Kirigami.Units.smallSpacing
color: parent.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.alternateBackgroundColor
opacity: parent.activeFocus ? 0.18 : (parent.hovered ? 0.08 : 0.0)
border.width: parent.activeFocus ? 1 : 0
border.color: Kirigami.Theme.highlightColor
Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
Behavior on border.width {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
}
QQC2.ToolTip.text: text
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
display: detailsSheet.useCompactLayout ? QQC2.AbstractButton.TextUnderIcon : QQC2.AbstractButton.TextBesideIcon
enabled: !!game
onClicked: detailsSheet.removeRequested()
}
}