mirror of
https://github.com/belsabbagh/dotfiles.git
synced 2026-04-11 17:47:09 +00:00
365 lines
12 KiB
QML
365 lines
12 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import Quickshell
|
|
import Quickshell.Io
|
|
import Quickshell.Widgets
|
|
import qs.config
|
|
import qs.modules.components
|
|
import qs.services
|
|
import qs.plugins
|
|
|
|
ContentMenu {
|
|
title: "Appearance"
|
|
description: "Adjust how the desktop looks like."
|
|
|
|
ContentCard {
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Metrics.spacing(16)
|
|
|
|
ColumnLayout {
|
|
spacing: Metrics.spacing(4)
|
|
|
|
StyledText {
|
|
text: "Select Theme"
|
|
font.pixelSize: Metrics.fontSize(16)
|
|
}
|
|
|
|
StyledText {
|
|
text: "Choose between dark or light mode."
|
|
font.pixelSize: Metrics.fontSize(12)
|
|
color: "#888888"
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.leftMargin: Metrics.margin(15)
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignHCenter
|
|
spacing: Metrics.spacing(16)
|
|
|
|
StyledButton {
|
|
Layout.preferredHeight: 300
|
|
Layout.preferredWidth: 460
|
|
Layout.maximumHeight: 400
|
|
Layout.maximumWidth: 500
|
|
icon: "dark_mode"
|
|
iconSize: Metrics.iconSize(64)
|
|
checked: Config.runtime.appearance.theme === "dark"
|
|
hoverEnabled: true
|
|
|
|
onClicked: {
|
|
if (!Config.runtime.appearance.colors.autogenerated) {
|
|
const scheme = Config.runtime.appearance.colors.scheme
|
|
const file = Theme.map[scheme]?.dark
|
|
if (!file) {
|
|
Theme.notifyMissingVariant(scheme, "dark")
|
|
return
|
|
}
|
|
|
|
Config.updateKey("appearance.theme", "dark")
|
|
Quickshell.execDetached([
|
|
"nucleus", "theme", "switch", file
|
|
])
|
|
} else {
|
|
Config.updateKey("appearance.theme", "dark")
|
|
Quickshell.execDetached([
|
|
"nucleus", "ipc", "call", "global", "regenColors"
|
|
])
|
|
}
|
|
}
|
|
}
|
|
|
|
StyledButton {
|
|
Layout.preferredHeight: 300
|
|
Layout.preferredWidth: 460
|
|
Layout.maximumHeight: 400
|
|
Layout.maximumWidth: 500
|
|
icon: "light_mode"
|
|
iconSize: Metrics.iconSize(64)
|
|
checked: Config.runtime.appearance.theme === "light"
|
|
hoverEnabled: true
|
|
|
|
onClicked: {
|
|
if (!Config.runtime.appearance.colors.autogenerated) {
|
|
const scheme = Config.runtime.appearance.colors.scheme
|
|
const file = Theme.map[scheme]?.light
|
|
if (!file) {
|
|
Theme.notifyMissingVariant(scheme, "light")
|
|
return
|
|
}
|
|
|
|
Config.updateKey("appearance.theme", "light")
|
|
Quickshell.execDetached([
|
|
"nucleus", "theme", "switch", file
|
|
])
|
|
} else {
|
|
Config.updateKey("appearance.theme", "light")
|
|
Quickshell.execDetached([
|
|
"nucleus", "ipc", "call", "global", "regenColors"
|
|
])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
width: Metrics.spacing(30)
|
|
}
|
|
}
|
|
}
|
|
|
|
ContentCard {
|
|
RowLayout {
|
|
opacity: autogeneratedColorsSelector.enabled ? 1 : 0.8
|
|
|
|
ColumnLayout {
|
|
StyledText {
|
|
text: "Color Generation Schemes:"
|
|
font.pixelSize: Metrics.fontSize(16)
|
|
}
|
|
|
|
StyledText {
|
|
text: "Choose the scheme for autogenerated color generation."
|
|
font.pixelSize: Metrics.fontSize(12)
|
|
}
|
|
}
|
|
|
|
Item { Layout.fillWidth: true }
|
|
|
|
StyledDropDown {
|
|
id: autogeneratedColorsSelector
|
|
label: "Color Scheme"
|
|
model: [
|
|
"scheme-content",
|
|
"scheme-expressive",
|
|
"scheme-fidelity",
|
|
"scheme-fruit-salad",
|
|
"scheme-monochrome",
|
|
"scheme-neutral",
|
|
"scheme-rainbow",
|
|
"scheme-tonal-spot"
|
|
]
|
|
|
|
currentIndex: model.indexOf(Config.runtime.appearance.colors.matugenScheme)
|
|
|
|
onSelectedIndexChanged: (index) => {
|
|
if (!Config.runtime.appearance.colors.autogenerated)
|
|
return
|
|
const selectedScheme = model[index]
|
|
Config.updateKey("appearance.colors.matugenScheme", selectedScheme)
|
|
Quickshell.execDetached([
|
|
"nucleus", "ipc", "call", "global", "regenColors"
|
|
])
|
|
}
|
|
|
|
enabled: Config.runtime.appearance.colors.autogenerated
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
opacity: predefinedThemeSelector.enabled ? 1 : 0.8
|
|
|
|
ColumnLayout {
|
|
StyledText {
|
|
font.pixelSize: Metrics.fontSize(16)
|
|
text: "Predefined/Custom Themes:"
|
|
}
|
|
|
|
StyledText {
|
|
font.pixelSize: Metrics.fontSize(12)
|
|
text: "Choose a pre-defined theme for your interface."
|
|
}
|
|
}
|
|
|
|
Item { Layout.fillWidth: true }
|
|
|
|
StyledDropDown {
|
|
id: predefinedThemeSelector
|
|
label: "Theme"
|
|
model: Object.keys(Theme.map)
|
|
currentIndex: model.indexOf(Config.runtime.appearance.colors.scheme)
|
|
|
|
onSelectedIndexChanged: (index) => {
|
|
if (Config.runtime.appearance.colors.autogenerated)
|
|
return
|
|
const selectedTheme = model[index]
|
|
const variant = Config.runtime.appearance.theme
|
|
const file = Theme.map[selectedTheme][variant]
|
|
if (!file) return
|
|
|
|
Config.updateKey("appearance.colors.scheme", selectedTheme)
|
|
Quickshell.execDetached([
|
|
"nucleus", "theme", "switch", file
|
|
])
|
|
}
|
|
|
|
enabled: !Config.runtime.appearance.colors.autogenerated
|
|
}
|
|
}
|
|
}
|
|
|
|
ContentCard {
|
|
StyledSwitchOption {
|
|
title: "Tint Icons"
|
|
description: "Either tint icons across the shell or keep them colorized."
|
|
prefField: "appearance.tintIcons"
|
|
}
|
|
|
|
StyledSwitchOption {
|
|
title: "Use Autogenerated Themes"
|
|
description: "Use autogenerated themes."
|
|
prefField: "appearance.colors.autogenerated"
|
|
}
|
|
|
|
StyledSwitchOption {
|
|
title: "Use User Defined Themes"
|
|
description: "Enabling this will also run the default `config.toml` in `~/.config/matugen` dir."
|
|
prefField: "appearance.colors.runMatugenUserWide"
|
|
}
|
|
}
|
|
|
|
ContentCard {
|
|
StyledText {
|
|
text: "Clock"
|
|
font.pixelSize: Metrics.fontSize(20)
|
|
font.bold: true
|
|
}
|
|
|
|
StyledSwitchOption {
|
|
title: "Show Clock"
|
|
description: "Whether to show or disable the clock on the background."
|
|
prefField: "appearance.background.clock.enabled"
|
|
}
|
|
|
|
StyledSwitchOption {
|
|
title: "Analog Variant"
|
|
description: "Whether to use analog clock or not."
|
|
prefField: "appearance.background.clock.isAnalog"
|
|
}
|
|
|
|
StyledSwitchOption {
|
|
title: "Rotate Clock Polygon"
|
|
description: "Rotate the shape polygon of the analog clock."
|
|
prefField: "appearance.background.clock.rotatePolygonBg"
|
|
enabled: Config.runtime.appearance.background.clock.isAnalog
|
|
opacity: enabled ? 1 : 0.8
|
|
}
|
|
|
|
NumberStepper {
|
|
label: "Rotation Duration"
|
|
description: "Adjust the duration in which the clock rotates 360* (Seconds)."
|
|
prefField: "appearance.background.clock.rotationDuration"
|
|
minimum: 1
|
|
maximum: 40
|
|
step: 1
|
|
}
|
|
|
|
RowLayout {
|
|
id: shapeSelector
|
|
|
|
ColumnLayout {
|
|
StyledText {
|
|
text: "Analog Clock Shape"
|
|
font.pixelSize: Metrics.fontSize(16)
|
|
}
|
|
|
|
StyledText {
|
|
text: "Choose the analog clock's shape."
|
|
font.pixelSize: Metrics.fontSize(12)
|
|
}
|
|
}
|
|
|
|
Item { Layout.fillWidth: true }
|
|
|
|
StyledDropDown {
|
|
label: "Shape Type"
|
|
model: ["Cookie 7 Sided", "Cookie 9 Sided", "Cookie 12 Sided", "Pixelated Circle", "Circle"]
|
|
|
|
currentIndex: Config.runtime.appearance.background.clock.shape
|
|
|
|
onSelectedIndexChanged: (index) => {
|
|
Config.updateKey(
|
|
"appearance.background.clock.shape",
|
|
index
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ContentCard {
|
|
StyledText {
|
|
text: "Rounding"
|
|
font.pixelSize: Metrics.fontSize(20)
|
|
font.bold: true
|
|
}
|
|
NumberStepper {
|
|
label: "Factor"
|
|
description: "Adjust the rounding factor."
|
|
prefField: "appearance.rounding.factor"
|
|
minimum: 0
|
|
maximum: 1
|
|
step: 0.1
|
|
}
|
|
}
|
|
|
|
ContentCard {
|
|
StyledText {
|
|
text: "Font"
|
|
font.pixelSize: Metrics.fontSize(20)
|
|
font.bold: true
|
|
}
|
|
NumberStepper {
|
|
label: "Scale"
|
|
description: "Adjust the font scale."
|
|
prefField: "appearance.font.scale"
|
|
minimum: 0.1
|
|
maximum: 2
|
|
step: 0.1
|
|
}
|
|
}
|
|
|
|
ContentCard {
|
|
StyledText {
|
|
text: "Transparency"
|
|
font.pixelSize: Metrics.fontSize(20)
|
|
font.bold: true
|
|
}
|
|
StyledSwitchOption {
|
|
title: "Enabled"
|
|
description: "Whether to enable or disable transparency."
|
|
prefField: "appearance.transparency.enabled"
|
|
}
|
|
NumberStepper {
|
|
label: "Factor"
|
|
description: "Adjust the alpha value for transparency."
|
|
prefField: "appearance.transparency.alpha"
|
|
minimum: 0.1
|
|
maximum: 1
|
|
step: 0.1
|
|
}
|
|
}
|
|
|
|
ContentCard {
|
|
StyledText {
|
|
text: "Animations"
|
|
font.pixelSize: Metrics.fontSize(20)
|
|
font.bold: true
|
|
}
|
|
StyledSwitchOption {
|
|
title: "Enabled"
|
|
description: "Whether to enable or disable animations (applies everywhere in the shell)."
|
|
prefField: "appearance.animations.enabled"
|
|
}
|
|
NumberStepper {
|
|
label: "Duration Scale"
|
|
description: "Adjust the duration scale of the animations."
|
|
prefField: "appearance.animations.durationScale"
|
|
minimum: 0.1
|
|
maximum: 1
|
|
step: 0.1
|
|
}
|
|
}
|
|
}
|