Add dock & setting for it, edit StyledTooltip, move settings tabs around
This commit is contained in:
Ly-sec
parent
74b233798d
commit
f493fdea44
13 changed files with 493 additions and 53 deletions
349
Widgets/Dock.qml
Normal file
349
Widgets/Dock.qml
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import qs.Settings
|
||||
import qs.Components
|
||||
|
||||
PanelWindow {
|
||||
id: taskbarWindow
|
||||
visible: Settings.settings.showDock
|
||||
screen: (typeof modelData !== 'undefined' ? modelData : null)
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
anchors.bottom: true
|
||||
anchors.left: true
|
||||
anchors.right: true
|
||||
focusable: false
|
||||
color: "transparent"
|
||||
implicitHeight: 43
|
||||
|
||||
// Auto-hide properties
|
||||
property bool autoHide: true
|
||||
property bool hidden: true
|
||||
property int hideDelay: 500
|
||||
property int showDelay: 100
|
||||
property int hideAnimationDuration: 200
|
||||
property int showAnimationDuration: 150
|
||||
property int peekHeight: 2
|
||||
property int fullHeight: taskbarContainer.height
|
||||
|
||||
// Track hover state
|
||||
property bool dockHovered: false
|
||||
property bool anyAppHovered: false
|
||||
|
||||
// Context menu properties
|
||||
property bool contextMenuVisible: false
|
||||
property var contextMenuTarget: null
|
||||
property var contextMenuToplevel: null
|
||||
|
||||
// Timer for auto-hide delay
|
||||
Timer {
|
||||
id: hideTimer
|
||||
interval: hideDelay
|
||||
onTriggered: if (autoHide && !dockHovered && !anyAppHovered && !contextMenuVisible) hidden = true
|
||||
}
|
||||
|
||||
// Timer for show delay
|
||||
Timer {
|
||||
id: showTimer
|
||||
interval: showDelay
|
||||
onTriggered: hidden = false
|
||||
}
|
||||
|
||||
// Behavior for smooth hide/show animations
|
||||
Behavior on margins.bottom {
|
||||
NumberAnimation {
|
||||
duration: hidden ? hideAnimationDuration : showAnimationDuration
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
|
||||
// Mouse area at screen bottom to detect entry and keep dock visible
|
||||
MouseArea {
|
||||
id: screenEdgeMouseArea
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: 10
|
||||
hoverEnabled: true
|
||||
propagateComposedEvents: true
|
||||
|
||||
onEntered: if (autoHide && hidden) showTimer.start()
|
||||
onExited: if (autoHide && !hidden && !dockHovered && !anyAppHovered && !contextMenuVisible) hideTimer.start()
|
||||
}
|
||||
|
||||
margins.bottom: hidden ? -(fullHeight - peekHeight) : 0
|
||||
|
||||
Rectangle {
|
||||
id: taskbarContainer
|
||||
width: taskbar.width + 40
|
||||
height: Settings.settings.taskbarIconSize + 20
|
||||
topLeftRadius: 16
|
||||
topRightRadius: 16
|
||||
color: Theme.backgroundSecondary
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
MouseArea {
|
||||
id: dockMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
propagateComposedEvents: true
|
||||
|
||||
onEntered: {
|
||||
dockHovered = true
|
||||
if (autoHide) {
|
||||
showTimer.stop()
|
||||
hideTimer.stop()
|
||||
hidden = false
|
||||
}
|
||||
}
|
||||
onExited: {
|
||||
dockHovered = false
|
||||
if (autoHide && !anyAppHovered && !contextMenuVisible) hideTimer.start()
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: taskbar
|
||||
width: runningAppsRow.width
|
||||
height: parent.height - 10
|
||||
anchors.centerIn: parent
|
||||
|
||||
StyledTooltip { id: styledTooltip }
|
||||
|
||||
function getAppIcon(toplevel: Toplevel): string {
|
||||
if (!toplevel) return "";
|
||||
let icon = Quickshell.iconPath(toplevel.appId?.toLowerCase(), true);
|
||||
if (!icon) icon = Quickshell.iconPath(toplevel.appId, true);
|
||||
if (!icon) icon = Quickshell.iconPath(toplevel.title?.toLowerCase(), true);
|
||||
if (!icon) icon = Quickshell.iconPath(toplevel.title, true);
|
||||
return icon || Quickshell.iconPath("application-x-executable", true);
|
||||
}
|
||||
|
||||
Row {
|
||||
id: runningAppsRow
|
||||
spacing: 12
|
||||
height: parent.height
|
||||
anchors.centerIn: parent
|
||||
|
||||
Repeater {
|
||||
model: ToplevelManager ? ToplevelManager.toplevels : null
|
||||
|
||||
delegate: Rectangle {
|
||||
id: appButton
|
||||
width: Settings.settings.taskbarIconSize + 8
|
||||
height: Settings.settings.taskbarIconSize + 8
|
||||
radius: Math.max(6, Settings.settings.taskbarIconSize * 0.3)
|
||||
color: isActive ? Theme.accentPrimary : (hovered ? Theme.surfaceVariant : "transparent")
|
||||
border.color: isActive ? Qt.darker(Theme.accentPrimary, 1.2) : "transparent"
|
||||
border.width: 1
|
||||
|
||||
property bool isActive: ToplevelManager.activeToplevel && ToplevelManager.activeToplevel === modelData
|
||||
property bool hovered: appMouseArea.containsMouse
|
||||
property string appId: modelData ? modelData.appId : ""
|
||||
property string appTitle: modelData ? modelData.title : ""
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 150 } }
|
||||
Behavior on border.color { ColorAnimation { duration: 150 } }
|
||||
|
||||
IconImage {
|
||||
id: appIcon
|
||||
width: Math.max(20, Settings.settings.taskbarIconSize * 0.75)
|
||||
height: Math.max(20, Settings.settings.taskbarIconSize * 0.75)
|
||||
anchors.centerIn: parent
|
||||
source: taskbar.getAppIcon(modelData)
|
||||
smooth: true
|
||||
visible: source.toString() !== ""
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
visible: !appIcon.visible
|
||||
text: appButton.appId ? appButton.appId.charAt(0).toUpperCase() : "?"
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Math.max(14, Settings.settings.taskbarIconSize * 0.5)
|
||||
font.bold: true
|
||||
color: appButton.isActive ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: appMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
|
||||
|
||||
onEntered: {
|
||||
anyAppHovered = true
|
||||
if (!contextMenuVisible) {
|
||||
styledTooltip.text = appTitle || appId;
|
||||
styledTooltip.targetItem = appButton;
|
||||
styledTooltip.positionAbove = true;
|
||||
styledTooltip.tooltipVisible = true;
|
||||
}
|
||||
if (autoHide) {
|
||||
showTimer.stop()
|
||||
hideTimer.stop()
|
||||
hidden = false
|
||||
}
|
||||
}
|
||||
onExited: {
|
||||
anyAppHovered = false
|
||||
if (!contextMenuVisible) {
|
||||
styledTooltip.tooltipVisible = false;
|
||||
}
|
||||
if (autoHide && !dockHovered && !contextMenuVisible) hideTimer.start()
|
||||
}
|
||||
onClicked: function(mouse) {
|
||||
if (mouse.button === Qt.MiddleButton && modelData?.close) {
|
||||
modelData.close();
|
||||
}
|
||||
if (mouse.button === Qt.LeftButton && modelData?.activate) {
|
||||
modelData.activate();
|
||||
}
|
||||
if (mouse.button === Qt.RightButton) {
|
||||
styledTooltip.tooltipVisible = false;
|
||||
contextMenuTarget = appButton;
|
||||
contextMenuToplevel = modelData;
|
||||
contextMenuVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: isActive
|
||||
width: 6
|
||||
height: 6
|
||||
radius: 3
|
||||
color: Theme.onAccent
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottomMargin: -8
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Context Menu
|
||||
PanelWindow {
|
||||
id: contextMenuWindow
|
||||
visible: contextMenuVisible
|
||||
screen: taskbarWindow.screen
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
anchors.bottom: true
|
||||
anchors.left: true
|
||||
anchors.right: true
|
||||
color: "transparent"
|
||||
focusable: false
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
contextMenuVisible = false;
|
||||
contextMenuTarget = null;
|
||||
contextMenuToplevel = null;
|
||||
hidden = true; // Hide dock when context menu closes by clicking outside
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: contextMenuContainer
|
||||
width: 80
|
||||
height: contextMenuColumn.height + 0
|
||||
radius: 16
|
||||
color: Theme.backgroundPrimary
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
|
||||
x: {
|
||||
if (!contextMenuTarget) return 0;
|
||||
// Get position relative to screen
|
||||
const pos = contextMenuTarget.mapToItem(null, 0, 0);
|
||||
// Center horizontally above the icon
|
||||
let xPos = pos.x + (contextMenuTarget.width - width) / 2;
|
||||
// Constrain to screen edges
|
||||
return Math.max(0, Math.min(xPos, taskbarWindow.width - width));
|
||||
}
|
||||
|
||||
y: {
|
||||
if (!contextMenuTarget) return 0;
|
||||
// Position above the dock
|
||||
const pos = contextMenuTarget.mapToItem(null, 0, 0);
|
||||
return pos.y - height + 32;
|
||||
}
|
||||
|
||||
Column {
|
||||
id: contextMenuColumn
|
||||
anchors.centerIn: parent
|
||||
spacing: 4
|
||||
width: parent.width
|
||||
|
||||
// Close
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 32
|
||||
radius: 16
|
||||
color: closeMouseArea.containsMouse ? Theme.surfaceVariant : "transparent"
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 4
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "close"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Close"
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 14
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: closeMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onClicked: {
|
||||
if (contextMenuToplevel?.close) contextMenuToplevel.close();
|
||||
contextMenuVisible = false;
|
||||
hidden = true; // Hide the dock here as well
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animation
|
||||
scale: contextMenuVisible ? 1 : 0.9
|
||||
opacity: contextMenuVisible ? 1 : 0
|
||||
transformOrigin: Item.Bottom
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: 150
|
||||
easing.type: Easing.OutBack
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: 100 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -55,6 +55,7 @@ Item {
|
|||
StyledTooltip {
|
||||
id: notificationTooltip
|
||||
text: "Notification History"
|
||||
positionAbove: false
|
||||
tooltipVisible: false
|
||||
targetItem: bell
|
||||
delay: 200
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import qs.Settings
|
|||
Rectangle {
|
||||
id: profileSettingsCard
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 650
|
||||
Layout.preferredHeight: 690
|
||||
color: Theme.surface
|
||||
radius: 18
|
||||
|
||||
|
|
@ -353,6 +353,61 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
// Show Dock Setting
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 8
|
||||
|
||||
Text {
|
||||
text: "Show Dock"
|
||||
font.pixelSize: 13
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dockSwitch
|
||||
width: 52
|
||||
height: 32
|
||||
radius: 16
|
||||
color: Settings.settings.showDock ? Theme.accentPrimary : Theme.surfaceVariant
|
||||
border.color: Settings.settings.showDock ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 2
|
||||
|
||||
Rectangle {
|
||||
id: dockThumb
|
||||
width: 28
|
||||
height: 28
|
||||
radius: 14
|
||||
color: Theme.surface
|
||||
border.color: Theme.outline
|
||||
border.width: 1
|
||||
y: 2
|
||||
x: Settings.settings.showDock ? taskbarSwitch.width - width - 2 : 2
|
||||
|
||||
Behavior on x {
|
||||
NumberAnimation {
|
||||
duration: 200
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
Settings.settings.showDock = !Settings.settings.showDock
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show Media In Bar Setting
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ PanelWindow {
|
|||
anchors.leftMargin: 32
|
||||
anchors.rightMargin: 32
|
||||
anchors.topMargin: 32
|
||||
|
||||
spacing: 24
|
||||
|
||||
// Header
|
||||
|
|
@ -85,14 +84,14 @@ PanelWindow {
|
|||
}
|
||||
}
|
||||
|
||||
// Tabs bar (moved here)
|
||||
// Tabs bar (reordered)
|
||||
Tabs {
|
||||
id: settingsTabs
|
||||
Layout.fillWidth: true
|
||||
tabsModel: [
|
||||
{ icon: "cloud", label: "Weather" },
|
||||
{ icon: "settings", label: "System" },
|
||||
{ icon: "wallpaper", label: "Wallpaper" }
|
||||
{ icon: "wallpaper", label: "Wallpaper" },
|
||||
{ icon: "cloud", label: "Weather" }
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +114,32 @@ PanelWindow {
|
|||
id: tabContentLoader
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
sourceComponent: settingsTabs.currentIndex === 0 ? weatherTab : settingsTabs.currentIndex === 1 ? systemTab : wallpaperTab
|
||||
sourceComponent: settingsTabs.currentIndex === 0 ? systemTab : settingsTabs.currentIndex === 1 ? wallpaperTab : weatherTab
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: systemTab
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
ProfileSettings {
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
anchors.margins: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: wallpaperTab
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
WallpaperSettings {
|
||||
id: wallpaperSettings
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
anchors.margins: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -130,29 +154,6 @@ PanelWindow {
|
|||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: systemTab
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
ProfileSettings {
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
anchors.margins: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: wallpaperTab
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
WallpaperSettings {
|
||||
id: wallpaperSettings
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
anchors.margins: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -160,7 +161,6 @@ PanelWindow {
|
|||
// Function to open the modal and initialize temp values
|
||||
function openSettings() {
|
||||
visible = true;
|
||||
// Force focus on the text input after a short delay
|
||||
focusTimer.start();
|
||||
}
|
||||
|
||||
|
|
@ -174,20 +174,16 @@ PanelWindow {
|
|||
interval: 100
|
||||
repeat: false
|
||||
onTriggered: {
|
||||
if (visible)
|
||||
// Focus will be handled by the individual components
|
||||
{}
|
||||
}
|
||||
}
|
||||
|
||||
// Release focus when modal becomes invisible
|
||||
onVisibleChanged: {
|
||||
if (!visible) {
|
||||
// Focus will be handled by the individual components
|
||||
if (typeof weather !== 'undefined' && weather !== null && weather.fetchCityWeather) {
|
||||
weather.fetchCityWeather();
|
||||
if (visible) {
|
||||
// Focus logic can go here if needed
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh weather data when hidden
|
||||
onVisibleChanged: {
|
||||
if (!visible && typeof weather !== 'undefined' && weather !== null && weather.fetchCityWeather) {
|
||||
weather.fetchCityWeather();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -422,6 +422,12 @@ Rectangle {
|
|||
running: false
|
||||
}
|
||||
|
||||
Process {
|
||||
id: logoutProcess
|
||||
command: ["loginctl", "terminate-user", Quickshell.env("USER")]
|
||||
running: false
|
||||
}
|
||||
|
||||
function logout() {
|
||||
if (WorkspaceManager.isNiri) {
|
||||
logoutProcessNiri.running = true;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue