fix: osd and session clipping
This commit is contained in:
parent
ea2ed3e5c4
commit
0075d64ca2
6 changed files with 95 additions and 130 deletions
|
|
@ -172,9 +172,10 @@ Variants {
|
||||||
id: sessionBg
|
id: sessionBg
|
||||||
|
|
||||||
blobGroup: blobGroup
|
blobGroup: blobGroup
|
||||||
panel: panels.session
|
panel: panels.sessionWrapper
|
||||||
bar: bar
|
bar: bar
|
||||||
deformAmount: 0.25
|
deformAmount: 0.25
|
||||||
|
x: panels.sessionWrapper.x + panels.session.x + bar.implicitWidth
|
||||||
}
|
}
|
||||||
|
|
||||||
PanelBg {
|
PanelBg {
|
||||||
|
|
@ -190,9 +191,10 @@ Variants {
|
||||||
id: osdBg
|
id: osdBg
|
||||||
|
|
||||||
blobGroup: blobGroup
|
blobGroup: blobGroup
|
||||||
panel: panels.osd
|
panel: panels.osdWrapper
|
||||||
bar: bar
|
bar: bar
|
||||||
deformAmount: 0.3
|
deformAmount: 0.3
|
||||||
|
x: panels.osdWrapper.x + panels.osd.x + bar.implicitWidth
|
||||||
}
|
}
|
||||||
|
|
||||||
PanelBg {
|
PanelBg {
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,7 @@ CustomMouseArea {
|
||||||
|
|
||||||
if (panels.sidebar.anchors.rightMargin === -panels.sidebar.implicitWidth - 5) {
|
if (panels.sidebar.anchors.rightMargin === -panels.sidebar.implicitWidth - 5) {
|
||||||
// Show osd on hover
|
// Show osd on hover
|
||||||
const showOsd = inRightPanel(panels.osd, x, y);
|
const showOsd = inRightPanel(panels.osdWrapper, x, y);
|
||||||
|
|
||||||
// Always update visibility based on hover if not in shortcut mode
|
// Always update visibility based on hover if not in shortcut mode
|
||||||
if (!osdShortcutActive) {
|
if (!osdShortcutActive) {
|
||||||
|
|
@ -119,23 +119,23 @@ CustomMouseArea {
|
||||||
const showSidebar = pressed && dragStart.x > Math.min(width - Config.border.minThickness, bar.implicitWidth + panels.sidebar.x);
|
const showSidebar = pressed && dragStart.x > Math.min(width - Config.border.minThickness, bar.implicitWidth + panels.sidebar.x);
|
||||||
|
|
||||||
// Show/hide session on drag
|
// Show/hide session on drag
|
||||||
if (pressed && inRightPanel(panels.session, dragStart.x, dragStart.y) && withinPanelHeight(panels.session, x, y)) {
|
if (pressed && inRightPanel(panels.sessionWrapper, dragStart.x, dragStart.y) && withinPanelHeight(panels.sessionWrapper, x, y)) {
|
||||||
if (dragX < -Config.session.dragThreshold)
|
if (dragX < -Config.session.dragThreshold)
|
||||||
visibilities.session = true;
|
visibilities.session = true;
|
||||||
else if (dragX > Config.session.dragThreshold)
|
else if (dragX > Config.session.dragThreshold)
|
||||||
visibilities.session = false;
|
visibilities.session = false;
|
||||||
|
|
||||||
// Show sidebar on drag if in session area and session is nearly fully visible
|
// Show sidebar on drag if in session area and session is nearly fully visible
|
||||||
if (showSidebar && panels.session.width >= panels.session.nonAnimWidth && dragX < -Config.sidebar.dragThreshold)
|
if (showSidebar && panels.session.offsetScale <= 0 && dragX < -Config.sidebar.dragThreshold)
|
||||||
visibilities.sidebar = true;
|
visibilities.sidebar = true;
|
||||||
} else if (showSidebar && dragX < -Config.sidebar.dragThreshold) {
|
} else if (showSidebar && dragX < -Config.sidebar.dragThreshold) {
|
||||||
// Show sidebar on drag if not in session area
|
// Show sidebar on drag if not in session area
|
||||||
visibilities.sidebar = true;
|
visibilities.sidebar = true;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const outOfSidebar = x < width - panels.sidebar.width;
|
const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
|
||||||
// Show osd on hover
|
// Show osd on hover
|
||||||
const showOsd = outOfSidebar && inRightPanel(panels.osd, x, y);
|
const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
|
||||||
|
|
||||||
// Always update visibility based on hover if not in shortcut mode
|
// Always update visibility based on hover if not in shortcut mode
|
||||||
if (!osdShortcutActive) {
|
if (!osdShortcutActive) {
|
||||||
|
|
@ -148,7 +148,7 @@ CustomMouseArea {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show/hide session on drag
|
// Show/hide session on drag
|
||||||
if (pressed && outOfSidebar && inRightPanel(panels.session, dragStart.x, dragStart.y) && withinPanelHeight(panels.session, x, y)) {
|
if (pressed && outOfSidebar && inRightPanel(panels.sessionWrapper, dragStart.x, dragStart.y) && withinPanelHeight(panels.sessionWrapper, x, y)) {
|
||||||
if (dragX < -Config.session.dragThreshold)
|
if (dragX < -Config.session.dragThreshold)
|
||||||
visibilities.session = true;
|
visibilities.session = true;
|
||||||
else if (dragX > Config.session.dragThreshold)
|
else if (dragX > Config.session.dragThreshold)
|
||||||
|
|
@ -221,7 +221,7 @@ CustomMouseArea {
|
||||||
|
|
||||||
// Also hide dashboard and OSD if they're not being hovered
|
// Also hide dashboard and OSD if they're not being hovered
|
||||||
const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
|
const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
|
||||||
const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
|
const inOsdArea = root.inRightPanel(root.panels.osdWrapper, root.mouseX, root.mouseY);
|
||||||
|
|
||||||
if (!inDashboardArea) {
|
if (!inDashboardArea) {
|
||||||
root.visibilities.dashboard = false;
|
root.visibilities.dashboard = false;
|
||||||
|
|
@ -249,7 +249,7 @@ CustomMouseArea {
|
||||||
function onOsdChanged() {
|
function onOsdChanged() {
|
||||||
if (root.visibilities.osd) {
|
if (root.visibilities.osd) {
|
||||||
// OSD became visible, immediately check if this should be shortcut mode
|
// OSD became visible, immediately check if this should be shortcut mode
|
||||||
const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
|
const inOsdArea = root.inRightPanel(root.panels.osdWrapper, root.mouseX, root.mouseY);
|
||||||
if (!inOsdArea) {
|
if (!inOsdArea) {
|
||||||
root.osdShortcutActive = true;
|
root.osdShortcutActive = true;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,8 +21,10 @@ Item {
|
||||||
required property Bar.BarWrapper bar
|
required property Bar.BarWrapper bar
|
||||||
|
|
||||||
readonly property alias osd: osd
|
readonly property alias osd: osd
|
||||||
|
readonly property alias osdWrapper: osdWrapper
|
||||||
readonly property alias notifications: notifications
|
readonly property alias notifications: notifications
|
||||||
readonly property alias session: session
|
readonly property alias session: session
|
||||||
|
readonly property alias sessionWrapper: sessionWrapper
|
||||||
readonly property alias launcher: launcher
|
readonly property alias launcher: launcher
|
||||||
readonly property alias dashboard: dashboard
|
readonly property alias dashboard: dashboard
|
||||||
readonly property alias popouts: popouts
|
readonly property alias popouts: popouts
|
||||||
|
|
@ -34,16 +36,27 @@ Item {
|
||||||
anchors.margins: Config.border.thickness
|
anchors.margins: Config.border.thickness
|
||||||
anchors.leftMargin: bar.implicitWidth
|
anchors.leftMargin: bar.implicitWidth
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: osdWrapper
|
||||||
|
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: sessionWrapper.anchors.rightMargin + session.width * (1 - session.offsetScale)
|
||||||
|
clip: sidebar.visible || session.visible
|
||||||
|
|
||||||
|
implicitWidth: osd.implicitWidth
|
||||||
|
implicitHeight: osd.implicitHeight
|
||||||
|
|
||||||
Osd.Wrapper {
|
Osd.Wrapper {
|
||||||
id: osd
|
id: osd
|
||||||
|
|
||||||
clip: session.width > 0 || sidebar.width > 0
|
|
||||||
screen: root.screen
|
screen: root.screen
|
||||||
visibilities: root.visibilities
|
visibilities: root.visibilities
|
||||||
|
sidebarOrSessionVisible: sidebar.visible || session.visible
|
||||||
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.right: session.left
|
anchors.right: parent.right
|
||||||
// anchors.rightMargin: session.width + sidebar.width
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Notifications.Wrapper {
|
Notifications.Wrapper {
|
||||||
|
|
@ -58,16 +71,26 @@ Item {
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: sessionWrapper
|
||||||
|
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale)
|
||||||
|
clip: sidebar.visible
|
||||||
|
|
||||||
|
implicitWidth: session.implicitWidth
|
||||||
|
implicitHeight: session.implicitHeight
|
||||||
|
|
||||||
Session.Wrapper {
|
Session.Wrapper {
|
||||||
id: session
|
id: session
|
||||||
|
|
||||||
clip: sidebar.width > 0
|
|
||||||
visibilities: root.visibilities
|
visibilities: root.visibilities
|
||||||
panels: root
|
sidebarVisible: sidebar.visible
|
||||||
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.right: sidebar.left
|
anchors.right: parent.right
|
||||||
// anchors.rightMargin: sidebar.width
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Launcher.Wrapper {
|
Launcher.Wrapper {
|
||||||
|
|
@ -131,7 +154,6 @@ Item {
|
||||||
id: sidebar
|
id: sidebar
|
||||||
|
|
||||||
visibilities: root.visibilities
|
visibilities: root.visibilities
|
||||||
panels: root
|
|
||||||
|
|
||||||
anchors.top: notifications.bottom
|
anchors.top: notifications.bottom
|
||||||
anchors.bottom: utilities.top
|
anchors.bottom: utilities.top
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,13 @@ Item {
|
||||||
|
|
||||||
required property ShellScreen screen
|
required property ShellScreen screen
|
||||||
required property DrawerVisibilities visibilities
|
required property DrawerVisibilities visibilities
|
||||||
|
required property bool sidebarOrSessionVisible
|
||||||
|
|
||||||
property bool hovered
|
property bool hovered
|
||||||
readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(root.screen)
|
readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(root.screen)
|
||||||
readonly property bool shouldBeActive: visibilities.osd && Config.osd.enabled && !(visibilities.utilities && Config.utilities.enabled)
|
readonly property bool shouldBeActive: visibilities.osd && Config.osd.enabled && !(visibilities.utilities && Config.utilities.enabled)
|
||||||
|
property real offsetScale: shouldBeActive ? 0 : 1
|
||||||
|
property real sidebarOffset: !shouldBeActive && sidebarOrSessionVisible ? 16 : 0
|
||||||
|
|
||||||
property real volume
|
property real volume
|
||||||
property bool muted
|
property bool muted
|
||||||
|
|
@ -34,44 +38,24 @@ Item {
|
||||||
brightness = root.monitor?.brightness ?? 0;
|
brightness = root.monitor?.brightness ?? 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
visible: anchors.rightMargin > -implicitWidth
|
visible: offsetScale < 1
|
||||||
anchors.rightMargin: -implicitWidth
|
anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale
|
||||||
implicitWidth: content.implicitWidth
|
implicitWidth: content.implicitWidth
|
||||||
implicitHeight: content.implicitHeight
|
implicitHeight: content.implicitHeight
|
||||||
|
|
||||||
states: State {
|
Behavior on offsetScale {
|
||||||
name: "visible"
|
|
||||||
when: root.shouldBeActive
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
root.anchors.rightMargin: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
transitions: [
|
|
||||||
Transition {
|
|
||||||
// from: ""
|
|
||||||
// to: "visible"
|
|
||||||
|
|
||||||
Anim {
|
Anim {
|
||||||
target: root.anchors
|
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||||
property: "rightMargin"
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Transition {
|
|
||||||
// from: "visible"
|
|
||||||
// to: ""
|
|
||||||
|
|
||||||
// Anim {
|
Behavior on sidebarOffset {
|
||||||
// target: root
|
Anim {
|
||||||
// property: "implicitWidth"
|
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||||
// easing.bezierCurve: Appearance.anim.curves.emphasized
|
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
Connections {
|
Connections {
|
||||||
function onMutedChanged(): void {
|
function onMutedChanged(): void {
|
||||||
|
|
@ -122,7 +106,7 @@ Item {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
|
|
||||||
Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible)
|
active: root.shouldBeActive || root.visible
|
||||||
|
|
||||||
sourceComponent: Content {
|
sourceComponent: Content {
|
||||||
monitor: root.monitor
|
monitor: root.monitor
|
||||||
|
|
|
||||||
|
|
@ -8,47 +8,31 @@ Item {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
required property DrawerVisibilities visibilities
|
required property DrawerVisibilities visibilities
|
||||||
required property var panels
|
required property bool sidebarVisible
|
||||||
readonly property real nonAnimWidth: content.implicitWidth
|
readonly property real nonAnimWidth: content.implicitWidth
|
||||||
|
|
||||||
visible: anchors.rightMargin > -implicitWidth - 1
|
readonly property bool shouldBeActive: visibilities.session && Config.session.enabled
|
||||||
anchors.rightMargin: -implicitWidth - 1
|
property real offsetScale: shouldBeActive ? 0 : 1
|
||||||
|
property real sidebarOffset: !shouldBeActive && sidebarVisible ? 14 : 0 // TODO: there is clearly something wrong with the rect to rect edge sink
|
||||||
|
|
||||||
|
visible: offsetScale < 1
|
||||||
|
anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale
|
||||||
implicitWidth: content.implicitWidth
|
implicitWidth: content.implicitWidth
|
||||||
implicitHeight: content.implicitHeight
|
implicitHeight: content.implicitHeight || 510 // Hard coded fallback for first open
|
||||||
|
|
||||||
states: State {
|
|
||||||
name: "visible"
|
|
||||||
when: root.visibilities.session && Config.session.enabled
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
root.anchors.rightMargin: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
transitions: [
|
|
||||||
Transition {
|
|
||||||
// from: ""
|
|
||||||
// to: "visible"
|
|
||||||
|
|
||||||
|
Behavior on offsetScale {
|
||||||
Anim {
|
Anim {
|
||||||
target: root.anchors
|
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||||
property: "rightMargin"
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Transition {
|
|
||||||
// from: "visible"
|
|
||||||
// to: ""
|
|
||||||
|
|
||||||
// Anim {
|
Behavior on sidebarOffset {
|
||||||
// target: root
|
Anim {
|
||||||
// property: "implicitWidth"
|
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||||
// easing.bezierCurve: root.panels.osd.width > 0 ? Appearance.anim.curves.expressiveDefaultSpatial : Appearance.anim.curves.emphasized
|
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
Loader {
|
Loader {
|
||||||
id: content
|
id: content
|
||||||
|
|
@ -56,7 +40,7 @@ Item {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
|
|
||||||
Component.onCompleted: active = Qt.binding(() => (root.visibilities.session && Config.session.enabled) || root.visible)
|
active: root.shouldBeActive || root.visible
|
||||||
|
|
||||||
sourceComponent: Content {
|
sourceComponent: Content {
|
||||||
visibilities: root.visibilities
|
visibilities: root.visibilities
|
||||||
|
|
|
||||||
|
|
@ -8,47 +8,21 @@ Item {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
required property DrawerVisibilities visibilities
|
required property DrawerVisibilities visibilities
|
||||||
required property var panels
|
|
||||||
readonly property Props props: Props {}
|
readonly property Props props: Props {}
|
||||||
|
|
||||||
visible: anchors.rightMargin > -implicitWidth - 5
|
readonly property bool shouldBeActive: visibilities.sidebar && Config.sidebar.enabled
|
||||||
anchors.rightMargin: -implicitWidth - 5
|
property real offsetScale: shouldBeActive ? 0 : 1
|
||||||
|
|
||||||
|
visible: offsetScale < 1
|
||||||
|
anchors.rightMargin: (-implicitWidth - 5) * offsetScale
|
||||||
implicitWidth: Config.sidebar.sizes.width
|
implicitWidth: Config.sidebar.sizes.width
|
||||||
|
|
||||||
states: State {
|
Behavior on offsetScale {
|
||||||
name: "visible"
|
|
||||||
when: root.visibilities.sidebar && Config.sidebar.enabled
|
|
||||||
|
|
||||||
PropertyChanges {
|
|
||||||
root.anchors.rightMargin: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
transitions: [
|
|
||||||
Transition {
|
|
||||||
// from: ""
|
|
||||||
// to: "visible"
|
|
||||||
|
|
||||||
Anim {
|
Anim {
|
||||||
target: root.anchors
|
|
||||||
property: "rightMargin"
|
|
||||||
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Transition {
|
|
||||||
// from: "visible"
|
|
||||||
// to: ""
|
|
||||||
|
|
||||||
// Anim {
|
|
||||||
// target: root
|
|
||||||
// property: "implicitWidth"
|
|
||||||
// easing.bezierCurve: root.panels.osd.width > 0 || root.panels.session.width > 0 ? Appearance.anim.curves.expressiveDefaultSpatial : Appearance.anim.curves.emphasized
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
Loader {
|
Loader {
|
||||||
id: content
|
id: content
|
||||||
|
|
@ -59,8 +33,7 @@ Item {
|
||||||
anchors.margins: Appearance.padding.large
|
anchors.margins: Appearance.padding.large
|
||||||
anchors.bottomMargin: 0
|
anchors.bottomMargin: 0
|
||||||
|
|
||||||
active: true
|
active: root.shouldBeActive || root.visible
|
||||||
Component.onCompleted: active = Qt.binding(() => (root.visibilities.sidebar && Config.sidebar.enabled) || root.visible)
|
|
||||||
|
|
||||||
sourceComponent: Content {
|
sourceComponent: Content {
|
||||||
implicitWidth: Config.sidebar.sizes.width - Appearance.padding.large * 2
|
implicitWidth: Config.sidebar.sizes.width - Appearance.padding.large * 2
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue