controlcenter: refactoring into components
This commit is contained in:
ATMDA
parent
c1510b5476
commit
e92187293e
8 changed files with 1145 additions and 2425 deletions
85
components/controls/CollapsibleSection.qml
Normal file
85
components/controls/CollapsibleSection.qml
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
import ".."
|
||||||
|
import qs.components
|
||||||
|
import qs.components.effects
|
||||||
|
import qs.services
|
||||||
|
import qs.config
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
required property string title
|
||||||
|
property string description: ""
|
||||||
|
property bool expanded: false
|
||||||
|
|
||||||
|
signal toggleRequested
|
||||||
|
|
||||||
|
spacing: Appearance.spacing.small / 2
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: sectionHeaderItem
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.preferredHeight: sectionHeader.implicitHeight
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: sectionHeader
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.topMargin: Appearance.spacing.large
|
||||||
|
text: root.title
|
||||||
|
font.pointSize: Appearance.font.size.larger
|
||||||
|
font.weight: 500
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
text: "expand_more"
|
||||||
|
rotation: root.expanded ? 180 : 0
|
||||||
|
color: Colours.palette.m3onSurface
|
||||||
|
Behavior on rotation {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StateLayer {
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.leftMargin: -Appearance.padding.normal
|
||||||
|
anchors.rightMargin: -Appearance.padding.normal
|
||||||
|
function onClicked(): void {
|
||||||
|
root.toggleRequested();
|
||||||
|
root.expanded = !root.expanded;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
visible: root.expanded && root.description !== ""
|
||||||
|
text: root.description
|
||||||
|
color: Colours.palette.m3outline
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
default property alias content: contentColumn.data
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: contentColumn
|
||||||
|
Layout.fillWidth: true
|
||||||
|
visible: root.expanded
|
||||||
|
spacing: Appearance.spacing.small / 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
51
components/controls/SpinBoxRow.qml
Normal file
51
components/controls/SpinBoxRow.qml
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import ".."
|
||||||
|
import qs.components
|
||||||
|
import qs.components.effects
|
||||||
|
import qs.services
|
||||||
|
import qs.config
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
required property string label
|
||||||
|
required property real value
|
||||||
|
required property real min
|
||||||
|
required property real max
|
||||||
|
property var onValueModified: function(value) {}
|
||||||
|
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: row.implicitHeight + Appearance.padding.large * 2
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Colours.tPalette.m3surfaceContainer
|
||||||
|
|
||||||
|
Behavior on implicitHeight {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: row
|
||||||
|
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: root.label
|
||||||
|
}
|
||||||
|
|
||||||
|
CustomSpinBox {
|
||||||
|
min: root.min
|
||||||
|
max: root.max
|
||||||
|
value: root.value
|
||||||
|
onValueModified: value => {
|
||||||
|
root.onValueModified(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
47
components/controls/SwitchRow.qml
Normal file
47
components/controls/SwitchRow.qml
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import ".."
|
||||||
|
import qs.components
|
||||||
|
import qs.components.effects
|
||||||
|
import qs.services
|
||||||
|
import qs.config
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
required property string label
|
||||||
|
required property bool checked
|
||||||
|
property var onToggled: function(checked) {}
|
||||||
|
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: row.implicitHeight + Appearance.padding.large * 2
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Colours.tPalette.m3surfaceContainer
|
||||||
|
|
||||||
|
Behavior on implicitHeight {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: row
|
||||||
|
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: root.label
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledSwitch {
|
||||||
|
checked: root.checked
|
||||||
|
onToggled: {
|
||||||
|
root.onToggled(checked);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
82
components/controls/ToggleButton.qml
Normal file
82
components/controls/ToggleButton.qml
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
import ".."
|
||||||
|
import qs.components
|
||||||
|
import qs.components.effects
|
||||||
|
import qs.services
|
||||||
|
import qs.config
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
required property bool toggled
|
||||||
|
property string icon
|
||||||
|
property string label
|
||||||
|
property string accent: "Secondary"
|
||||||
|
|
||||||
|
signal clicked
|
||||||
|
|
||||||
|
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
|
||||||
|
implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
|
||||||
|
implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
|
||||||
|
|
||||||
|
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
|
||||||
|
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
|
||||||
|
|
||||||
|
StateLayer {
|
||||||
|
id: toggleStateLayer
|
||||||
|
|
||||||
|
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
|
||||||
|
|
||||||
|
function onClicked(): void {
|
||||||
|
root.clicked();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: toggleBtnInner
|
||||||
|
|
||||||
|
anchors.centerIn: parent
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
id: toggleBtnIcon
|
||||||
|
|
||||||
|
visible: !!text
|
||||||
|
fill: root.toggled ? 1 : 0
|
||||||
|
text: root.icon
|
||||||
|
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
|
||||||
|
font.pointSize: Appearance.font.size.large
|
||||||
|
|
||||||
|
Behavior on fill {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
asynchronous: true
|
||||||
|
active: !!root.label
|
||||||
|
visible: active
|
||||||
|
|
||||||
|
sourceComponent: StyledText {
|
||||||
|
text: root.label
|
||||||
|
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Behavior on radius {
|
||||||
|
Anim {
|
||||||
|
duration: Appearance.anim.durations.expressiveFastSpatial
|
||||||
|
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Behavior on Layout.preferredWidth {
|
||||||
|
Anim {
|
||||||
|
duration: Appearance.anim.durations.expressiveFastSpatial
|
||||||
|
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -34,7 +34,7 @@ ColumnLayout {
|
||||||
icon: "settings"
|
icon: "settings"
|
||||||
accent: "Primary"
|
accent: "Primary"
|
||||||
|
|
||||||
function onClicked(): void {
|
onClicked: {
|
||||||
if (root.session.ethernet.active)
|
if (root.session.ethernet.active)
|
||||||
root.session.ethernet.active = null;
|
root.session.ethernet.active = null;
|
||||||
else {
|
else {
|
||||||
|
|
@ -166,81 +166,6 @@ ColumnLayout {
|
||||||
implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
|
implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
component ToggleButton: StyledRect {
|
|
||||||
id: toggleBtn
|
|
||||||
|
|
||||||
required property bool toggled
|
|
||||||
property string icon
|
|
||||||
property string label
|
|
||||||
property string accent: "Secondary"
|
|
||||||
|
|
||||||
function onClicked(): void {
|
|
||||||
}
|
|
||||||
|
|
||||||
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
|
|
||||||
implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
|
|
||||||
implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
|
|
||||||
|
|
||||||
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
|
|
||||||
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
|
|
||||||
|
|
||||||
StateLayer {
|
|
||||||
id: toggleStateLayer
|
|
||||||
|
|
||||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
|
||||||
|
|
||||||
function onClicked(): void {
|
|
||||||
toggleBtn.onClicked();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: toggleBtnInner
|
|
||||||
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
id: toggleBtnIcon
|
|
||||||
|
|
||||||
visible: !!text
|
|
||||||
fill: toggleBtn.toggled ? 1 : 0
|
|
||||||
text: toggleBtn.icon
|
|
||||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
|
|
||||||
Behavior on fill {
|
|
||||||
Anim {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
asynchronous: true
|
|
||||||
active: !!toggleBtn.label
|
|
||||||
visible: active
|
|
||||||
|
|
||||||
sourceComponent: StyledText {
|
|
||||||
text: toggleBtn.label
|
|
||||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on radius {
|
|
||||||
Anim {
|
|
||||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on Layout.preferredWidth {
|
|
||||||
Anim {
|
|
||||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ ColumnLayout {
|
||||||
icon: "wifi"
|
icon: "wifi"
|
||||||
accent: "Tertiary"
|
accent: "Tertiary"
|
||||||
|
|
||||||
function onClicked(): void {
|
onClicked: {
|
||||||
Network.toggleWifi();
|
Network.toggleWifi();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -44,7 +44,7 @@ ColumnLayout {
|
||||||
icon: "wifi_find"
|
icon: "wifi_find"
|
||||||
accent: "Secondary"
|
accent: "Secondary"
|
||||||
|
|
||||||
function onClicked(): void {
|
onClicked: {
|
||||||
Network.rescanWifi();
|
Network.rescanWifi();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -54,7 +54,7 @@ ColumnLayout {
|
||||||
icon: "settings"
|
icon: "settings"
|
||||||
accent: "Primary"
|
accent: "Primary"
|
||||||
|
|
||||||
function onClicked(): void {
|
onClicked: {
|
||||||
if (root.session.network.active)
|
if (root.session.network.active)
|
||||||
root.session.network.active = null;
|
root.session.network.active = null;
|
||||||
else {
|
else {
|
||||||
|
|
@ -224,79 +224,4 @@ ColumnLayout {
|
||||||
implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
|
implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
component ToggleButton: StyledRect {
|
|
||||||
id: toggleBtn
|
|
||||||
|
|
||||||
required property bool toggled
|
|
||||||
property string icon
|
|
||||||
property string label
|
|
||||||
property string accent: "Secondary"
|
|
||||||
|
|
||||||
function onClicked(): void {
|
|
||||||
}
|
|
||||||
|
|
||||||
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
|
|
||||||
implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
|
|
||||||
implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
|
|
||||||
|
|
||||||
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
|
|
||||||
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
|
|
||||||
|
|
||||||
StateLayer {
|
|
||||||
id: toggleStateLayer
|
|
||||||
|
|
||||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
|
||||||
|
|
||||||
function onClicked(): void {
|
|
||||||
toggleBtn.onClicked();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: toggleBtnInner
|
|
||||||
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
id: toggleBtnIcon
|
|
||||||
|
|
||||||
visible: !!text
|
|
||||||
fill: toggleBtn.toggled ? 1 : 0
|
|
||||||
text: toggleBtn.icon
|
|
||||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
|
|
||||||
Behavior on fill {
|
|
||||||
Anim {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
asynchronous: true
|
|
||||||
active: !!toggleBtn.label
|
|
||||||
visible: active
|
|
||||||
|
|
||||||
sourceComponent: StyledText {
|
|
||||||
text: toggleBtn.label
|
|
||||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on radius {
|
|
||||||
Anim {
|
|
||||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Behavior on Layout.preferredWidth {
|
|
||||||
Anim {
|
|
||||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue