mirror of
https://github.com/noctalia-dev/noctalia-shell.git
synced 2026-05-11 17:08:27 +08:00
lysec
558 lines
17 KiB
QML
558 lines
17 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import Quickshell.Io
|
|
import qs.Commons
|
|
import qs.Services
|
|
import qs.Widgets
|
|
|
|
ColumnLayout {
|
|
id: root
|
|
spacing: Style.marginM
|
|
|
|
function extractSchemeName(path) {
|
|
var basename = path.split('/').pop()
|
|
return basename.replace('.json', '')
|
|
}
|
|
|
|
// Cache for scheme colors (mirrors ColorSchemeTab approach)
|
|
property var schemeColorsCache: ({})
|
|
property int cacheVersion: 0
|
|
|
|
function getSchemeColor(schemeName, key) {
|
|
try {
|
|
var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
|
|
var data = schemeColorsCache[schemeName]
|
|
if (data && data[mode] && data[mode][key])
|
|
return data[mode][key]
|
|
} catch (e) {
|
|
|
|
}
|
|
return Color.mSurfaceVariant
|
|
}
|
|
|
|
// Match ColorSchemeTab helpers
|
|
function schemeLoaded(schemeName, jsonData) {
|
|
var value = jsonData || {}
|
|
schemeColorsCache[schemeName] = value
|
|
cacheVersion++
|
|
Logger.log("SetupAppearanceStep", `Loaded scheme ${schemeName}`)
|
|
}
|
|
|
|
Connections {
|
|
target: ColorSchemeService
|
|
function onSchemesChanged() {
|
|
Logger.log("SetupAppearanceStep", `Color schemes changed: ${ColorSchemeService.schemes.length}`)
|
|
schemeColorsCache = {}
|
|
cacheVersion++
|
|
}
|
|
}
|
|
|
|
// Beautiful header with icon
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.bottomMargin: Style.marginL
|
|
spacing: Style.marginM
|
|
|
|
Rectangle {
|
|
width: 40
|
|
height: 40
|
|
radius: Style.radiusL
|
|
color: Color.mSurfaceVariant
|
|
opacity: 0.6
|
|
|
|
NIcon {
|
|
icon: "palette"
|
|
pointSize: Style.fontSizeL
|
|
color: Color.mPrimary
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginXS
|
|
|
|
NText {
|
|
text: I18n.tr("setup.appearance.header")
|
|
pointSize: Style.fontSizeXL
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mPrimary
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("setup.appearance.subheader")
|
|
pointSize: Style.fontSizeM
|
|
color: Color.mOnSurfaceVariant
|
|
}
|
|
}
|
|
}
|
|
|
|
ScrollView {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
clip: true
|
|
contentWidth: availableWidth
|
|
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
|
ScrollBar.vertical.policy: ScrollBar.AsNeeded
|
|
|
|
ColumnLayout {
|
|
width: parent.width
|
|
spacing: Style.marginM
|
|
|
|
// Dark Mode Toggle
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginM
|
|
|
|
Rectangle {
|
|
width: 28
|
|
height: 28
|
|
radius: Style.radiusM
|
|
color: Color.mSurface
|
|
|
|
NIcon {
|
|
icon: "moon"
|
|
pointSize: Style.fontSizeL
|
|
color: Color.mPrimary
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.color-source.dark-mode.label")
|
|
pointSize: Style.fontSizeL
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurface
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.color-source.dark-mode.description")
|
|
pointSize: Style.fontSizeS
|
|
color: Color.mOnSurfaceVariant
|
|
wrapMode: Text.WordWrap
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
NToggle {
|
|
checked: Settings.data.colorSchemes.darkMode
|
|
onToggled: checked => Settings.data.colorSchemes.darkMode = checked
|
|
}
|
|
}
|
|
|
|
// Divider
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 1
|
|
color: Color.mOutline
|
|
opacity: 0.2
|
|
Layout.topMargin: Style.marginS
|
|
Layout.bottomMargin: Style.marginS
|
|
}
|
|
|
|
// Wallpaper Colors Toggle
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginM
|
|
|
|
Rectangle {
|
|
width: 28
|
|
height: 28
|
|
radius: Style.radiusM
|
|
color: Color.mSurface
|
|
|
|
NIcon {
|
|
icon: "color-picker"
|
|
pointSize: Style.fontSizeL
|
|
color: Color.mPrimary
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.color-source.use-wallpaper-colors.label")
|
|
pointSize: Style.fontSizeL
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurface
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.color-source.use-wallpaper-colors.description")
|
|
pointSize: Style.fontSizeS
|
|
color: Color.mOnSurfaceVariant
|
|
wrapMode: Text.WordWrap
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
NToggle {
|
|
enabled: ProgramCheckerService.matugenAvailable
|
|
opacity: ProgramCheckerService.matugenAvailable ? 1.0 : 0.6
|
|
checked: Settings.data.colorSchemes.useWallpaperColors && ProgramCheckerService.matugenAvailable
|
|
onToggled: checked => {
|
|
if (!ProgramCheckerService.matugenAvailable)
|
|
return
|
|
if (checked) {
|
|
Settings.data.colorSchemes.useWallpaperColors = true
|
|
AppThemeService.generate()
|
|
} else {
|
|
Settings.data.colorSchemes.useWallpaperColors = false
|
|
if (Settings.data.colorSchemes.predefinedScheme) {
|
|
ColorSchemeService.applyScheme(Settings.data.colorSchemes.predefinedScheme)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Matugen not available notice
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginS
|
|
visible: !ProgramCheckerService.matugenAvailable
|
|
|
|
Rectangle {
|
|
width: 28
|
|
height: 28
|
|
radius: Style.radiusM
|
|
color: Color.mSurface
|
|
NIcon {
|
|
icon: "alert-triangle"
|
|
pointSize: Style.fontSizeL
|
|
color: Color.mPrimary
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.color-source.use-wallpaper-colors.description")
|
|
// Reuse description; availability is visually indicated
|
|
pointSize: Style.fontSizeS
|
|
color: Color.mOnSurfaceVariant
|
|
wrapMode: Text.WordWrap
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// Matugen scheme type (visible when wallpaper colors enabled and matugen available)
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginM
|
|
visible: Settings.data.colorSchemes.useWallpaperColors && ProgramCheckerService.matugenAvailable
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginS
|
|
|
|
Rectangle {
|
|
width: 28
|
|
height: 28
|
|
radius: Style.radiusM
|
|
color: Color.mSurface
|
|
|
|
NIcon {
|
|
icon: "wand"
|
|
pointSize: Style.fontSizeL
|
|
color: Color.mPrimary
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.color-source.matugen-scheme-type.label")
|
|
pointSize: Style.fontSizeL
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurface
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.color-source.matugen-scheme-type.description")
|
|
pointSize: Style.fontSizeS
|
|
color: Color.mOnSurfaceVariant
|
|
}
|
|
}
|
|
}
|
|
|
|
// Matugen scheme options styled like bar position buttons
|
|
GridLayout {
|
|
Layout.fillWidth: true
|
|
columns: 2
|
|
rowSpacing: Style.marginS
|
|
columnSpacing: Style.marginS
|
|
|
|
Repeater {
|
|
model: [{
|
|
"key": "scheme-content",
|
|
"name": "Content"
|
|
}, {
|
|
"key": "scheme-expressive",
|
|
"name": "Expressive"
|
|
}, {
|
|
"key": "scheme-fidelity",
|
|
"name": "Fidelity"
|
|
}, {
|
|
"key": "scheme-fruit-salad",
|
|
"name": "Fruit Salad"
|
|
}, {
|
|
"key": "scheme-monochrome",
|
|
"name": "Monochrome"
|
|
}, {
|
|
"key": "scheme-neutral",
|
|
"name": "Neutral"
|
|
}, {
|
|
"key": "scheme-rainbow",
|
|
"name": "Rainbow"
|
|
}, {
|
|
"key": "scheme-tonal-spot",
|
|
"name": "Tonal Spot"
|
|
}]
|
|
delegate: Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 48
|
|
radius: Style.radiusM
|
|
border.width: 1
|
|
|
|
property bool isActive: Settings.data.colorSchemes.matugenSchemeType === modelData.key
|
|
|
|
color: (hoverHandler.hovered || isActive) ? Color.mPrimary : Color.mSurfaceVariant
|
|
border.color: (hoverHandler.hovered || isActive) ? Color.mPrimary : Color.mOutline
|
|
opacity: (hoverHandler.hovered || isActive) ? 1.0 : 0.8
|
|
|
|
NText {
|
|
text: modelData.name
|
|
pointSize: Style.fontSizeM
|
|
font.weight: (hoverHandler.hovered || parent.isActive) ? Style.fontWeightBold : Style.fontWeightMedium
|
|
color: (hoverHandler.hovered || parent.isActive) ? Color.mOnPrimary : Color.mOnSurface
|
|
anchors.centerIn: parent
|
|
}
|
|
|
|
HoverHandler {
|
|
id: hoverHandler
|
|
}
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: {
|
|
Settings.data.colorSchemes.matugenSchemeType = modelData.key
|
|
AppThemeService.generate()
|
|
}
|
|
}
|
|
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: Style.animationFast
|
|
}
|
|
}
|
|
Behavior on border.color {
|
|
ColorAnimation {
|
|
duration: Style.animationFast
|
|
}
|
|
}
|
|
Behavior on opacity {
|
|
NumberAnimation {
|
|
duration: Style.animationFast
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Divider
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 1
|
|
color: Color.mOutline
|
|
opacity: 0.2
|
|
Layout.topMargin: Style.marginS
|
|
Layout.bottomMargin: Style.marginS
|
|
visible: !Settings.data.colorSchemes.useWallpaperColors
|
|
}
|
|
|
|
// Predefined schemes section (visible when wallpaper colors disabled)
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginM
|
|
visible: !Settings.data.colorSchemes.useWallpaperColors
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginS
|
|
|
|
Rectangle {
|
|
width: 28
|
|
height: 28
|
|
radius: Style.radiusM
|
|
color: Color.mSurface
|
|
|
|
NIcon {
|
|
icon: "palette"
|
|
pointSize: Style.fontSizeL
|
|
color: Color.mPrimary
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.predefined.section.label")
|
|
pointSize: Style.fontSizeL
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurface
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("settings.color-scheme.predefined.section.description")
|
|
pointSize: Style.fontSizeS
|
|
color: Color.mOnSurfaceVariant
|
|
}
|
|
}
|
|
}
|
|
|
|
// Predefined schemes Grid (matches ColorSchemeTab)
|
|
GridLayout {
|
|
id: schemesGrid
|
|
columns: Math.max(2, Math.floor((parent.width - Style.marginM * 2) / 180))
|
|
rowSpacing: Style.marginM
|
|
columnSpacing: Style.marginM
|
|
Layout.fillWidth: true
|
|
|
|
Repeater {
|
|
model: ColorSchemeService.schemes
|
|
|
|
delegate: Rectangle {
|
|
id: schemeItem
|
|
|
|
property string schemePath: modelData
|
|
property string schemeName: root.extractSchemeName(modelData)
|
|
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignHCenter
|
|
height: 50
|
|
radius: Style.radiusS
|
|
color: root.cacheVersion >= 0 ? root.getSchemeColor(schemeName, "mSurface") : root.getSchemeColor(schemeName, "mSurface")
|
|
border.width: Math.max(1, Style.borderL)
|
|
border.color: itemMouseArea.containsMouse ? Color.mTertiary : (Settings.data.colorSchemes.predefinedScheme === schemeName ? Color.mSecondary : Color.mOutline)
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginL
|
|
spacing: Style.marginXS
|
|
|
|
NText {
|
|
text: schemeItem.schemeName
|
|
pointSize: Style.fontSizeS
|
|
font.weight: Style.fontWeightMedium
|
|
color: Color.mOnSurface
|
|
Layout.fillWidth: true
|
|
elide: Text.ElideRight
|
|
verticalAlignment: Text.AlignVCenter
|
|
wrapMode: Text.WordWrap
|
|
maximumLineCount: 1
|
|
}
|
|
|
|
Rectangle {
|
|
width: 14
|
|
height: 14
|
|
radius: width * 0.5
|
|
color: root.cacheVersion >= 0 ? (function () {
|
|
var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
|
|
var cached = root.schemeColorsCache[schemeItem.schemeName]
|
|
return (cached && cached[mode] && cached[mode].mPrimary) || root.getSchemeColor(schemeItem.schemeName, "mPrimary")
|
|
})() : Color.mPrimary
|
|
}
|
|
Rectangle {
|
|
width: 14
|
|
height: 14
|
|
radius: width * 0.5
|
|
color: root.cacheVersion >= 0 ? (function () {
|
|
var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
|
|
var cached = root.schemeColorsCache[schemeItem.schemeName]
|
|
return (cached && cached[mode] && cached[mode].mSecondary) || root.getSchemeColor(schemeItem.schemeName, "mSecondary")
|
|
})() : Color.mSecondary
|
|
}
|
|
Rectangle {
|
|
width: 14
|
|
height: 14
|
|
radius: width * 0.5
|
|
color: root.cacheVersion >= 0 ? (function () {
|
|
var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
|
|
var cached = root.schemeColorsCache[schemeItem.schemeName]
|
|
return (cached && cached[mode] && cached[mode].mTertiary) || root.getSchemeColor(schemeItem.schemeName, "mTertiary")
|
|
})() : Color.mTertiary
|
|
}
|
|
Rectangle {
|
|
width: 14
|
|
height: 14
|
|
radius: width * 0.5
|
|
color: root.cacheVersion >= 0 ? (function () {
|
|
var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
|
|
var cached = root.schemeColorsCache[schemeItem.schemeName]
|
|
return (cached && cached[mode] && cached[mode].mError) || root.getSchemeColor(schemeItem.schemeName, "mError")
|
|
})() : Color.mError
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: itemMouseArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: {
|
|
Settings.data.colorSchemes.useWallpaperColors = false
|
|
Settings.data.colorSchemes.predefinedScheme = schemeItem.schemeName
|
|
ColorSchemeService.applyScheme(Settings.data.colorSchemes.predefinedScheme)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bottom spacer
|
|
Item {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: Style.marginL
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hidden loader to populate schemeColorsCache from files
|
|
Item {
|
|
visible: false
|
|
Repeater {
|
|
model: ColorSchemeService.schemes
|
|
delegate: Item {
|
|
FileView {
|
|
path: modelData
|
|
blockLoading: false
|
|
onLoaded: {
|
|
var schemeName = root.extractSchemeName(path)
|
|
try {
|
|
var jsonData = JSON.parse(text())
|
|
root.schemeLoaded(schemeName, jsonData)
|
|
} catch (e) {
|
|
root.schemeLoaded(schemeName, null)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|