NCircleStat + KeyboardLayout: converted to Layout
This commit is contained in:
parent
cf624f4d65
commit
5d7e168a57
2 changed files with 24 additions and 20 deletions
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue