mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-06-18 09:05:24 -04:00
feat(dbar): add workspace & widget color customization options
This commit is contained in:
purian23
@@ -20,6 +20,31 @@ Item {
|
||||
property var cachedMatugenSchemes: Theme.availableMatugenSchemes.map(option => option.label)
|
||||
property var installedRegistryThemes: []
|
||||
property var templateDetection: []
|
||||
readonly property var widgetBackgroundOptions: [({
|
||||
"value": "sth",
|
||||
"label": I18n.tr("Subtle Overlay", "widget background color option")
|
||||
}), ({
|
||||
"value": "s",
|
||||
"label": I18n.tr("Surface", "widget background color option")
|
||||
}), ({
|
||||
"value": "sc",
|
||||
"label": I18n.tr("Surface Container", "widget background color option")
|
||||
}), ({
|
||||
"value": "sch",
|
||||
"label": I18n.tr("Surface High", "widget background color option")
|
||||
}), ({
|
||||
"value": "primaryContainer",
|
||||
"label": I18n.tr("Primary Container", "widget background color option")
|
||||
}), ({
|
||||
"value": "secondaryContainer",
|
||||
"label": I18n.tr("Secondary Container", "widget background color option")
|
||||
}), ({
|
||||
"value": "tertiaryContainer",
|
||||
"label": I18n.tr("Tertiary Container", "widget background color option")
|
||||
}), ({
|
||||
"value": "custom",
|
||||
"label": I18n.tr("Custom", "widget background color option")
|
||||
})]
|
||||
|
||||
property var cursorIncludeStatus: ({
|
||||
"exists": false,
|
||||
@@ -1524,10 +1549,10 @@ Item {
|
||||
|
||||
SettingsButtonGroupRow {
|
||||
tab: "theme"
|
||||
tags: ["widget", "style", "colorful", "default"]
|
||||
tags: ["widget", "text", "style", "colorful", "default"]
|
||||
settingKey: "widgetColorMode"
|
||||
text: I18n.tr("Widget Style")
|
||||
description: I18n.tr("Change bar appearance")
|
||||
text: I18n.tr("Widget Text Style")
|
||||
description: I18n.tr("Choose neutral or accent-colored widget text")
|
||||
model: [I18n.tr("Default", "widget style option"), I18n.tr("Colorful", "widget style option")]
|
||||
currentIndex: SettingsData.widgetColorMode === "colorful" ? 1 : 0
|
||||
onSelectionChanged: (index, selected) => {
|
||||
@@ -1537,38 +1562,41 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
SettingsButtonGroupRow {
|
||||
WorkspaceColorRow {
|
||||
tab: "theme"
|
||||
tags: ["widget", "background", "color"]
|
||||
tags: ["widget", "background", "color", "surface", "material"]
|
||||
settingKey: "widgetBackgroundColor"
|
||||
text: I18n.tr("Widget Background Color")
|
||||
description: I18n.tr("Choose the background color for widgets")
|
||||
model: ["sth", "s", "sc", "sch"]
|
||||
buttonHeight: 20
|
||||
minButtonWidth: 32
|
||||
buttonPadding: Theme.spacingS
|
||||
checkIconSize: Theme.iconSizeSmall - 2
|
||||
textSize: Theme.fontSizeSmall - 2
|
||||
spacing: 1
|
||||
currentIndex: {
|
||||
switch (SettingsData.widgetBackgroundColor) {
|
||||
case "sth":
|
||||
return 0;
|
||||
case "s":
|
||||
return 1;
|
||||
case "sc":
|
||||
return 2;
|
||||
case "sch":
|
||||
return 3;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
const colorOptions = ["sth", "s", "sc", "sch"];
|
||||
SettingsData.set("widgetBackgroundColor", colorOptions[index]);
|
||||
dropdownWidth: 220
|
||||
options: themeColorsTab.widgetBackgroundOptions
|
||||
currentMode: SettingsData.widgetBackgroundColor
|
||||
customColor: SettingsData.widgetBackgroundCustomColor || "#6750A4"
|
||||
pickerTitle: I18n.tr("Widget Background Color")
|
||||
onModeSelected: mode => SettingsData.set("widgetBackgroundColor", mode)
|
||||
onCustomColorSelected: selectedColor => SettingsData.set("widgetBackgroundCustomColor", selectedColor.toString())
|
||||
}
|
||||
|
||||
SettingsSliderRow {
|
||||
id: widgetBackgroundCustomStrengthSlider
|
||||
visible: SettingsData.widgetBackgroundColor === "custom"
|
||||
tab: "theme"
|
||||
tags: ["widget", "background", "color", "custom", "blend"]
|
||||
settingKey: "widgetBackgroundCustomStrength"
|
||||
text: I18n.tr("Custom Blend")
|
||||
description: I18n.tr("Blend between Surface High and the selected custom color")
|
||||
value: Math.round(SettingsData.widgetBackgroundCustomStrength * 100)
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
unit: "%"
|
||||
defaultValue: 40
|
||||
onSliderValueChanged: newValue => SettingsData.set("widgetBackgroundCustomStrength", newValue / 100)
|
||||
|
||||
Binding {
|
||||
target: widgetBackgroundCustomStrengthSlider
|
||||
property: "value"
|
||||
value: Math.round(SettingsData.widgetBackgroundCustomStrength * 100)
|
||||
restoreMode: Binding.RestoreBinding
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,41 +4,195 @@ import qs.Services
|
||||
import qs.Modules.Settings.Widgets
|
||||
|
||||
SettingsCard {
|
||||
id: root
|
||||
|
||||
iconName: "palette"
|
||||
title: I18n.tr("Workspace Appearance")
|
||||
settingKey: "workspaceAppearance"
|
||||
collapsible: true
|
||||
expanded: false
|
||||
|
||||
SettingsButtonGroupRow {
|
||||
readonly property var focusedColorOptions: [({
|
||||
"value": "default",
|
||||
"label": I18n.tr("Primary", "workspace color option")
|
||||
}), ({
|
||||
"value": "primaryContainer",
|
||||
"label": I18n.tr("Primary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondary",
|
||||
"label": I18n.tr("Secondary", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondaryContainer",
|
||||
"label": I18n.tr("Secondary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiary",
|
||||
"label": I18n.tr("Tertiary", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiaryContainer",
|
||||
"label": I18n.tr("Tertiary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "s",
|
||||
"label": I18n.tr("Surface", "workspace color option")
|
||||
}), ({
|
||||
"value": "sc",
|
||||
"label": I18n.tr("Surface Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "sch",
|
||||
"label": I18n.tr("Surface High", "workspace color option")
|
||||
}), ({
|
||||
"value": "schh",
|
||||
"label": I18n.tr("Surface Highest", "workspace color option")
|
||||
}), ({
|
||||
"value": "none",
|
||||
"label": I18n.tr("None", "workspace color option")
|
||||
}), ({
|
||||
"value": "custom",
|
||||
"label": I18n.tr("Custom", "workspace color option")
|
||||
})]
|
||||
|
||||
readonly property var occupiedColorOptions: [({
|
||||
"value": "none",
|
||||
"label": I18n.tr("None", "workspace color option")
|
||||
}), ({
|
||||
"value": "primary",
|
||||
"label": I18n.tr("Primary", "workspace color option")
|
||||
}), ({
|
||||
"value": "primaryContainer",
|
||||
"label": I18n.tr("Primary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "sec",
|
||||
"label": I18n.tr("Secondary", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondaryContainer",
|
||||
"label": I18n.tr("Secondary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiary",
|
||||
"label": I18n.tr("Tertiary", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiaryContainer",
|
||||
"label": I18n.tr("Tertiary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "s",
|
||||
"label": I18n.tr("Surface", "workspace color option")
|
||||
}), ({
|
||||
"value": "sc",
|
||||
"label": I18n.tr("Surface Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "sch",
|
||||
"label": I18n.tr("Surface High", "workspace color option")
|
||||
}), ({
|
||||
"value": "schh",
|
||||
"label": I18n.tr("Surface Highest", "workspace color option")
|
||||
}), ({
|
||||
"value": "custom",
|
||||
"label": I18n.tr("Custom", "workspace color option")
|
||||
})]
|
||||
|
||||
readonly property var unfocusedColorOptions: [({
|
||||
"value": "default",
|
||||
"label": I18n.tr("Default", "workspace color option")
|
||||
}), ({
|
||||
"value": "surfaceText",
|
||||
"label": I18n.tr("Surface Text", "workspace color option")
|
||||
}), ({
|
||||
"value": "primary",
|
||||
"label": I18n.tr("Primary", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondary",
|
||||
"label": I18n.tr("Secondary", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiary",
|
||||
"label": I18n.tr("Tertiary", "workspace color option")
|
||||
}), ({
|
||||
"value": "s",
|
||||
"label": I18n.tr("Surface", "workspace color option")
|
||||
}), ({
|
||||
"value": "sc",
|
||||
"label": I18n.tr("Surface Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "sch",
|
||||
"label": I18n.tr("Surface High", "workspace color option")
|
||||
}), ({
|
||||
"value": "schh",
|
||||
"label": I18n.tr("Surface Highest", "workspace color option")
|
||||
}), ({
|
||||
"value": "custom",
|
||||
"label": I18n.tr("Custom", "workspace color option")
|
||||
})]
|
||||
|
||||
readonly property var urgentColorOptions: [({
|
||||
"value": "default",
|
||||
"label": I18n.tr("Error", "workspace color option")
|
||||
}), ({
|
||||
"value": "primary",
|
||||
"label": I18n.tr("Primary", "workspace color option")
|
||||
}), ({
|
||||
"value": "primaryContainer",
|
||||
"label": I18n.tr("Primary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondary",
|
||||
"label": I18n.tr("Secondary", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondaryContainer",
|
||||
"label": I18n.tr("Secondary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiary",
|
||||
"label": I18n.tr("Tertiary", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiaryContainer",
|
||||
"label": I18n.tr("Tertiary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "s",
|
||||
"label": I18n.tr("Surface", "workspace color option")
|
||||
}), ({
|
||||
"value": "sc",
|
||||
"label": I18n.tr("Surface Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "sch",
|
||||
"label": I18n.tr("Surface High", "workspace color option")
|
||||
}), ({
|
||||
"value": "custom",
|
||||
"label": I18n.tr("Custom", "workspace color option")
|
||||
})]
|
||||
|
||||
readonly property var borderColorOptions: [({
|
||||
"value": "surfaceText",
|
||||
"label": I18n.tr("Surface Text", "workspace color option")
|
||||
}), ({
|
||||
"value": "primary",
|
||||
"label": I18n.tr("Primary", "workspace color option")
|
||||
}), ({
|
||||
"value": "primaryContainer",
|
||||
"label": I18n.tr("Primary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondary",
|
||||
"label": I18n.tr("Secondary", "workspace color option")
|
||||
}), ({
|
||||
"value": "secondaryContainer",
|
||||
"label": I18n.tr("Secondary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiary",
|
||||
"label": I18n.tr("Tertiary", "workspace color option")
|
||||
}), ({
|
||||
"value": "tertiaryContainer",
|
||||
"label": I18n.tr("Tertiary Container", "workspace color option")
|
||||
}), ({
|
||||
"value": "custom",
|
||||
"label": I18n.tr("Custom", "workspace color option")
|
||||
})]
|
||||
|
||||
readonly property bool workspaceStateColorsVisible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango
|
||||
readonly property bool urgentWorkspaceColorsVisible: workspaceStateColorsVisible || CompositorService.isSway || CompositorService.isScroll || CompositorService.isMiracle
|
||||
|
||||
WorkspaceColorRow {
|
||||
text: I18n.tr("Focused Color")
|
||||
model: ["pri", "s", "sc", "sch", "none"]
|
||||
buttonHeight: 22
|
||||
minButtonWidth: 36
|
||||
buttonPadding: Theme.spacingS
|
||||
checkIconSize: Theme.iconSizeSmall - 2
|
||||
textSize: Theme.fontSizeSmall - 1
|
||||
spacing: 1
|
||||
currentIndex: {
|
||||
switch (SettingsData.workspaceColorMode) {
|
||||
case "s":
|
||||
return 1;
|
||||
case "sc":
|
||||
return 2;
|
||||
case "sch":
|
||||
return 3;
|
||||
case "none":
|
||||
return 4;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
const modes = ["default", "s", "sc", "sch", "none"];
|
||||
SettingsData.set("workspaceColorMode", modes[index]);
|
||||
}
|
||||
settingKey: "workspaceColorMode"
|
||||
tags: ["workspace", "focused", "color", "custom"]
|
||||
options: root.focusedColorOptions
|
||||
currentMode: SettingsData.workspaceColorMode
|
||||
customColor: SettingsData.workspaceFocusedCustomColor || "#6750A4"
|
||||
onModeSelected: mode => SettingsData.set("workspaceColorMode", mode)
|
||||
onCustomColorSelected: selectedColor => SettingsData.set("workspaceFocusedCustomColor", selectedColor.toString())
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
@@ -48,38 +202,16 @@ SettingsCard {
|
||||
opacity: 0.15
|
||||
}
|
||||
|
||||
SettingsButtonGroupRow {
|
||||
WorkspaceColorRow {
|
||||
text: I18n.tr("Occupied Color")
|
||||
model: ["none", "sec", "s", "sc", "sch", "schh"]
|
||||
visible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango
|
||||
buttonHeight: 22
|
||||
minButtonWidth: 36
|
||||
buttonPadding: Theme.spacingS
|
||||
checkIconSize: Theme.iconSizeSmall - 2
|
||||
textSize: Theme.fontSizeSmall - 1
|
||||
spacing: 1
|
||||
currentIndex: {
|
||||
switch (SettingsData.workspaceOccupiedColorMode) {
|
||||
case "sec":
|
||||
return 1;
|
||||
case "s":
|
||||
return 2;
|
||||
case "sc":
|
||||
return 3;
|
||||
case "sch":
|
||||
return 4;
|
||||
case "schh":
|
||||
return 5;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
const modes = ["none", "sec", "s", "sc", "sch", "schh"];
|
||||
SettingsData.set("workspaceOccupiedColorMode", modes[index]);
|
||||
}
|
||||
settingKey: "workspaceOccupiedColorMode"
|
||||
tags: ["workspace", "occupied", "color", "custom"]
|
||||
visible: root.workspaceStateColorsVisible
|
||||
options: root.occupiedColorOptions
|
||||
currentMode: SettingsData.workspaceOccupiedColorMode
|
||||
customColor: SettingsData.workspaceOccupiedCustomColor || "#625B71"
|
||||
onModeSelected: mode => SettingsData.set("workspaceOccupiedColorMode", mode)
|
||||
onCustomColorSelected: selectedColor => SettingsData.set("workspaceOccupiedCustomColor", selectedColor.toString())
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
@@ -90,33 +222,16 @@ SettingsCard {
|
||||
visible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango
|
||||
}
|
||||
|
||||
SettingsButtonGroupRow {
|
||||
WorkspaceColorRow {
|
||||
text: I18n.tr("Unfocused Color")
|
||||
model: ["def", "s", "sc", "sch"]
|
||||
buttonHeight: 22
|
||||
minButtonWidth: 36
|
||||
buttonPadding: Theme.spacingS
|
||||
checkIconSize: Theme.iconSizeSmall - 2
|
||||
textSize: Theme.fontSizeSmall - 1
|
||||
spacing: 1
|
||||
currentIndex: {
|
||||
switch (SettingsData.workspaceUnfocusedColorMode) {
|
||||
case "s":
|
||||
return 1;
|
||||
case "sc":
|
||||
return 2;
|
||||
case "sch":
|
||||
return 3;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
const modes = ["default", "s", "sc", "sch"];
|
||||
SettingsData.set("workspaceUnfocusedColorMode", modes[index]);
|
||||
}
|
||||
settingKey: "workspaceUnfocusedColorMode"
|
||||
tags: ["workspace", "unfocused", "color", "custom"]
|
||||
options: root.unfocusedColorOptions
|
||||
defaultColor: Theme.surfaceText
|
||||
currentMode: SettingsData.workspaceUnfocusedColorMode
|
||||
customColor: SettingsData.workspaceUnfocusedCustomColor || "#49454E"
|
||||
onModeSelected: mode => SettingsData.set("workspaceUnfocusedColorMode", mode)
|
||||
onCustomColorSelected: selectedColor => SettingsData.set("workspaceUnfocusedCustomColor", selectedColor.toString())
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
@@ -127,36 +242,17 @@ SettingsCard {
|
||||
visible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango || CompositorService.isSway || CompositorService.isScroll || CompositorService.isMiracle
|
||||
}
|
||||
|
||||
SettingsButtonGroupRow {
|
||||
WorkspaceColorRow {
|
||||
text: I18n.tr("Urgent Color")
|
||||
visible: CompositorService.isNiri || CompositorService.isHyprland || CompositorService.isMango || CompositorService.isSway || CompositorService.isScroll || CompositorService.isMiracle
|
||||
model: ["err", "pri", "sec", "s", "sc"]
|
||||
buttonHeight: 22
|
||||
minButtonWidth: 36
|
||||
buttonPadding: Theme.spacingS
|
||||
checkIconSize: Theme.iconSizeSmall - 2
|
||||
textSize: Theme.fontSizeSmall - 1
|
||||
spacing: 1
|
||||
currentIndex: {
|
||||
switch (SettingsData.workspaceUrgentColorMode) {
|
||||
case "primary":
|
||||
return 1;
|
||||
case "secondary":
|
||||
return 2;
|
||||
case "s":
|
||||
return 3;
|
||||
case "sc":
|
||||
return 4;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
const modes = ["default", "primary", "secondary", "s", "sc"];
|
||||
SettingsData.set("workspaceUrgentColorMode", modes[index]);
|
||||
}
|
||||
settingKey: "workspaceUrgentColorMode"
|
||||
tags: ["workspace", "urgent", "color", "custom"]
|
||||
visible: root.urgentWorkspaceColorsVisible
|
||||
options: root.urgentColorOptions
|
||||
defaultColor: Theme.error
|
||||
currentMode: SettingsData.workspaceUrgentColorMode
|
||||
customColor: SettingsData.workspaceUrgentCustomColor || "#B3261E"
|
||||
onModeSelected: mode => SettingsData.set("workspaceUrgentColorMode", mode)
|
||||
onCustomColorSelected: selectedColor => SettingsData.set("workspaceUrgentCustomColor", selectedColor.toString())
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
@@ -181,39 +277,16 @@ SettingsCard {
|
||||
visible: SettingsData.workspaceFocusedBorderEnabled
|
||||
leftPadding: Theme.spacingM
|
||||
|
||||
SettingsButtonGroupRow {
|
||||
WorkspaceColorRow {
|
||||
width: parent.width - parent.leftPadding
|
||||
text: I18n.tr("Border Color")
|
||||
model: [I18n.tr("Surface"), I18n.tr("Secondary"), I18n.tr("Primary")]
|
||||
currentIndex: {
|
||||
switch (SettingsData.workspaceFocusedBorderColor) {
|
||||
case "surfaceText":
|
||||
return 0;
|
||||
case "secondary":
|
||||
return 1;
|
||||
case "primary":
|
||||
return 2;
|
||||
default:
|
||||
return 2;
|
||||
}
|
||||
}
|
||||
onSelectionChanged: (index, selected) => {
|
||||
if (!selected)
|
||||
return;
|
||||
let newColor = "primary";
|
||||
switch (index) {
|
||||
case 0:
|
||||
newColor = "surfaceText";
|
||||
break;
|
||||
case 1:
|
||||
newColor = "secondary";
|
||||
break;
|
||||
case 2:
|
||||
newColor = "primary";
|
||||
break;
|
||||
}
|
||||
SettingsData.set("workspaceFocusedBorderColor", newColor);
|
||||
}
|
||||
settingKey: "workspaceFocusedBorderColor"
|
||||
tags: ["workspace", "focused", "border", "color", "custom"]
|
||||
options: root.borderColorOptions
|
||||
currentMode: SettingsData.workspaceFocusedBorderColor
|
||||
customColor: SettingsData.workspaceFocusedBorderCustomColor || "#6750A4"
|
||||
onModeSelected: mode => SettingsData.set("workspaceFocusedBorderColor", mode)
|
||||
onCustomColorSelected: selectedColor => SettingsData.set("workspaceFocusedBorderCustomColor", selectedColor.toString())
|
||||
}
|
||||
|
||||
SettingsSliderRow {
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Modules.Settings.Widgets
|
||||
|
||||
Column {
|
||||
id: root
|
||||
|
||||
property string text: ""
|
||||
property string description: ""
|
||||
property string settingKey: ""
|
||||
property string tab: ""
|
||||
property var tags: []
|
||||
property var options: []
|
||||
property string currentMode: "default"
|
||||
property color customColor: "#6750A4"
|
||||
property string pickerTitle: text
|
||||
property int dropdownWidth: 230
|
||||
property color defaultColor: Theme.primary
|
||||
|
||||
readonly property var optionColorMap: {
|
||||
var map = {};
|
||||
for (var i = 0; i < options.length; i++)
|
||||
map[options[i].label] = root.colorForValue(options[i].value);
|
||||
return map;
|
||||
}
|
||||
|
||||
function colorForValue(value) {
|
||||
switch (value) {
|
||||
case "primary":
|
||||
case "pri":
|
||||
return Theme.primary;
|
||||
case "primaryContainer":
|
||||
return Theme.primaryContainer;
|
||||
case "secondary":
|
||||
case "sec":
|
||||
return Theme.secondary;
|
||||
case "secondaryContainer":
|
||||
return Theme.secondaryContainer;
|
||||
case "tertiary":
|
||||
case "ter":
|
||||
return Theme.tertiary;
|
||||
case "tertiaryContainer":
|
||||
return Theme.tertiaryContainer;
|
||||
case "surfaceText":
|
||||
return Theme.surfaceText;
|
||||
case "s":
|
||||
return Theme.surface;
|
||||
case "sc":
|
||||
return Theme.surfaceContainer;
|
||||
case "sch":
|
||||
return Theme.surfaceContainerHigh;
|
||||
case "schh":
|
||||
return Theme.surfaceContainerHighest;
|
||||
case "sth":
|
||||
return Theme.surfaceTextHover;
|
||||
case "error":
|
||||
case "err":
|
||||
return Theme.error;
|
||||
case "custom":
|
||||
return root.customColor;
|
||||
case "none":
|
||||
return "transparent";
|
||||
default:
|
||||
return root.defaultColor;
|
||||
}
|
||||
}
|
||||
|
||||
signal modeSelected(string mode)
|
||||
signal customColorSelected(color selectedColor)
|
||||
|
||||
width: parent?.width ?? 0
|
||||
spacing: Theme.spacingS
|
||||
|
||||
function optionLabels() {
|
||||
return options.map(option => option.label);
|
||||
}
|
||||
|
||||
function optionLabel(value) {
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
if (options[i].value === value)
|
||||
return options[i].label;
|
||||
}
|
||||
return options.length > 0 ? options[0].label : "";
|
||||
}
|
||||
|
||||
function optionValue(label) {
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
if (options[i].label === label)
|
||||
return options[i].value;
|
||||
}
|
||||
return options.length > 0 ? options[0].value : "default";
|
||||
}
|
||||
|
||||
function openCustomColorPicker() {
|
||||
PopoutService.colorPickerModal.selectedColor = root.customColor;
|
||||
PopoutService.colorPickerModal.pickerTitle = root.pickerTitle;
|
||||
PopoutService.colorPickerModal.onColorSelectedCallback = function (selectedColor) {
|
||||
root.customColorSelected(selectedColor);
|
||||
root.modeSelected("custom");
|
||||
};
|
||||
PopoutService.colorPickerModal.show();
|
||||
}
|
||||
|
||||
SettingsDropdownRow {
|
||||
text: root.text
|
||||
description: root.description
|
||||
tab: root.tab
|
||||
settingKey: root.settingKey
|
||||
tags: root.tags
|
||||
options: root.optionLabels()
|
||||
optionColorMap: root.optionColorMap
|
||||
currentValue: root.optionLabel(root.currentMode)
|
||||
dropdownWidth: root.dropdownWidth
|
||||
onValueChanged: value => root.modeSelected(root.optionValue(value))
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: root.currentMode === "custom" ? customChip.height : 0
|
||||
opacity: root.currentMode === "custom" ? 1 : 0
|
||||
clip: true
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: customChip
|
||||
|
||||
width: parent.width
|
||||
height: 56
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.surfaceContainerHigh
|
||||
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Rectangle {
|
||||
width: 36
|
||||
height: 36
|
||||
radius: 18
|
||||
color: root.customColor
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
DankIcon {
|
||||
anchors.centerIn: parent
|
||||
name: "colorize"
|
||||
size: 16
|
||||
color: (root.customColor.r * 0.299 + root.customColor.g * 0.587 + root.customColor.b * 0.114) > 0.5 ? "#000000" : "#ffffff"
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width - 36 - editIcon.width - Theme.spacingM * 2
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Custom Color")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
width: parent.width
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.customColor.toString()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
}
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
id: editIcon
|
||||
name: "edit"
|
||||
size: Theme.iconSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
stateColor: Theme.surfaceText
|
||||
onClicked: root.openCustomColorPicker()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user