mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-10-21 18:54:01 -04:00
371 lines
16 KiB
QML
371 lines
16 KiB
QML
import QtQuick
|
|
import qs.Common
|
|
import qs.DCommon.Widgets
|
|
import qs.Services
|
|
import qs.Modules.Settings.Widgets
|
|
|
|
Item {
|
|
id: root
|
|
|
|
SettingsPage {
|
|
id: mainColumn
|
|
|
|
Loader {
|
|
width: parent.width
|
|
active: CompositorService.isAqueous
|
|
sourceComponent: AqueousAppearanceSettings {
|
|
settingKey: "aqueousTypography"
|
|
title: I18n.tr("Aqueous typography", "Aqueous compositor font synchronization settings")
|
|
visible: CompositorService.isAqueous
|
|
}
|
|
}
|
|
|
|
SettingsCard {
|
|
tab: "typography"
|
|
tags: ["font", "family", "text", "typography", "monospace"]
|
|
title: I18n.tr("Font", "noun, typography settings card title and font dropdown label")
|
|
settingKey: "typography"
|
|
iconName: "text_fields"
|
|
|
|
SettingsRow {
|
|
body: Column {
|
|
width: parent.width
|
|
spacing: Theme.spacingXS
|
|
|
|
StyledText {
|
|
width: parent.width
|
|
text: "Aa Bb Cc 123"
|
|
font.family: Theme.resolvedFontFamily(SettingsData.fontFamily)
|
|
font.pixelSize: Theme.fontSizeXXLarge
|
|
color: Theme.surfaceText
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
StyledText {
|
|
width: parent.width
|
|
text: "Display Aa Bb Cc"
|
|
fontToken: "display"
|
|
font.pixelSize: Theme.fontSizeXLarge
|
|
color: Theme.surfaceText
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
StyledText {
|
|
width: parent.width
|
|
text: I18n.tr("The quick brown fox jumps over the lazy dog")
|
|
font.family: Theme.resolvedFontFamily(SettingsData.fontFamily)
|
|
font.pixelSize: Theme.fontSizeMedium
|
|
color: Theme.surfaceText
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
StyledText {
|
|
width: parent.width
|
|
text: "monospace { code: 0x1F; }"
|
|
font.family: Theme.resolvedMonoFontFamily(SettingsData.monoFontFamily)
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.surfaceVariantText
|
|
elide: Text.ElideRight
|
|
}
|
|
}
|
|
}
|
|
|
|
SettingsFontDropdownRow {
|
|
tab: "typography"
|
|
tags: ["font", "family", "normal", "text"]
|
|
settingKey: "fontFamily"
|
|
text: I18n.tr("Family", "font family dropdown label")
|
|
maxPopupHeight: 400
|
|
currentFont: SettingsData.fontFamily
|
|
onFontSelected: family => SettingsData.set("fontFamily", family || Theme.defaultFontFamily)
|
|
}
|
|
|
|
SettingsSliderRow {
|
|
tab: "typography"
|
|
tags: ["font", "weight", "bold", "light"]
|
|
settingKey: "fontWeight"
|
|
text: I18n.tr("Weight", "font weight slider label")
|
|
minimum: Font.Thin
|
|
maximum: Font.Black
|
|
step: 100
|
|
showStops: true
|
|
unit: ""
|
|
value: SettingsData.fontWeight
|
|
onSliderValueChanged: newValue => SettingsData.set("fontWeight", newValue)
|
|
}
|
|
|
|
SettingsSliderRow {
|
|
tab: "typography"
|
|
tags: ["font", "scale", "size", "zoom"]
|
|
settingKey: "fontScale"
|
|
text: I18n.tr("Scale", "noun, font scale slider and display scale setting label")
|
|
minimum: 75
|
|
maximum: 150
|
|
value: Math.round(SettingsData.fontScale * 100)
|
|
onSliderValueChanged: newValue => SettingsData.set("fontScale", newValue / 100)
|
|
}
|
|
SettingsFontDropdownRow {
|
|
tab: "typography"
|
|
tags: ["font", "monospace", "code", "terminal", "process"]
|
|
settingKey: "monoFontFamily"
|
|
text: I18n.tr("Monospace family")
|
|
maxPopupHeight: 400
|
|
defaultFamily: Theme.defaultMonoFontFamily
|
|
currentFont: SettingsData.monoFontFamily
|
|
onFontSelected: family => SettingsData.set("monoFontFamily", family || Theme.defaultMonoFontFamily)
|
|
}
|
|
|
|
SettingsFontDropdownRow {
|
|
tab: "typography"
|
|
tags: ["font", "display", "stylistic", "serif", "title", "headline"]
|
|
settingKey: "displayFontFamily"
|
|
text: I18n.tr("Display family")
|
|
maxPopupHeight: 400
|
|
defaultFamily: Theme.defaultDisplayFontFamily
|
|
currentFont: SettingsData.displayFontFamily
|
|
onFontSelected: family => SettingsData.set("displayFontFamily", family || Theme.defaultDisplayFontFamily)
|
|
}
|
|
}
|
|
|
|
SettingsCard {
|
|
tab: "typography"
|
|
tags: ["animation", "motion", "speed", "duration", "spring", "physics", "bounce", "accessibility", "ripple", "fluid"]
|
|
title: I18n.tr("Animations", "settings card title")
|
|
settingKey: "animations"
|
|
iconName: "auto_awesome_motion"
|
|
|
|
SettingsRow {
|
|
body: Item {
|
|
id: motionPreview
|
|
|
|
readonly property real trackPadding: Theme.spacingS
|
|
readonly property real pillWidth: Theme.iconButtonSize * 2
|
|
readonly property real laneWidth: width
|
|
readonly property real travel: laneWidth - pillWidth - trackPadding * 2
|
|
readonly property var springParams: Theme.springPreset("default", Theme.currentAnimationBaseDuration)
|
|
property bool atEnd: false
|
|
|
|
function play() {
|
|
atEnd = !atEnd;
|
|
pillSpring.retarget(atEnd ? travel : 0);
|
|
}
|
|
|
|
width: parent.width
|
|
height: Theme.iconButtonSize + Theme.spacingM * 2
|
|
|
|
SpringMotion {
|
|
id: pillSpring
|
|
enabled: !Theme.springMotionDisabled && !SettingsData.reduceMotion
|
|
stiffness: motionPreview.springParams.stiffness
|
|
damping: motionPreview.springParams.damping
|
|
value: 0
|
|
target: 0
|
|
}
|
|
|
|
Rectangle {
|
|
id: springLane
|
|
width: motionPreview.laneWidth
|
|
height: parent.height
|
|
radius: Theme.cornerRadiusM
|
|
color: SettingsMetrics.controlColor
|
|
|
|
StyledText {
|
|
x: parent.width - width - Theme.spacingL
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: I18n.tr("Tap to play")
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.surfaceVariantText
|
|
opacity: motionPreview.atEnd ? 0 : 1
|
|
|
|
Behavior on opacity {
|
|
NumberAnimation {
|
|
duration: Theme.expressiveDurations.expressiveFastEffects
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: Theme.expressiveCurves.expressiveEffects
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
x: motionPreview.trackPadding + pillSpring.value
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: motionPreview.pillWidth
|
|
height: Theme.iconButtonSize
|
|
radius: Theme.fullRadius(width, height)
|
|
color: Theme.primary
|
|
|
|
DIcon {
|
|
anchors.centerIn: parent
|
|
name: motionPreview.atEnd ? "arrow_back" : "arrow_forward"
|
|
size: Theme.iconSizeMedium
|
|
color: Theme.onPrimary
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: motionPreview.play()
|
|
}
|
|
}
|
|
}
|
|
|
|
SettingsSliderRow {
|
|
tab: "typography"
|
|
tags: ["animation", "duration", "speed", "motion"]
|
|
settingKey: "animationDuration"
|
|
text: I18n.tr("Duration", "animation duration slider label, also idle inhibitor duration dropdown")
|
|
minimumLabel: I18n.tr("Off")
|
|
minimum: 0
|
|
maximum: 1000
|
|
value: SettingsData.animationDuration
|
|
unit: "ms"
|
|
onSliderValueChanged: newValue => SettingsData.set("animationDuration", newValue)
|
|
}
|
|
|
|
SettingsButtonGroupRow {
|
|
tab: "typography"
|
|
tags: ["animation", "spring", "physics", "bounce", "motion", "overshoot"]
|
|
settingKey: "springBounce"
|
|
text: I18n.tr("Spring", "animation setting label, spring physics bounciness, not the season")
|
|
model: [I18n.tr("Smooth", "adjective, spring animation option with no bounce"), I18n.tr("Balanced"), I18n.tr("Playful", "adjective, spring animation option with the most bounce")]
|
|
currentIndex: SettingsData.springBounce
|
|
onSelectionChanged: (index, selected) => {
|
|
if (!selected)
|
|
return;
|
|
SettingsData.set("springBounce", index);
|
|
}
|
|
}
|
|
|
|
SettingsButtonGroupRow {
|
|
tab: "typography"
|
|
tags: ["animation", "motion", "fluid", "effect", "slide", "directional", "depth", "spring", "physics", "panels"]
|
|
settingKey: "motionEffect"
|
|
text: I18n.tr("Panel motion")
|
|
model: [I18n.tr("Standard", "adjective, panel motion option and bar layout mode option"), I18n.tr("Directional", "adjective, panel motion effect option"), I18n.tr("Depth", "noun, panel motion effect option"), I18n.tr("Fluid", "adjective, panel motion effect option")]
|
|
currentIndex: SettingsData.motionEffect
|
|
onSelectionChanged: (index, selected) => {
|
|
if (!selected)
|
|
return;
|
|
SettingsData.set("motionEffect", index);
|
|
}
|
|
}
|
|
|
|
SettingsToggleRow {
|
|
tab: "typography"
|
|
tags: ["animation", "ripple", "effect", "material", "click"]
|
|
settingKey: "enableRippleEffects"
|
|
text: I18n.tr("Ripple effects")
|
|
checked: SettingsData.enableRippleEffects ?? true
|
|
onToggled: newValue => SettingsData.set("enableRippleEffects", newValue)
|
|
}
|
|
|
|
SettingsToggleRow {
|
|
tab: "typography"
|
|
tags: ["animation", "spring", "physics", "accessibility", "reduce", "motion"]
|
|
settingKey: "reduceMotion"
|
|
text: I18n.tr("Reduce motion")
|
|
checked: SettingsData.reduceMotion
|
|
onToggled: checked => SettingsData.set("reduceMotion", checked)
|
|
}
|
|
}
|
|
|
|
SettingsCard {
|
|
tab: "typography"
|
|
tags: ["text", "render", "rendering", "quality", "animation", "popout", "modal", "sync", "duration"]
|
|
title: I18n.tr("Advanced", "adjective, settings section title for advanced options")
|
|
settingKey: "typographyAdvanced"
|
|
collapsible: true
|
|
expanded: false
|
|
|
|
SettingsButtonGroupRow {
|
|
tab: "typography"
|
|
tags: ["text", "render", "rendering", "type", "native", "qt", "curve", "freetype", "distance-field", "rasterizer"]
|
|
settingKey: "textRenderType"
|
|
text: I18n.tr("Renderer", "text rendering engine setting label")
|
|
model: [I18n.tr("Native", "adjective, text renderer option, native platform rendering"), "Qt", I18n.tr("Curve", "noun, text renderer option, qt curve rendering")]
|
|
currentIndex: {
|
|
switch (SettingsData.textRenderType) {
|
|
case SettingsData.TextRenderType.Qt:
|
|
return 1;
|
|
case SettingsData.TextRenderType.Curve:
|
|
return 2;
|
|
default:
|
|
return 0;
|
|
}
|
|
}
|
|
onSelectionChanged: (index, selected) => {
|
|
if (!selected)
|
|
return;
|
|
switch (index) {
|
|
case 1:
|
|
SettingsData.set("textRenderType", SettingsData.TextRenderType.Qt);
|
|
break;
|
|
case 2:
|
|
SettingsData.set("textRenderType", SettingsData.TextRenderType.Curve);
|
|
break;
|
|
default:
|
|
SettingsData.set("textRenderType", SettingsData.TextRenderType.Native);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
SettingsDropdownRow {
|
|
id: renderQualityRow
|
|
tab: "typography"
|
|
tags: ["text", "render", "quality", "level"]
|
|
settingKey: "textRenderQuality"
|
|
text: I18n.tr("Quality", "text render quality dropdown label")
|
|
options: [I18n.tr("Default"), I18n.tr("Low", "quality level option"), I18n.tr("Normal", "quality level option"), I18n.tr("High", "quality level option"), I18n.tr("Very High", "quality level option")]
|
|
currentValue: options[SettingsData.textRenderQuality] ?? options[0]
|
|
onValueChanged: value => {
|
|
const index = renderQualityRow.options.indexOf(value);
|
|
if (index < 0)
|
|
return;
|
|
SettingsData.set("textRenderQuality", index);
|
|
}
|
|
}
|
|
|
|
SettingsToggleRow {
|
|
tab: "typography"
|
|
tags: ["animation", "sync", "popout", "modal", "global"]
|
|
settingKey: "syncComponentAnimationSpeeds"
|
|
text: I18n.tr("Sync popouts and modals")
|
|
description: I18n.tr("Popouts and modals use the main animation duration", "sync popout and modal animation toggle description")
|
|
checked: SettingsData.syncComponentAnimationSpeeds
|
|
onToggled: checked => SettingsData.set("syncComponentAnimationSpeeds", checked)
|
|
}
|
|
|
|
SettingsSliderRow {
|
|
visible: !SettingsData.syncComponentAnimationSpeeds
|
|
tab: "typography"
|
|
tags: ["animation", "duration", "speed", "popout"]
|
|
settingKey: "popoutAnimationDuration"
|
|
text: I18n.tr("Popouts", "plural noun, shell popout panels, animation and shadow setting label")
|
|
minimumLabel: I18n.tr("Off")
|
|
minimum: 0
|
|
maximum: 1000
|
|
value: SettingsData.popoutAnimationDuration
|
|
unit: "ms"
|
|
onSliderValueChanged: newValue => SettingsData.set("popoutAnimationDuration", newValue)
|
|
}
|
|
|
|
SettingsSliderRow {
|
|
visible: !SettingsData.syncComponentAnimationSpeeds
|
|
tab: "typography"
|
|
tags: ["animation", "duration", "speed", "modal"]
|
|
settingKey: "modalAnimationDuration"
|
|
text: I18n.tr("Modals", "plural noun, shell modal dialogs, animation and shadow setting label")
|
|
minimumLabel: I18n.tr("Off")
|
|
minimum: 0
|
|
maximum: 1000
|
|
value: SettingsData.modalAnimationDuration
|
|
unit: "ms"
|
|
onSliderValueChanged: newValue => SettingsData.set("modalAnimationDuration", newValue)
|
|
}
|
|
}
|
|
}
|
|
}
|