mirror of
https://github.com/belsabbagh/dotfiles.git
synced 2026-04-11 09:36:46 +00:00
quickshell and hyprland additions
This commit is contained in:
@@ -0,0 +1,364 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user