From 059b762bf2412630f44f16c5e39aeede32bb505d Mon Sep 17 00:00:00 2001 From: ItsLemmy Date: Fri, 7 Nov 2025 09:00:14 -0500 Subject: [PATCH] ScreenCorners: Now drawn on top and no longer casting shadows. --- .../MainScreen/Backgrounds/AllBackgrounds.qml | 8 - .../Backgrounds/ScreenCornersBackground.qml | 212 ----------------- Modules/MainScreen/MainScreen.qml | 6 + Modules/MainScreen/ScreenCorners.qml | 216 ++++++++++++++++++ 4 files changed, 222 insertions(+), 220 deletions(-) delete mode 100644 Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml create mode 100644 Modules/MainScreen/ScreenCorners.qml diff --git a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml index b615327b9..75487bc20 100644 --- a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml +++ b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml @@ -140,14 +140,6 @@ Item { panel: root.windowRoot.wifiPanel shapeContainer: backgroundsShape } - - - /** - * Screen Corners - */ - ScreenCornersBackground { - shapeContainer: backgroundsShape - } } NDropShadows { diff --git a/Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml b/Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml deleted file mode 100644 index 51bfab038..000000000 --- a/Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml +++ /dev/null @@ -1,212 +0,0 @@ -import QtQuick -import QtQuick.Shapes -import qs.Commons -import qs.Services -import qs.Modules.MainScreen.Backgrounds - - -/** - * ScreenCornersBackground - ShapePath component for rendering screen corners - * - * Renders concave corners at the screen edges to create a rounded screen effect. - * Uses the unified shadow system - this ShapePath is a child of the AllBackgrounds Shape container. - */ -ShapePath { - id: root - - // Required reference to AllBackgrounds shapeContainer - required property var shapeContainer - - // Corner configuration - readonly property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Color.black : Color.mSurface - readonly property real cornerRadius: Style.screenRadius - readonly property real cornerSize: Style.screenRadius - - // Determine margins based on bar position - readonly property real topMargin: 0 - readonly property real bottomMargin: 0 - readonly property real leftMargin: 0 - readonly property real rightMargin: 0 - - // Screen dimensions - readonly property real screenWidth: shapeContainer ? shapeContainer.width : 0 - readonly property real screenHeight: shapeContainer ? shapeContainer.height : 0 - - // Only show screen corners if enabled and appropriate conditions are met - readonly property bool shouldShow: Settings.data.general.showScreenCorners - - // ShapePath configuration - strokeWidth: -1 // No stroke, fill only - fillColor: shouldShow ? cornerColor : Color.transparent - - // Smooth color animation - Behavior on fillColor { - ColorAnimation { - duration: Style.animationFast - } - } - - // ========== PATH DEFINITION ========== - // Draws 4 separate corner squares at screen edges - // Each corner square has a concave arc on the inner diagonal - - // ========== TOP-LEFT CORNER ========== - // Arc is at the bottom-right of this square (inner diagonal) - // Start at top-left screen corner - startX: leftMargin - startY: topMargin - - // Top edge (moving right) - PathLine { - relativeX: cornerSize - relativeY: 0 - } - - // Right edge (moving down toward arc) - PathLine { - relativeX: 0 - relativeY: cornerSize - cornerRadius - } - - // Concave arc (bottom-right corner of square, curving inward toward screen center) - PathArc { - relativeX: -cornerRadius - relativeY: cornerRadius - radiusX: cornerRadius - radiusY: cornerRadius - direction: PathArc.Counterclockwise - } - - // Bottom edge (moving left) - PathLine { - relativeX: -(cornerSize - cornerRadius) - relativeY: 0 - } - - // Left edge (moving up) - closes back to start - PathLine { - relativeX: 0 - relativeY: -cornerSize - } - - // ========== TOP-RIGHT CORNER ========== - // Arc is at the bottom-left of this square (inner diagonal) - PathMove { - x: screenWidth - rightMargin - cornerSize - y: topMargin - } - - // Top edge (moving right) - PathLine { - relativeX: cornerSize - relativeY: 0 - } - - // Right edge (moving down) - PathLine { - relativeX: 0 - relativeY: cornerSize - } - - // Bottom edge (moving left toward arc) - PathLine { - relativeX: -(cornerSize - cornerRadius) - relativeY: 0 - } - - // Concave arc (bottom-left corner of square, curving inward toward screen center) - PathArc { - relativeX: -cornerRadius - relativeY: -cornerRadius - radiusX: cornerRadius - radiusY: cornerRadius - direction: PathArc.Counterclockwise - } - - // Left edge (moving up) - closes back to start - PathLine { - relativeX: 0 - relativeY: -(cornerSize - cornerRadius) - } - - // ========== BOTTOM-LEFT CORNER ========== - // Arc is at the top-right of this square (inner diagonal) - PathMove { - x: leftMargin - y: screenHeight - bottomMargin - cornerSize - } - - // Top edge (moving right toward arc) - PathLine { - relativeX: cornerSize - cornerRadius - relativeY: 0 - } - - // Concave arc (top-right corner of square, curving inward toward screen center) - PathArc { - relativeX: cornerRadius - relativeY: cornerRadius - radiusX: cornerRadius - radiusY: cornerRadius - direction: PathArc.Counterclockwise - } - - // Right edge (moving down) - PathLine { - relativeX: 0 - relativeY: cornerSize - cornerRadius - } - - // Bottom edge (moving left) - PathLine { - relativeX: -cornerSize - relativeY: 0 - } - - // Left edge (moving up) - closes back to start - PathLine { - relativeX: 0 - relativeY: -cornerSize - } - - // ========== BOTTOM-RIGHT CORNER ========== - // Arc is at the top-left of this square (inner diagonal) - // Start at bottom-right of square (different from other corners!) - PathMove { - x: screenWidth - rightMargin - y: screenHeight - bottomMargin - } - - // Bottom edge (moving left) - PathLine { - relativeX: -cornerSize - relativeY: 0 - } - - // Left edge (moving up toward arc) - PathLine { - relativeX: 0 - relativeY: -(cornerSize - cornerRadius) - } - - // Concave arc (top-left corner of square, curving inward toward screen center) - PathArc { - relativeX: cornerRadius - relativeY: -cornerRadius - radiusX: cornerRadius - radiusY: cornerRadius - direction: PathArc.Counterclockwise - } - - // Top edge (moving right) - PathLine { - relativeX: cornerSize - cornerRadius - relativeY: 0 - } - - // Right edge (moving down) - closes back to start - PathLine { - relativeX: 0 - relativeY: cornerSize - } -} diff --git a/Modules/MainScreen/MainScreen.qml b/Modules/MainScreen/MainScreen.qml index 1277e259d..3b1ff16cb 100644 --- a/Modules/MainScreen/MainScreen.qml +++ b/Modules/MainScreen/MainScreen.qml @@ -378,6 +378,12 @@ PanelWindow { } } } + + + /** + * Screen Corners + */ + ScreenCorners {} } // Centralized keyboard shortcuts - delegate to opened panel diff --git a/Modules/MainScreen/ScreenCorners.qml b/Modules/MainScreen/ScreenCorners.qml new file mode 100644 index 000000000..367e6269a --- /dev/null +++ b/Modules/MainScreen/ScreenCorners.qml @@ -0,0 +1,216 @@ +import QtQuick +import QtQuick.Shapes +import qs.Commons +import qs.Services + + +/** + * ScreenCorners - Shape component for rendering screen corners + * + * Renders concave corners at the screen edges to create a rounded screen effect. + * Self-contained Shape component (no shadows). + */ +Shape { + id: root + + anchors.fill: parent + preferredRendererType: Shape.CurveRenderer + enabled: false // Disable mouse input + + ShapePath { + id: cornersPath + + // Corner configuration + readonly property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Color.black : Color.mSurface + readonly property real cornerRadius: Style.screenRadius + readonly property real cornerSize: Style.screenRadius + + // Determine margins based on bar position + readonly property real topMargin: 0 + readonly property real bottomMargin: 0 + readonly property real leftMargin: 0 + readonly property real rightMargin: 0 + + // Screen dimensions + readonly property real screenWidth: root.width + readonly property real screenHeight: root.height + + // Only show screen corners if enabled and appropriate conditions are met + readonly property bool shouldShow: Settings.data.general.showScreenCorners + + // ShapePath configuration + strokeWidth: -1 // No stroke, fill only + fillColor: shouldShow ? cornerColor : Color.transparent + + // Smooth color animation + Behavior on fillColor { + ColorAnimation { + duration: Style.animationFast + } + } + + // ========== PATH DEFINITION ========== + // Draws 4 separate corner squares at screen edges + // Each corner square has a concave arc on the inner diagonal + + // ========== TOP-LEFT CORNER ========== + // Arc is at the bottom-right of this square (inner diagonal) + // Start at top-left screen corner + startX: leftMargin + startY: topMargin + + // Top edge (moving right) + PathLine { + relativeX: cornersPath.cornerSize + relativeY: 0 + } + + // Right edge (moving down toward arc) + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize - cornersPath.cornerRadius + } + + // Concave arc (bottom-right corner of square, curving inward toward screen center) + PathArc { + relativeX: -cornersPath.cornerRadius + relativeY: cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Bottom edge (moving left) + PathLine { + relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius) + relativeY: 0 + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -cornersPath.cornerSize + } + + // ========== TOP-RIGHT CORNER ========== + // Arc is at the bottom-left of this square (inner diagonal) + PathMove { + x: cornersPath.screenWidth - cornersPath.rightMargin - cornersPath.cornerSize + y: cornersPath.topMargin + } + + // Top edge (moving right) + PathLine { + relativeX: cornersPath.cornerSize + relativeY: 0 + } + + // Right edge (moving down) + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize + } + + // Bottom edge (moving left toward arc) + PathLine { + relativeX: -(cornersPath.cornerSize - cornersPath.cornerRadius) + relativeY: 0 + } + + // Concave arc (bottom-left corner of square, curving inward toward screen center) + PathArc { + relativeX: -cornersPath.cornerRadius + relativeY: -cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius) + } + + // ========== BOTTOM-LEFT CORNER ========== + // Arc is at the top-right of this square (inner diagonal) + PathMove { + x: cornersPath.leftMargin + y: cornersPath.screenHeight - cornersPath.bottomMargin - cornersPath.cornerSize + } + + // Top edge (moving right toward arc) + PathLine { + relativeX: cornersPath.cornerSize - cornersPath.cornerRadius + relativeY: 0 + } + + // Concave arc (top-right corner of square, curving inward toward screen center) + PathArc { + relativeX: cornersPath.cornerRadius + relativeY: cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Right edge (moving down) + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize - cornersPath.cornerRadius + } + + // Bottom edge (moving left) + PathLine { + relativeX: -cornersPath.cornerSize + relativeY: 0 + } + + // Left edge (moving up) - closes back to start + PathLine { + relativeX: 0 + relativeY: -cornersPath.cornerSize + } + + // ========== BOTTOM-RIGHT CORNER ========== + // Arc is at the top-left of this square (inner diagonal) + // Start at bottom-right of square (different from other corners!) + PathMove { + x: cornersPath.screenWidth - cornersPath.rightMargin + y: cornersPath.screenHeight - cornersPath.bottomMargin + } + + // Bottom edge (moving left) + PathLine { + relativeX: -cornersPath.cornerSize + relativeY: 0 + } + + // Left edge (moving up toward arc) + PathLine { + relativeX: 0 + relativeY: -(cornersPath.cornerSize - cornersPath.cornerRadius) + } + + // Concave arc (top-left corner of square, curving inward toward screen center) + PathArc { + relativeX: cornersPath.cornerRadius + relativeY: -cornersPath.cornerRadius + radiusX: cornersPath.cornerRadius + radiusY: cornersPath.cornerRadius + direction: PathArc.Counterclockwise + } + + // Top edge (moving right) + PathLine { + relativeX: cornersPath.cornerSize - cornersPath.cornerRadius + relativeY: 0 + } + + // Right edge (moving down) - closes back to start + PathLine { + relativeX: 0 + relativeY: cornersPath.cornerSize + } + } +}