Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-30 00:12:50 -05:00
Code Packages Releases Activity

dank tooltip v2: apply to settings

Browse Source
This commit is contained in:
bbedward
2025-11-23 20:00:25 -05:00
parent b036da2446
commit 30cbfe729d
3 changed files with 250 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,10 @@ Item {
property var parentModal: null property var parentModal: null
property string selectedBarId: "default" property string selectedBarId: "default"
DankTooltipV2 {
id: sharedTooltip
}
property var selectedBarConfig: { property var selectedBarConfig: {
selectedBarId; selectedBarId;
SettingsData.barConfigs; SettingsData.barConfigs;
@@ -2425,7 +2429,7 @@ Item {
SettingsData.updateBarConfig(selectedBarId, { SettingsData.updateBarConfig(selectedBarId, {
transparency: newValue / 100 transparency: newValue / 100
}); });
notifyHorizontalBarChange() notifyHorizontalBarChange();
} }
Binding { Binding {
@@ -2477,7 +2481,7 @@ Item {
SettingsData.updateBarConfig(selectedBarId, { SettingsData.updateBarConfig(selectedBarId, {
widgetTransparency: 1.0 widgetTransparency: 1.0
}); });
notifyHorizontalBarChange() notifyHorizontalBarChange();
} }
} }
@@ -2502,7 +2506,7 @@ Item {
SettingsData.updateBarConfig(selectedBarId, { SettingsData.updateBarConfig(selectedBarId, {
widgetTransparency: newValue / 100 widgetTransparency: newValue / 100
}); });
notifyHorizontalBarChange() notifyHorizontalBarChange();
} }
Binding { Binding {
@@ -2573,7 +2577,7 @@ Item {
SettingsData.updateBarConfig(selectedBarId, { SettingsData.updateBarConfig(selectedBarId, {
fontScale: newScale fontScale: newScale
}); });
notifyHorizontalBarChange() notifyHorizontalBarChange();
} }
} }
@@ -2607,7 +2611,7 @@ Item {
SettingsData.updateBarConfig(selectedBarId, { SettingsData.updateBarConfig(selectedBarId, {
fontScale: newScale fontScale: newScale
}); });
notifyHorizontalBarChange() notifyHorizontalBarChange();
} }
} }
} }

480
quickshell/Modules/Settings/WidgetsTabSection.qml
View File

