Skip to content

Conversation

gillamkid
Copy link
Contributor

@gillamkid gillamkid commented Sep 5, 2024

Description

I did 2 things in this PR

  1. Slightly highlight buttons on hover
  • Before buttons would only change color when pressed or checked, but had no visual response when hovered. Now buttons will will have a faint highlight when hovered and a full highlight when pressed or checked
  1. Make button icon colors same as text color

    Some of the icons where button color (gray), but i changed that so the icon color would be the same as the text color in the button. This is more similar to Google/Apple button design. It is also better for when the color Palette is overwritten with a different color scheme where button where buttonText and buttonHighlight might not look good when mixed together.

Sponsor

This contribution was sponsored by Firestorm
654d4f9476ff2a38f37e9ab9_firestorm-homepage-share-img-2

before/after QGCButton

before-qgc-button.mp4
after-qgc-button.mp4

before/after app settings menu

before-settings-menu.mp4
after-settings-menu.mp4

before/after menu buttons

before-vehicle-setup.mp4
after-vehicle-setup.mp4

icon color change justification

make it more similar to google/apple icon buttons

google icon buttons

Screenshot from 2024-09-05 09-50-25

apple icon buttons

Screenshot from 2024-09-05 09-49-05

Before buttons would only change color when pressed or checked,
but had no visual response when hovered. Now buttons will will
have a faint highlight when hovered and a full highlight when
pressed or checked
This is more similar to Google/Apple button design
It is also better for when the color Palette is overwritten with a different
color scheme where button where buttonText and buttonHighlight might
not look good when mixed together.
@DonLakeFlyer
Copy link
Contributor

Perfect thanks

@DonLakeFlyer DonLakeFlyer merged commit c90529e into mavlink:master Sep 6, 2024
8 checks passed
@funyarinpa01
Copy link

Is it intended to leave highlight rect with sharp corners? Consider setting it's radius to backRadius too

@gillamkid gillamkid changed the title Gillamkid/hover highlight Button hover highlight Sep 13, 2024
gillamkid added a commit to gillamkid/qgroundcontrol that referenced this pull request Sep 13, 2024
As noticed here: mavlink#11836 (comment)

Contribution Sponsor: Firestorm (launchfirestorm.com)
@gillamkid
Copy link
Contributor Author

@funyarinpa01, good catch, fixed in this new PR
f029418

DonLakeFlyer pushed a commit that referenced this pull request Sep 13, 2024
As noticed here: #11836 (comment)

Contribution Sponsor: Firestorm (launchfirestorm.com)
@gillamkid gillamkid deleted the gillamkid/hover-highlight branch September 17, 2024 17:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants