mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-24 21:42:51 -05:00
Implement basic color theme picker in Control Center. Remove color picker icon & App text from launcher button.
This commit is contained in:
purian23
@@ -7,35 +7,21 @@ Rectangle {
|
||||
property var theme
|
||||
property var root
|
||||
|
||||
width: Math.max(120, launcherRow.implicitWidth + theme.spacingM * 2)
|
||||
width: 40
|
||||
height: 32
|
||||
radius: theme.cornerRadius
|
||||
color: launcherArea.containsMouse ? Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.12) : Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.08)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Row {
|
||||
id: launcherRow
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
spacing: theme.spacingS
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: root.osLogo || "apps"
|
||||
font.family: root.osLogo ? "NerdFont" : theme.iconFont
|
||||
font.pixelSize: root.osLogo ? theme.iconSize - 2 : theme.iconSize - 2
|
||||
font.weight: theme.iconFontWeight
|
||||
color: theme.surfaceText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Applications"
|
||||
font.pixelSize: theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: theme.surfaceText
|
||||
}
|
||||
text: root.osLogo || "apps"
|
||||
font.family: root.osLogo ? "NerdFont" : theme.iconFont
|
||||
font.pixelSize: root.osLogo ? theme.iconSize - 2 : theme.iconSize - 2
|
||||
font.weight: theme.iconFontWeight
|
||||
color: theme.surfaceText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
||||
@@ -1537,6 +1537,23 @@ PanelWindow {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Theme Picker
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Text {
|
||||
text: "Theme"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
ThemePicker {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
184
Widgets/ThemePicker.qml
Normal file
184
Widgets/ThemePicker.qml
Normal file
@@ -0,0 +1,184 @@
|
||||
import QtQuick
|
||||
import "../Common"
|
||||
|
||||
Column {
|
||||
id: themePicker
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Text {
|
||||
text: "Current Theme: " + Theme.themes[Theme.currentThemeIndex].name
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
// Theme description
|
||||
Text {
|
||||
text: {
|
||||
var descriptions = [
|
||||
"Material blue inspired by modern interfaces",
|
||||
"Deep blue inspired by material 3",
|
||||
"Rich purple tones for BB elegance",
|
||||
"Natural green for productivity",
|
||||
"Energetic orange for creativity",
|
||||
"Bold red for impact",
|
||||
"Cool cyan for tranquility",
|
||||
"Vibrant pink for expression",
|
||||
"Warm amber for comfort",
|
||||
"Soft coral for gentle warmth"
|
||||
]
|
||||
return descriptions[Theme.currentThemeIndex] || "Select a theme"
|
||||
}
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
wrapMode: Text.WordWrap
|
||||
width: Math.min(parent.width, 200)
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
// Grid layout for 10 themes (2 rows of 5)
|
||||
Column {
|
||||
spacing: Theme.spacingS
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
// First row - Blue, Deep Blue, Purple, Green, Orange
|
||||
Row {
|
||||
spacing: Theme.spacingM
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
Repeater {
|
||||
model: 5
|
||||
|
||||
Rectangle {
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 16
|
||||
color: Theme.themes[index].primary
|
||||
border.color: Theme.outline
|
||||
border.width: Theme.currentThemeIndex === index ? 2 : 1
|
||||
|
||||
scale: Theme.currentThemeIndex === index ? 1.1 : 1.0
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.width {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
// Theme name tooltip
|
||||
Rectangle {
|
||||
width: nameText.contentWidth + Theme.spacingS * 2
|
||||
height: nameText.contentHeight + Theme.spacingXS * 2
|
||||
color: Theme.surfaceContainer
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
radius: Theme.cornerRadiusSmall
|
||||
anchors.bottom: parent.top
|
||||
anchors.bottomMargin: Theme.spacingXS
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: mouseArea.containsMouse
|
||||
|
||||
Text {
|
||||
id: nameText
|
||||
text: Theme.themes[index].name
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
Theme.switchTheme(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Second row - Red, Cyan, Pink, Amber, Coral
|
||||
Row {
|
||||
spacing: Theme.spacingM
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
Repeater {
|
||||
model: 5
|
||||
|
||||
Rectangle {
|
||||
property int themeIndex: index + 5
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 16
|
||||
color: themeIndex < Theme.themes.length ? Theme.themes[themeIndex].primary : "transparent"
|
||||
border.color: Theme.outline
|
||||
border.width: Theme.currentThemeIndex === themeIndex ? 2 : 1
|
||||
visible: themeIndex < Theme.themes.length
|
||||
|
||||
scale: Theme.currentThemeIndex === themeIndex ? 1.1 : 1.0
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.width {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
// Theme name tooltip
|
||||
Rectangle {
|
||||
width: nameText2.contentWidth + Theme.spacingS * 2
|
||||
height: nameText2.contentHeight + Theme.spacingXS * 2
|
||||
color: Theme.surfaceContainer
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
radius: Theme.cornerRadiusSmall
|
||||
anchors.bottom: parent.top
|
||||
anchors.bottomMargin: Theme.spacingXS
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: mouseArea2.containsMouse && themeIndex < Theme.themes.length
|
||||
|
||||
Text {
|
||||
id: nameText2
|
||||
text: themeIndex < Theme.themes.length ? Theme.themes[themeIndex].name : ""
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea2
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
if (themeIndex < Theme.themes.length) {
|
||||
Theme.switchTheme(themeIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -76,36 +76,21 @@ PanelWindow {
|
||||
|
||||
Rectangle {
|
||||
id: archLauncher
|
||||
width: Math.max(120, launcherRow.implicitWidth + Theme.spacingM * 2)
|
||||
width: 40
|
||||
height: 32
|
||||
radius: Theme.cornerRadius
|
||||
color: launcherArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.12) : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Row {
|
||||
id: launcherRow
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: root.osLogo || "apps" // Use OS logo if detected, fallback to apps icon
|
||||
font.family: root.osLogo ? "NerdFont" : Theme.iconFont
|
||||
font.pixelSize: root.osLogo ? Theme.iconSize - 2 : Theme.iconSize - 2
|
||||
font.weight: Theme.iconFontWeight
|
||||
color: Theme.surfaceText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: root.isSmallScreen ? "Apps" : "Applications"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
visible: !root.isSmallScreen || width > 60
|
||||
}
|
||||
text: root.osLogo || "apps" // Use OS logo if detected, fallback to apps icon
|
||||
font.family: root.osLogo ? "NerdFont" : Theme.iconFont
|
||||
font.pixelSize: root.osLogo ? Theme.iconSize - 2 : Theme.iconSize - 2
|
||||
font.weight: Theme.iconFontWeight
|
||||
color: Theme.surfaceText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
@@ -613,40 +598,40 @@ PanelWindow {
|
||||
}
|
||||
|
||||
// Color Picker Button
|
||||
Rectangle {
|
||||
width: 40
|
||||
height: 32
|
||||
radius: Theme.cornerRadius
|
||||
color: colorPickerArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.08)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
// Rectangle {
|
||||
// width: 40
|
||||
// height: 32
|
||||
// radius: Theme.cornerRadius
|
||||
// color: colorPickerArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.08)
|
||||
// anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "colorize" // Material icon for color picker
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: Theme.iconSize - 6
|
||||
font.weight: Theme.iconFontWeight
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
// Text {
|
||||
// anchors.centerIn: parent
|
||||
// text: "colorize" // Material icon for color picker
|
||||
// font.family: Theme.iconFont
|
||||
// font.pixelSize: Theme.iconSize - 6
|
||||
// font.weight: Theme.iconFontWeight
|
||||
// color: Theme.surfaceText
|
||||
// }
|
||||
|
||||
MouseArea {
|
||||
id: colorPickerArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
// MouseArea {
|
||||
// id: colorPickerArea
|
||||
// anchors.fill: parent
|
||||
// hoverEnabled: true
|
||||
// cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onClicked: {
|
||||
ColorPickerService.pickColor()
|
||||
}
|
||||
}
|
||||
// onClicked: {
|
||||
// ColorPickerService.pickColor()
|
||||
// }
|
||||
// }
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
// Behavior on color {
|
||||
// ColorAnimation {
|
||||
// duration: Theme.shortDuration
|
||||
// easing.type: Theme.standardEasing
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// Notification Center Button
|
||||
Rectangle {
|
||||
|
||||
@@ -21,4 +21,5 @@ BatteryWidget 1.0 BatteryWidget.qml
|
||||
BatteryControlPopup 1.0 BatteryControlPopup.qml
|
||||
PowerButton 1.0 PowerButton.qml
|
||||
PowerMenuPopup 1.0 PowerMenuPopup.qml
|
||||
PowerConfirmDialog 1.0 PowerConfirmDialog.qml
|
||||
PowerConfirmDialog 1.0 PowerConfirmDialog.qml
|
||||
ThemePicker 1.0 ThemePicker.qml
|
||||
Reference in New Issue
Block a user