marcoallegretti/shift-shell
1
0
Fork 0
mirror of https://invent.kde.org/marcoa/shift-shell.git synced 2026-06-12 09:17:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polish convergence dock controls

Browse source
This commit is contained in:
Marco Allegretti 2026-04-29 08:39:22 +02:00
parent 566c7f69c3
commit 1ad9fb3e3d
1 changed files with 62 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
containments/homescreens/folio/qml/FavouritesBar.qml
View file

@ -37,6 +37,21 @@ MouseArea {
// Navigation buttons width (used to offset center positioning) // Navigation buttons width (used to offset center positioning)
readonly property real navButtonWidth: convergenceMode ? root.height : 0 readonly property real navButtonWidth: convergenceMode ? root.height : 0
readonly property real dockItemInset: convergenceMode ? Math.max(2, Kirigami.Units.smallSpacing / 2) : 0
readonly property real dockIconSize: Math.min(root.height * 0.56, Kirigami.Units.iconSizes.large)
function dockItemColor(pressed, hovered, active) {
if (pressed) {
return Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.18)
}
if (active) {
return Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, hovered ? 0.18 : 0.12)
}
if (hovered) {
return Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.08)
}
return "transparent"
}
// Center x for dock items (offset between nav buttons in convergence mode) // Center x for dock items (offset between nav buttons in convergence mode)
readonly property real dockCenterX: convergenceMode readonly property real dockCenterX: convergenceMode
@ -130,10 +145,7 @@ MouseArea {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: root.navButtonWidth width: root.navButtonWidth
color: homeMouseArea.containsPress color: "transparent"
? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.2)
: (homeMouseArea.containsMouse ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.1) : "transparent")
radius: Kirigami.Units.cornerRadius
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
Accessible.name: i18n("Home") Accessible.name: i18n("Home")
@ -155,9 +167,20 @@ MouseArea {
visible: homeButton.activeFocus visible: homeButton.activeFocus
} }
Rectangle {
anchors.fill: parent
anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius
color: root.dockItemColor(homeMouseArea.containsPress, homeMouseArea.containsMouse, false)
Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
}
Kirigami.Icon { Kirigami.Icon {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.min(parent.width, parent.height) * 0.75 width: root.dockIconSize
height: width height: width
source: "start-here-shift" source: "start-here-shift"
active: homeMouseArea.containsMouse active: homeMouseArea.containsMouse
@ -181,10 +204,7 @@ MouseArea {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: root.navButtonWidth width: root.navButtonWidth
color: overviewMouseArea.containsPress color: "transparent"
? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.2)
: (overviewMouseArea.containsMouse ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.1) : "transparent")
radius: Kirigami.Units.cornerRadius
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
Accessible.name: i18n("Overview") Accessible.name: i18n("Overview")
@ -206,9 +226,20 @@ MouseArea {
visible: overviewButton.activeFocus visible: overviewButton.activeFocus
} }
Rectangle {
anchors.fill: parent
anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius
color: root.dockItemColor(overviewMouseArea.containsPress, overviewMouseArea.containsMouse, false)
Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
}
Kirigami.Icon { Kirigami.Icon {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.min(parent.width, parent.height) * 0.75 width: root.dockIconSize
height: width height: width
source: "view-grid-symbolic" source: "view-grid-symbolic"
active: overviewMouseArea.containsMouse active: overviewMouseArea.containsMouse
@ -435,7 +466,7 @@ MouseArea {
maskManager: root.maskManager maskManager: root.maskManager
application: delegate.delegateModel.application application: delegate.delegateModel.application
name: folio.FolioSettings.showFavouritesAppLabels ? delegate.delegateModel.application.name : "" name: folio.FolioSettings.showFavouritesAppLabels ? delegate.delegateModel.application.name : ""
shadow: true shadow: !root.convergenceMode
turnToFolder: delegate.isAppHoveredOver turnToFolder: delegate.isAppHoveredOver
turnToFolderAnimEnabled: folio.HomeScreenState.isDraggingDelegate turnToFolderAnimEnabled: folio.HomeScreenState.isDraggingDelegate
@ -540,7 +571,7 @@ MouseArea {
id: appFolderDelegate id: appFolderDelegate
folio: root.folio folio: root.folio
maskManager: root.maskManager maskManager: root.maskManager
shadow: true shadow: !root.convergenceMode
folder: delegate.delegateModel.folder folder: delegate.delegateModel.folder
name: folio.FolioSettings.showFavouritesAppLabels ? delegate.delegateModel.folder.name : "" name: folio.FolioSettings.showFavouritesAppLabels ? delegate.delegateModel.folder.name : ""
@ -885,11 +916,11 @@ MouseArea {
id: dockSpacer id: dockSpacer
visible: root.showSpacer visible: root.showSpacer
x: (repeater.count - root.totalItemCount / 2) * root.dockCellWidth + root.dockCenterX - width / 2 x: (repeater.count - root.totalItemCount / 2) * root.dockCellWidth + root.dockCenterX - width / 2
y: parent.height * 0.2 y: parent.height * 0.28
width: Math.round(Kirigami.Units.devicePixelRatio) width: Math.round(Kirigami.Units.devicePixelRatio)
height: parent.height * 0.6 height: parent.height * 0.44
color: Kirigami.Theme.textColor color: Kirigami.Theme.textColor
opacity: 0.4 opacity: 0.22
} }
PlaceholderDelegate { PlaceholderDelegate {
@ -976,10 +1007,13 @@ MouseArea {
// Hover highlight background // Hover highlight background
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: taskMouseArea.containsPress color: root.dockItemColor(taskMouseArea.containsPress, taskMouseArea.containsMouse, taskDelegate.model.IsActive === true)
? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.2)
: (taskMouseArea.containsMouse ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.1) : "transparent") Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
} }
KeyboardHighlight { KeyboardHighlight {
@ -990,7 +1024,7 @@ MouseArea {
// Task icon // Task icon
Kirigami.Icon { Kirigami.Icon {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.min(parent.width, parent.height) * 0.6 width: root.dockIconSize
height: width height: width
source: taskDelegate.model.decoration source: taskDelegate.model.decoration
active: taskMouseArea.containsMouse active: taskMouseArea.containsMouse
@ -1039,7 +1073,7 @@ MouseArea {
Row { Row {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: Kirigami.Units.smallSpacing / 2 anchors.bottomMargin: Kirigami.Units.smallSpacing
spacing: Kirigami.Units.smallSpacing / 2 spacing: Kirigami.Units.smallSpacing / 2
Repeater { Repeater {
@ -1049,11 +1083,15 @@ MouseArea {
} }
Rectangle { Rectangle {
width: Kirigami.Units.smallSpacing * 1.5 width: taskDelegate.model.IsActive === true ? Kirigami.Units.smallSpacing * 3 : Kirigami.Units.smallSpacing * 1.5
height: width height: Math.max(2, Math.round(Kirigami.Units.devicePixelRatio))
radius: width / 2 radius: height / 2
color: Kirigami.Theme.highlightColor color: Kirigami.Theme.highlightColor
opacity: taskDelegate.model.IsActive === true ? 1.0 : 0.4 opacity: taskDelegate.model.IsActive === true ? 1.0 : 0.45
Behavior on width {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
} }
} }
} }