Skip to content

gradient design for interactive tabs (#567) #689

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

Open
iamahmudul wants to merge 4 commits into
base: main
Choose a base branch
from
Open

gradient design for interactive tabs (#567) #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a11e0df
refactor(ui): extract NavigationTabButton component from main.qml
iamahmudul Dec 18, 2025
b59e593
Applied tab gradient for hover, active and inactive state
iamahmudul Dec 21, 2025
cfb95ad
inactive tab gradient updated
iamahmudul Jan 16, 2026
81a3182
update gradient color
iamahmudul Jan 16, 2026
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
67 changes: 67 additions & 0 deletions NavigationTabButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts 1.15

TabButton {
property int targetIndex: 0
required property StackLayout stackLayout

implicitHeight: 24
font.bold: true
onClicked: stackLayout.currentIndex = targetIndex

background: Rectangle {
anchors.fill: parent

// active/inactive helpers
property bool isActive: stackLayout.currentIndex === parent.targetIndex
property color inactiveColor: parent.hovered ? "#1e5f3a" : "#242c4d"

// predeclare gradient and toggle via binding
Gradient {
id: hoverGradient
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: '#005e00' }
GradientStop { position: 1.0; color: '#0d7e0d' }
}

Gradient {
id: inactiveGradient
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: '#242c4d' }
GradientStop { position: 1.0; color: '#455bb3' }
}

// gradient has higher precedence than color, color is fallback
color: isActive ? "green" : inactiveColor

Gradient {
id: activeGradient
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: "#007400" }
GradientStop { position: 1.0; color: '#13c713' }//11b811
}

// apply gradient only on condition
gradient: isActive ? activeGradient : (parent.hovered ? hoverGradient : inactiveGradient)
}

MouseArea {
id: hoverArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
cursorShape: stackLayout.currentIndex === parent.targetIndex ? Qt.ArrowCursor : (hoverArea.containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor)
}

contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : (parent.hovered ? '#fffb1c' : "white")
font.bold: true
font.pixelSize: stackLayout.currentIndex === parent.targetIndex ? 15 : 14
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
195 changes: 25 additions & 170 deletions main.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,108 +24,35 @@ ApplicationWindow {
Layout.fillWidth: true
height: 40

TabButton {
// this tab shows page index 0
property int targetIndex: 0

NavigationTabButton {
targetIndex: 0
text: "Read Brain"
font.bold: true
onClicked: stackLayout.currentIndex = targetIndex

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
stackLayout: stackLayout
}

TabButton {
property int targetIndex: 2

NavigationTabButton {
targetIndex: 2
text: "Manual Drone Control"
font.bold: true
onClicked: stackLayout.currentIndex = targetIndex

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
stackLayout: stackLayout
}

TabButton {
property int targetIndex: 3

NavigationTabButton {
targetIndex: 3
text: "Manual NAO Control"
font.bold: true
stackLayout: stackLayout
onClicked: {
stackLayout.currentIndex = targetIndex
console.log("Manual Controller tab clicked")
tabController.startNaoViewer()
}

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}

TabButton {
property int targetIndex: 7

NavigationTabButton {
targetIndex: 7
text: "Artificial Intelligence"
font.bold: true
stackLayout: stackLayout
onClicked: {
stackLayout.currentIndex = targetIndex
console.log("Artificial Intelligence tab clicked")
}

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
}

Expand All @@ -152,100 +79,28 @@ ApplicationWindow {
height: 40
position: TabBar.Footer

TabButton {
property int targetIndex: 1

NavigationTabButton {
targetIndex: 1
text: "Brainwave Visualization"
font.bold: true
onClicked: stackLayout.currentIndex = targetIndex

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
stackLayout: stackLayout
}

TabButton {
property int targetIndex: 4

NavigationTabButton {
targetIndex: 4
text: "Shuffler"
font.bold: true
onClicked: stackLayout.currentIndex = targetIndex

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
stackLayout: stackLayout
}

TabButton {
property int targetIndex: 5

text: "Cloud Computing" // Renamed Transfer Data to Cloud Computing
font.bold: true
onClicked: stackLayout.currentIndex = targetIndex

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
NavigationTabButton {
targetIndex: 5
text: "Cloud Computing"
stackLayout: stackLayout
}

TabButton {
property int targetIndex: 6

NavigationTabButton {
targetIndex: 6
text: "Developers"
font.bold: true
onClicked: stackLayout.currentIndex = targetIndex

background: Rectangle {
anchors.fill: parent
color: stackLayout.currentIndex === parent.targetIndex ? "green" : "#242c4d"
border.color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "transparent"
border.width: stackLayout.currentIndex === parent.targetIndex ? 3 : 1
}
contentItem: Text {
text: parent.text
anchors.centerIn: parent
color: stackLayout.currentIndex === parent.targetIndex ? "yellow" : "white"
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
stackLayout: stackLayout
}
}
}
Expand Down