@@ -13,6 +13,10 @@ Column {
property string titleIcon: "widgets" property string titleIcon: "widgets"
property string sectionId: "" property string sectionId: ""
DankTooltipV2 {
id: sharedTooltip
}
signal itemEnabledChanged(string sectionId, string itemId, bool enabled) signal itemEnabledChanged(string sectionId, string itemId, bool enabled)
signal itemOrderChanged(var newOrder) signal itemOrderChanged(var newOrder)
signal addWidget(string sectionId) signal addWidget(string sectionId)
@@ -80,11 +84,8 @@ Column {
anchors.fill: parent anchors.fill: parent
anchors.margins: 2 anchors.margins: 2
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceContainer.r, color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.8)
Theme.surfaceContainer.g, border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
Theme.surfaceContainer.b, 0.8)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
Theme.outline.b, 0.2)
border.width: 0 border.width: 0
DankIcon { DankIcon {
@@ -126,10 +127,7 @@ Column {
StyledText { StyledText {
text: modelData.description text: modelData.description
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
color: modelData.enabled ? Theme.outline : Qt.rgba( color: modelData.enabled ? Theme.outline : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
Theme.outline.r,
Theme.outline.g,
Theme.outline.b, 0.6)
elide: Text.ElideRight elide: Text.ElideRight
width: parent.width width: parent.width
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@@ -154,41 +152,29 @@ Column {
anchors.fill: parent anchors.fill: parent
popupWidth: -1 popupWidth: -1
currentValue: { currentValue: {
var selectedIndex = modelData.selectedGpuIndex var selectedIndex = modelData.selectedGpuIndex !== undefined ? modelData.selectedGpuIndex : 0;
!== undefined ? modelData.selectedGpuIndex : 0 if (DgopService.availableGpus && DgopService.availableGpus.length > selectedIndex && selectedIndex >= 0) {
if (DgopService.availableGpus var gpu = DgopService.availableGpus[selectedIndex];
&& DgopService.availableGpus.length > selectedIndex return gpu.driver.toUpperCase();
&& selectedIndex >= 0) {
var gpu = DgopService.availableGpus[selectedIndex]
return gpu.driver.toUpperCase()
} }
return DgopService.availableGpus return DgopService.availableGpus && DgopService.availableGpus.length > 0 ? DgopService.availableGpus[0].driver.toUpperCase() : "";
&& DgopService.availableGpus.length
> 0 ? DgopService.availableGpus[0].driver.toUpperCase(
) : ""
} }
options: { options: {
var gpuOptions = [] var gpuOptions = [];
if (DgopService.availableGpus if (DgopService.availableGpus && DgopService.availableGpus.length > 0) {
&& DgopService.availableGpus.length > 0) {
for (var i = 0; i < DgopService.availableGpus.length; i++) { for (var i = 0; i < DgopService.availableGpus.length; i++) {
var gpu = DgopService.availableGpus[i] var gpu = DgopService.availableGpus[i];
gpuOptions.push( gpuOptions.push(gpu.driver.toUpperCase());
gpu.driver.toUpperCase(
))
} }
} }
return gpuOptions return gpuOptions;
} }
onValueChanged: value => { onValueChanged: value => {
var gpuIndex = options.indexOf( var gpuIndex = options.indexOf(value);
value) if (gpuIndex >= 0) {
if (gpuIndex >= 0) { root.gpuSelectionChanged(root.sectionId, index, gpuIndex);
root.gpuSelectionChanged( }
root.sectionId, }
index, gpuIndex)
}
}
} }
} }
@@ -200,26 +186,26 @@ Column {
id: diskMountDropdown id: diskMountDropdown
anchors.fill: parent anchors.fill: parent
currentValue: { currentValue: {
const mountPath = modelData.mountPath || "/" const mountPath = modelData.mountPath || "/";
if (mountPath === "/") { if (mountPath === "/") {
return "root (/)" return "root (/)";
} }
return mountPath return mountPath;
} }
options: { options: {
if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) { if (!DgopService.diskMounts || DgopService.diskMounts.length === 0) {
return ["root (/)"] return ["root (/)"];
} }
return DgopService.diskMounts.map(mount => { return DgopService.diskMounts.map(mount => {
if (mount.mount === "/") { if (mount.mount === "/") {
return "root (/)" return "root (/)";
} }
return mount.mount return mount.mount;
}) });
} }
onValueChanged: value => { onValueChanged: value => {
const newPath = value === "root (/)" ? "/" : value const newPath = value === "root (/)" ? "/" : value;
root.diskMountSelectionChanged(root.sectionId, index, newPath) root.diskMountSelectionChanged(root.sectionId, index, newPath);
} }
} }
} }
@@ -247,20 +233,15 @@ Column {
Rectangle { Rectangle {
id: warningTooltip id: warningTooltip
property string warningText: (modelData.warning !== undefined property string warningText: (modelData.warning !== undefined && modelData.warning !== "") ? modelData.warning : ""
&& modelData.warning
!== "") ? modelData.warning : ""
width: Math.min( width: Math.min(250, warningTooltipText.implicitWidth) + Theme.spacingM * 2
250,
warningTooltipText.implicitWidth) + Theme.spacingM * 2
height: warningTooltipText.implicitHeight + Theme.spacingS * 2 height: warningTooltipText.implicitHeight + Theme.spacingS * 2
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: Theme.surfaceContainer color: Theme.surfaceContainer
border.color: Theme.outline border.color: Theme.outline
border.width: 0 border.width: 0
visible: warningArea.containsMouse visible: warningArea.containsMouse && warningText !== ""
&& warningText !== ""
opacity: visible ? 1 : 0 opacity: visible ? 1 : 0
x: -width - Theme.spacingS x: -width - Theme.spacingS
y: (parent.height - height) / 2 y: (parent.height - height) / 2
@@ -289,31 +270,21 @@ Column {
DankActionButton { DankActionButton {
id: minimumWidthButton id: minimumWidthButton
buttonSize: 28 buttonSize: 28
visible: modelData.id === "cpuUsage" visible: modelData.id === "cpuUsage" || modelData.id === "memUsage" || modelData.id === "cpuTemp" || modelData.id === "gpuTemp"
|| modelData.id === "memUsage"
|| modelData.id === "cpuTemp"
|| modelData.id === "gpuTemp"
iconName: "straighten" iconName: "straighten"
iconSize: 16 iconSize: 16
iconColor: (modelData.minimumWidth !== undefined ? modelData.minimumWidth : true) ? Theme.primary : Theme.outline iconColor: (modelData.minimumWidth !== undefined ? modelData.minimumWidth : true) ? Theme.primary : Theme.outline
onClicked: { onClicked: {
var currentEnabled = modelData.minimumWidth !== undefined ? modelData.minimumWidth : true var currentEnabled = modelData.minimumWidth !== undefined ? modelData.minimumWidth : true;
root.minimumWidthChanged(root.sectionId, index, !currentEnabled) root.minimumWidthChanged(root.sectionId, index, !currentEnabled);
} }
onEntered: { onEntered: {
minimumWidthTooltipLoader.active = true var currentEnabled = modelData.minimumWidth !== undefined ? modelData.minimumWidth : true;
if (minimumWidthTooltipLoader.item) { const tooltipText = currentEnabled ? "Force Padding" : "Dynamic Width";
var currentEnabled = modelData.minimumWidth !== undefined ? modelData.minimumWidth : true sharedTooltip.show(tooltipText, minimumWidthButton, 0, 0);
const tooltipText = currentEnabled ? "Force Padding" : "Dynamic Width"
const p = minimumWidthButton.mapToItem(null, minimumWidthButton.width / 2, 0)
minimumWidthTooltipLoader.item.show(tooltipText, p.x, p.y - 40, null)
}
} }
onExited: { onExited: {
if (minimumWidthTooltipLoader.item) { sharedTooltip.hide();
minimumWidthTooltipLoader.item.hide()
}
minimumWidthTooltipLoader.active = false
} }
} }
@@ -325,33 +296,22 @@ Column {
iconSize: 16 iconSize: 16
iconColor: (modelData.showSwap !== undefined ? modelData.showSwap : false) ? Theme.primary : Theme.outline iconColor: (modelData.showSwap !== undefined ? modelData.showSwap : false) ? Theme.primary : Theme.outline
onClicked: { onClicked: {
var currentEnabled = modelData.showSwap !== undefined ? modelData.showSwap : false var currentEnabled = modelData.showSwap !== undefined ? modelData.showSwap : false;
root.showSwapChanged(root.sectionId, index, !currentEnabled) root.showSwapChanged(root.sectionId, index, !currentEnabled);
} }
onEntered: { onEntered: {
showSwapTooltipLoader.active = true var currentEnabled = modelData.showSwap !== undefined ? modelData.showSwap : false;
if (showSwapTooltipLoader.item) { const tooltipText = currentEnabled ? "Hide Swap" : "Show Swap";
var currentEnabled = modelData.showSwap !== undefined ? modelData.showSwap : false sharedTooltip.show(tooltipText, showSwapButton, 0, 0);
const tooltipText = currentEnabled ? "Hide Swap" : "Show Swap"
const p = showSwapButton.mapToItem(null, showSwapButton.width / 2, 0)
showSwapTooltipLoader.item.show(tooltipText, p.x, p.y - 40, null)
}
} }
onExited: { onExited: {
if (showSwapTooltipLoader.item) { sharedTooltip.hide();
showSwapTooltipLoader.item.hide()
}
showSwapTooltipLoader.active = false
} }
} }
Row { Row {
spacing: Theme.spacingXS spacing: Theme.spacingXS
visible: modelData.id === "clock" visible: modelData.id === "clock" || modelData.id === "music" || modelData.id === "focusedWindow" || modelData.id === "runningApps" || modelData.id === "keyboard_layout_name"
|| modelData.id === "music"
|| modelData.id === "focusedWindow"
|| modelData.id === "runningApps"
|| modelData.id === "keyboard_layout_name"
DankActionButton { DankActionButton {
id: smallSizeButton id: smallSizeButton
@@ -359,23 +319,15 @@ Column {
visible: modelData.id === "music" visible: modelData.id === "music"
iconName: "photo_size_select_small" iconName: "photo_size_select_small"
iconSize: 16 iconSize: 16
iconColor: SettingsData.mediaSize iconColor: SettingsData.mediaSize === 0 ? Theme.primary : Theme.outline
=== 0 ? Theme.primary : Theme.outline
onClicked: { onClicked: {
root.compactModeChanged("music", 0) root.compactModeChanged("music", 0);
} }
onEntered: { onEntered: {
smallTooltipLoader.active = true sharedTooltip.show("Small", smallSizeButton, 0, 0);
if (smallTooltipLoader.item) {
const p = smallSizeButton.mapToItem(null, smallSizeButton.width / 2, 0)
smallTooltipLoader.item.show("Small", p.x, p.y - 40, null)
}
} }
onExited: { onExited: {
if (smallTooltipLoader.item) { sharedTooltip.hide();
smallTooltipLoader.item.hide()
}
smallTooltipLoader.active = false
} }
} }
@@ -385,23 +337,15 @@ Column {
visible: modelData.id === "music" visible: modelData.id === "music"
iconName: "photo_size_select_actual" iconName: "photo_size_select_actual"
iconSize: 16 iconSize: 16
iconColor: SettingsData.mediaSize iconColor: SettingsData.mediaSize === 1 ? Theme.primary : Theme.outline
=== 1 ? Theme.primary : Theme.outline
onClicked: { onClicked: {
root.compactModeChanged("music", 1) root.compactModeChanged("music", 1);
} }
onEntered: { onEntered: {
mediumTooltipLoader.active = true sharedTooltip.show("Medium", mediumSizeButton, 0, 0);
if (mediumTooltipLoader.item) {
const p = mediumSizeButton.mapToItem(null, mediumSizeButton.width / 2, 0)
mediumTooltipLoader.item.show("Medium", p.x, p.y - 40, null)
}
} }
onExited: { onExited: {
if (mediumTooltipLoader.item) { sharedTooltip.hide();
mediumTooltipLoader.item.hide()
}
mediumTooltipLoader.active = false
} }
} }
@@ -411,97 +355,71 @@ Column {
visible: modelData.id === "music" visible: modelData.id === "music"
iconName: "photo_size_select_large" iconName: "photo_size_select_large"
iconSize: 16 iconSize: 16
iconColor: SettingsData.mediaSize iconColor: SettingsData.mediaSize === 2 ? Theme.primary : Theme.outline
=== 2 ? Theme.primary : Theme.outline
onClicked: { onClicked: {
root.compactModeChanged("music", 2) root.compactModeChanged("music", 2);
} }
onEntered: { onEntered: {
largeTooltipLoader.active = true sharedTooltip.show("Large", largeSizeButton, 0, 0);
if (largeTooltipLoader.item) {
const p = largeSizeButton.mapToItem(null, largeSizeButton.width / 2, 0)
largeTooltipLoader.item.show("Large", p.x, p.y - 40, null)
}
} }
onExited: { onExited: {
if (largeTooltipLoader.item) { sharedTooltip.hide();
largeTooltipLoader.item.hide()
}
largeTooltipLoader.active = false
} }
} }
DankActionButton { DankActionButton {
id: compactModeButton id: compactModeButton
buttonSize: 28 buttonSize: 28
visible: modelData.id === "clock" visible: modelData.id === "clock" || modelData.id === "focusedWindow" || modelData.id === "runningApps" || modelData.id === "keyboard_layout_name"
|| modelData.id === "focusedWindow"
|| modelData.id === "runningApps"
|| modelData.id === "keyboard_layout_name"
iconName: { iconName: {
if (modelData.id === "clock") if (modelData.id === "clock")
return SettingsData.clockCompactMode ? "zoom_out" : "zoom_in" return SettingsData.clockCompactMode ? "zoom_out" : "zoom_in";
if (modelData.id === "focusedWindow") if (modelData.id === "focusedWindow")
return SettingsData.focusedWindowCompactMode ? "zoom_out" : "zoom_in" return SettingsData.focusedWindowCompactMode ? "zoom_out" : "zoom_in";
if (modelData.id === "runningApps") if (modelData.id === "runningApps")
return SettingsData.runningAppsCompactMode ? "zoom_out" : "zoom_in" return SettingsData.runningAppsCompactMode ? "zoom_out" : "zoom_in";
if (modelData.id === "keyboard_layout_name") if (modelData.id === "keyboard_layout_name")
return SettingsData.keyboardLayoutNameCompactMode ? "zoom_out" : "zoom_in" return SettingsData.keyboardLayoutNameCompactMode ? "zoom_out" : "zoom_in";
return "zoom_in" return "zoom_in";
} }
iconSize: 16 iconSize: 16
iconColor: { iconColor: {
if (modelData.id === "clock") if (modelData.id === "clock")
return SettingsData.clockCompactMode ? Theme.primary : Theme.outline return SettingsData.clockCompactMode ? Theme.primary : Theme.outline;
if (modelData.id === "focusedWindow") if (modelData.id === "focusedWindow")
return SettingsData.focusedWindowCompactMode ? Theme.primary : Theme.outline return SettingsData.focusedWindowCompactMode ? Theme.primary : Theme.outline;
if (modelData.id === "runningApps") if (modelData.id === "runningApps")
return SettingsData.runningAppsCompactMode ? Theme.primary : Theme.outline return SettingsData.runningAppsCompactMode ? Theme.primary : Theme.outline;
if (modelData.id === "keyboard_layout_name") if (modelData.id === "keyboard_layout_name")
return SettingsData.keyboardLayoutNameCompactMode ? Theme.primary : Theme.outline return SettingsData.keyboardLayoutNameCompactMode ? Theme.primary : Theme.outline;
return Theme.outline return Theme.outline;
} }
onClicked: { onClicked: {
if (modelData.id === "clock") { if (modelData.id === "clock") {
root.compactModeChanged( root.compactModeChanged("clock", !SettingsData.clockCompactMode);
"clock",
!SettingsData.clockCompactMode)
} else if (modelData.id === "focusedWindow") { } else if (modelData.id === "focusedWindow") {
root.compactModeChanged( root.compactModeChanged("focusedWindow", !SettingsData.focusedWindowCompactMode);
"focusedWindow",
!SettingsData.focusedWindowCompactMode)
} else if (modelData.id === "runningApps") { } else if (modelData.id === "runningApps") {
root.compactModeChanged( root.compactModeChanged("runningApps", !SettingsData.runningAppsCompactMode);
"runningApps",
!SettingsData.runningAppsCompactMode)
} else if (modelData.id === "keyboard_layout_name") { } else if (modelData.id === "keyboard_layout_name") {
root.compactModeChanged( root.compactModeChanged("keyboard_layout_name", !SettingsData.keyboardLayoutNameCompactMode);
"keyboard_layout_name",
!SettingsData.keyboardLayoutNameCompactMode)
} }
} }
onEntered: { onEntered: {
compactTooltipLoader.active = true let tooltipText = "Toggle Compact Mode";
if (compactTooltipLoader.item) { if (modelData.id === "clock") {
let tooltipText = "Toggle Compact Mode" tooltipText = SettingsData.clockCompactMode ? "Full Size" : "Compact";
if (modelData.id === "clock") { } else if (modelData.id === "focusedWindow") {
tooltipText = SettingsData.clockCompactMode ? "Full Size" : "Compact" tooltipText = SettingsData.focusedWindowCompactMode ? "Full Size" : "Compact";
} else if (modelData.id === "focusedWindow") { } else if (modelData.id === "runningApps") {
tooltipText = SettingsData.focusedWindowCompactMode ? "Full Size" : "Compact" tooltipText = SettingsData.runningAppsCompactMode ? "Full Size" : "Compact";
} else if (modelData.id === "runningApps") { } else if (modelData.id === "keyboard_layout_name") {
tooltipText = SettingsData.runningAppsCompactMode ? "Full Size" : "Compact" tooltipText = SettingsData.keyboardLayoutNameCompactMode ? "Full Size" : "Compact";
} else if (modelData.id === "keyboard_layout_name") {
tooltipText = SettingsData.keyboardLayoutNameCompactMode ? "Full Size" : "Compact"
}
const p = compactModeButton.mapToItem(null, compactModeButton.width / 2, 0)
compactTooltipLoader.item.show(tooltipText, p.x, p.y - 40, null)
} }
sharedTooltip.show(tooltipText, compactModeButton, 0, 0);
} }
onExited: { onExited: {
if (compactTooltipLoader.item) { sharedTooltip.hide();
compactTooltipLoader.item.hide()
}
compactTooltipLoader.active = false
} }
} }
@@ -513,21 +431,14 @@ Column {
iconSize: 16 iconSize: 16
iconColor: SettingsData.runningAppsGroupByApp ? Theme.primary : Theme.outline iconColor: SettingsData.runningAppsGroupByApp ? Theme.primary : Theme.outline
onClicked: { onClicked: {
SettingsData.set("runningAppsGroupByApp", !SettingsData.runningAppsGroupByApp) SettingsData.set("runningAppsGroupByApp", !SettingsData.runningAppsGroupByApp);
} }
onEntered: { onEntered: {
groupByAppTooltipLoader.active = true const tooltipText = SettingsData.runningAppsGroupByApp ? "Ungroup" : "Group by App";
if (groupByAppTooltipLoader.item) { sharedTooltip.show(tooltipText, groupByAppButton, 0, 0);
const tooltipText = SettingsData.runningAppsGroupByApp ? "Ungroup" : "Group by App"
const p = groupByAppButton.mapToItem(null, groupByAppButton.width / 2, 0)
groupByAppTooltipLoader.item.show(tooltipText, p.x, p.y - 40, null)
}
} }
onExited: { onExited: {
if (groupByAppTooltipLoader.item) { sharedTooltip.hide();
groupByAppTooltipLoader.item.hide()
}
groupByAppTooltipLoader.active = false
} }
} }
@@ -569,15 +480,15 @@ Column {
iconSize: 18 iconSize: 18
iconColor: Theme.outline iconColor: Theme.outline
onClicked: { onClicked: {
console.log("Control Center three-dot button clicked for widget:", modelData.id) console.log("Control Center three-dot button clicked for widget:", modelData.id);
controlCenterContextMenu.widgetData = modelData controlCenterContextMenu.widgetData = modelData;
controlCenterContextMenu.sectionId = root.sectionId controlCenterContextMenu.sectionId = root.sectionId;
controlCenterContextMenu.widgetIndex = index controlCenterContextMenu.widgetIndex = index;
// Position relative to the action buttons row, not the specific button // Position relative to the action buttons row, not the specific button
var parentPos = parent.mapToItem(root, 0, 0) var parentPos = parent.mapToItem(root, 0, 0);
controlCenterContextMenu.x = parentPos.x - 210 // Position to the left with margin controlCenterContextMenu.x = parentPos.x - 210; // Position to the left with margin
controlCenterContextMenu.y = parentPos.y - 10 // Slightly above controlCenterContextMenu.y = parentPos.y - 10; // Slightly above
controlCenterContextMenu.open() controlCenterContextMenu.open();
} }
} }
@@ -588,15 +499,15 @@ Column {
iconSize: 18 iconSize: 18
iconColor: Theme.outline iconColor: Theme.outline
onClicked: { onClicked: {
console.log("Privacy three-dot button clicked for widget:", modelData.id) console.log("Privacy three-dot button clicked for widget:", modelData.id);
privacyContextMenu.widgetData = modelData privacyContextMenu.widgetData = modelData;
privacyContextMenu.sectionId = root.sectionId privacyContextMenu.sectionId = root.sectionId;
privacyContextMenu.widgetIndex = index privacyContextMenu.widgetIndex = index;
// Position relative to the action buttons row, not the specific button // Position relative to the action buttons row, not the specific button
var parentPos = parent.mapToItem(root, 0, 0) var parentPos = parent.mapToItem(root, 0, 0);
privacyContextMenu.x = parentPos.x - 210 // Position to the left with margin privacyContextMenu.x = parentPos.x - 210; // Position to the left with margin
privacyContextMenu.y = parentPos.y - 10 // Slightly above privacyContextMenu.y = parentPos.y - 10; // Slightly above
privacyContextMenu.open() privacyContextMenu.open();
} }
} }
@@ -608,23 +519,14 @@ Column {
iconSize: 18 iconSize: 18
iconColor: modelData.enabled ? Theme.primary : Theme.outline iconColor: modelData.enabled ? Theme.primary : Theme.outline
onClicked: { onClicked: {
root.itemEnabledChanged(root.sectionId, root.itemEnabledChanged(root.sectionId, modelData.id, !modelData.enabled);
modelData.id,
!modelData.enabled)
} }
onEntered: { onEntered: {
visibilityTooltipLoader.active = true const tooltipText = modelData.enabled ? "Hide" : "Show";
if (visibilityTooltipLoader.item) { sharedTooltip.show(tooltipText, visibilityButton, 0, 0);
const tooltipText = modelData.enabled ? "Hide" : "Show"
const p = visibilityButton.mapToItem(null, visibilityButton.width / 2, 0)
visibilityTooltipLoader.item.show(tooltipText, p.x, p.y - 40, null)
}
} }
onExited: { onExited: {
if (visibilityTooltipLoader.item) { sharedTooltip.hide();
visibilityTooltipLoader.item.hide()
}
visibilityTooltipLoader.active = false
} }
} }
@@ -639,11 +541,9 @@ Column {
iconSize: 14 iconSize: 14
iconColor: Theme.outline iconColor: Theme.outline
onClicked: { onClicked: {
var currentSize = modelData.size || 20 var currentSize = modelData.size || 20;
var newSize = Math.max(5, currentSize - 5) var newSize = Math.max(5, currentSize - 5);
root.spacerSizeChanged(root.sectionId, root.spacerSizeChanged(root.sectionId, index, newSize);
index,
newSize)
} }
} }
@@ -660,12 +560,9 @@ Column {
iconSize: 14 iconSize: 14
iconColor: Theme.outline iconColor: Theme.outline
onClicked: { onClicked: {
var currentSize = modelData.size || 20 var currentSize = modelData.size || 20;
var newSize = Math.min(5000, var newSize = Math.min(5000, currentSize + 5);
currentSize + 5) root.spacerSizeChanged(root.sectionId, index, newSize);
root.spacerSizeChanged(root.sectionId,
index,
newSize)
} }
} }
} }
@@ -676,7 +573,7 @@ Column {
iconSize: 18 iconSize: 18
iconColor: Theme.error iconColor: Theme.error
onClicked: { onClicked: {
root.removeWidget(root.sectionId, index) root.removeWidget(root.sectionId, index);
} }
} }
} }
@@ -696,34 +593,29 @@ Column {
drag.maximumY: itemsList.height drag.maximumY: itemsList.height
preventStealing: true preventStealing: true
onPressed: { onPressed: {
delegateItem.z = 2 delegateItem.z = 2;
delegateItem.originalY = delegateItem.y delegateItem.originalY = delegateItem.y;
} }
onReleased: { onReleased: {
delegateItem.z = 1 delegateItem.z = 1;
if (drag.active) { if (drag.active) {
var newIndex = Math.round( var newIndex = Math.round(delegateItem.y / (delegateItem.height + itemsList.spacing));
delegateItem.y / (delegateItem.height newIndex = Math.max(0, Math.min(newIndex, root.items.length - 1));
+ itemsList.spacing))
newIndex = Math.max(
0, Math.min(newIndex,
root.items.length - 1))
if (newIndex !== index) { if (newIndex !== index) {
var newItems = root.items.slice() var newItems = root.items.slice();
var draggedItem = newItems.splice(index, var draggedItem = newItems.splice(index, 1)[0];
1)[0] newItems.splice(newIndex, 0, draggedItem);
newItems.splice(newIndex, 0, draggedItem)
root.itemOrderChanged(newItems.map(item => { root.itemOrderChanged(newItems.map(item => {
return ({ return ({
"id": item.id, "id": item.id,
"enabled": item.enabled, "enabled": item.enabled,
"size": item.size "size": item.size
}) });
})) }));
} }
} }
delegateItem.x = 0 delegateItem.x = 0;
delegateItem.y = delegateItem.originalY delegateItem.y = delegateItem.originalY;
} }
} }
@@ -744,12 +636,8 @@ Column {
width: 200 width: 200
height: 40 height: 40
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: addButtonArea.containsMouse ? Theme.primaryContainer : Qt.rgba( color: addButtonArea.containsMouse ? Theme.primaryContainer : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
Theme.surfaceVariant.r, border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
Theme.surfaceVariant.g,
Theme.surfaceVariant.b, 0.3)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
Theme.outline.b, 0.2)
border.width: 0 border.width: 0
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@@ -769,7 +657,7 @@ Column {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: { onClicked: {
root.addWidget(root.sectionId) root.addWidget(root.sectionId);
} }
} }
@@ -788,7 +676,6 @@ Column {
property string sectionId: "" property string sectionId: ""
property int widgetIndex: -1 property int widgetIndex: -1
width: 200 width: 200
height: 120 height: 120
padding: 0 padding: 0
@@ -797,11 +684,11 @@ Column {
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onOpened: { onOpened: {
console.log("Control Center context menu opened") console.log("Control Center context menu opened");
} }
onClosed: { onClosed: {
console.log("Control Center context menu closed") console.log("Control Center context menu closed");
} }
background: Rectangle { background: Rectangle {
@@ -856,7 +743,7 @@ Column {
height: 20 height: 20
checked: SettingsData.controlCenterShowNetworkIcon checked: SettingsData.controlCenterShowNetworkIcon
onToggled: { onToggled: {
root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showNetworkIcon", toggled) root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showNetworkIcon", toggled);
} }
} }
@@ -866,8 +753,8 @@ Column {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: { onPressed: {
networkToggle.checked = !networkToggle.checked networkToggle.checked = !networkToggle.checked;
root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showNetworkIcon", networkToggle.checked) root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showNetworkIcon", networkToggle.checked);
} }
} }
} }
@@ -909,7 +796,7 @@ Column {
height: 20 height: 20
checked: SettingsData.controlCenterShowBluetoothIcon checked: SettingsData.controlCenterShowBluetoothIcon
onToggled: { onToggled: {
root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showBluetoothIcon", toggled) root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showBluetoothIcon", toggled);
} }
} }
@@ -919,8 +806,8 @@ Column {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: { onPressed: {
bluetoothToggle.checked = !bluetoothToggle.checked bluetoothToggle.checked = !bluetoothToggle.checked;
root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showBluetoothIcon", bluetoothToggle.checked) root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showBluetoothIcon", bluetoothToggle.checked);
} }
} }
} }
@@ -962,7 +849,7 @@ Column {
height: 20 height: 20
checked: SettingsData.controlCenterShowAudioIcon checked: SettingsData.controlCenterShowAudioIcon
onToggled: { onToggled: {
root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showAudioIcon", toggled) root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showAudioIcon", toggled);
} }
} }
@@ -972,13 +859,12 @@ Column {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: { onPressed: {
audioToggle.checked = !audioToggle.checked audioToggle.checked = !audioToggle.checked;
root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showAudioIcon", audioToggle.checked) root.controlCenterSettingChanged(controlCenterContextMenu.sectionId, controlCenterContextMenu.widgetIndex, "showAudioIcon", audioToggle.checked);
} }
} }
} }
} }
} }
} }
@@ -989,7 +875,6 @@ Column {
property string sectionId: "" property string sectionId: ""
property int widgetIndex: -1 property int widgetIndex: -1
width: 200 width: 200
height: 160 height: 160
padding: 0 padding: 0
@@ -998,11 +883,11 @@ Column {
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onOpened: { onOpened: {
console.log("Privacy context menu opened") console.log("Privacy context menu opened");
} }
onClosed: { onClosed: {
console.log("Privacy Center context menu closed") console.log("Privacy Center context menu closed");
} }
background: Rectangle { background: Rectangle {
@@ -1079,7 +964,7 @@ Column {
height: 20 height: 20
checked: SettingsData.privacyShowMicIcon checked: SettingsData.privacyShowMicIcon
onToggled: toggled => { onToggled: toggled => {
root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showMicIcon", toggled) root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showMicIcon", toggled);
} }
} }
@@ -1089,8 +974,8 @@ Column {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: { onPressed: {
micToggle.checked = !micToggle.checked micToggle.checked = !micToggle.checked;
root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showMicIcon", micToggle.checked) root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showMicIcon", micToggle.checked);
} }
} }
} }
@@ -1131,7 +1016,7 @@ Column {
height: 20 height: 20
checked: SettingsData.privacyShowCameraIcon checked: SettingsData.privacyShowCameraIcon
onToggled: toggled => { onToggled: toggled => {
root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showCameraIcon", toggled) root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showCameraIcon", toggled);
} }
} }
@@ -1141,8 +1026,8 @@ Column {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: { onPressed: {
cameraToggle.checked = !cameraToggle.checked cameraToggle.checked = !cameraToggle.checked;
root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showCameraIcon", cameraToggle.checked) root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showCameraIcon", cameraToggle.checked);
} }
} }
} }
@@ -1183,7 +1068,7 @@ Column {
height: 20 height: 20
checked: SettingsData.privacyShowScreenShareIcon checked: SettingsData.privacyShowScreenShareIcon
onToggled: toggled => { onToggled: toggled => {
root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showScreenSharingIcon", toggled) root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showScreenSharingIcon", toggled);
} }
} }
@@ -1193,61 +1078,12 @@ Column {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: { onPressed: {
screenshareToggle.checked = !screenshareToggle.checked screenshareToggle.checked = !screenshareToggle.checked;
root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showScreenSharingIcon", screenshareToggle.checked) root.privacySettingChanged(privacyContextMenu.sectionId, privacyContextMenu.widgetIndex, "showScreenSharingIcon", screenshareToggle.checked);
} }
} }
} }
} }
} }
} }
Loader {
id: smallTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
Loader {
id: mediumTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
Loader {
id: largeTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
Loader {
id: compactTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
Loader {
id: visibilityTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
Loader {
id: minimumWidthTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
Loader {
id: groupByAppTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
Loader {
id: showSwapTooltipLoader
active: false
sourceComponent: DankTooltip {}
}
} }

83
quickshell/Widgets/DankTooltipV2.qml Normal file
View File

@@ -0,0 +1,83 @@
import QtQuick
import QtQuick.Controls
import qs.Common
Item {
id: root
property string text: ""
function show(text, item, offsetX, offsetY) {
if (!item) return;
tooltip.parent = item.Window.window?.contentItem || item;
tooltip.text = text;
const itemPos = item.mapToItem(tooltip.parent, 0, 0);
const itemCenterX = itemPos.x + item.width / 2;
const itemBottomY = itemPos.y + item.height;
tooltip.x = itemCenterX - tooltip.width / 2 + (offsetX || 0);
tooltip.y = itemBottomY + 8 + (offsetY || 0);
tooltip.open();
}
function hide() {
tooltip.close();
}
Popup {
id: tooltip
property string text: ""
width: Math.min(300, Math.max(120, textContent.implicitWidth + Theme.spacingM * 2))
height: textContent.implicitHeight + Theme.spacingS * 2
padding: 0
closePolicy: Popup.NoAutoClose
modal: false
dim: false
background: Rectangle {
color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
radius: Theme.cornerRadius
border.width: 1
border.color: Theme.outlineMedium
}
contentItem: Text {
id: textContent
text: tooltip.text
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
wrapMode: Text.NoWrap
maximumLineCount: 1
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
enter: Transition {
NumberAnimation {
property: "opacity"
from: 0
to: 1
duration: 150
easing.type: Easing.OutQuad
}
}
exit: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: 100
easing.type: Easing.InQuad
}
}
}
}