refactor: move item list -> new component

This commit is contained in:
2 * r + 2 * t 2026-06-07 00:32:10 +10:00
parent b874dfc983
commit ab87ba51da
2 changed files with 230 additions and 203 deletions

View file

@ -0,0 +1,123 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import Caelestia.Config
import qs.components
import qs.services
StyledRect {
id: root
property bool showList
property string placeholderIcon
property string placeholderText
property int extraHeight
property alias model: list.model
property alias delegate: list.delegate
readonly property alias list: list
Layout.fillWidth: true
implicitHeight: (showList && list.count > 0 ? list.contentHeight : placeholder.implicitHeight + Tokens.padding.extraLarge * 2) + extraHeight
radius: Tokens.rounding.extraSmall
color: Colours.tPalette.m3surfaceContainer
clip: true
Behavior on implicitHeight {
Anim {}
}
Loader {
id: placeholder
anchors.centerIn: parent
active: opacity > 0
asynchronous: true
opacity: root.showList && list.count > 0 ? 0 : 1
sourceComponent: ColumnLayout {
spacing: Tokens.spacing.extraSmall
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: root.placeholderIcon
color: Colours.palette.m3outline
font: Tokens.font.icon.large
animate: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: root.placeholderText
color: Colours.palette.m3outline
font: Tokens.font.body.large
animate: true
}
}
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
}
ListView {
id: list
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
spacing: 0
interactive: false
opacity: root.showList ? 1 : 0
add: Transition {
Anim {
property: "opacity"
from: 0
to: 1
type: Anim.DefaultEffects
}
}
remove: Transition {
Anim {
property: "opacity"
to: 0
type: Anim.DefaultEffects
}
}
move: Transition {
Anim {
property: "opacity"
to: 1
type: Anim.DefaultEffects
}
Anim {
property: "y"
}
}
displaced: Transition {
Anim {
property: "opacity"
to: 1
type: Anim.DefaultEffects
}
Anim {
property: "y"
}
}
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
}
}

View file

@ -59,62 +59,14 @@ PageBase {
verticalPadding: Tokens.padding.large
}
StyledRect {
Layout.fillWidth: true
implicitHeight: (Nmcli.wifiEnabled && networkList.count > 0 ? networkList.contentHeight : noNetworksPlaceholder.implicitHeight + Tokens.padding.extraLarge * 2) + (Nmcli.scanning ? Tokens.rounding.extraSmall : 0) // Inline so it isn't affected by anim
radius: Tokens.rounding.extraSmall
color: Colours.tPalette.m3surfaceContainer
clip: true
Behavior on implicitHeight {
Anim {}
}
Loader {
id: noNetworksPlaceholder
anchors.centerIn: parent
active: opacity > 0
asynchronous: true
opacity: Nmcli.wifiEnabled && networkList.count > 0 ? 0 : 1
sourceComponent: ColumnLayout {
spacing: Tokens.spacing.extraSmall
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: Nmcli.wifiEnabled ? "wifi_find" : "signal_wifi_off"
color: Colours.palette.m3outline
font: Tokens.font.icon.large
animate: true
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: Nmcli.wifiEnabled ? qsTr("No networks found") : qsTr("Wi-Fi disabled")
color: Colours.palette.m3outline
font: Tokens.font.body.large
animate: true
}
}
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
}
ListView {
ItemList {
id: networkList
anchors.left: parent.left
anchors.right: parent.right
anchors.top: scanningIndicator.bottom
anchors.bottom: parent.bottom
spacing: 0
interactive: false
showList: Nmcli.wifiEnabled
placeholderIcon: Nmcli.wifiEnabled ? "wifi_find" : "signal_wifi_off"
placeholderText: Nmcli.wifiEnabled ? qsTr("No networks found") : qsTr("Wi-Fi disabled")
extraHeight: Nmcli.scanning ? Tokens.rounding.extraSmall : 0 // Inline so it isn't affected by anim
list.anchors.top: scanningIndicator.bottom
model: ScriptModel {
values: [...Nmcli.networks].sort((a, b) => {
@ -126,45 +78,6 @@ PageBase {
})
}
add: Transition {
Anim {
property: "opacity"
from: 0
to: 1
type: Anim.DefaultEffects
}
}
remove: Transition {
Anim {
property: "opacity"
to: 0
type: Anim.DefaultEffects
}
}
move: Transition {
Anim {
property: "opacity"
to: 1
type: Anim.DefaultEffects
}
Anim {
property: "y"
}
}
displaced: Transition {
Anim {
property: "opacity"
to: 1
type: Anim.DefaultEffects
}
Anim {
property: "y"
}
}
delegate: StateLayer {
id: network
@ -174,8 +87,8 @@ PageBase {
disabled: currentSelected || Nmcli.connectingSsid() === modelData.ssid
anchors.left: networkList.contentItem.left
anchors.right: networkList.contentItem.right
anchors.left: networkList.list.contentItem.left
anchors.right: networkList.list.contentItem.right
implicitHeight: networkLayout.implicitHeight + networkLayout.anchors.margins * 2
radius: Tokens.rounding.extraSmall
anchors.fill: undefined
@ -274,15 +187,6 @@ PageBase {
}
}
opacity: Nmcli.wifiEnabled ? 1 : 0
Behavior on opacity {
Anim {
type: Anim.DefaultEffects
}
}
}
StyledProgressBar {
id: scanningIndicator