NCircleStat + KeyboardLayout: converted to Layout

This commit is contained in:
LemmyCook 2025-09-05 18:33:51 -04:00
parent cf624f4d65
commit 5d7e168a57
2 changed files with 24 additions and 20 deletions

View file

@ -1,4 +1,5 @@
import QtQuick import QtQuick
import QtQuick.Layouts
import Quickshell import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
import Quickshell.Io import Quickshell.Io
@ -6,7 +7,7 @@ import qs.Commons
import qs.Services import qs.Services
import qs.Widgets import qs.Widgets
Row { RowLayout {
id: root id: root
property ShellScreen screen property ShellScreen screen
@ -18,12 +19,17 @@ Row {
// Use the shared service for keyboard layout // Use the shared service for keyboard layout
property string currentLayout: KeyboardLayoutService.currentLayout property string currentLayout: KeyboardLayoutService.currentLayout
width: pill.width Layout.preferredWidth: pill.implicitWidth
height: pill.height Layout.preferredHeight: pill.implicitHeight
spacing: 0
NPill { NPill {
id: pill id: pill
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: false
Layout.fillHeight: false
rightOpen: BarWidgetRegistry.getNPillDirection(root) rightOpen: BarWidgetRegistry.getNPillDirection(root)
icon: "keyboard_alt" icon: "keyboard_alt"
iconCircleColor: Color.mPrimary iconCircleColor: Color.mPrimary
@ -33,9 +39,8 @@ Row {
tooltipText: "Keyboard layout: " + currentLayout tooltipText: "Keyboard layout: " + currentLayout
onClicked: { onClicked: {
// You could open keyboard settings here if needed // You could open keyboard settings here if needed
// For now, just show the current layout // For now, just show the current layout
} }
} }
} }

View file

@ -1,9 +1,10 @@
import QtQuick import QtQuick
import QtQuick.Layouts
import qs.Commons import qs.Commons
import qs.Services import qs.Services
import qs.Widgets import qs.Widgets
// Compact circular statistic display used in the SidePanel // Compact circular statistic display using Layout management
Rectangle { Rectangle {
id: root id: root
@ -28,20 +29,20 @@ Rectangle {
// Repaint gauge when the bound value changes // Repaint gauge when the bound value changes
onValueChanged: gauge.requestPaint() onValueChanged: gauge.requestPaint()
Row { ColumnLayout {
id: innerRow id: mainLayout
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginS * scaling * contentScale anchors.margins: Style.marginS * scaling * contentScale
spacing: Style.marginS * scaling * contentScale spacing: 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
// Gauge with percentage label placed inside the open gap (right side) // Main gauge container
Item { Item {
id: gaugeWrap id: gaugeContainer
anchors.verticalCenter: innerRow.verticalCenter Layout.fillWidth: true
width: 68 * scaling * contentScale Layout.fillHeight: true
height: 68 * scaling * contentScale Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 68 * scaling * contentScale
Layout.preferredHeight: 68 * scaling * contentScale
Canvas { Canvas {
id: gauge id: gauge
@ -84,15 +85,13 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
// Tiny circular badge for the icon, inside the right-side gap // Tiny circular badge for the icon, positioned using anchors within the gauge
Rectangle { Rectangle {
id: iconBadge id: iconBadge
width: 28 * scaling * contentScale width: 28 * scaling * contentScale
height: width height: width
radius: width / 2 radius: width / 2
color: Color.mSurface color: Color.mSurface
// border.color: Color.mPrimary
// border.width: Math.max(1, Style.borderS * scaling)
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.rightMargin: -6 * scaling * contentScale anchors.rightMargin: -6 * scaling * contentScale
@ -109,4 +108,4 @@ Rectangle {
} }
} }
} }
} }