controlcenter: appearance pane async loader
This commit is contained in:
ATMDA
parent
76029cd8a0
commit
59c906d650
4 changed files with 171 additions and 150 deletions
|
|
@ -22,7 +22,7 @@ Item {
|
||||||
|
|
||||||
function onClicked(): void {
|
function onClicked(): void {
|
||||||
WindowFactory.create(null, {
|
WindowFactory.create(null, {
|
||||||
active: "appearance"
|
active: "network"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ Item {
|
||||||
|
|
||||||
function onClicked(): void {
|
function onClicked(): void {
|
||||||
WindowFactory.create(null, {
|
WindowFactory.create(null, {
|
||||||
active: "appearance"
|
active: "network"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -538,65 +538,72 @@ RowLayout {
|
||||||
title: qsTr("Material font family")
|
title: qsTr("Material font family")
|
||||||
expanded: true
|
expanded: true
|
||||||
|
|
||||||
StyledListView {
|
Loader {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: Math.min(contentHeight, 300)
|
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||||
|
asynchronous: true
|
||||||
|
active: materialFontSection.expanded
|
||||||
|
|
||||||
clip: true
|
sourceComponent: StyledListView {
|
||||||
spacing: Appearance.spacing.small / 2
|
id: materialFontList
|
||||||
model: Qt.fontFamilies()
|
property alias contentHeight: materialFontList.contentHeight
|
||||||
|
|
||||||
delegate: StyledRect {
|
clip: true
|
||||||
required property string modelData
|
spacing: Appearance.spacing.small / 2
|
||||||
required property int index
|
model: Qt.fontFamilies()
|
||||||
|
|
||||||
width: ListView.view.width
|
delegate: StyledRect {
|
||||||
|
required property string modelData
|
||||||
|
required property int index
|
||||||
|
|
||||||
readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
|
width: ListView.view.width
|
||||||
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
border.width: isCurrent ? 1 : 0
|
|
||||||
border.color: Colours.palette.m3primary
|
|
||||||
|
|
||||||
StateLayer {
|
readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
|
||||||
function onClicked(): void {
|
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
|
||||||
rootPane.fontFamilyMaterial = modelData;
|
radius: Appearance.rounding.normal
|
||||||
rootPane.saveConfig();
|
border.width: isCurrent ? 1 : 0
|
||||||
}
|
border.color: Colours.palette.m3primary
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
StateLayer {
|
||||||
id: fontFamilyMaterialRow
|
function onClicked(): void {
|
||||||
|
rootPane.fontFamilyMaterial = modelData;
|
||||||
anchors.left: parent.left
|
rootPane.saveConfig();
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.normal
|
|
||||||
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: modelData
|
|
||||||
font.pointSize: Appearance.font.size.normal
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
active: isCurrent
|
|
||||||
asynchronous: true
|
|
||||||
|
|
||||||
sourceComponent: MaterialIcon {
|
|
||||||
text: "check"
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
|
RowLayout {
|
||||||
|
id: fontFamilyMaterialRow
|
||||||
|
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.normal
|
||||||
|
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: modelData
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
active: isCurrent
|
||||||
|
asynchronous: true
|
||||||
|
|
||||||
|
sourceComponent: MaterialIcon {
|
||||||
|
text: "check"
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
font.pointSize: Appearance.font.size.large
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -606,65 +613,72 @@ RowLayout {
|
||||||
title: qsTr("Monospace font family")
|
title: qsTr("Monospace font family")
|
||||||
expanded: false
|
expanded: false
|
||||||
|
|
||||||
StyledListView {
|
Loader {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: Math.min(contentHeight, 300)
|
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||||
|
asynchronous: true
|
||||||
|
active: monoFontSection.expanded
|
||||||
|
|
||||||
clip: true
|
sourceComponent: StyledListView {
|
||||||
spacing: Appearance.spacing.small / 2
|
id: monoFontList
|
||||||
model: Qt.fontFamilies()
|
property alias contentHeight: monoFontList.contentHeight
|
||||||
|
|
||||||
delegate: StyledRect {
|
clip: true
|
||||||
required property string modelData
|
spacing: Appearance.spacing.small / 2
|
||||||
required property int index
|
model: Qt.fontFamilies()
|
||||||
|
|
||||||
width: ListView.view.width
|
delegate: StyledRect {
|
||||||
|
required property string modelData
|
||||||
|
required property int index
|
||||||
|
|
||||||
readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
|
width: ListView.view.width
|
||||||
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
border.width: isCurrent ? 1 : 0
|
|
||||||
border.color: Colours.palette.m3primary
|
|
||||||
|
|
||||||
StateLayer {
|
readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
|
||||||
function onClicked(): void {
|
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
|
||||||
rootPane.fontFamilyMono = modelData;
|
radius: Appearance.rounding.normal
|
||||||
rootPane.saveConfig();
|
border.width: isCurrent ? 1 : 0
|
||||||
}
|
border.color: Colours.palette.m3primary
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
StateLayer {
|
||||||
id: fontFamilyMonoRow
|
function onClicked(): void {
|
||||||
|
rootPane.fontFamilyMono = modelData;
|
||||||
anchors.left: parent.left
|
rootPane.saveConfig();
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.normal
|
|
||||||
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: modelData
|
|
||||||
font.pointSize: Appearance.font.size.normal
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
active: isCurrent
|
|
||||||
asynchronous: true
|
|
||||||
|
|
||||||
sourceComponent: MaterialIcon {
|
|
||||||
text: "check"
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
|
RowLayout {
|
||||||
|
id: fontFamilyMonoRow
|
||||||
|
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.normal
|
||||||
|
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: modelData
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
active: isCurrent
|
||||||
|
asynchronous: true
|
||||||
|
|
||||||
|
sourceComponent: MaterialIcon {
|
||||||
|
text: "check"
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
font.pointSize: Appearance.font.size.large
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -674,65 +688,72 @@ RowLayout {
|
||||||
title: qsTr("Sans-serif font family")
|
title: qsTr("Sans-serif font family")
|
||||||
expanded: false
|
expanded: false
|
||||||
|
|
||||||
StyledListView {
|
Loader {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: Math.min(contentHeight, 300)
|
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||||
|
asynchronous: true
|
||||||
|
active: sansFontSection.expanded
|
||||||
|
|
||||||
clip: true
|
sourceComponent: StyledListView {
|
||||||
spacing: Appearance.spacing.small / 2
|
id: sansFontList
|
||||||
model: Qt.fontFamilies()
|
property alias contentHeight: sansFontList.contentHeight
|
||||||
|
|
||||||
delegate: StyledRect {
|
clip: true
|
||||||
required property string modelData
|
spacing: Appearance.spacing.small / 2
|
||||||
required property int index
|
model: Qt.fontFamilies()
|
||||||
|
|
||||||
width: ListView.view.width
|
delegate: StyledRect {
|
||||||
|
required property string modelData
|
||||||
|
required property int index
|
||||||
|
|
||||||
readonly property bool isCurrent: modelData === rootPane.fontFamilySans
|
width: ListView.view.width
|
||||||
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
border.width: isCurrent ? 1 : 0
|
|
||||||
border.color: Colours.palette.m3primary
|
|
||||||
|
|
||||||
StateLayer {
|
readonly property bool isCurrent: modelData === rootPane.fontFamilySans
|
||||||
function onClicked(): void {
|
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
|
||||||
rootPane.fontFamilySans = modelData;
|
radius: Appearance.rounding.normal
|
||||||
rootPane.saveConfig();
|
border.width: isCurrent ? 1 : 0
|
||||||
}
|
border.color: Colours.palette.m3primary
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
StateLayer {
|
||||||
id: fontFamilySansRow
|
function onClicked(): void {
|
||||||
|
rootPane.fontFamilySans = modelData;
|
||||||
anchors.left: parent.left
|
rootPane.saveConfig();
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.normal
|
|
||||||
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: modelData
|
|
||||||
font.pointSize: Appearance.font.size.normal
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
active: isCurrent
|
|
||||||
asynchronous: true
|
|
||||||
|
|
||||||
sourceComponent: MaterialIcon {
|
|
||||||
text: "check"
|
|
||||||
color: Colours.palette.m3onSurfaceVariant
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
|
RowLayout {
|
||||||
|
id: fontFamilySansRow
|
||||||
|
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.normal
|
||||||
|
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: modelData
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
active: isCurrent
|
||||||
|
asynchronous: true
|
||||||
|
|
||||||
|
sourceComponent: MaterialIcon {
|
||||||
|
text: "check"
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
font.pointSize: Appearance.font.size.large
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@ StyledRect {
|
||||||
toggle: false
|
toggle: false
|
||||||
onClicked: {
|
onClicked: {
|
||||||
root.visibilities.utilities = false;
|
root.visibilities.utilities = false;
|
||||||
root.popouts.detach("appearance");
|
root.popouts.detach("network");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue