1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-06 05:25:41 -05:00

Compare commits

...

3 Commits

Author SHA1 Message Date
bbedward
1bec20ecef dankbar: fix individual widget settings 2025-11-24 00:48:35 -05:00
bbedward
08c9bf570d widgets: add an outline option
fixes #804
2025-11-24 00:14:19 -05:00
bbedward
5e77a10a81 dankbar: make border shape respect goth radius
part of #804
2025-11-23 23:55:07 -05:00
17 changed files with 1094 additions and 420 deletions

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,

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,

View File

@@ -1,5 +1,4 @@
import QtQuick
import Quickshell.Hyprland
import qs.Common
import qs.Services
@@ -23,7 +22,7 @@ Item {
readonly property real dpr: CompositorService.getScreenScale(barWindow.screen)
function requestRepaint() {
debounceTimer.restart()
debounceTimer.restart();
}
MouseArea {
@@ -31,17 +30,17 @@ Item {
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
z: -999
onClicked: {
const activePopout = PopoutManager.getActivePopout(barWindow.screen)
const activePopout = PopoutManager.getActivePopout(barWindow.screen);
if (activePopout) {
if (activePopout.dashVisible !== undefined) {
activePopout.dashVisible = false
activePopout.dashVisible = false;
} else if (activePopout.notificationHistoryVisible !== undefined) {
activePopout.notificationHistoryVisible = false
activePopout.notificationHistoryVisible = false;
} else {
activePopout.close()
activePopout.close();
}
}
TrayMenuManager.closeAllMenus()
TrayMenuManager.closeAllMenus();
}
}
@@ -50,9 +49,9 @@ Item {
interval: 50
repeat: false
onTriggered: {
barShape.requestPaint()
barTint.requestPaint()
barBorder.requestPaint()
barShape.requestPaint();
barTint.requestPaint();
barBorder.requestPaint();
}
}
@@ -74,85 +73,98 @@ Item {
onRtChanged: root.requestRepaint()
onCorrectWidthChanged: root.requestRepaint()
onCorrectHeightChanged: root.requestRepaint()
onVisibleChanged: if (visible) root.requestRepaint()
onVisibleChanged: if (visible)
root.requestRepaint()
Component.onCompleted: root.requestRepaint()
Connections {
target: root
function onDprChanged() { root.requestRepaint() }
function onDprChanged() {
root.requestRepaint();
}
}
Connections {
target: barWindow
function on_BgColorChanged() { root.requestRepaint() }
function onGothCornersEnabledChanged() { root.requestRepaint() }
function onWingtipsRadiusChanged() { root.requestRepaint() }
function on_BgColorChanged() {
root.requestRepaint();
}
function onGothCornersEnabledChanged() {
root.requestRepaint();
}
function onWingtipsRadiusChanged() {
root.requestRepaint();
}
}
Connections {
target: Theme
function onIsLightModeChanged() { root.requestRepaint() }
function onSurfaceContainerChanged() { root.requestRepaint() }
function onIsLightModeChanged() {
root.requestRepaint();
}
function onSurfaceContainerChanged() {
root.requestRepaint();
}
}
onPaint: {
const ctx = getContext("2d")
const W = barWindow.isVertical ? correctHeight : correctWidth
const H_raw = barWindow.isVertical ? correctWidth : correctHeight
const R = wing
const RT = rt
const H = H_raw - (R > 0 ? R : 0)
const barPos = barConfig?.position ?? 0
const isTop = barPos === SettingsData.Position.Top
const isBottom = barPos === SettingsData.Position.Bottom
const isLeft = barPos === SettingsData.Position.Left
const isRight = barPos === SettingsData.Position.Right
const ctx = getContext("2d");
const W = barWindow.isVertical ? correctHeight : correctWidth;
const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
const R = wing;
const RT = rt;
const H = H_raw - (R > 0 ? R : 0);
const barPos = barConfig?.position ?? 0;
const isTop = barPos === SettingsData.Position.Top;
const isBottom = barPos === SettingsData.Position.Bottom;
const isLeft = barPos === SettingsData.Position.Left;
const isRight = barPos === SettingsData.Position.Right;
function drawTopPath() {
ctx.beginPath()
ctx.moveTo(RT, 0)
ctx.lineTo(W - RT, 0)
ctx.arcTo(W, 0, W, RT, RT)
ctx.lineTo(W, H)
ctx.beginPath();
ctx.moveTo(RT, 0);
ctx.lineTo(W - RT, 0);
ctx.arcTo(W, 0, W, RT, RT);
ctx.lineTo(W, H);
if (R > 0) {
ctx.lineTo(W, H + R)
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
ctx.lineTo(R, H)
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
ctx.lineTo(0, H + R)
ctx.lineTo(W, H + R);
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
ctx.lineTo(R, H);
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
ctx.lineTo(0, H + R);
} else {
ctx.lineTo(W, H - RT)
ctx.arcTo(W, H, W - RT, H, RT)
ctx.lineTo(RT, H)
ctx.arcTo(0, H, 0, H - RT, RT)
ctx.lineTo(W, H - RT);
ctx.arcTo(W, H, W - RT, H, RT);
ctx.lineTo(RT, H);
ctx.arcTo(0, H, 0, H - RT, RT);
}
ctx.lineTo(0, RT)
ctx.arcTo(0, 0, RT, 0, RT)
ctx.closePath()
ctx.lineTo(0, RT);
ctx.arcTo(0, 0, RT, 0, RT);
ctx.closePath();
}
ctx.reset()
ctx.clearRect(0, 0, W, H_raw)
ctx.reset();
ctx.clearRect(0, 0, W, H_raw);
ctx.save()
ctx.save();
if (isBottom) {
ctx.translate(W, H_raw)
ctx.rotate(Math.PI)
ctx.translate(W, H_raw);
ctx.rotate(Math.PI);
} else if (isLeft) {
ctx.translate(0, W)
ctx.rotate(-Math.PI / 2)
ctx.translate(0, W);
ctx.rotate(-Math.PI / 2);
} else if (isRight) {
ctx.translate(H_raw, 0)
ctx.rotate(Math.PI / 2)
ctx.translate(H_raw, 0);
ctx.rotate(Math.PI / 2);
}
drawTopPath()
ctx.restore()
drawTopPath();
ctx.restore();
ctx.fillStyle = barWindow._bgColor
ctx.fill()
ctx.fillStyle = barWindow._bgColor;
ctx.fill();
}
}
@@ -176,85 +188,98 @@ Item {
onAlphaTintChanged: root.requestRepaint()
onCorrectWidthChanged: root.requestRepaint()
onCorrectHeightChanged: root.requestRepaint()
onVisibleChanged: if (visible) root.requestRepaint()
onVisibleChanged: if (visible)
root.requestRepaint()
Component.onCompleted: root.requestRepaint()
Connections {
target: root
function onDprChanged() { root.requestRepaint() }
function onDprChanged() {
root.requestRepaint();
}
}
Connections {
target: barWindow
function on_BgColorChanged() { root.requestRepaint() }
function onGothCornersEnabledChanged() { root.requestRepaint() }
function onWingtipsRadiusChanged() { root.requestRepaint() }
function on_BgColorChanged() {
root.requestRepaint();
}
function onGothCornersEnabledChanged() {
root.requestRepaint();
}
function onWingtipsRadiusChanged() {
root.requestRepaint();
}
}
Connections {
target: Theme
function onIsLightModeChanged() { root.requestRepaint() }
function onSurfaceChanged() { root.requestRepaint() }
function onIsLightModeChanged() {
root.requestRepaint();
}
function onSurfaceChanged() {
root.requestRepaint();
}
}
onPaint: {
const ctx = getContext("2d")
const W = barWindow.isVertical ? correctHeight : correctWidth
const H_raw = barWindow.isVertical ? correctWidth : correctHeight
const R = wing
const RT = rt
const H = H_raw - (R > 0 ? R : 0)
const barPos = barConfig?.position ?? 0
const isTop = barPos === SettingsData.Position.Top
const isBottom = barPos === SettingsData.Position.Bottom
const isLeft = barPos === SettingsData.Position.Left
const isRight = barPos === SettingsData.Position.Right
const ctx = getContext("2d");
const W = barWindow.isVertical ? correctHeight : correctWidth;
const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
const R = wing;
const RT = rt;
const H = H_raw - (R > 0 ? R : 0);
const barPos = barConfig?.position ?? 0;
const isTop = barPos === SettingsData.Position.Top;
const isBottom = barPos === SettingsData.Position.Bottom;
const isLeft = barPos === SettingsData.Position.Left;
const isRight = barPos === SettingsData.Position.Right;
function drawTopPath() {
ctx.beginPath()
ctx.moveTo(RT, 0)
ctx.lineTo(W - RT, 0)
ctx.arcTo(W, 0, W, RT, RT)
ctx.lineTo(W, H)
ctx.beginPath();
ctx.moveTo(RT, 0);
ctx.lineTo(W - RT, 0);
ctx.arcTo(W, 0, W, RT, RT);
ctx.lineTo(W, H);
if (R > 0) {
ctx.lineTo(W, H + R)
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
ctx.lineTo(R, H)
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
ctx.lineTo(0, H + R)
ctx.lineTo(W, H + R);
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
ctx.lineTo(R, H);
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
ctx.lineTo(0, H + R);
} else {
ctx.lineTo(W, H - RT)
ctx.arcTo(W, H, W - RT, H, RT)
ctx.lineTo(RT, H)
ctx.arcTo(0, H, 0, H - RT, RT)
ctx.lineTo(W, H - RT);
ctx.arcTo(W, H, W - RT, H, RT);
ctx.lineTo(RT, H);
ctx.arcTo(0, H, 0, H - RT, RT);
}
ctx.lineTo(0, RT)
ctx.arcTo(0, 0, RT, 0, RT)
ctx.closePath()
ctx.lineTo(0, RT);
ctx.arcTo(0, 0, RT, 0, RT);
ctx.closePath();
}
ctx.reset()
ctx.clearRect(0, 0, W, H_raw)
ctx.reset();
ctx.clearRect(0, 0, W, H_raw);
ctx.save()
ctx.save();
if (isBottom) {
ctx.translate(W, H_raw)
ctx.rotate(Math.PI)
ctx.translate(W, H_raw);
ctx.rotate(Math.PI);
} else if (isLeft) {
ctx.translate(0, W)
ctx.rotate(-Math.PI / 2)
ctx.translate(0, W);
ctx.rotate(-Math.PI / 2);
} else if (isRight) {
ctx.translate(H_raw, 0)
ctx.rotate(Math.PI / 2)
ctx.translate(H_raw, 0);
ctx.rotate(Math.PI / 2);
}
drawTopPath()
ctx.restore()
drawTopPath();
ctx.restore();
ctx.fillStyle = Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, alphaTint)
ctx.fill()
ctx.fillStyle = Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, alphaTint);
ctx.fill();
}
}
@@ -280,141 +305,137 @@ Item {
onBorderEnabledChanged: root.requestRepaint()
onCorrectWidthChanged: root.requestRepaint()
onCorrectHeightChanged: root.requestRepaint()
onVisibleChanged: if (visible) root.requestRepaint()
onVisibleChanged: if (visible)
root.requestRepaint()
Component.onCompleted: root.requestRepaint()
Connections {
target: root
function onDprChanged() { root.requestRepaint() }
function onDprChanged() {
root.requestRepaint();
}
}
Connections {
target: Theme
function onIsLightModeChanged() { root.requestRepaint() }
function onSurfaceTextChanged() { root.requestRepaint() }
function onPrimaryChanged() { root.requestRepaint() }
function onSecondaryChanged() { root.requestRepaint() }
function onOutlineChanged() { root.requestRepaint() }
function onIsLightModeChanged() {
root.requestRepaint();
}
function onSurfaceTextChanged() {
root.requestRepaint();
}
function onPrimaryChanged() {
root.requestRepaint();
}
function onSecondaryChanged() {
root.requestRepaint();
}
function onOutlineChanged() {
root.requestRepaint();
}
}
Connections {
target: barWindow
function onGothCornersEnabledChanged() { root.requestRepaint() }
function onWingtipsRadiusChanged() { root.requestRepaint() }
function onGothCornersEnabledChanged() {
root.requestRepaint();
}
function onWingtipsRadiusChanged() {
root.requestRepaint();
}
}
onPaint: {
if (!borderEnabled) return
if (!borderEnabled)
return;
const ctx = getContext("2d");
const W = barWindow.isVertical ? correctHeight : correctWidth;
const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
const R = wing;
const RT = rt;
const H = H_raw - (R > 0 ? R : 0);
const barPos = barConfig?.position ?? 0;
const isTop = barPos === SettingsData.Position.Top;
const isBottom = barPos === SettingsData.Position.Bottom;
const isLeft = barPos === SettingsData.Position.Left;
const isRight = barPos === SettingsData.Position.Right;
const ctx = getContext("2d")
const W = barWindow.isVertical ? correctHeight : correctWidth
const H_raw = barWindow.isVertical ? correctWidth : correctHeight
const R = wing
const RT = rt
const H = H_raw - (R > 0 ? R : 0)
const barPos = barConfig?.position ?? 0
const isTop = barPos === SettingsData.Position.Top
const isBottom = barPos === SettingsData.Position.Bottom
const isLeft = barPos === SettingsData.Position.Left
const isRight = barPos === SettingsData.Position.Right
const spacing = barConfig?.spacing ?? 4;
const spacing = barConfig?.spacing ?? 4
const hasEdgeGap = spacing > 0 || RT > 0
ctx.reset();
ctx.clearRect(0, 0, W, H_raw);
ctx.reset()
ctx.clearRect(0, 0, W, H_raw)
ctx.save()
ctx.save();
if (isBottom) {
ctx.translate(W, H_raw)
ctx.rotate(Math.PI)
ctx.translate(W, H_raw);
ctx.rotate(Math.PI);
} else if (isLeft) {
ctx.translate(0, W)
ctx.rotate(-Math.PI / 2)
ctx.translate(0, W);
ctx.rotate(-Math.PI / 2);
} else if (isRight) {
ctx.translate(H_raw, 0)
ctx.rotate(Math.PI / 2)
ctx.translate(H_raw, 0);
ctx.rotate(Math.PI / 2);
}
const uiThickness = Math.max(1, barConfig?.borderThickness ?? 1)
const devThickness = Math.max(1, Math.round(Theme.px(uiThickness, dpr)))
const uiThickness = Math.max(1, barConfig?.borderThickness ?? 1);
const devThickness = Math.max(1, Math.round(Theme.px(uiThickness, dpr)));
const key = barConfig?.borderColor || "surfaceText"
const base = (key === "surfaceText") ? Theme.surfaceText
: (key === "primary") ? Theme.primary
: Theme.secondary
const color = Theme.withAlpha(base, barConfig?.borderOpacity ?? 1.0)
const key = barConfig?.borderColor || "surfaceText";
const base = (key === "surfaceText") ? Theme.surfaceText : (key === "primary") ? Theme.primary : Theme.secondary;
const color = Theme.withAlpha(base, barConfig?.borderOpacity ?? 1.0);
ctx.globalCompositeOperation = "source-over"
ctx.fillStyle = color
ctx.strokeStyle = color;
ctx.lineWidth = devThickness * 2;
ctx.lineJoin = "round";
ctx.lineCap = "butt";
function drawTopBorder() {
if (!hasEdgeGap) {
ctx.beginPath()
ctx.rect(0, H - devThickness, W, devThickness)
ctx.fill()
function drawFullShape() {
ctx.beginPath();
ctx.moveTo(RT, 0);
ctx.lineTo(W - RT, 0);
ctx.arcTo(W, 0, W, RT, RT);
ctx.lineTo(W, H);
if (R > 0) {
ctx.lineTo(W, H + R);
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
ctx.lineTo(R, H);
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
ctx.lineTo(0, H + R);
} else {
const thk = devThickness
const RTi = Math.max(0, RT - thk)
const Ri = Math.max(0, R - thk)
ctx.lineTo(W, H - RT);
ctx.arcTo(W, H, W - RT, H, RT);
ctx.lineTo(RT, H);
ctx.arcTo(0, H, 0, H - RT, RT);
}
ctx.beginPath()
ctx.lineTo(0, RT);
ctx.arcTo(0, 0, RT, 0, RT);
ctx.closePath();
}
if (R > 0 && Ri > 0) {
ctx.moveTo(RT, 0)
ctx.lineTo(W - RT, 0)
ctx.arcTo(W, 0, W, RT, RT)
ctx.lineTo(W, H)
ctx.lineTo(W, H + R)
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true)
ctx.lineTo(R, H)
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true)
ctx.lineTo(0, H + R)
ctx.lineTo(0, RT)
ctx.arcTo(0, 0, RT, 0, RT)
ctx.closePath()
drawFullShape();
ctx.clip();
ctx.moveTo(RT, thk)
ctx.arcTo(thk, thk, thk, RT, RTi)
ctx.lineTo(thk, H + R)
ctx.arc(R, H + R, Ri, -Math.PI, -Math.PI / 2, false)
ctx.lineTo(W - R, H + thk)
ctx.arc(W - R, H + R, Ri, -Math.PI / 2, 0, false)
ctx.lineTo(W - thk, H + R)
ctx.lineTo(W - thk, RT)
ctx.arcTo(W - thk, thk, W - RT, thk, RTi)
ctx.lineTo(RT, thk)
ctx.closePath()
} else {
ctx.moveTo(RT, 0)
ctx.lineTo(W - RT, 0)
ctx.arcTo(W, 0, W, RT, RT)
ctx.lineTo(W, H - RT)
ctx.arcTo(W, H, W - RT, H, RT)
ctx.lineTo(RT, H)
ctx.arcTo(0, H, 0, H - RT, RT)
ctx.lineTo(0, RT)
ctx.arcTo(0, 0, RT, 0, RT)
ctx.closePath()
ctx.moveTo(RT, thk)
ctx.arcTo(thk, thk, thk, RT, RTi)
ctx.lineTo(thk, H - RT)
ctx.arcTo(thk, H - thk, RT, H - thk, RTi)
ctx.lineTo(W - RT, H - thk)
ctx.arcTo(W - thk, H - thk, W - thk, H - RT, RTi)
ctx.lineTo(W - thk, RT)
ctx.arcTo(W - thk, thk, W - RT, thk, RTi)
ctx.lineTo(RT, thk)
ctx.closePath()
}
ctx.fill("evenodd")
if (spacing > 0) {
drawFullShape();
} else {
ctx.beginPath();
if (R > 0) {
ctx.moveTo(W, H + R);
ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
ctx.lineTo(R, H);
ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
} else {
ctx.moveTo(W, H - RT);
ctx.arcTo(W, H, W - RT, H, RT);
ctx.lineTo(RT, H);
ctx.arcTo(0, H, 0, H - RT, RT);
}
}
ctx.stroke();
drawTopBorder()
ctx.restore()
ctx.restore();
}
}
}

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
@@ -412,6 +416,9 @@ Item {
if ("sectionSpacing" in item) {
item.sectionSpacing = Qt.binding(() => root.spacing);
}
if ("widgetData" in item) {
item.widgetData = Qt.binding(() => widgetData);
}
if ("isFirst" in item) {
item.isFirst = Qt.binding(() => {

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

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

View File

@@ -7,6 +7,7 @@ import qs.Widgets
BasePill {
id: root
property var widgetData: null
property bool compactMode: false
signal clockClicked
@@ -28,11 +29,11 @@ BasePill {
StyledText {
text: {
if (SettingsData.use24HourClock) {
return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(0)
return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(0);
} else {
const hours = systemClock?.date?.getHours()
const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours
return String(display).padStart(2, '0').charAt(0)
const hours = systemClock?.date?.getHours();
const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
return String(display).padStart(2, '0').charAt(0);
}
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
@@ -44,11 +45,11 @@ BasePill {
StyledText {
text: {
if (SettingsData.use24HourClock) {
return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(1)
return String(systemClock?.date?.getHours()).padStart(2, '0').charAt(1);
} else {
const hours = systemClock?.date?.getHours()
const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours
return String(display).padStart(2, '0').charAt(1)
const hours = systemClock?.date?.getHours();
const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
return String(display).padStart(2, '0').charAt(1);
}
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
@@ -120,11 +121,11 @@ BasePill {
StyledText {
text: {
const locale = Qt.locale()
const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0')
return value.charAt(0)
const locale = Qt.locale();
const dateFormatShort = locale.dateFormat(Locale.ShortFormat);
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M');
const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0');
return value.charAt(0);
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
color: Theme.primary
@@ -134,11 +135,11 @@ BasePill {
StyledText {
text: {
const locale = Qt.locale()
const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0')
return value.charAt(1)
const locale = Qt.locale();
const dateFormatShort = locale.dateFormat(Locale.ShortFormat);
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M');
const value = dayFirst ? String(systemClock?.date?.getDate()).padStart(2, '0') : String(systemClock?.date?.getMonth() + 1).padStart(2, '0');
return value.charAt(1);
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
color: Theme.primary
@@ -153,11 +154,11 @@ BasePill {
StyledText {
text: {
const locale = Qt.locale()
const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0')
return value.charAt(0)
const locale = Qt.locale();
const dateFormatShort = locale.dateFormat(Locale.ShortFormat);
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M');
const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0');
return value.charAt(0);
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
color: Theme.primary
@@ -167,11 +168,11 @@ BasePill {
StyledText {
text: {
const locale = Qt.locale()
const dateFormatShort = locale.dateFormat(Locale.ShortFormat)
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M')
const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0')
return value.charAt(1)
const locale = Qt.locale();
const dateFormatShort = locale.dateFormat(Locale.ShortFormat);
const dayFirst = dateFormatShort.indexOf('d') < dateFormatShort.indexOf('M');
const value = dayFirst ? String(systemClock?.date?.getMonth() + 1).padStart(2, '0') : String(systemClock?.date?.getDate()).padStart(2, '0');
return value.charAt(1);
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
color: Theme.primary
@@ -190,7 +191,7 @@ BasePill {
StyledText {
id: timeText
text: {
return systemClock?.date?.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat())
return systemClock?.date?.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat());
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
color: Theme.widgetTextColor
@@ -203,21 +204,21 @@ BasePill {
font.pixelSize: Theme.fontSizeSmall
color: Theme.outlineButton
anchors.baseline: dateText.baseline
visible: !SettingsData.clockCompactMode
visible: !(widgetData?.clockCompactMode !== undefined ? widgetData.clockCompactMode : SettingsData.clockCompactMode)
}
StyledText {
id: dateText
text: {
if (SettingsData.clockDateFormat && SettingsData.clockDateFormat.length > 0) {
return systemClock?.date?.toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat)
return systemClock?.date?.toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat);
}
return systemClock?.date?.toLocaleDateString(Qt.locale(), "ddd d")
return systemClock?.date?.toLocaleDateString(Qt.locale(), "ddd d");
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
color: Theme.widgetTextColor
anchors.verticalCenter: parent.verticalCenter
visible: !SettingsData.clockCompactMode
visible: !(widgetData?.clockCompactMode !== undefined ? widgetData.clockCompactMode : SettingsData.clockCompactMode)
}
}
@@ -235,7 +236,7 @@ BasePill {
height: root.height + root.topMargin + root.bottomMargin
cursorShape: Qt.PointingHandCursor
onPressed: {
root.clockClicked()
root.clockClicked();
}
}
}

View File

@@ -12,7 +12,8 @@ import qs.Widgets
BasePill {
id: root
property bool compactMode: SettingsData.focusedWindowCompactMode
property var widgetData: null
property bool compactMode: widgetData?.focusedWindowCompactMode !== undefined ? widgetData.focusedWindowCompactMode : SettingsData.focusedWindowCompactMode
property int availableWidth: 400
readonly property int maxNormalWidth: 456
readonly property int maxCompactWidth: 288

View File

@@ -1,25 +1,23 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import Quickshell.Hyprland
import Quickshell.Io
import qs.Common
import qs.Modules.Plugins
import qs.Modules.ProcessList
import qs.Services
import qs.Widgets
BasePill {
id: root
property bool compactMode: SettingsData.keyboardLayoutNameCompactMode
property var widgetData: null
property bool compactMode: widgetData?.keyboardLayoutNameCompactMode !== undefined ? widgetData.keyboardLayoutNameCompactMode : SettingsData.keyboardLayoutNameCompactMode
property string currentLayout: {
if (CompositorService.isNiri) {
return NiriService.getCurrentKeyboardLayoutName()
return NiriService.getCurrentKeyboardLayoutName();
} else if (CompositorService.isDwl) {
return DwlService.currentKeyboardLayout
return DwlService.currentKeyboardLayout;
}
return ""
return "";
}
property string hyprlandKeyboard: ""
@@ -43,12 +41,13 @@ BasePill {
StyledText {
text: {
if (!root.currentLayout) return ""
const parts = root.currentLayout.split(" ")
if (!root.currentLayout)
return "";
const parts = root.currentLayout.split(" ");
if (parts.length > 0) {
return parts[0].substring(0, 2).toUpperCase()
return parts[0].substring(0, 2).toUpperCase();
}
return root.currentLayout.substring(0, 2).toUpperCase()
return root.currentLayout.substring(0, 2).toUpperCase();
}
font.pixelSize: Theme.barTextSize(root.barThickness, root.barConfig?.fontScale)
color: Theme.widgetTextColor
@@ -78,16 +77,11 @@ BasePill {
cursorShape: Qt.PointingHandCursor
onClicked: {
if (CompositorService.isNiri) {
NiriService.cycleKeyboardLayout()
NiriService.cycleKeyboardLayout();
} else if (CompositorService.isHyprland) {
Quickshell.execDetached([
"hyprctl",
"switchxkblayout",
root.hyprlandKeyboard,
"next"
])
Quickshell.execDetached(["hyprctl", "switchxkblayout", root.hyprlandKeyboard, "next"]);
} else if (CompositorService.isDwl) {
Quickshell.execDetached(["mmsg", "-d", "switch_keyboard_layout"])
Quickshell.execDetached(["mmsg", "-d", "switch_keyboard_layout"]);
}
}
}
@@ -98,14 +92,14 @@ BasePill {
function onRawEvent(event) {
if (event.name === "activelayout") {
updateLayout()
updateLayout();
}
}
}
Component.onCompleted: {
if (CompositorService.isHyprland) {
updateLayout()
updateLayout();
}
}
@@ -113,45 +107,45 @@ BasePill {
if (CompositorService.isHyprland) {
Proc.runCommand(null, ["hyprctl", "-j", "devices"], (output, exitCode) => {
if (exitCode !== 0) {
root.currentLayout = "Unknown"
return
root.currentLayout = "Unknown";
return;
}
try {
const data = JSON.parse(output)
const mainKeyboard = data.keyboards.find(kb => kb.main === true)
root.hyprlandKeyboard = mainKeyboard.name
const data = JSON.parse(output);
const mainKeyboard = data.keyboards.find(kb => kb.main === true);
root.hyprlandKeyboard = mainKeyboard.name;
if (mainKeyboard) {
const layout = mainKeyboard.layout
const variant = mainKeyboard.variant
const index = mainKeyboard.active_layout_index
const layout = mainKeyboard.layout;
const variant = mainKeyboard.variant;
const index = mainKeyboard.active_layout_index;
if (root.compactMode && layout && variant && index !== undefined) {
const layouts = mainKeyboard.layout.split(",")
const variants = mainKeyboard.variant.split(",")
const index = mainKeyboard.active_layout_index
const layouts = mainKeyboard.layout.split(",");
const variants = mainKeyboard.variant.split(",");
const index = mainKeyboard.active_layout_index;
if (layouts[index] && variants[index] !== undefined) {
if (variants[index] === "") {
root.currentLayout = layouts[index]
if (layouts[index] && variants[index] !== undefined) {
if (variants[index] === "") {
root.currentLayout = layouts[index];
} else {
root.currentLayout = layouts[index] + "-" + variants[index]
root.currentLayout = layouts[index] + "-" + variants[index];
}
} else {
root.currentLayout = "Unknown"
root.currentLayout = "Unknown";
}
} else if (mainKeyboard && mainKeyboard.active_keymap) {
root.currentLayout = mainKeyboard.active_keymap
root.currentLayout = mainKeyboard.active_keymap;
} else {
root.currentLayout = "Unknown"
root.currentLayout = "Unknown";
}
} else {
root.currentLayout = "Unknown"
root.currentLayout = "Unknown";
}
} catch (e) {
root.currentLayout = "Unknown"
root.currentLayout = "Unknown";
}
})
});
}
}
}

View File

@@ -11,8 +11,10 @@ BasePill {
readonly property MprisPlayer activePlayer: MprisController.activePlayer
readonly property bool playerAvailable: activePlayer !== null
property bool compactMode: false
property var widgetData: null
readonly property int textWidth: {
switch (SettingsData.mediaSize) {
const size = widgetData?.mediaSize !== undefined ? widgetData.mediaSize : SettingsData.mediaSize;
switch (size) {
case 0:
return 0;
case 2:
@@ -107,12 +109,12 @@ BasePill {
cursorShape: Qt.PointingHandCursor
onClicked: {
if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
const globalPos = parent.mapToGlobal(0, 0)
const currentScreen = root.parentScreen || Screen
const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, parent.width)
root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
const globalPos = parent.mapToGlobal(0, 0);
const currentScreen = root.parentScreen || Screen;
const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, parent.width);
root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen);
}
root.clicked()
root.clicked();
}
}
}
@@ -138,14 +140,15 @@ BasePill {
enabled: root.playerAvailable
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
onClicked: (mouse) => {
if (!activePlayer) return
onClicked: mouse => {
if (!activePlayer)
return;
if (mouse.button === Qt.LeftButton) {
activePlayer.togglePlaying()
activePlayer.togglePlaying();
} else if (mouse.button === Qt.MiddleButton) {
activePlayer.previous()
activePlayer.previous();
} else if (mouse.button === Qt.RightButton) {
activePlayer.next()
activePlayer.next();
}
}
}
@@ -190,7 +193,10 @@ BasePill {
anchors.verticalCenter: parent.verticalCenter
width: textWidth
height: root.widgetThickness
visible: SettingsData.mediaSize > 0
visible: {
const size = widgetData?.mediaSize !== undefined ? widgetData.mediaSize : SettingsData.mediaSize;
return size > 0;
}
clip: true
color: "transparent"
@@ -248,12 +254,12 @@ BasePill {
cursorShape: Qt.PointingHandCursor
onPressed: {
if (root.popoutTarget && root.popoutTarget.setTriggerPosition) {
const globalPos = mapToGlobal(0, 0)
const currentScreen = root.parentScreen || Screen
const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.width)
root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen)
const globalPos = mapToGlobal(0, 0);
const currentScreen = root.parentScreen || Screen;
const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, root.barThickness, root.width);
root.popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, root.section, currentScreen);
}
root.clicked()
root.clicked();
}
}
}

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 {

View File

@@ -11,6 +11,7 @@ import qs.Widgets
Item {
id: root
property var widgetData: null
property var barConfig: null
property bool isVertical: axis?.isVertical ?? false
property var axis: null
@@ -129,7 +130,7 @@ Item {
if (windowCount === 0) {
return 0;
}
if (SettingsData.runningAppsCompactMode) {
if (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) {
return windowCount * 24 + (windowCount - 1) * Theme.spacingXS + horizontalPadding * 2;
} else {
return windowCount * (24 + Theme.spacingXS + 120) + (windowCount - 1) * Theme.spacingXS + horizontalPadding * 2;
@@ -140,28 +141,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);
}
}
@@ -291,7 +335,7 @@ Item {
}
return appName + (windowTitle ? " • " + windowTitle : "");
}
readonly property real visualWidth: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
readonly property real visualWidth: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? 24 : (24 + Theme.spacingXS + 120)
width: visualWidth
height: root.barThickness
@@ -314,7 +358,7 @@ Item {
IconImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.leftMargin: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.verticalCenter: parent.verticalCenter
width: Theme.barIconSize(root.barThickness)
height: Theme.barIconSize(root.barThickness)
@@ -341,7 +385,7 @@ Item {
DankIcon {
anchors.left: parent.left
anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.leftMargin: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.verticalCenter: parent.verticalCenter
size: Theme.barIconSize(root.barThickness)
name: "sports_esports"
@@ -376,7 +420,7 @@ Item {
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.rightMargin: SettingsData.runningAppsCompactMode ? -2 : 2
anchors.rightMargin: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? -2 : 2
anchors.bottomMargin: -2
width: 14
height: 14
@@ -400,7 +444,7 @@ Item {
anchors.right: parent.right
anchors.rightMargin: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
visible: !SettingsData.runningAppsCompactMode
visible: !(widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode)
text: windowTitle
font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale)
color: Theme.widgetTextColor
@@ -535,7 +579,7 @@ Item {
}
return appName + (windowTitle ? " • " + windowTitle : "");
}
readonly property real visualWidth: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
readonly property real visualWidth: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? 24 : (24 + Theme.spacingXS + 120)
width: root.barThickness
height: 24
@@ -557,7 +601,7 @@ Item {
IconImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.leftMargin: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.verticalCenter: parent.verticalCenter
width: Theme.barIconSize(root.barThickness)
height: Theme.barIconSize(root.barThickness)
@@ -584,7 +628,7 @@ Item {
DankIcon {
anchors.left: parent.left
anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.leftMargin: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? (parent.width - Theme.barIconSize(root.barThickness)) / 2 : Theme.spacingXS
anchors.verticalCenter: parent.verticalCenter
size: Theme.barIconSize(root.barThickness)
name: "sports_esports"
@@ -618,7 +662,7 @@ Item {
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.rightMargin: SettingsData.runningAppsCompactMode ? -2 : 2
anchors.rightMargin: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? -2 : 2
anchors.bottomMargin: -2
width: 14
height: 14
@@ -641,7 +685,7 @@ Item {
anchors.right: parent.right
anchors.rightMargin: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
visible: !SettingsData.runningAppsCompactMode
visible: !(widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode)
text: windowTitle
font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale)
color: Theme.widgetTextColor

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);
}
}

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);
}
}

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);
}
}
}

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,
@@ -842,6 +870,16 @@ Item {
newWidget.mountPath = widget.mountPath;
if (widget.minimumWidth !== undefined)
newWidget.minimumWidth = widget.minimumWidth;
if (widget.mediaSize !== undefined)
newWidget.mediaSize = widget.mediaSize;
if (widget.clockCompactMode !== undefined)
newWidget.clockCompactMode = widget.clockCompactMode;
if (widget.focusedWindowCompactMode !== undefined)
newWidget.focusedWindowCompactMode = widget.focusedWindowCompactMode;
if (widget.runningAppsCompactMode !== undefined)
newWidget.runningAppsCompactMode = widget.runningAppsCompactMode;
if (widget.keyboardLayoutNameCompactMode !== undefined)
newWidget.keyboardLayoutNameCompactMode = widget.keyboardLayoutNameCompactMode;
if (widget.id === "controlCenterButton") {
newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
@@ -854,6 +892,85 @@ Item {
setWidgetsForSection(sectionId, widgets);
}
function handleCompactModeChanged(sectionId, widgetId, value) {
var widgets = getWidgetsForSection(sectionId).slice();
for (var i = 0; i < widgets.length; i++) {
var widget = widgets[i];
var currentId = typeof widget === "string" ? widget : widget.id;
if (currentId !== widgetId) {
continue;
}
if (typeof widget === "string") {
widgets[i] = {
"id": widget,
"enabled": true
};
widget = widgets[i];
} else {
var newWidget = {
"id": widget.id,
"enabled": widget.enabled
};
if (widget.size !== undefined)
newWidget.size = widget.size;
if (widget.selectedGpuIndex !== undefined)
newWidget.selectedGpuIndex = widget.selectedGpuIndex;
if (widget.pciId !== undefined)
newWidget.pciId = widget.pciId;
if (widget.mountPath !== undefined)
newWidget.mountPath = widget.mountPath;
if (widget.minimumWidth !== undefined)
newWidget.minimumWidth = widget.minimumWidth;
if (widget.showSwap !== undefined)
newWidget.showSwap = widget.showSwap;
if (widget.mediaSize !== undefined)
newWidget.mediaSize = widget.mediaSize;
if (widget.clockCompactMode !== undefined)
newWidget.clockCompactMode = widget.clockCompactMode;
if (widget.focusedWindowCompactMode !== undefined)
newWidget.focusedWindowCompactMode = widget.focusedWindowCompactMode;
if (widget.runningAppsCompactMode !== undefined)
newWidget.runningAppsCompactMode = widget.runningAppsCompactMode;
if (widget.keyboardLayoutNameCompactMode !== undefined)
newWidget.keyboardLayoutNameCompactMode = widget.keyboardLayoutNameCompactMode;
if (widget.id === "controlCenterButton") {
newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
newWidget.showAudioIcon = widget.showAudioIcon !== undefined ? widget.showAudioIcon : true;
}
widgets[i] = newWidget;
widget = newWidget;
}
switch (widgetId) {
case "music":
widget.mediaSize = value;
break;
case "clock":
widget.clockCompactMode = value;
break;
case "focusedWindow":
widget.focusedWindowCompactMode = value;
break;
case "runningApps":
widget.runningAppsCompactMode = value;
break;
case "keyboard_layout_name":
widget.keyboardLayoutNameCompactMode = value;
break;
}
break;
}
setWidgetsForSection(sectionId, widgets);
}
function getItemsForSection(sectionId) {
var widgets = [];
var widgetData = getWidgetsForSection(sectionId);
@@ -869,6 +986,11 @@ Item {
var widgetShowAudioIcon = typeof widget === "string" ? undefined : widget.showAudioIcon;
var widgetMinimumWidth = typeof widget === "string" ? undefined : widget.minimumWidth;
var widgetShowSwap = typeof widget === "string" ? undefined : widget.showSwap;
var widgetMediaSize = typeof widget === "string" ? undefined : widget.mediaSize;
var widgetClockCompactMode = typeof widget === "string" ? undefined : widget.clockCompactMode;
var widgetFocusedWindowCompactMode = typeof widget === "string" ? undefined : widget.focusedWindowCompactMode;
var widgetRunningAppsCompactMode = typeof widget === "string" ? undefined : widget.runningAppsCompactMode;
var widgetKeyboardLayoutNameCompactMode = typeof widget === "string" ? undefined : widget.keyboardLayoutNameCompactMode;
var widgetDef = baseWidgetDefinitions.find(w => {
return w.id === widgetId;
});
@@ -893,6 +1015,16 @@ Item {
item.minimumWidth = widgetMinimumWidth;
if (widgetShowSwap !== undefined)
item.showSwap = widgetShowSwap;
if (widgetMediaSize !== undefined)
item.mediaSize = widgetMediaSize;
if (widgetClockCompactMode !== undefined)
item.clockCompactMode = widgetClockCompactMode;
if (widgetFocusedWindowCompactMode !== undefined)
item.focusedWindowCompactMode = widgetFocusedWindowCompactMode;
if (widgetRunningAppsCompactMode !== undefined)
item.runningAppsCompactMode = widgetRunningAppsCompactMode;
if (widgetKeyboardLayoutNameCompactMode !== undefined)
item.keyboardLayoutNameCompactMode = widgetKeyboardLayoutNameCompactMode;
widgets.push(item);
}
@@ -2461,6 +2593,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
@@ -2886,6 +3259,9 @@ Item {
onShowSwapChanged: (sectionId, index, enabled) => {
dankBarTab.handleShowSwapChanged(sectionId, index, enabled);
}
onCompactModeChanged: (widgetId, value) => {
dankBarTab.handleCompactModeChanged(sectionId, widgetId, value);
}
}
}
@@ -2942,6 +3318,9 @@ Item {
onShowSwapChanged: (sectionId, index, enabled) => {
dankBarTab.handleShowSwapChanged(sectionId, index, enabled);
}
onCompactModeChanged: (widgetId, value) => {
dankBarTab.handleCompactModeChanged(sectionId, widgetId, value);
}
}
}
@@ -2998,6 +3377,9 @@ Item {
onShowSwapChanged: (sectionId, index, enabled) => {
dankBarTab.handleShowSwapChanged(sectionId, index, enabled);
}
onCompactModeChanged: (widgetId, value) => {
dankBarTab.handleCompactModeChanged(sectionId, widgetId, value);
}
}
}
}

View File

@@ -319,7 +319,7 @@ Column {
visible: modelData.id === "music"
iconName: "photo_size_select_small"
iconSize: 16
iconColor: SettingsData.mediaSize === 0 ? Theme.primary : Theme.outline
iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 0 ? Theme.primary : Theme.outline
onClicked: {
root.compactModeChanged("music", 0);
}
@@ -337,7 +337,7 @@ Column {
visible: modelData.id === "music"
iconName: "photo_size_select_actual"
iconSize: 16
iconColor: SettingsData.mediaSize === 1 ? Theme.primary : Theme.outline
iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 1 ? Theme.primary : Theme.outline
onClicked: {
root.compactModeChanged("music", 1);
}
@@ -355,7 +355,7 @@ Column {
visible: modelData.id === "music"
iconName: "photo_size_select_large"
iconSize: 16
iconColor: SettingsData.mediaSize === 2 ? Theme.primary : Theme.outline
iconColor: (modelData.mediaSize !== undefined ? modelData.mediaSize : SettingsData.mediaSize) === 2 ? Theme.primary : Theme.outline
onClicked: {
root.compactModeChanged("music", 2);
}
@@ -372,50 +372,73 @@ Column {
buttonSize: 28
visible: modelData.id === "clock" || modelData.id === "focusedWindow" || modelData.id === "runningApps" || modelData.id === "keyboard_layout_name"
iconName: {
if (modelData.id === "clock")
return SettingsData.clockCompactMode ? "zoom_out" : "zoom_in";
if (modelData.id === "focusedWindow")
return SettingsData.focusedWindowCompactMode ? "zoom_out" : "zoom_in";
if (modelData.id === "runningApps")
return SettingsData.runningAppsCompactMode ? "zoom_out" : "zoom_in";
if (modelData.id === "keyboard_layout_name")
return SettingsData.keyboardLayoutNameCompactMode ? "zoom_out" : "zoom_in";
return "zoom_in";
const isCompact = (() => {
switch (modelData.id) {
case "clock":
return modelData.clockCompactMode !== undefined ? modelData.clockCompactMode : SettingsData.clockCompactMode;
case "focusedWindow":
return modelData.focusedWindowCompactMode !== undefined ? modelData.focusedWindowCompactMode : SettingsData.focusedWindowCompactMode;
case "runningApps":
return modelData.runningAppsCompactMode !== undefined ? modelData.runningAppsCompactMode : SettingsData.runningAppsCompactMode;
case "keyboard_layout_name":
return modelData.keyboardLayoutNameCompactMode !== undefined ? modelData.keyboardLayoutNameCompactMode : SettingsData.keyboardLayoutNameCompactMode;
default:
return false;
}
})();
return isCompact ? "zoom_out" : "zoom_in";
}
iconSize: 16
iconColor: {
if (modelData.id === "clock")
return SettingsData.clockCompactMode ? Theme.primary : Theme.outline;
if (modelData.id === "focusedWindow")
return SettingsData.focusedWindowCompactMode ? Theme.primary : Theme.outline;
if (modelData.id === "runningApps")
return SettingsData.runningAppsCompactMode ? Theme.primary : Theme.outline;
if (modelData.id === "keyboard_layout_name")
return SettingsData.keyboardLayoutNameCompactMode ? Theme.primary : Theme.outline;
return Theme.outline;
const isCompact = (() => {
switch (modelData.id) {
case "clock":
return modelData.clockCompactMode !== undefined ? modelData.clockCompactMode : SettingsData.clockCompactMode;
case "focusedWindow":
return modelData.focusedWindowCompactMode !== undefined ? modelData.focusedWindowCompactMode : SettingsData.focusedWindowCompactMode;
case "runningApps":
return modelData.runningAppsCompactMode !== undefined ? modelData.runningAppsCompactMode : SettingsData.runningAppsCompactMode;
case "keyboard_layout_name":
return modelData.keyboardLayoutNameCompactMode !== undefined ? modelData.keyboardLayoutNameCompactMode : SettingsData.keyboardLayoutNameCompactMode;
default:
return false;
}
})();
return isCompact ? Theme.primary : Theme.outline;
}
onClicked: {
if (modelData.id === "clock") {
root.compactModeChanged("clock", !SettingsData.clockCompactMode);
} else if (modelData.id === "focusedWindow") {
root.compactModeChanged("focusedWindow", !SettingsData.focusedWindowCompactMode);
} else if (modelData.id === "runningApps") {
root.compactModeChanged("runningApps", !SettingsData.runningAppsCompactMode);
} else if (modelData.id === "keyboard_layout_name") {
root.compactModeChanged("keyboard_layout_name", !SettingsData.keyboardLayoutNameCompactMode);
}
const currentValue = (() => {
switch (modelData.id) {
case "clock":
return modelData.clockCompactMode !== undefined ? modelData.clockCompactMode : SettingsData.clockCompactMode;
case "focusedWindow":
return modelData.focusedWindowCompactMode !== undefined ? modelData.focusedWindowCompactMode : SettingsData.focusedWindowCompactMode;
case "runningApps":
return modelData.runningAppsCompactMode !== undefined ? modelData.runningAppsCompactMode : SettingsData.runningAppsCompactMode;
case "keyboard_layout_name":
return modelData.keyboardLayoutNameCompactMode !== undefined ? modelData.keyboardLayoutNameCompactMode : SettingsData.keyboardLayoutNameCompactMode;
default:
return false;
}
})();
root.compactModeChanged(modelData.id, !currentValue);
}
onEntered: {
let tooltipText = "Toggle Compact Mode";
if (modelData.id === "clock") {
tooltipText = SettingsData.clockCompactMode ? "Full Size" : "Compact";
} else if (modelData.id === "focusedWindow") {
tooltipText = SettingsData.focusedWindowCompactMode ? "Full Size" : "Compact";
} else if (modelData.id === "runningApps") {
tooltipText = SettingsData.runningAppsCompactMode ? "Full Size" : "Compact";
} else if (modelData.id === "keyboard_layout_name") {
tooltipText = SettingsData.keyboardLayoutNameCompactMode ? "Full Size" : "Compact";
}
const isCompact = (() => {
switch (modelData.id) {
case "clock":
return modelData.clockCompactMode !== undefined ? modelData.clockCompactMode : SettingsData.clockCompactMode;
case "focusedWindow":
return modelData.focusedWindowCompactMode !== undefined ? modelData.focusedWindowCompactMode : SettingsData.focusedWindowCompactMode;
case "runningApps":
return modelData.runningAppsCompactMode !== undefined ? modelData.runningAppsCompactMode : SettingsData.runningAppsCompactMode;
case "keyboard_layout_name":
return modelData.keyboardLayoutNameCompactMode !== undefined ? modelData.keyboardLayoutNameCompactMode : SettingsData.keyboardLayoutNameCompactMode;
default:
return false;
}
})();
const tooltipText = isCompact ? "Full Size" : "Compact";
sharedTooltip.show(tooltipText, compactModeButton, 0, 0, "bottom");
}
onExited: {