dock: previews

This commit is contained in:
end-4
2025-05-30 11:27:57 +02:00
parent 198bcc6a3a
commit 3cd8865a50
6 changed files with 267 additions and 42 deletions
@@ -19,6 +19,7 @@ Button {
property real buttonRadius: Appearance?.rounding?.small ?? 4
property real buttonRadiusPressed: buttonRadius
property var altAction
property var middleClickAction
property bool bounce: true
property real baseWidth: contentItem.implicitWidth + padding * 2
property real baseHeight: contentItem.implicitHeight + padding * 2
@@ -67,9 +68,13 @@ Button {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
onPressed: (event) => {
if(event.button === Qt.RightButton) {
if (event.button === Qt.MiddleButton) {
if (root.middleClickAction) root.middleClickAction();
return;
}
if (event.button === Qt.RightButton) {
if (root.altAction) root.altAction();
return;
}
@@ -21,6 +21,7 @@ Button {
property int rippleDuration: 1200
property bool rippleEnabled: true
property var altAction
property var middleClickAction
property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
@@ -58,12 +59,16 @@ Button {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
onPressed: (event) => {
if(event.button === Qt.RightButton) {
if (root.altAction) root.altAction();
return;
}
if(event.button === Qt.MiddleButton) {
if (root.middleClickAction) root.middleClickAction();
return;
}
root.down = true
if (!root.rippleEnabled) return;
const {x,y} = event
+2 -5
View File
@@ -23,7 +23,7 @@ Scope { // Scope
id: dockRoot
screen: modelData
property bool reveal: root.pinned || dockMouseArea.containsMouse
property bool reveal: root.pinned || dockMouseArea.containsMouse || dockApps.requestDockShow
anchors {
bottom: true
@@ -35,9 +35,6 @@ Scope { // Scope
cheatsheetLoader.active = false
}
exclusiveZone: root.pinned ? implicitHeight - Appearance.sizes.hyprlandGapsOut : 0
Component.onCompleted: {
console.log(ConfigOptions.dock.hoverRegionHeight)
}
implicitWidth: dockBackground.implicitWidth
WlrLayershell.namespace: "quickshell:dock"
@@ -114,7 +111,7 @@ Scope { // Scope
}
}
DockSeparator {}
DockApps {}
DockApps { id: dockApps }
DockSeparator {}
DockButton {
onClicked: Hyprland.dispatch("global quickshell:overviewToggle")
@@ -0,0 +1,44 @@
import "root:/"
import "root:/services"
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import Quickshell.Io
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland
DockButton {
id: appButton
required property var appToplevel
property var appListRoot
property int lastFocused: -1
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
onEntered: {
appListRoot.lastHoveredButton = appButton
appListRoot.buttonHovered = true
lastFocused = appToplevel.toplevels.length - 1
}
onExited: {
if (appListRoot.lastHoveredButton === appButton) {
appListRoot.buttonHovered = false
}
}
}
onClicked: {
lastFocused = (lastFocused + 1) % appToplevel.toplevels.length
appToplevel.toplevels[lastFocused].activate()
}
contentItem: IconImage {
id: iconImage
source: Quickshell.iconPath(AppSearch.guessIcon(appToplevel.appId), "image-missing")
}
}
+207 -33
View File
@@ -2,7 +2,7 @@ import "root:/"
import "root:/services"
import "root:/modules/common"
import "root:/modules/common/widgets"
import "root:/modules/common/functions/icons.js" as Icons
import Qt5Compat.GraphicalEffects
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
@@ -13,44 +13,218 @@ import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland
RowLayout {
readonly property list<var> windowList: HyprlandData.windowList
readonly property list<string> apps: {
let uniqueClasses = new Set()
for (let window of windowList) {
if (window.class && window.class.trim() !== "") {
uniqueClasses.add(window.class)
}
}
return Array.from(uniqueClasses)
}
readonly property var windowsByApp: {
let grouped = {}
for (let window of windowList) {
if (window.class && window.class.trim() !== "") {
if (!grouped[window.class]) {
grouped[window.class] = []
Item {
id: root
property real maxWindowPreviewHeight: 200
property real maxWindowPreviewWidth: 350
property Item lastHoveredButton
property bool buttonHovered: false
property bool requestDockShow: previewPopup.show
implicitWidth: rowLayout.implicitWidth
implicitHeight: rowLayout.implicitHeight
RowLayout {
id: rowLayout
spacing: 2
Repeater {
model: ScriptModel {
objectProp: "appId"
values: {
var map = new Map();
for (const toplevel of ToplevelManager.toplevels.values) {
if (!map.has(toplevel.appId.toLowerCase())) map.set(toplevel.appId.toLowerCase(), []);
map.get(toplevel.appId.toLowerCase()).push(toplevel);
}
var values = [];
for (const [key, value] of map) {
values.push({ appId: key, toplevels: value });
}
return values;
}
grouped[window.class].push(window)
}
delegate: DockAppButton {
required property var modelData
appToplevel: modelData
appListRoot: root
}
}
return grouped
}
Repeater {
model: apps
delegate: DockButton {
required property string modelData
property int lastFocusedIndex: -1
contentItem: IconImage {
source: Quickshell.iconPath(Icons.noKnowledgeIconGuess(modelData), "image-missing")
PopupWindow {
id: previewPopup
property var appTopLevel: root.lastHoveredButton?.appToplevel
property bool allPreviewsReady: false
Connections {
target: root
onLastHoveredButtonChanged: previewPopup.allPreviewsReady = false; // Reset readiness when the hovered button changes
}
function updatePreviewReadiness() {
for(var i = 0; i < previewRowLayout.children.length; i++) {
const view = previewRowLayout.children[i];
if (view.hasContent === false) {
allPreviewsReady = false;
return;
}
}
onClicked: () => {
lastFocusedIndex = (lastFocusedIndex + 1) % windowsByApp[modelData].length
const targetWindow = windowsByApp[modelData][lastFocusedIndex];
const targetAddress = targetWindow.address;
Hyprland.dispatch(`focuswindow address:${targetAddress}`);
allPreviewsReady = true;
}
property bool shouldShow: {
const hoverConditions = (popupMouseArea.containsMouse || root.buttonHovered)
return hoverConditions && allPreviewsReady;
}
property bool show: false
onShouldShowChanged: {
if (shouldShow) {
// show = true;
updateTimer.restart();
} else {
updateTimer.restart();
}
}
Timer {
id: updateTimer
interval: 100
onTriggered: {
previewPopup.show = previewPopup.shouldShow
}
}
anchor {
window: root.QsWindow.window
rect: {
if (root.lastHoveredButton === null) return; // Don't update
const parentWindow = root.QsWindow.window
const mappedPosition = parentWindow.mapFromItem(root.lastHoveredButton, root.lastHoveredButton.width / 2, root.lastHoveredButton.height / 2)
const modifiedX = mappedPosition.x - implicitWidth / 2
const modifiedY = 0
return Qt.rect(modifiedX, modifiedY, implicitWidth, implicitHeight)
}
gravity: Edges.Top
edges: Edges.Top
}
visible: popupBackground.visible
color: "transparent"
implicitWidth: root.QsWindow.window.width
implicitHeight: popupBackground.implicitHeight + Appearance.sizes.elevationMargin * 2
MouseArea {
id: popupMouseArea
anchors.bottom: parent.bottom
implicitWidth: popupBackground.implicitWidth + Appearance.sizes.elevationMargin * 2
implicitHeight: popupBackground.implicitHeight + Appearance.sizes.elevationMargin * 2
anchors.horizontalCenter: parent.horizontalCenter
hoverEnabled: true
StyledRectangularShadow {
target: popupBackground
opacity: previewPopup.show ? 1 : 0
visible: opacity > 0
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
}
Rectangle {
id: popupBackground
property real padding: 5
opacity: previewPopup.show ? 1 : 0
visible: opacity > 0
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
color: Appearance.colors.colLayer1
radius: Appearance.rounding.normal
anchors.bottom: parent.bottom
anchors.bottomMargin: Appearance.sizes.elevationMargin
anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: previewRowLayout.implicitWidth + padding * 2
implicitHeight: root.maxWindowPreviewHeight + padding * 2
RowLayout {
id: previewRowLayout
anchors.centerIn: parent
Repeater {
model: previewPopup.appTopLevel?.toplevels ?? []
RippleButton {
id: windowButton
required property var modelData
padding: 0
middleClickAction: () => {
windowButton.modelData?.close();
}
onClicked: {
windowButton.modelData?.activate();
}
contentItem: Item {
implicitWidth: screencopyView.implicitWidth
implicitHeight: screencopyView.implicitHeight
ScreencopyView {
id: screencopyView
anchors.centerIn: parent
captureSource: previewPopup ? windowButton.modelData : null
live: true
paintCursor: true
constraintSize: Qt.size(root.maxWindowPreviewWidth, root.maxWindowPreviewHeight)
onHasContentChanged: {
previewPopup.updatePreviewReadiness();
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: screencopyView.width
height: screencopyView.height
radius: Appearance.rounding.small
}
}
}
ButtonGroup {
contentWidth: parent.width - anchors.margins * 2
anchors {
top: parent.top
left: parent.left
right: parent.right
margins: 3
}
WrapperRectangle {
Layout.fillWidth: true
color: Appearance.m3colors.m3surfaceContainer
radius: Appearance.rounding.small
margin: 5
StyledText {
Layout.fillWidth: true
font.pixelSize: Appearance.font.pixelSize.small
text: windowButton.modelData?.title
elide: Text.ElideRight
color: Appearance.m3colors.m3onSurface
}
}
GroupButton {
id: closeButton
colBackground: Appearance.m3colors.m3surfaceContainer
baseWidth: 30
baseHeight: 30
buttonRadius: Appearance.rounding.full
contentItem: MaterialSymbol {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
text: "close"
iconSize: Appearance.font.pixelSize.normal
color: Appearance.m3colors.m3onSurface
}
onClicked: {
windowButton.modelData?.close();
}
}
}
}
}
}
}
}
}
}
}
}
@@ -7,7 +7,7 @@ import QtQuick.Layouts
RippleButton {
Layout.fillHeight: true
implicitWidth: background.height
implicitWidth: implicitHeight - topInset - bottomInset
buttonRadius: Appearance.rounding.normal
topInset: dockVisualBackground.margin + dockRow.padding