Add custom window navigation drawing

ScreenPlay/app.h

@@ -117,6 +117,8 @@ public slots:
     QString version() const;
     void exit();
 
+    QPointF cursorPos() { return QCursor::pos(); }
+
     void setGlobalVariables(GlobalVariables* globalVariables)
     {
         if (m_globalVariables.get() == globalVariables)

ScreenPlay/main.qml

@@ -55,6 +55,8 @@ ApplicationWindow {
     title: "ScreenPlay Alpha - " + ScreenPlay.version()
     minimumHeight: 450
     minimumWidth: 1050
+    flags: Qt.FramelessWindowHint |Qt.Window
+
     // Partial workaround for
     // https://bugreports.qt.io/browse/QTBUG-86047
     Material.accent: Material.color(Material.Orange)
@@ -79,145 +81,228 @@ ApplicationWindow {
 
     }
 
-    Connections {
+        Item {
-        function onThemeChanged(theme) {
+            anchors.fill: parent
-            setTheme(theme);
+            anchors.margins: 1
-        }
 
-        target: ScreenPlay.settings
-    }
 
-    Connections {
-        function onRequestNavigation(nav) {
-            switchPage(nav);
-        }
 
-        target: ScreenPlay.util
+        Connections {
-    }
+            function onThemeChanged(theme) {
-
+                setTheme(theme);
-    Connections {
-        function onRequestRaise() {
-            root.show();
-        }
-
-        target: ScreenPlay.screenPlayManager
-    }
-
-    Dialogs.SteamNotAvailable {
-        id: dialogSteam
-    }
-
-    Dialogs.MonitorConfiguration {
-    }
-
-    Dialogs.CriticalError {
-        window: root
-    }
-
-    Common.TrayIcon {
-        window: root
-    }
-
-    StackView {
-        id: stackView
-        objectName: "stackView"
-        property int duration: 300
-
-        anchors {
-            top: nav.bottom
-            right: parent.right
-            bottom: parent.bottom
-            left: parent.left
-        }
-
-        replaceEnter: Transition {
-            OpacityAnimator {
-                from: 0
-                to: 1
-                duration: stackView.duration
-                easing.type: Easing.InOutQuart
             }
 
-            ScaleAnimator {
+            target: ScreenPlay.settings
-                from: 0.8
+        }
-                to: 1
+
-                duration: stackView.duration
+        Connections {
-                easing.type: Easing.InOutQuart
+            function onRequestNavigation(nav) {
+                switchPage(nav);
+            }
+
+            target: ScreenPlay.util
+        }
+
+        Connections {
+            function onRequestRaise() {
+                root.show();
+            }
+
+            target: ScreenPlay.screenPlayManager
+        }
+
+        Dialogs.SteamNotAvailable {
+            id: dialogSteam
+        }
+
+        Dialogs.MonitorConfiguration {
+        }
+
+        Dialogs.CriticalError {
+            window: root
+        }
+
+        Common.TrayIcon {
+            window: root
+        }
+
+        StackView {
+            id: stackView
+            objectName: "stackView"
+            property int duration: 300
+
+            anchors {
+                top: nav.bottom
+                right: parent.right
+                bottom: parent.bottom
+                left: parent.left
+            }
+
+            replaceEnter: Transition {
+                OpacityAnimator {
+                    from: 0
+                    to: 1
+                    duration: stackView.duration
+                    easing.type: Easing.InOutQuart
+                }
+
+                ScaleAnimator {
+                    from: 0.8
+                    to: 1
+                    duration: stackView.duration
+                    easing.type: Easing.InOutQuart
+                }
+
+            }
+
+            replaceExit: Transition {
+                OpacityAnimator {
+                    from: 1
+                    to: 0
+                    duration: stackView.duration
+                    easing.type: Easing.InOutQuart
+                }
+
+                ScaleAnimator {
+                    from: 1
+                    to: 0.8
+                    duration: stackView.duration
+                    easing.type: Easing.InOutQuart
+                }
+
             }
 
         }
 
-        replaceExit: Transition {
+        Connections {
-            OpacityAnimator {
+            function onSetSidebarActive(active) {
-                from: 1
+                if (active)
-                to: 0
+                    sidebar.state = "active";
-                duration: stackView.duration
+                else
-                easing.type: Easing.InOutQuart
+                    sidebar.state = "inactive";
             }
 
-            ScaleAnimator {
+            function onSetNavigationItem(pos) {
-                from: 1
+                if (pos === 0)
-                to: 0.8
+                    nav.onPageChanged("Create");
-                duration: stackView.duration
+                else
-                easing.type: Easing.InOutQuart
+                    nav.onPageChanged("Workshop");
+            }
+
+            target: stackView.currentItem
+            ignoreUnknownSignals: true
+        }
+
+        Installed.Sidebar {
+            id: sidebar
+            objectName: "installedSidebar"
+            navHeight: nav.height
+
+            anchors {
+                top: parent.top
+                right: parent.right
+                bottom: parent.bottom
             }
 
         }
 
-    }
+        Navigation.Navigation {
+            id: nav
+            window: root
+            width:parent.width
+            anchors {
+                top: parent.top
+                right: parent.right
+                left: parent.left
+            }
+
+            onChangePage: (name)=>  {
+                monitors.close();
+                switchPage(name);
+            }
+
 
-    Connections {
-        function onSetSidebarActive(active) {
-            if (active)
-                sidebar.state = "active";
-            else
-                sidebar.state = "inactive";
         }
 
-        function onSetNavigationItem(pos) {
+        Monitors.Monitors {
-            if (pos === 0)
+            id: monitors
-                nav.onPageChanged("Create");
-            else
-                nav.onPageChanged("Workshop");
         }
 
-        target: stackView.currentItem
-        ignoreUnknownSignals: true
-    }
 
-    Installed.Sidebar {
-        id: sidebar
-        objectName: "installedSidebar"
-
-        navHeight: nav.height
-
-        anchors {
-            top: parent.top
-            right: parent.right
-            bottom: parent.bottom
-        }
 
     }
 
-    Navigation.Navigation {
+    Rectangle {
-        id: nav
+        height: 1
-        window: root
+        color:"#222"
-
+        anchors{
-        onChangePage: (name)=>  {
+            top:parent.top
-            monitors.close();
+            right:parent.right
-            switchPage(name);
+            left:parent.left
         }
-
+    }
-        anchors {
+    Rectangle {
-            top: parent.top
+        height: 1
-            right: parent.right
+        color:"#222"
-            left: parent.left
+        anchors{
+            bottom:parent.bottom
+            right:parent.right
+            left:parent.left
+        }
+    }
+    Rectangle {
+        width: 1
+        color:"#222"
+        anchors{
+            left:parent.left
+            bottom:parent.bottom
+            top:parent.top
+        }
+    }
+    Rectangle {
+        width: 1
+        color:"#222"
+        anchors{
+            right:parent.right
+            bottom:parent.bottom
+            top:parent.top
         }
-
     }
 
-    Monitors.Monitors {
+    Rectangle {
-        id: monitors
+        width: 15
+        height:width
+        color:"#555"
+        anchors{
+            right:parent.right
+            bottom:parent.bottom
+            margins: 1
+        }
+        MouseArea {
+            id: maResize
+            anchors.fill: parent
+            cursorShape: Qt.SizeFDiagCursor
+            property point clickPosition
+            property size originalSize
+            onPressed: {
+                maResize.clickPosition = Qt.point(maResize.mouseX, maResize.mouseY);
+                maResize.clickPosition = maResize.mapToGlobal(maResize.clickPosition.x , maResize.clickPosition.y )
+                maResize.originalSize = Qt.size(root.width, root.height)
+            }
+            onPositionChanged: {
+                if (maResize.pressed){
+                    let newPos  = maResize.mapToGlobal(maResize.mouseX, maResize.mouseY)
+                    let newPosX = newPos.x - maResize.clickPosition.x
+                    let newPosY = newPos.y - maResize.clickPosition.y
+
+                    root.setGeometry(root.x,root.y, maResize.originalSize.width + newPosX,
+                                     maResize.originalSize.height + newPosY)
+
+                }
+
+
+            }
+        }
     }
 
 }

ScreenPlay/qml/Navigation/Navigation.qml

@@ -54,7 +54,28 @@ Rectangle {
     color: Material.theme === Material.Light ? "white" : Material.background
     layer.enabled: true
 
-    MouseHoverBlocker {}
+    MouseArea {
+        id: mouseArea
+
+        property var clickPos
+
+        anchors.fill: parent
+        hoverEnabled: true
+        onPressed: (mouse)=>{
+            clickPos = {
+                "x": mouse.x,
+                "y": mouse.y
+            };
+        }
+        onPositionChanged: {
+            if (mouseArea.pressed){
+                let pos = ScreenPlay.cursorPos();
+                window.setX(pos.x - clickPos.x)
+                window.setY(pos.y - clickPos.y)
+            }
+
+        }
+    }
 
     Connections {
         function onRequestNavigationActive(isActive) {
@@ -267,6 +288,7 @@ Rectangle {
             title: qsTr("Are you sure you want to exit ScreenPlay? \nThis will shut down all Wallpaper and Widgets.")
             standardButtons: Dialog.Ok | Dialog.Cancel
             onAccepted: Qt.quit()
+            modal: true
         }