Feature #567: Add gradient design to interactive tab buttons - #688
Open
ArsalanAnwer0 wants to merge 1 commit into
Open
Feature #567: Add gradient design to interactive tab buttons#688ArsalanAnwer0 wants to merge 1 commit into
ArsalanAnwer0 wants to merge 1 commit into
Conversation
Replaced flat color backgrounds with vertical gradients to improve visual hierarchy and modern UI appearance across all tab buttons. Changes: - Added unique IDs to all 8 TabButton components for proper referencing - Implemented vertical gradients for active and inactive states - Active tabs: Green gradient (#00cc44 to #008833) with yellow border - Inactive tabs: Blue gradient (#2a3456 to #1a2440) - Added 5px border radius for polished appearance - Maintained existing yellow border (3px) on active tabs - Preserved all existing tab functionality and click handlers Implementation Details: - Modified all TabButton background rectangles in main.qml - Used QML Gradient component with two GradientStop positions - Referenced TabButton IDs to avoid QML parent scope issues - Top tab bar: readBrainTab, manualDroneTab, manualNaoTab, aiTab - Bottom tab bar: brainwaveVizTab, shufflerTab, cloudTab, developersTab Testing: - Verified gradient rendering on all 8 navigation tabs - Confirmed smooth visual transitions when switching tabs - No QML errors or warnings related to gradient implementation - Application performance maintained - All tab switching functionality preserved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Closes #567
Summary
This PR implements vertical gradient designs for all interactive tab buttons in the main navigation, replacing the previous flat color scheme with modern gradients that enhance visual hierarchy and user experience.
Changes
Visual Design
Active Tab Gradient:
Inactive Tab Gradient:
Implementation Details
Testing
Files Modified