Skip to content

Button hover highlight #11836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 6, 2024
Merged

Button hover highlight #11836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28dca67
Slightly highlight buttons on hover
gillamkid Sep 5, 2024
19e7eee
Make button icon colors same as text color
gillamkid Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/QmlControls/QGCButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Button {
property alias wrapMode: text.wrapMode
property alias horizontalAlignment: text.horizontalAlignment

property bool _showHighlight: enabled && (pressed | hovered | checked)
property bool _showHighlight: enabled && (pressed | checked)

property int _horizontalPadding: ScreenTools.defaultFontPixelWidth
property int _verticalPadding: Math.round(ScreenTools.defaultFontPixelHeight * heightFactor)
Expand All @@ -44,7 +44,13 @@ Button {
implicitHeight: ScreenTools.implicitButtonHeight
border.width: showBorder ? 1 : 0
border.color: qgcPal.buttonBorder
color: _showHighlight ? qgcPal.buttonHighlight : (primary ? qgcPal.primaryButton : qgcPal.button)
color: primary ? qgcPal.primaryButton : qgcPal.button

Rectangle {
anchors.fill: parent
color: qgcPal.buttonHighlight
opacity: _showHighlight ? 1 : control.enabled && control.hovered ? .2 : 0
}
}

contentItem: RowLayout {
Expand Down
11 changes: 9 additions & 2 deletions src/QmlControls/SubMenuButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ Button {

text: "Button" ///< Pass in your own button text
focusPolicy: Qt.ClickFocus
hoverEnabled: !ScreenTools.isMobile

implicitHeight: ScreenTools.isTinyScreen ? ScreenTools.defaultFontPixelHeight * 3.5 : ScreenTools.defaultFontPixelHeight * 2.5
//implicitWidth: __panel.implicitWidth
Expand All @@ -39,10 +40,16 @@ Button {

background: Rectangle {
id: innerRect
color: showHighlight ? qgcPal.buttonHighlight : qgcPal.windowShade
color: qgcPal.windowShade

implicitWidth: titleBar.x + titleBar.contentWidth + ScreenTools.defaultFontPixelWidth

Rectangle {
anchors.fill: parent
color: qgcPal.buttonHighlight
opacity: showHighlight ? 1 : control.enabled && control.hovered ? .2 : 0
}

QGCColoredImage {
id: image
anchors.leftMargin: ScreenTools.defaultFontPixelWidth
Expand All @@ -52,7 +59,7 @@ Button {
height: ScreenTools.defaultFontPixelHeight * 2
fillMode: Image.PreserveAspectFit
mipmap: true
color: imageColor ? imageColor : (control.setupComplete ? qgcPal.button : "red")
color: imageColor ? imageColor : (control.setupComplete ? titleBar.color : "red")
source: control.imageResource
sourceSize: control.sourceSize
}
Expand Down
11 changes: 7 additions & 4 deletions src/UI/AppSettings.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,29 +83,32 @@ Rectangle {
Layout.fillWidth: true
text: name
padding: ScreenTools.defaultFontPixelWidth / 2
hoverEnabled: !ScreenTools.isMobile
autoExclusive: true
icon.source: iconUrl
visible: pageVisible()

background: Rectangle {
color: checked ? qgcPal.buttonHighlight : "transparent"
radius: ScreenTools.defaultFontPixelWidth / 2
color: qgcPal.buttonHighlight
opacity: checked || pressed ? 1 : enabled && hovered ? .2 : 0
radius: ScreenTools.defaultFontPixelWidth / 2
}

contentItem: RowLayout {
spacing: ScreenTools.defaultFontPixelWidth

QGCColoredImage {
source: iconUrl
color: checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
color: displayText.color
width: ScreenTools.defaultFontPixelHeight
height: ScreenTools.defaultFontPixelHeight
}

QGCLabel {
id: displayText
Layout.fillWidth: true
text: name
color: checked ? qgcPal.buttonHighlightText : qgcPal.buttonText
color: checked || pressed ? qgcPal.buttonHighlightText : qgcPal.buttonText
horizontalAlignment: QGCLabel.AlignLeft
}
}
Expand Down
2 changes: 0 additions & 2 deletions src/UI/MainRootWindow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,6 @@ ApplicationWindow {
height: toolSelectDialog._toolButtonHeight
Layout.fillWidth: true
text: qsTr("Vehicle Setup")
imageColor: qgcPal.text
imageResource: "/qmlimages/Gears.svg"
onClicked: {
if (!mainWindow.preventViewSwitch()) {
Expand All @@ -316,7 +315,6 @@ ApplicationWindow {
Layout.fillWidth: true
text: qsTr("Analyze Tools")
imageResource: "/qmlimages/Analyze.svg"
imageColor: qgcPal.text
visible: QGroundControl.corePlugin.showAdvancedUI
onClicked: {
if (!mainWindow.preventViewSwitch()) {
Expand Down
Loading