refactor: SettingsHeader on all panels
This commit is contained in:
parent
50dd4e1c44
commit
e8fc13630c
10 changed files with 129 additions and 129 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ Item {
|
|||
anchors.top: parent.top
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
ConnectionHeader {
|
||||
SettingsHeader {
|
||||
icon: "volume_up"
|
||||
title: qsTr("Audio Settings")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
59
modules/controlcenter/components/SettingsHeader.qml
Normal file
59
modules/controlcenter/components/SettingsHeader.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue