refactor: SettingsHeader on all panels

This commit is contained in:
ATMDA 2025-11-19 17:20:00 -05:00
parent 50dd4e1c44
commit e8fc13630c
10 changed files with 129 additions and 129 deletions

View file

@ -97,19 +97,9 @@ Item {
anchors.top: parent.top
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.topMargin: 0
text: "palette"
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Appearance Settings")
font.pointSize: Appearance.font.size.large
font.bold: true
SettingsHeader {
icon: "palette"
title: qsTr("Appearance Settings")
}
StyledText {

View file

@ -233,7 +233,7 @@ Item {
anchors.top: parent.top
spacing: Appearance.spacing.normal
ConnectionHeader {
SettingsHeader {
icon: "volume_up"
title: qsTr("Audio Settings")
}

View file

@ -1,6 +1,7 @@
pragma ComponentBehavior: Bound
import ".."
import "../components"
import qs.components
import qs.components.controls
import qs.components.effects
@ -41,20 +42,9 @@ StyledFlickable {
anchors.top: parent.top
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
animate: true
text: Icons.getBluetoothIcon(root.device?.icon ?? "")
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
animate: true
text: root.device?.name ?? ""
font.pointSize: Appearance.font.size.large
font.bold: true
SettingsHeader {
icon: Icons.getBluetoothIcon(root.device?.icon ?? "")
title: root.device?.name ?? ""
}
StyledText {

View file

@ -1,6 +1,7 @@
pragma ComponentBehavior: Bound
import ".."
import "../components"
import qs.components
import qs.components.controls
import qs.components.effects
@ -17,18 +18,9 @@ ColumnLayout {
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: "bluetooth"
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Bluetooth Settings")
font.pointSize: Appearance.font.size.large
font.bold: true
SettingsHeader {
icon: "bluetooth"
title: qsTr("Bluetooth Settings")
}
StyledText {

View file

@ -0,0 +1,59 @@
pragma ComponentBehavior: Bound
import qs.components
import qs.config
import QtQuick
import QtQuick.Layouts
/**
* SettingsHeader
*
* Reusable header component for settings panes. Displays a large icon and title
* in a consistent format across all settings screens.
*
* Usage:
* ```qml
* SettingsHeader {
* icon: "router"
* title: qsTr("Network Settings")
* }
* ```
*/
Item {
id: root
/**
* Material icon name to display
*/
required property string icon
/**
* Title text to display
*/
required property string title
Layout.fillWidth: true
implicitHeight: column.implicitHeight
ColumnLayout {
id: column
anchors.centerIn: parent
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: root.icon
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: root.title
font.pointSize: Appearance.font.size.large
font.bold: true
}
}
}

View file

@ -509,54 +509,55 @@ Item {
spacing: Appearance.spacing.normal
Item {
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: Appearance.padding.large * 2
Layout.rightMargin: Appearance.padding.large * 2
Layout.topMargin: Appearance.padding.large * 2
implicitWidth: iconLoader.implicitWidth
implicitHeight: iconLoader.implicitHeight
Loader {
id: iconLoader
sourceComponent: parent.parent.displayedApp ? appIconComponent : defaultIconComponent
// Show SettingsHeader when no app is selected, or show app icon + title when app is selected
SettingsHeader {
Layout.leftMargin: Appearance.padding.large * 2
Layout.rightMargin: Appearance.padding.large * 2
Layout.topMargin: Appearance.padding.large * 2
visible: displayedApp === null
icon: "apps"
title: qsTr("Launcher Applications")
}
Component {
id: appIconComponent
IconImage {
implicitSize: Appearance.font.size.extraLarge * 3 * 2
source: {
const app = iconLoader.parent.parent.displayedApp;
if (!app) return "image-missing";
const entry = app.entry;
if (entry && entry.icon) {
return Quickshell.iconPath(entry.icon, "image-missing");
// App icon and title display (shown when app is selected)
Item {
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: Appearance.padding.large * 2
Layout.rightMargin: Appearance.padding.large * 2
Layout.topMargin: Appearance.padding.large * 2
visible: displayedApp !== null
implicitWidth: Math.max(appIconImage.implicitWidth, appTitleText.implicitWidth)
implicitHeight: appIconImage.implicitHeight + Appearance.spacing.normal + appTitleText.implicitHeight
ColumnLayout {
anchors.centerIn: parent
spacing: Appearance.spacing.normal
IconImage {
id: appIconImage
Layout.alignment: Qt.AlignHCenter
implicitSize: Appearance.font.size.extraLarge * 3 * 2
source: {
const app = appDetailsLayout.displayedApp;
if (!app) return "image-missing";
const entry = app.entry;
if (entry && entry.icon) {
return Quickshell.iconPath(entry.icon, "image-missing");
}
return "image-missing";
}
return "image-missing";
}
StyledText {
id: appTitleText
Layout.alignment: Qt.AlignHCenter
text: displayedApp ? (displayedApp.name || displayedApp.entry?.name || qsTr("Application Details")) : ""
font.pointSize: Appearance.font.size.large
font.bold: true
}
}
}
Component {
id: defaultIconComponent
MaterialIcon {
text: "apps"
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
}
}
StyledText {
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: Appearance.padding.large * 2
Layout.rightMargin: Appearance.padding.large * 2
text: displayedApp ? (displayedApp.name || displayedApp.entry?.name || qsTr("Application Details")) : qsTr("Launcher Applications")
font.pointSize: Appearance.font.size.large
font.bold: true
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true

View file

@ -1,6 +1,7 @@
pragma ComponentBehavior: Bound
import ".."
import "../components"
import qs.components
import qs.components.controls
import qs.components.effects
@ -16,18 +17,9 @@ ColumnLayout {
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: "apps"
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Launcher Settings")
font.pointSize: Appearance.font.size.large
font.bold: true
SettingsHeader {
icon: "apps"
title: qsTr("Launcher Settings")
}
SectionHeader {

View file

@ -1,6 +1,7 @@
pragma ComponentBehavior: Bound
import ".."
import "../components"
import qs.components
import qs.components.controls
import qs.components.effects
@ -16,18 +17,9 @@ ColumnLayout {
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: "cable"
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Ethernet settings")
font.pointSize: Appearance.font.size.large
font.bold: true
SettingsHeader {
icon: "cable"
title: qsTr("Ethernet settings")
}
StyledText {

View file

@ -1,6 +1,7 @@
pragma ComponentBehavior: Bound
import ".."
import "../components"
import qs.components
import qs.components.controls
import qs.components.effects
@ -16,18 +17,9 @@ ColumnLayout {
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: "router"
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Network Settings")
font.pointSize: Appearance.font.size.large
font.bold: true
SettingsHeader {
icon: "router"
title: qsTr("Network Settings")
}
SectionHeader {

View file

@ -1,6 +1,7 @@
pragma ComponentBehavior: Bound
import ".."
import "../components"
import qs.components
import qs.components.controls
import qs.components.effects
@ -16,18 +17,9 @@ ColumnLayout {
spacing: Appearance.spacing.normal
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: "wifi"
font.pointSize: Appearance.font.size.extraLarge * 3
font.bold: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Network settings")
font.pointSize: Appearance.font.size.large
font.bold: true
SettingsHeader {
icon: "wifi"
title: qsTr("Network settings")
}
SectionHeader {