Post refactoring fixes 1/??
This commit is contained in:
quadbyte
parent
605e3610d2
commit
4631239b92
19 changed files with 8 additions and 11 deletions
325
Modules/SettingsPanel/Tabs/ColorSchemeTab.qml
Normal file
325
Modules/SettingsPanel/Tabs/ColorSchemeTab.qml
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import qs.Commons
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import Quickshell.Io
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
spacing: 0
|
||||
|
||||
// Helper function to get color from scheme file
|
||||
function getSchemeColor(schemePath, colorKey) {
|
||||
// Extract scheme name from path
|
||||
var schemeName = schemePath.split("/").pop().replace(".json", "")
|
||||
|
||||
// Try to get from cached data first
|
||||
if (schemeColorsCache[schemeName] && schemeColorsCache[schemeName][colorKey]) {
|
||||
return schemeColorsCache[schemeName][colorKey]
|
||||
}
|
||||
|
||||
// Return a default color if not cached yet
|
||||
return "#000000"
|
||||
}
|
||||
|
||||
// Cache for scheme colors
|
||||
property var schemeColorsCache: ({})
|
||||
|
||||
// Scale properties for card animations
|
||||
property real cardScaleLow: 0.95
|
||||
property real cardScaleHigh: 1.0
|
||||
|
||||
// This function is called by the FileView Repeater when a scheme file is loaded
|
||||
function schemeLoaded(schemeName, jsonData) {
|
||||
var colors = {}
|
||||
|
||||
// Extract colors from JSON data
|
||||
if (jsonData && typeof jsonData === 'object') {
|
||||
colors.mPrimary = jsonData.mPrimary || jsonData.primary || "#000000"
|
||||
colors.mSecondary = jsonData.mSecondary || jsonData.secondary || "#000000"
|
||||
colors.mTertiary = jsonData.mTertiary || jsonData.tertiary || "#000000"
|
||||
colors.mError = jsonData.mError || jsonData.error || "#ff0000"
|
||||
colors.mSurface = jsonData.mSurface || jsonData.surface || "#ffffff"
|
||||
colors.mOnSurface = jsonData.mOnSurface || jsonData.onSurface || "#000000"
|
||||
colors.mOutline = jsonData.mOutline || jsonData.outline || "#666666"
|
||||
} else {
|
||||
// Default colors on failure
|
||||
colors = {
|
||||
"mPrimary": "#000000",
|
||||
"mSecondary": "#000000",
|
||||
"mTertiary": "#000000",
|
||||
"mError": "#ff0000",
|
||||
"mSurface": "#ffffff",
|
||||
"mOnSurface": "#000000",
|
||||
"mOutline": "#666666"
|
||||
}
|
||||
}
|
||||
|
||||
// Update the cache. This must be done by re-assigning the whole object to trigger updates.
|
||||
var newCache = schemeColorsCache
|
||||
newCache[schemeName] = colors
|
||||
schemeColorsCache = newCache
|
||||
}
|
||||
|
||||
// When the list of available schemes changes, clear the cache.
|
||||
// The Repeater below will automatically re-create the FileViews.
|
||||
Connections {
|
||||
target: ColorSchemesService
|
||||
function onSchemesChanged() {
|
||||
schemeColorsCache = {}
|
||||
}
|
||||
}
|
||||
|
||||
// A non-visual Item to host the Repeater that loads the color scheme files.
|
||||
Item {
|
||||
visible: false
|
||||
id: fileLoaders
|
||||
|
||||
Repeater {
|
||||
model: ColorSchemesService.schemes
|
||||
|
||||
// The delegate is a Component, which correctly wraps the non-visual FileView
|
||||
delegate: Item {
|
||||
FileView {
|
||||
path: modelData
|
||||
blockLoading: true
|
||||
onLoaded: {
|
||||
var schemeName = path.split("/").pop().replace(".json", "")
|
||||
try {
|
||||
var jsonData = JSON.parse(text())
|
||||
root.schemeLoaded(schemeName, jsonData)
|
||||
} catch (e) {
|
||||
console.warn("Failed to parse JSON for scheme:", schemeName, e)
|
||||
root.schemeLoaded(schemeName, null) // Load defaults on parse error
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// UI Code
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
padding: Style.marginMedium * scaling
|
||||
clip: true
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.vertical.policy: ScrollBar.AsNeeded
|
||||
|
||||
ColumnLayout {
|
||||
width: scrollView.availableWidth
|
||||
spacing: 0
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 0
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
// Use Matugen
|
||||
NToggle {
|
||||
label: "Use Matugen"
|
||||
description: "Automatically generate colors based on your active wallpaper using Matugen"
|
||||
value: Settings.data.colorSchemes.useWallpaperColors
|
||||
onToggled: function (newValue) {
|
||||
Settings.data.colorSchemes.useWallpaperColors = newValue
|
||||
if (Settings.data.colorSchemes.useWallpaperColors) {
|
||||
ColorSchemesService.changedWallpaper()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NDivider {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginLarge * scaling
|
||||
Layout.bottomMargin: Style.marginLarge * scaling
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginTiniest * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Predefined Color Schemes"
|
||||
font.pointSize: Style.fontSizeLarge * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Colors.mOnSurface
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NText {
|
||||
text: "These color schemes only apply when 'Use Matugen' is disabled. When enabled, Matugen will generate colors based on your wallpaper instead."
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
color: Colors.mOnSurface
|
||||
Layout.fillWidth: true
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginTiny * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginLarge * scaling
|
||||
|
||||
// Color Schemes Grid
|
||||
GridLayout {
|
||||
columns: 4
|
||||
rowSpacing: Style.marginLarge * scaling
|
||||
columnSpacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
Repeater {
|
||||
model: ColorSchemesService.schemes
|
||||
|
||||
Rectangle {
|
||||
id: schemeCard
|
||||
|
||||
property string schemePath: modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 120 * scaling
|
||||
radius: Style.radiusMedium * scaling
|
||||
color: getSchemeColor(modelData, "mSurface")
|
||||
border.width: Math.max(1, Style.borderThick * scaling)
|
||||
border.color: Settings.data.colorSchemes.predefinedScheme === modelData ? Colors.mPrimary : Colors.mOutline
|
||||
scale: root.cardScaleLow
|
||||
|
||||
// Mouse area for selection
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
// Disable useWallpaperColors when picking a predefined color scheme
|
||||
// TBC: broken uncheck useWallpaperColors
|
||||
Settings.data.colorSchemes.useWallpaperColors = false
|
||||
Settings.data.colorSchemes.predefinedScheme = schemePath
|
||||
ColorSchemesService.applyScheme(schemePath)
|
||||
}
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: {
|
||||
schemeCard.scale = root.cardScaleHigh
|
||||
}
|
||||
|
||||
onExited: {
|
||||
schemeCard.scale = root.cardScaleLow
|
||||
}
|
||||
}
|
||||
|
||||
// Card content
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginXL * scaling
|
||||
spacing: Style.marginSmall * scaling
|
||||
|
||||
// Scheme name
|
||||
NText {
|
||||
text: {
|
||||
// Remove json and the full path
|
||||
var chunks = schemePath.replace(".json", "").split("/")
|
||||
return chunks[chunks.length - 1]
|
||||
}
|
||||
font.pointSize: Style.fontSizeMedium * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: getSchemeColor(modelData, "mOnSurface")
|
||||
Layout.fillWidth: true
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
// Color swatches
|
||||
RowLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
// Primary color swatch
|
||||
Rectangle {
|
||||
width: 28 * scaling
|
||||
height: 28 * scaling
|
||||
radius: width * 0.5
|
||||
color: getSchemeColor(modelData, "mPrimary")
|
||||
}
|
||||
|
||||
// Secondary color swatch
|
||||
Rectangle {
|
||||
width: 28 * scaling
|
||||
height: 28 * scaling
|
||||
radius: width * 0.5
|
||||
color: getSchemeColor(modelData, "mSecondary")
|
||||
}
|
||||
|
||||
// Tertiary color swatch
|
||||
Rectangle {
|
||||
width: 28 * scaling
|
||||
height: 28 * scaling
|
||||
radius: width * 0.5
|
||||
color: getSchemeColor(modelData, "mTertiary")
|
||||
}
|
||||
|
||||
// Error color swatch
|
||||
Rectangle {
|
||||
width: 28 * scaling
|
||||
height: 28 * scaling
|
||||
radius: width * 0.5
|
||||
color: getSchemeColor(modelData, "mError")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Selection indicator
|
||||
Rectangle {
|
||||
visible: Settings.data.colorSchemes.predefinedScheme === schemePath
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.margins: Style.marginSmall * scaling
|
||||
width: 24 * scaling
|
||||
height: 24 * scaling
|
||||
radius: width * 0.5
|
||||
color: Colors.mPrimary
|
||||
|
||||
NText {
|
||||
anchors.centerIn: parent
|
||||
text: "✓"
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Colors.mOnPrimary
|
||||
}
|
||||
}
|
||||
|
||||
// Smooth animations
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: Style.animationNormal
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Style.animationNormal
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.width {
|
||||
NumberAnimation {
|
||||
duration: Style.animationFast
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue