Skip to content

Feat/Fix: Context-Aware UI Scaling Architecture #76

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
Brainitech merged 3 commits into from
Jun 19, 2026
Merged

Feat/Fix: Context-Aware UI Scaling Architecture #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52fd144
fix(Scale): Attempt 1 on trying to fix scaling across different scree…
Brainitech Jun 16, 2026
8c86dcb
fix: Notification Toast alignment
Brainitech Jun 17, 2026
5f61d61
fix: Network Popup positional scaling
Brainitech Jun 19, 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
25 changes: 13 additions & 12 deletions src/components/DiskBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ Item {
property int usedPct: 0
property string usedStr: "—"
property string totalStr: "—"
property real localScale: 1.0

implicitWidth: 200
implicitHeight: 40
implicitWidth: Math.round(200 * localScale)
implicitHeight: Math.round(40 * localScale)

readonly property color barColor: {
if (usedPct >= 90) return "#f38ba8"
Expand All @@ -25,9 +26,9 @@ Item {
anchors.left: parent.left
anchors.verticalCenter: barTrack.verticalCenter
text: root.mount
font.pixelSize: 10
font.pixelSize: Math.round(10 * localScale)
color: Qt.rgba(1, 1, 1, 0.5)
width: 32
width: Math.round(32 * localScale)
elide: Text.ElideRight
}

Expand All @@ -37,10 +38,10 @@ Item {
anchors.left: mountLabel.right
anchors.right: pctLabel.left
anchors.top: parent.top
anchors.topMargin: 12
anchors.leftMargin: 6
anchors.rightMargin: 6
height: 6
anchors.topMargin: Math.round(12 * localScale)
anchors.leftMargin: Math.round(6 * localScale)
anchors.rightMargin: Math.round(6 * localScale)
height: Math.round(6 * localScale)

Rectangle {
anchors.fill: parent
Expand Down Expand Up @@ -69,10 +70,10 @@ Item {
anchors.right: parent.right
anchors.verticalCenter: barTrack.verticalCenter
text: root.usedPct + "%"
font.pixelSize: 10
font.pixelSize: Math.round(10 * localScale)
font.weight: Font.Medium
color: root.barColor
width: 28
width: Math.round(28 * localScale)
horizontalAlignment: Text.AlignRight
Behavior on color { ColorAnimation { duration: 300 } }
}
Expand All @@ -81,9 +82,9 @@ Item {
Text {
anchors.horizontalCenter: barTrack.horizontalCenter
anchors.top: barTrack.bottom
anchors.topMargin: 4
anchors.topMargin: Math.round(4 * localScale)
text: root.usedStr + " / " + root.totalStr + " · " + root.source
font.pixelSize: 9
font.pixelSize: Math.round(9 * localScale)
color: Qt.rgba(1, 1, 1, 0.45)
}
}
9 changes: 5 additions & 4 deletions src/components/IconBtn.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import "../"

Rectangle {
id: root
width: 24
height: 24
radius: 4
property real localScale: 1.0
width: Math.round(24 * localScale)
height: Math.round(24 * localScale)
radius: Math.round(4 * localScale)

// 1. Correct: referencing the ID 'hover' directly works here
color: hover.hovered ? Theme.active : "transparent"
Expand All @@ -21,7 +22,7 @@ Rectangle {
// 2. FIX: Changed 'root.hoverHandler.hovered' to 'hover.hovered'
color: hover.hovered ? Theme.background : root.textColor

font.pixelSize: 14
font.pixelSize: Math.round(14 * localScale)
}

HoverHandler {
Expand Down
11 changes: 6 additions & 5 deletions src/components/ProfileButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ Item {
property string label: ""
property string icon: ""
property bool active: false
property real localScale: 1.0
// `enabled` is inherited from Item — no redeclaration needed

signal clicked()

implicitWidth: row.implicitWidth + 24
implicitHeight: 28
implicitWidth: row.implicitWidth + Math.round(24 * localScale)
implicitHeight: Math.round(28 * localScale)

opacity: root.enabled ? 1 : 0.35
Behavior on opacity { NumberAnimation { duration: 120 } }
Expand All @@ -36,20 +37,20 @@ Item {
Row {
id: row
anchors.centerIn: parent
spacing: 5
spacing: Math.round(5 * localScale)

Text {
visible: root.icon !== ""
text: root.icon
font.pixelSize: 12
font.pixelSize: Math.round(12 * localScale)
color: root.active ? Theme.background : Qt.rgba(1, 1, 1, 0.7)
anchors.verticalCenter: parent.verticalCenter
Behavior on color { ColorAnimation { duration: 120 } }
}

Text {
text: root.label
font.pixelSize: 11
font.pixelSize: Math.round(11 * localScale)
font.weight: root.active ? Font.Medium : Font.Normal
color: root.active ? Theme.background : Qt.rgba(1, 1, 1, 0.7)
anchors.verticalCenter: parent.verticalCenter
Expand Down
5 changes: 3 additions & 2 deletions src/components/StatCard.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@ Item {
id: root

default property alias content: inner.data
property int padding: 12
property int padding: 12
property real localScale: 1.0

Rectangle {
anchors.fill: parent
radius: Theme.cornerRadius
radius: Math.round(Theme.cornerRadius * localScale)
color: Qt.rgba(1, 1, 1, 0.04)
border.color: Qt.rgba(1, 1, 1, 0.07)
border.width: 1
Expand Down
7 changes: 4 additions & 3 deletions src/components/StatRow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,23 @@ Item {
property string label: ""
property string value: ""
property color valueColor: Theme.text
property real localScale: 1.0

implicitHeight: 20
implicitHeight: Math.round(20 * localScale)

Text {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
text: root.label
font.pixelSize: 11
font.pixelSize: Math.round(11 * localScale)
color: Qt.rgba(1, 1, 1, 0.4)
}

Text {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
text: root.value
font.pixelSize: 11
font.pixelSize: Math.round(11 * localScale)
color: root.valueColor
}
}
29 changes: 15 additions & 14 deletions src/components/TabSwitcher.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ Item {
property var model: []
property string currentPage: ""
property string orientation: "horizontal" // "horizontal" | "vertical"
property real localScale: 1.0

signal pageChanged(string key)

Expand All @@ -34,8 +35,8 @@ Item {
pageChanged(defaultPage)
}

implicitWidth: orientation === "vertical" ? 40 : 0
implicitHeight: orientation === "horizontal" ? 40 : 0
implicitWidth: orientation === "vertical" ? Math.round(40 * localScale) : 0
implicitHeight: orientation === "horizontal" ? Math.round(40 * localScale) : 0

// ── Scroll cooldown ───────────────────────────────────────────────────────
property bool scrollBusy: false
Expand Down Expand Up @@ -83,8 +84,8 @@ Item {
Rectangle {
id: hBg
anchors.centerIn: parent
width: hIcon.implicitWidth + hLabel.implicitWidth + 24
height: parent.height - 8
width: hIcon.implicitWidth + hLabel.implicitWidth + Math.round(24 * localScale)
height: parent.height - Math.round(8 * localScale)
radius: height / 2

color: hTab.isActive
Expand All @@ -97,12 +98,12 @@ Item {
// Icon + label
Row {
anchors.centerIn: parent
spacing: 6
spacing: Math.round(6 * localScale)

Text {
id: hIcon
text: modelData.icon
font.pixelSize: 14
font.pixelSize: Math.round(14 * localScale)
anchors.verticalCenter: parent.verticalCenter
color: hTab.isActive
? Theme.active
Expand All @@ -114,7 +115,7 @@ Item {
id: hLabel
visible: modelData.label !== undefined
text: modelData.label ?? ""
font.pixelSize: 12
font.pixelSize: Math.round(12 * localScale)
font.weight: hTab.isActive ? Font.Medium : Font.Normal
anchors.verticalCenter: parent.verticalCenter
color: hTab.isActive
Expand Down Expand Up @@ -150,7 +151,7 @@ Item {
visible: root.orientation === "vertical"
width: root.width

readonly property int tabH: 60
readonly property int tabH: Math.round(60 * localScale)
spacing: root.model.length > 1
? (root.height - root.model.length * tabH) / (root.model.length - 1)
: 0
Expand All @@ -169,7 +170,7 @@ Item {

width: vCol.width
height: vCol.tabH
radius: Theme.cornerRadius * 2
radius: Math.round(Theme.cornerRadius * 2 * localScale)

color: vTab.isActive
? Theme.active
Expand All @@ -182,7 +183,7 @@ Item {
visible: !vCol.hasLabels
anchors.centerIn: parent
text: modelData.icon
font.pixelSize: 16
font.pixelSize: Math.round(16 * localScale)
color: vTab.isActive ? Theme.background : Theme.text
Behavior on color { ColorAnimation { duration: 120 } }
}
Expand All @@ -192,14 +193,14 @@ Item {
visible: vCol.hasLabels
anchors {
left: parent.left
leftMargin: 16
leftMargin: Math.round(16 * localScale)
verticalCenter: parent.verticalCenter
}
spacing: 12
spacing: Math.round(12 * localScale)

Text {
text: modelData.icon
font.pixelSize: 15
font.pixelSize: Math.round(15 * localScale)
anchors.verticalCenter: parent.verticalCenter
color: vTab.isActive
? Theme.background
Expand All @@ -209,7 +210,7 @@ Item {

Text {
text: modelData.label ?? ""
font.pixelSize: 12
font.pixelSize: Math.round(12 * localScale)
font.weight: vTab.isActive ? Font.Medium : Font.Normal
anchors.verticalCenter: parent.verticalCenter
color: vTab.isActive
Expand Down
Loading
Loading