refactor: replaced CollapsibleSection with FontsSection
This commit is contained in:
ATMDA
parent
bf3a1781d1
commit
ecc1226a0e
2 changed files with 288 additions and 269 deletions
|
|
@ -744,276 +744,9 @@ Item {
|
|||
rootPane: sidebarFlickable.rootPane
|
||||
}
|
||||
|
||||
CollapsibleSection {
|
||||
FontsSection {
|
||||
id: fontsSection
|
||||
title: qsTr("Fonts")
|
||||
showBackground: true
|
||||
|
||||
CollapsibleSection {
|
||||
id: materialFontSection
|
||||
title: qsTr("Material font family")
|
||||
expanded: true
|
||||
showBackground: true
|
||||
nested: true
|
||||
|
||||
Loader {
|
||||
id: materialFontLoader
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||
asynchronous: true
|
||||
active: materialFontSection.expanded
|
||||
|
||||
sourceComponent: StyledListView {
|
||||
id: materialFontList
|
||||
property alias contentHeight: materialFontList.contentHeight
|
||||
|
||||
clip: true
|
||||
spacing: Appearance.spacing.small / 2
|
||||
model: Qt.fontFamilies()
|
||||
|
||||
StyledScrollBar.vertical: StyledScrollBar {
|
||||
flickable: materialFontList
|
||||
}
|
||||
|
||||
delegate: StyledRect {
|
||||
required property string modelData
|
||||
required property int index
|
||||
|
||||
width: ListView.view.width
|
||||
|
||||
readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
|
||||
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 {
|
||||
function onClicked(): void {
|
||||
rootPane.fontFamilyMaterial = modelData;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
CollapsibleSection {
|
||||
id: monoFontSection
|
||||
title: qsTr("Monospace font family")
|
||||
expanded: false
|
||||
showBackground: true
|
||||
nested: true
|
||||
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||
asynchronous: true
|
||||
active: monoFontSection.expanded
|
||||
|
||||
sourceComponent: StyledListView {
|
||||
id: monoFontList
|
||||
property alias contentHeight: monoFontList.contentHeight
|
||||
|
||||
clip: true
|
||||
spacing: Appearance.spacing.small / 2
|
||||
model: Qt.fontFamilies()
|
||||
|
||||
StyledScrollBar.vertical: StyledScrollBar {
|
||||
flickable: monoFontList
|
||||
}
|
||||
|
||||
delegate: StyledRect {
|
||||
required property string modelData
|
||||
required property int index
|
||||
|
||||
width: ListView.view.width
|
||||
|
||||
readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
|
||||
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 {
|
||||
function onClicked(): void {
|
||||
rootPane.fontFamilyMono = modelData;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CollapsibleSection {
|
||||
id: sansFontSection
|
||||
title: qsTr("Sans-serif font family")
|
||||
expanded: false
|
||||
showBackground: true
|
||||
nested: true
|
||||
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||
asynchronous: true
|
||||
active: sansFontSection.expanded
|
||||
|
||||
sourceComponent: StyledListView {
|
||||
id: sansFontList
|
||||
property alias contentHeight: sansFontList.contentHeight
|
||||
|
||||
clip: true
|
||||
spacing: Appearance.spacing.small / 2
|
||||
model: Qt.fontFamilies()
|
||||
|
||||
StyledScrollBar.vertical: StyledScrollBar {
|
||||
flickable: sansFontList
|
||||
}
|
||||
|
||||
delegate: StyledRect {
|
||||
required property string modelData
|
||||
required property int index
|
||||
|
||||
width: ListView.view.width
|
||||
|
||||
readonly property bool isCurrent: modelData === rootPane.fontFamilySans
|
||||
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 {
|
||||
function onClicked(): void {
|
||||
rootPane.fontFamilySans = modelData;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SectionContainer {
|
||||
contentSpacing: Appearance.spacing.normal
|
||||
|
||||
SliderInput {
|
||||
Layout.fillWidth: true
|
||||
|
||||
label: qsTr("Font size scale")
|
||||
value: rootPane.fontSizeScale
|
||||
from: 0.7
|
||||
to: 1.5
|
||||
decimals: 2
|
||||
suffix: "×"
|
||||
validator: DoubleValidator { bottom: 0.7; top: 1.5 }
|
||||
|
||||
onValueModified: (newValue) => {
|
||||
rootPane.fontSizeScale = newValue;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
}
|
||||
rootPane: sidebarFlickable.rootPane
|
||||
}
|
||||
|
||||
ScalesSection {
|
||||
|
|
|
|||
286
modules/controlcenter/appearance/sections/FontsSection.qml
Normal file
286
modules/controlcenter/appearance/sections/FontsSection.qml
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import "../../components"
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.components.containers
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
CollapsibleSection {
|
||||
id: root
|
||||
|
||||
required property var rootPane
|
||||
|
||||
title: qsTr("Fonts")
|
||||
showBackground: true
|
||||
|
||||
CollapsibleSection {
|
||||
id: materialFontSection
|
||||
title: qsTr("Material font family")
|
||||
expanded: true
|
||||
showBackground: true
|
||||
nested: true
|
||||
|
||||
Loader {
|
||||
id: materialFontLoader
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||
asynchronous: true
|
||||
active: materialFontSection.expanded
|
||||
|
||||
sourceComponent: StyledListView {
|
||||
id: materialFontList
|
||||
property alias contentHeight: materialFontList.contentHeight
|
||||
|
||||
clip: true
|
||||
spacing: Appearance.spacing.small / 2
|
||||
model: Qt.fontFamilies()
|
||||
|
||||
StyledScrollBar.vertical: StyledScrollBar {
|
||||
flickable: materialFontList
|
||||
}
|
||||
|
||||
delegate: StyledRect {
|
||||
required property string modelData
|
||||
required property int index
|
||||
|
||||
width: ListView.view.width
|
||||
|
||||
readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
|
||||
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 {
|
||||
function onClicked(): void {
|
||||
rootPane.fontFamilyMaterial = modelData;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CollapsibleSection {
|
||||
id: monoFontSection
|
||||
title: qsTr("Monospace font family")
|
||||
expanded: false
|
||||
showBackground: true
|
||||
nested: true
|
||||
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||
asynchronous: true
|
||||
active: monoFontSection.expanded
|
||||
|
||||
sourceComponent: StyledListView {
|
||||
id: monoFontList
|
||||
property alias contentHeight: monoFontList.contentHeight
|
||||
|
||||
clip: true
|
||||
spacing: Appearance.spacing.small / 2
|
||||
model: Qt.fontFamilies()
|
||||
|
||||
StyledScrollBar.vertical: StyledScrollBar {
|
||||
flickable: monoFontList
|
||||
}
|
||||
|
||||
delegate: StyledRect {
|
||||
required property string modelData
|
||||
required property int index
|
||||
|
||||
width: ListView.view.width
|
||||
|
||||
readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
|
||||
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 {
|
||||
function onClicked(): void {
|
||||
rootPane.fontFamilyMono = modelData;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CollapsibleSection {
|
||||
id: sansFontSection
|
||||
title: qsTr("Sans-serif font family")
|
||||
expanded: false
|
||||
showBackground: true
|
||||
nested: true
|
||||
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
|
||||
asynchronous: true
|
||||
active: sansFontSection.expanded
|
||||
|
||||
sourceComponent: StyledListView {
|
||||
id: sansFontList
|
||||
property alias contentHeight: sansFontList.contentHeight
|
||||
|
||||
clip: true
|
||||
spacing: Appearance.spacing.small / 2
|
||||
model: Qt.fontFamilies()
|
||||
|
||||
StyledScrollBar.vertical: StyledScrollBar {
|
||||
flickable: sansFontList
|
||||
}
|
||||
|
||||
delegate: StyledRect {
|
||||
required property string modelData
|
||||
required property int index
|
||||
|
||||
width: ListView.view.width
|
||||
|
||||
readonly property bool isCurrent: modelData === rootPane.fontFamilySans
|
||||
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 {
|
||||
function onClicked(): void {
|
||||
rootPane.fontFamilySans = modelData;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SectionContainer {
|
||||
contentSpacing: Appearance.spacing.normal
|
||||
|
||||
SliderInput {
|
||||
Layout.fillWidth: true
|
||||
|
||||
label: qsTr("Font size scale")
|
||||
value: rootPane.fontSizeScale
|
||||
from: 0.7
|
||||
to: 1.5
|
||||
decimals: 2
|
||||
suffix: "×"
|
||||
validator: DoubleValidator { bottom: 0.7; top: 1.5 }
|
||||
|
||||
onValueModified: (newValue) => {
|
||||
rootPane.fontSizeScale = newValue;
|
||||
rootPane.saveConfig();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Reference in a new issue