Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-05 21:15:38 -05:00
Code Packages Releases Activity

widgets: add an outline option

Browse Source 
fixes #804
This commit is contained in:
bbedward
2025-11-24 00:14:19 -05:00
parent 5e77a10a81
commit 08c9bf570d
11 changed files with 577 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
quickshell/Common/SettingsData.qml
View File

@@ -338,6 +338,10 @@ Singleton {
borderColor: "surfaceText",
borderOpacity: 1.0,
borderThickness: 1,
widgetOutlineEnabled: false,
widgetOutlineColor: "primary",
widgetOutlineOpacity: 1.0,
widgetOutlineThickness: 1,
fontScale: 1.0,
autoHide: false,
autoHideDelay: 250,

4
quickshell/Common/settings/SettingsSpec.js
View File

@@ -239,6 +239,10 @@ var SPEC = {
borderColor: "surfaceText",
borderOpacity: 1.0,
borderThickness: 1,
widgetOutlineEnabled: false,
widgetOutlineColor: "primary",
widgetOutlineOpacity: 1.0,
widgetOutlineThickness: 1,
fontScale: 1.0,
autoHide: false,
autoHideDelay: 250,

6
quickshell/Modules/DankBar/CenterSection.qml
View File

@@ -19,7 +19,11 @@ Item {
property bool forceVerticalLayout: false
readonly property bool isVertical: overrideAxisLayout ? forceVerticalLayout : (axis?.isVertical ?? false)
readonly property real spacing: noBackground ? 2 : Theme.spacingXS
readonly property real spacing: {
const baseSpacing = noBackground ? 2 : Theme.spacingXS;
const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return baseSpacing + (outlineThickness * 2);
}
property var centerWidgets: []
property int totalWidgets: 0

14
quickshell/Modules/DankBar/LeftSection.qml
View File

@@ -30,7 +30,11 @@ Item {
Component {
id: rowComp
Row {
readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
readonly property real widgetSpacing: {
const baseSpacing = noBackground ? 2 : Theme.spacingXS;
const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return baseSpacing + (outlineThickness * 2);
}
spacing: widgetSpacing
Repeater {
id: rowRepeater
@@ -70,7 +74,11 @@ Item {
id: columnComp
Column {
width: parent.width
readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
readonly property real widgetSpacing: {
const baseSpacing = noBackground ? 2 : Theme.spacingXS;
const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return baseSpacing + (outlineThickness * 2);
}
spacing: widgetSpacing
Repeater {
id: columnRepeater
@@ -105,4 +113,4 @@ Item {
}
}
}
}
}

14
quickshell/Modules/DankBar/RightSection.qml
View File

@@ -31,7 +31,11 @@ Item {
Component {
id: rowComp
Row {
readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
readonly property real widgetSpacing: {
const baseSpacing = noBackground ? 2 : Theme.spacingXS;
const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return baseSpacing + (outlineThickness * 2);
}
spacing: widgetSpacing
anchors.right: parent ? parent.right : undefined
Repeater {
@@ -72,7 +76,11 @@ Item {
id: columnComp
Column {
width: parent.width
readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
readonly property real widgetSpacing: {
const baseSpacing = noBackground ? 2 : Theme.spacingXS;
const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return baseSpacing + (outlineThickness * 2);
}
spacing: widgetSpacing
Repeater {
id: columnRepeater
@@ -107,4 +115,4 @@ Item {
}
}
}
}
}

61
quickshell/Modules/DankBar/Widgets/PrivacyIndicator.qml
View File

@@ -33,20 +33,63 @@ Item {
opacity: hasActivePrivacy ? 1 : 0
enabled: hasActivePrivacy
Rectangle {
Item {
id: visualContent
width: root.visualWidth
height: root.visualHeight
anchors.centerIn: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if (barConfig?.noBackground ?? false) {
return "transparent";
}
const baseColor = privacyArea.containsMouse ? Theme.errorPressed : Theme.errorHover;
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
Rectangle {
id: outline
anchors.centerIn: parent
width: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.width + borderWidth * 2;
}
height: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.height + borderWidth * 2;
}
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: "transparent"
border.width: {
if (barConfig?.widgetOutlineEnabled ?? false) {
return barConfig?.widgetOutlineThickness ?? 1;
}
return 0;
}
border.color: {
if (!(barConfig?.widgetOutlineEnabled ?? false)) {
return "transparent";
}
const colorOption = barConfig?.widgetOutlineColor || "primary";
const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
switch (colorOption) {
case "surfaceText":
return Theme.withAlpha(Theme.surfaceText, opacity);
case "secondary":
return Theme.withAlpha(Theme.secondary, opacity);
case "primary":
return Theme.withAlpha(Theme.primary, opacity);
default:
return Theme.withAlpha(Theme.primary, opacity);
}
}
}
Rectangle {
id: background
anchors.fill: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if (barConfig?.noBackground ?? false) {
return "transparent";
}
const baseColor = privacyArea.containsMouse ? Theme.errorPressed : Theme.errorHover;
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
}
Column {

69
quickshell/Modules/DankBar/Widgets/RunningApps.qml
View File

@@ -140,28 +140,71 @@ Item {
height: windowCount > 0 ? (isVertical ? calculatedSize : barThickness) : 0
visible: windowCount > 0
Rectangle {
Item {
id: visualBackground
width: root.isVertical ? root.widgetThickness : root.calculatedSize
height: root.isVertical ? root.calculatedSize : root.widgetThickness
anchors.centerIn: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
clip: false
color: {
if (windowCount === 0) {
return "transparent";
}
if ((barConfig?.noBackground ?? false)) {
return "transparent";
Rectangle {
id: outline
anchors.centerIn: parent
width: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.width + borderWidth * 2;
}
height: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.height + borderWidth * 2;
}
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: "transparent"
border.width: {
if (barConfig?.widgetOutlineEnabled ?? false) {
return barConfig?.widgetOutlineThickness ?? 1;
}
return 0;
}
border.color: {
if (!(barConfig?.widgetOutlineEnabled ?? false)) {
return "transparent";
}
const colorOption = barConfig?.widgetOutlineColor || "primary";
const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
switch (colorOption) {
case "surfaceText":
return Theme.withAlpha(Theme.surfaceText, opacity);
case "secondary":
return Theme.withAlpha(Theme.secondary, opacity);
case "primary":
return Theme.withAlpha(Theme.primary, opacity);
default:
return Theme.withAlpha(Theme.primary, opacity);
}
}
}
const baseColor = Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
Rectangle {
id: background
anchors.fill: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if (windowCount === 0) {
return "transparent";
}
if ((barConfig?.noBackground ?? false)) {
return "transparent";
}
const baseColor = Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
}

69
quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
View File

@@ -72,27 +72,70 @@ Item {
property bool menuOpen: false
property var currentTrayMenu: null
Rectangle {
Item {
id: visualBackground
width: root.visualWidth
height: root.visualHeight
anchors.centerIn: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if (allTrayItems.length === 0) {
return "transparent";
}
if ((barConfig?.noBackground ?? false)) {
return "transparent";
Rectangle {
id: outline
anchors.centerIn: parent
width: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.width + borderWidth * 2;
}
height: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.height + borderWidth * 2;
}
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: "transparent"
border.width: {
if (barConfig?.widgetOutlineEnabled ?? false) {
return barConfig?.widgetOutlineThickness ?? 1;
}
return 0;
}
border.color: {
if (!(barConfig?.widgetOutlineEnabled ?? false)) {
return "transparent";
}
const colorOption = barConfig?.widgetOutlineColor || "primary";
const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
switch (colorOption) {
case "surfaceText":
return Theme.withAlpha(Theme.surfaceText, opacity);
case "secondary":
return Theme.withAlpha(Theme.secondary, opacity);
case "primary":
return Theme.withAlpha(Theme.primary, opacity);
default:
return Theme.withAlpha(Theme.primary, opacity);
}
}
}
const baseColor = Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
Rectangle {
id: background
anchors.fill: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if (allTrayItems.length === 0) {
return "transparent";
}
if ((barConfig?.noBackground ?? false)) {
return "transparent";
}
const baseColor = Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
}

64
quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml
View File

@@ -1,5 +1,4 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import Quickshell.Widgets
import Quickshell.Hyprland
@@ -522,21 +521,64 @@ Item {
height: shouldShow ? (isVertical ? visualHeight : barThickness) : 0
visible: shouldShow
Rectangle {
Item {
id: visualBackground
width: root.visualWidth
height: root.visualHeight
anchors.centerIn: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if ((barConfig?.noBackground ?? false))
return "transparent";
const baseColor = Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
Rectangle {
id: outline
anchors.centerIn: parent
width: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.width + borderWidth * 2;
}
height: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.height + borderWidth * 2;
}
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: "transparent"
border.width: {
if (barConfig?.widgetOutlineEnabled ?? false) {
return barConfig?.widgetOutlineThickness ?? 1;
}
return 0;
}
border.color: {
if (!(barConfig?.widgetOutlineEnabled ?? false)) {
return "transparent";
}
const colorOption = barConfig?.widgetOutlineColor || "primary";
const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
switch (colorOption) {
case "surfaceText":
return Theme.withAlpha(Theme.surfaceText, opacity);
case "secondary":
return Theme.withAlpha(Theme.secondary, opacity);
case "primary":
return Theme.withAlpha(Theme.primary, opacity);
default:
return Theme.withAlpha(Theme.primary, opacity);
}
}
}
Rectangle {
id: background
anchors.fill: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if ((barConfig?.noBackground ?? false))
return "transparent";
const baseColor = Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
}

69
quickshell/Modules/Plugins/BasePill.qml
View File

@@ -39,24 +39,67 @@ Item {
width: isVerticalOrientation ? barThickness : visualWidth
height: isVerticalOrientation ? visualHeight : barThickness
Rectangle {
Item {
id: visualContent
width: root.visualWidth
height: root.visualHeight
anchors.centerIn: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if (barConfig?.noBackground ?? false) {
return "transparent";
}
const isHovered = mouseArea.containsMouse || (root.isHovered || false);
const baseColor = isHovered ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
Rectangle {
id: outline
anchors.centerIn: parent
width: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.width + borderWidth * 2;
}
height: {
const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
return parent.height + borderWidth * 2;
}
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: "transparent"
border.width: {
if (barConfig?.widgetOutlineEnabled ?? false) {
return barConfig?.widgetOutlineThickness ?? 1;
}
return 0;
}
border.color: {
if (!(barConfig?.widgetOutlineEnabled ?? false)) {
return "transparent";
}
const colorOption = barConfig?.widgetOutlineColor || "primary";
const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
switch (colorOption) {
case "surfaceText":
return Theme.withAlpha(Theme.surfaceText, opacity);
case "secondary":
return Theme.withAlpha(Theme.secondary, opacity);
case "primary":
return Theme.withAlpha(Theme.primary, opacity);
default:
return Theme.withAlpha(Theme.primary, opacity);
}
}
}
Rectangle {
id: background
anchors.fill: parent
radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
color: {
if (barConfig?.noBackground ?? false) {
return "transparent";
}
const isHovered = mouseArea.containsMouse || (root.isHovered || false);
const baseColor = isHovered ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
if (Theme.widgetBackgroundHasAlpha) {
return baseColor;
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
return Theme.withAlpha(baseColor, transparency);
}
Loader {
@@ -100,7 +143,7 @@ Item {
root.clicked();
}
onWheel: function (wheelEvent) {
root.wheel(wheelEvent)
root.wheel(wheelEvent);
}
}
}

269
quickshell/Modules/Settings/DankBarTab.qml
View File

@@ -141,6 +141,30 @@ Item {
}
}
Timer {
id: widgetOutlineOpacityDebounce
interval: 100
repeat: false
property real pendingValue: 1.0
onTriggered: {
SettingsData.updateBarConfig(selectedBarId, {
widgetOutlineOpacity: pendingValue
});
}
}
Timer {
id: widgetOutlineThicknessDebounce
interval: 100
repeat: false
property real pendingValue: 1
onTriggered: {
SettingsData.updateBarConfig(selectedBarId, {
widgetOutlineThickness: pendingValue
});
}
}
Timer {
id: barTransparencyDebounce
interval: 100
@@ -207,6 +231,10 @@ Item {
borderColor: defaultBar.borderColor || "surfaceText",
borderOpacity: defaultBar.borderOpacity ?? 1.0,
borderThickness: defaultBar.borderThickness ?? 1,
widgetOutlineEnabled: defaultBar.widgetOutlineEnabled ?? false,
widgetOutlineColor: defaultBar.widgetOutlineColor || "primary",
widgetOutlineOpacity: defaultBar.widgetOutlineOpacity ?? 1.0,
widgetOutlineThickness: defaultBar.widgetOutlineThickness ?? 1,
fontScale: defaultBar.fontScale ?? 1.0,
autoHide: defaultBar.autoHide ?? false,
autoHideDelay: defaultBar.autoHideDelay ?? 250,
@@ -2461,6 +2489,247 @@ Item {
}
}
Column {
width: parent.width
spacing: Theme.spacingM
DankToggle {
width: parent.width
text: I18n.tr("Widget Outline")
description: "Add outlines to individual widgets."
checked: selectedBarConfig?.widgetOutlineEnabled ?? false
onToggled: checked => {
SettingsData.updateBarConfig(selectedBarId, {
widgetOutlineEnabled: checked
});
}
}
Column {
width: parent.width
leftPadding: Theme.spacingM
spacing: Theme.spacingM
visible: selectedBarConfig?.widgetOutlineEnabled ?? false
Rectangle {
width: parent.width - parent.leftPadding
height: 1
color: Theme.outline
opacity: 0.2
}
Row {
width: parent.width - parent.leftPadding
spacing: Theme.spacingM
Column {
width: parent.width - widgetOutlineColorGroup.width - Theme.spacingM
spacing: Theme.spacingXS
StyledText {
text: I18n.tr("Outline Color")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
}
StyledText {
text: I18n.tr("Choose the widget outline accent color")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
width: parent.width
}
}
DankButtonGroup {
id: widgetOutlineColorGroup
anchors.verticalCenter: parent.verticalCenter
model: ["Surface", "Secondary", "Primary"]
currentIndex: {
const colorOption = selectedBarConfig?.widgetOutlineColor || "primary";
switch (colorOption) {
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.updateBarConfig(selectedBarId, {
widgetOutlineColor: newColor
});
}
}
}
Column {
width: parent.width - parent.leftPadding
spacing: Theme.spacingS
Row {
width: parent.width
spacing: Theme.spacingS
StyledText {
text: I18n.tr("Outline Opacity")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.verticalCenter: parent.verticalCenter
}
Item {
width: parent.width - widgetOutlineOpacityText.implicitWidth - resetWidgetOutlineOpacityBtn.width - Theme.spacingS - Theme.spacingM
height: 1
StyledText {
id: widgetOutlineOpacityText
visible: false
text: I18n.tr("Outline Opacity")
font.pixelSize: Theme.fontSizeSmall
}
}
DankActionButton {
id: resetWidgetOutlineOpacityBtn
buttonSize: 20
iconName: "refresh"
iconSize: 12
backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
iconColor: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
onClicked: {
SettingsData.updateBarConfig(selectedBarId, {
widgetOutlineOpacity: 1.0
});
}
}
Item {
width: Theme.spacingS
height: 1
}
}
DankSlider {
id: widgetOutlineOpacitySlider
width: parent.width
height: 24
value: (selectedBarConfig?.widgetOutlineOpacity ?? 1.0) * 100
minimum: 0
maximum: 100
unit: "%"
showValue: true
wheelEnabled: false
thumbOutlineColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
onSliderValueChanged: newValue => {
widgetOutlineOpacityDebounce.pendingValue = newValue / 100;
widgetOutlineOpacityDebounce.restart();
}
Binding {
target: widgetOutlineOpacitySlider
property: "value"
value: (selectedBarConfig?.widgetOutlineOpacity ?? 1.0) * 100
restoreMode: Binding.RestoreBinding
}
}
}
Column {
width: parent.width - parent.leftPadding
spacing: Theme.spacingS
Row {
width: parent.width
spacing: Theme.spacingS
StyledText {
text: I18n.tr("Outline Thickness")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.verticalCenter: parent.verticalCenter
}
Item {
width: parent.width - widgetOutlineThicknessText.implicitWidth - resetWidgetOutlineThicknessBtn.width - Theme.spacingS - Theme.spacingM
height: 1
StyledText {
id: widgetOutlineThicknessText
visible: false
text: I18n.tr("Outline Thickness")
font.pixelSize: Theme.fontSizeSmall
}
}
DankActionButton {
id: resetWidgetOutlineThicknessBtn
buttonSize: 20
iconName: "refresh"
iconSize: 12
backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
iconColor: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
onClicked: {
SettingsData.updateBarConfig(selectedBarId, {
widgetOutlineThickness: 1
});
}
}
Item {
width: Theme.spacingS
height: 1
}
}
DankSlider {
id: widgetOutlineThicknessSlider
width: parent.width
height: 24
value: selectedBarConfig?.widgetOutlineThickness ?? 1
minimum: 1
maximum: 10
unit: "px"
showValue: true
wheelEnabled: false
thumbOutlineColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
onSliderValueChanged: newValue => {
widgetOutlineThicknessDebounce.pendingValue = newValue;
widgetOutlineThicknessDebounce.restart();
}
Binding {
target: widgetOutlineThicknessSlider
property: "value"
value: selectedBarConfig?.widgetOutlineThickness ?? 1
restoreMode: Binding.RestoreBinding
}
}
}
}
}
Rectangle {
width: parent.width
height: 1