Add window shadow & respect fixed sizes

Serial-Studio.pro

@@ -273,6 +273,11 @@ DISTFILES += \
     assets/qml/Dashboard/WidgetDelegate.qml \
     assets/qml/Dashboard/WidgetGrid.qml \
     assets/qml/Dashboard/WidgetModel.qml \
+    assets/qml/FramelessWindow/CustomWindow.qml \
+    assets/qml/FramelessWindow/ResizeHandles.qml \
+    assets/qml/FramelessWindow/WindowBorder.qml \
+    assets/qml/FramelessWindow/WindowButton.qml \
+    assets/qml/FramelessWindow/WindowButtonMacOS.qml \
     assets/qml/JsonEditor/Footer.qml \
     assets/qml/JsonEditor/GroupEditor.qml \
     assets/qml/JsonEditor/Header.qml \
@@ -287,19 +292,15 @@ DISTFILES += \
     assets/qml/Panes/SetupPanes/Serial.qml \
     assets/qml/Panes/SetupPanes/Settings.qml \
     assets/qml/Panes/Toolbar.qml \
-    assets/qml/PlatformDependent/CustomWindow.qml \
     assets/qml/PlatformDependent/DecentMenuItem.qml \
     assets/qml/PlatformDependent/Menubar.qml \
     assets/qml/PlatformDependent/MenubarMacOS.qml \
-    assets/qml/PlatformDependent/WindowBorder.qml \
-    assets/qml/PlatformDependent/WindowButton.qml \
-    assets/qml/PlatformDependent/WindowButtonMacOS.qml \
     assets/qml/Widgets/Icon.qml \
     assets/qml/Widgets/JSONDropArea.qml \
     assets/qml/Widgets/LED.qml \
     assets/qml/Widgets/Shadow.qml \
-    assets/qml/Widgets/Window.qml \
     assets/qml/Widgets/Terminal.qml \
+    assets/qml/Widgets/Window.qml \
     assets/qml/Windows/About.qml \
     assets/qml/Windows/Acknowledgements.qml \
     assets/qml/Windows/CsvPlayer.qml \
@@ -308,9 +309,9 @@ DISTFILES += \
     assets/qml/Windows/MainWindow.qml \
     assets/qml/main.qml
 
-#-------------------------------------------------------------------------------
+#-----------------------------------------------------------------------------------------
 # Deploy files
-#-------------------------------------------------------------------------------
+#-----------------------------------------------------------------------------------------
 
 OTHER_FILES += \
     deploy/linux/* \

assets/Resources.qrc

@@ -60,6 +60,7 @@
         <file>icons/power.svg</file>
         <file>icons/ram.svg</file>
         <file>icons/registration.svg</file>
+        <file>icons/restore.svg</file>
         <file>icons/right.svg</file>
         <file>icons/save.svg</file>
         <file>icons/schedule.svg</file>
@@ -96,6 +97,11 @@
         <file>qml/Dashboard/WidgetDelegate.qml</file>
         <file>qml/Dashboard/WidgetGrid.qml</file>
         <file>qml/Dashboard/WidgetModel.qml</file>
+        <file>qml/FramelessWindow/CustomWindow.qml</file>
+        <file>qml/FramelessWindow/ResizeHandles.qml</file>
+        <file>qml/FramelessWindow/WindowBorder.qml</file>
+        <file>qml/FramelessWindow/WindowButton.qml</file>
+        <file>qml/FramelessWindow/WindowButtonMacOS.qml</file>
         <file>qml/JsonEditor/Footer.qml</file>
         <file>qml/JsonEditor/GroupEditor.qml</file>
         <file>qml/JsonEditor/Header.qml</file>
@@ -133,10 +139,15 @@
         <file>touchbar/dashboard.png</file>
         <file>touchbar/setup.png</file>
         <file>translations/de.qm</file>
+        <file>translations/de.ts</file>
         <file>translations/en.qm</file>
+        <file>translations/en.ts</file>
         <file>translations/es.qm</file>
+        <file>translations/es.ts</file>
         <file>translations/ru.qm</file>
+        <file>translations/ru.ts</file>
         <file>translations/zh.qm</file>
+        <file>translations/zh.ts</file>
         <file>window-border/macOS/close-active.svg</file>
         <file>window-border/macOS/close-hover.svg</file>
         <file>window-border/macOS/close-normal.svg</file>
@@ -146,16 +157,11 @@
         <file>window-border/macOS/minimize-active.svg</file>
         <file>window-border/macOS/minimize-hover.svg</file>
         <file>window-border/macOS/minimize-normal.svg</file>
-        <file>qml/PlatformDependent/WindowBorder.qml</file>
-        <file>qml/PlatformDependent/WindowButton.qml</file>
-        <file>qml/PlatformDependent/CustomWindow.qml</file>
-        <file>icons/restore.svg</file>
         <file>window-border/close.svg</file>
+        <file>window-border/fullscreen.svg</file>
         <file>window-border/maximize.svg</file>
         <file>window-border/minimize.svg</file>
-        <file>window-border/unmaximize.svg</file>
-        <file>window-border/fullscreen.svg</file>
         <file>window-border/restore.svg</file>
-        <file>qml/PlatformDependent/WindowButtonMacOS.qml</file>
+        <file>window-border/unmaximize.svg</file>
     </qresource>
 </RCC>

assets/qml/Dashboard/WidgetDelegate.qml

@@ -26,7 +26,7 @@ import QtQuick.Controls 2.12
 
 import SerialStudio 1.0
 import "../Widgets" as Widgets
-import "../PlatformDependent" as PlatformDependent
+import "../FramelessWindow" as FramelessWindow
 
 Item {
     id: root
@@ -60,7 +60,7 @@ Item {
         }
     }
 
-    PlatformDependent.CustomWindow {
+    FramelessWindow.CustomWindow {
         id: externalWindow
         minimumWidth: 640
         minimumHeight: 480
@@ -74,10 +74,10 @@ Item {
             id: externalLoader
             anchors.fill: parent
             isExternalWindow: true
-            anchors.margins: windowBorder
             widgetIndex: root.widgetIndex
-            anchors.topMargin: titlebar.height
             widgetVisible: externalWindow.visible
+            anchors.margins: externalWindow.margin
+            anchors.topMargin: externalWindow.titlebar.height
 
             MouseArea {
                 hoverEnabled: true

assets/qml/FramelessWindow/CustomWindow.qml

@@ -0,0 +1,189 @@
+/*
+ * Copyright (c) 2020-2021 Alex Spataru <https://github.com/alex-spataru>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.12
+import QtQuick.Window 2.12
+import QtGraphicalEffects 1.0
+
+Window {
+    id: root
+    color: "transparent"
+    flags: root.customFlags
+
+    //
+    // Custom signals
+    //
+    signal closed()
+    signal minimized()
+    signal maximized()
+    signal unmaximized()
+
+    //
+    // Window radius control
+    //
+    readonly property int handleSize: radius + 5 + margin
+    readonly property int radius: ((root.visibility === Window.Maximized && maximizeEnabled) || fullScreen) ? 0 : 10
+
+    //
+    // Visibility properties
+    //
+    property bool firstChange: true
+    property bool windowMaximized: false
+    property bool windowMinimized: false
+    property alias fullScreen: border.fullScreen
+    readonly property int customFlags: Qt.FramelessWindowHint |
+                                       Qt.WindowMinMaxButtonsHint
+
+    //
+    // Toggle fullscreen state
+    //
+    function toggleFullscreen() {
+        root.fullScreen = !root.fullScreen
+        if (root.fullScreen)
+            root.showFullScreen()
+        else
+            root.showNormal()
+    }
+
+    //
+    // Alias to the titlebar
+    //
+    property alias titlebar: border
+
+    //
+    // Background color of the window & the titlebar
+    //
+    property int margin: root.radius > 0 ? 10 : 0
+    property color borderColor: Cpp_ThemeManager.highlight
+    property color backgroundColor: Cpp_ThemeManager.window
+    property color titlebarText: Cpp_ThemeManager.brightText
+    property color titlebarColor: Cpp_ThemeManager.toolbarGradient2
+
+    //
+    // Window controls
+    //
+    property alias displayIcon: border.displayIcon
+    property alias closeEnabled: border.closeEnabled
+    property alias minimizeEnabled: border.minimizeEnabled
+    property alias maximizeEnabled: border.maximizeEnabled
+    property alias titlebarBorderEnabled: border.titlebarBorderEnabled
+
+    //
+    // Shadow implementation
+    //
+    RectangularGlow {
+        anchors.fill: bg
+        glowRadius: root.margin
+        color: Qt.rgba(0,0,0,0.1)
+    } Rectangle {
+        id: bg
+        color: "transparent"
+        radius: root.radius
+        anchors.fill: parent
+        anchors.margins: root.margin
+    }
+
+    //
+    // Window border
+    //
+    Rectangle {
+        z: 1000
+        opacity: 0.8
+        border.width: 1
+        radius: root.radius
+        color: "transparent"
+        anchors.fill: parent
+        anchors.margins: root.margin - 1
+        border.color: root.borderColor
+    }
+
+    //
+    // Titlebar control
+    //
+    WindowBorder {
+        id: border
+        window: root
+        radius: root.radius
+        color: root.titlebarColor
+        textColor: root.titlebarText
+
+        onClosed: root.closed()
+        onMinimized: root.minimized()
+        onMaximized: root.maximized()
+        onUnmaximized: root.unmaximized()
+
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            margins: root.margin
+        }
+    }
+
+    //
+    // Maximize window fixes
+    //
+    onVisibilityChanged: {
+        if (visibility === Window.Maximized) {
+            if (!root.windowMaximized)
+                root.firstChange = false
+
+            root.fullScreen = false
+            root.windowMaximized = true
+        }
+
+        else if (visibility === Window.Minimized) {
+            root.fullScreen = false
+            root.windowMaximized = false
+        }
+
+        else if (visibility === Window.FullScreen) {
+            if (!root.fullScreen)
+                root.firstChange = false
+
+            root.fullScreen = true
+            root.windowMaximized = false
+        }
+
+        else if (visibility !== Window.Hidden) {
+            if (windowMaximized || fullScreen && firstChange) {
+                root.width = root.minimumWidth
+                root.height = root.minimumHeight
+                root.x = (Screen.desktopAvailableWidth - root.width) / 2
+                root.y = (Screen.desktopAvailableHeight - root.height) / 2
+            }
+
+            root.fullScreen = false
+            root.windowMaximized = false
+            root.flags = root.customFlags
+        }
+    }
+
+    //
+    // Resize handler
+    //
+    ResizeHandles {
+        window: root
+        anchors.fill: parent
+        handleSize: root.handleSize
+    }
+}

assets/qml/FramelessWindow/ResizeHandles.qml

@@ -23,117 +23,31 @@
 import QtQuick 2.12
 import QtQuick.Window 2.12
 
-Window {
+Item {
     id: root
-    color: "transparent"
-    flags: root.customFlags
 
     //
-    // Window radius control
+    // Pointer to window to control
     //
-    readonly property int windowBorder: radius + 5
+    property Window window
-    property int radius: ((root.visibility === Window.Maximized && maximizeEnabled) || fullScreen) ? 0 : 10
+    property int handleSize
 
     //
-    // Visibility properties
+    // Disable handles if window size is fixed or window is maximized
     //
-    property bool firstChange: true
+    enabled: ((window.minimumWidth !== window.maximumWidth) ||
-    property bool windowMaximized: false
+              (window.minimumHeight !== window.maximumHeight)) &&
-    property alias fullScreen: border.fullScreen
+             (window.visibility !== Window.Maximized)
-    readonly property int customFlags: Qt.Dialog |
-                                       Qt.FramelessWindowHint
 
     //
-    // Toggle fullscreen state
+    // Global mouse area to fix cursor shape while resizing
     //
-    function toggleFullscreen() {
+    MouseArea {
-        root.fullScreen = !root.fullScreen
+        z: 1000
-        if (root.fullScreen)
+        id: globalMouseArea
-            root.showFullScreen()
-        else
-            root.showNormal()
-    }
-
-    //
-    // Alias to the titlebar
-    //
-    property alias titlebar: border
-
-    //
-    // Background color of the window & the titlebar
-    //
-    property color backgroundColor: Cpp_ThemeManager.window
-    property color titlebarText: Cpp_ThemeManager.brightText
-    property color titlebarColor: Cpp_ThemeManager.toolbarGradient2
-
-    //
-    // Window controls
-    //
-    property alias closeEnabled: border.closeEnabled
-    property alias minimizeEnabled: border.minimizeEnabled
-    property alias maximizeEnabled: border.maximizeEnabled
-    property alias fullscreenEnabled: border.fullscreenEnabled
-    property alias titlebarBorderEnabled: border.titlebarBorderEnabled
-
-    //
-    // Background color implementation
-    //
-    Rectangle {
-        radius: root.radius
         anchors.fill: parent
-        color: root.backgroundColor
+        acceptedButtons: Qt.NoButton
-    }
+        anchors.margins: root.handleSize
-
-    //
-    // Titlebar control
-    //
-    WindowBorder {
-        id: border
-        window: root
-        radius: root.radius
-        color: root.titlebarColor
-        textColor: root.titlebarText
-
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-    }
-
-    //
-    // Maximize window fixes
-    //
-    onVisibilityChanged: {
-        if (visibility === Window.Maximized) {
-            if (!root.windowMaximized)
-                root.firstChange = false
-
-            root.windowMaximized = true
-            root.fullScreen = false
-            root.flags = root.customFlags
-        }
-
-        else if (visibility === Window.FullScreen) {
-            if (!root.fullScreen)
-                root.firstChange = false
-
-            root.windowMaximized = false
-            root.fullScreen = true
-        }
-
-        else if (visibility !== Window.Hidden) {
-            if (windowMaximized || fullScreen && firstChange) {
-                root.x = 100
-                root.y = 100
-                root.width = root.minimumWidth
-                root.height = root.minimumHeight
-            }
-
-            root.fullScreen = false
-            root.windowMaximized = false
-            root.flags = root.customFlags
-        }
     }
 
     //
@@ -143,6 +57,9 @@ Window {
         property bool dragging: false
         property point lastMousePos: Qt.point(0, 0)
 
+        onDraggingChanged: globalMouseArea.cursorShape = dragging ? cursorShape :
+                                                                    Qt.ArrowCursor
+
         anchors {
             top: parent.top
             bottom: parent.bottom
@@ -151,7 +68,7 @@ Window {
         }
 
         hoverEnabled: true
-        width: windowBorder
+        width: handleSize
         cursorShape: Qt.SizeHorCursor
         onPressedChanged: dragging = pressed
         onPressed: lastMousePos = Qt.point(mouseX, mouseY)
@@ -159,7 +76,13 @@ Window {
         onMouseXChanged: {
             if (dragging) {
                 var dx = mouseX + lastMousePos.x
-                root.width += dx
+                var width = window.width + dx
+                if (width < window.minimumWidth)
+                    width = window.minimumWidth
+                else if (width > window.maximumWidth)
+                    width = window.maximumWidth
+
+                window.setGeometry(window.x, window.y, width, window.height)
             }
         }
     }
@@ -171,6 +94,9 @@ Window {
         property bool dragging: false
         property point lastMousePos: Qt.point(0, 0)
 
+        onDraggingChanged: globalMouseArea.cursorShape = dragging ? cursorShape :
+                                                                    Qt.ArrowCursor
+
         anchors {
             top: parent.top
             left: parent.left
@@ -179,7 +105,7 @@ Window {
         }
 
         hoverEnabled: true
-        width: windowBorder
+        width: handleSize
         cursorShape: Qt.SizeHorCursor
         onPressedChanged: dragging = pressed
         onPressed: lastMousePos = Qt.point(mouseX, mouseY)
@@ -187,29 +113,27 @@ Window {
         onMouseXChanged: {
             if (dragging) {
                 var dx = mouseX - lastMousePos.x
-                var y = root.y
+                var y = window.y
-                var x = root.x + dx
+                var x = window.x + dx
-                var height = root.height
+                var height = window.height
-                var width = root.width - dx
+                var width = window.width - dx
 
-                if (x > root.x)
+                if (x > window.x) {
-                    width = root.width - dx / 2
+                    width = window.width - dx / 2
-
+                    if (width < window.minimumWidth) {
-                root.setGeometry(x, y, width, height)
+                        width = window.minimumWidth
+                        x = window.x
                     }
+
+                    else if (width > window.maximumWidth) {
+                        width = window.maximumWidth
+                        x = window.x
                     }
                 }
 
-    //
+                window.setGeometry(x, y, width, height)
-    // Background color implementation
+            }
-    //
+        }
-    Rectangle {
-        z: 100
-        border.width: 0
-        color: "transparent"
-        border.color: "#000"
-        radius: root.radius
-        anchors.fill: parent
     }
 
     //
@@ -219,6 +143,9 @@ Window {
         property bool dragging: false
         property point lastMousePos: Qt.point(0, 0)
 
+        onDraggingChanged: globalMouseArea.cursorShape = dragging ? cursorShape :
+                                                                    Qt.ArrowCursor
+
         anchors {
             left: parent.left
             right: parent.right
@@ -226,14 +153,20 @@ Window {
         }
 
         hoverEnabled: true
-        height: windowBorder
+        height: handleSize
         cursorShape: Qt.SizeVerCursor
         onPressedChanged: dragging = pressed
         onPressed: lastMousePos = Qt.point(mouseX, mouseY)
         onMouseYChanged: {
             if (dragging) {
                 var dy = mouseY - lastMousePos.y
-                root.height += dy
+                var height = window.height + dy
+                if (height < minimumHeight)
+                    height = minimumHeight
+                else if (height > maximumHeight)
+                    height = maximumHeight
+
+                window.setGeometry(window.x, window.y, window.width, height)
             }
         }
     }
@@ -245,13 +178,27 @@ Window {
         property bool dragging: false
         property point lastMousePos: Qt.point(0, 0)
 
+        onDraggingChanged: globalMouseArea.cursorShape = dragging ? cursorShape :
+                                                                    Qt.ArrowCursor
+
         function updateWindowPosition() {
             if (dragging) {
                 var dy = mouseY - lastMousePos.y
                 var dx = mouseX + lastMousePos.x
+                var width = window.width + dx
+                var height = window.height + dy
 
-                root.width += dx
+                if (width < window.minimumWidth)
-                root.height += dy
+                    width = window.minimumWidth
+                else if (width > window.maximumWidth)
+                    width = window.maximumWidth
+
+                if (height < minimumHeight)
+                    height = minimumHeight
+                else if (height > maximumHeight)
+                    height = maximumHeight
+
+                window.setGeometry(window.x, window.y, width, height)
             }
         }
 
@@ -261,8 +208,8 @@ Window {
         }
 
         hoverEnabled: true
-        width: windowBorder
+        width: handleSize
-        height: windowBorder
+        height: handleSize
         cursorShape: Qt.SizeFDiagCursor
         onPressedChanged: dragging = pressed
         onMouseXChanged: updateWindowPosition()
@@ -276,20 +223,38 @@ Window {
         property bool dragging: false
         property point lastMousePos: Qt.point(0, 0)
 
+        onDraggingChanged: globalMouseArea.cursorShape = dragging ? cursorShape :
+                                                                    Qt.ArrowCursor
+
         function updateWindowPosition() {
             if (dragging) {
                 var dx = mouseX - lastMousePos.x
                 var dy = mouseY - lastMousePos.y
 
-                var y = root.y
+                var y = window.y
-                var x = root.x + dx
+                var x = window.x + dx
-                var width = root.width - dx
+                var width = window.width - dx
-                var height = root.height + dy
+                var height = window.height + dy
 
-                if (x > root.x)
+                if (x > window.x)
-                    width = root.width - dx / 2
+                    width = window.width - dx / 2
 
-                root.setGeometry(x, y, width, height)
+                if (width < window.minimumWidth) {
+                    width = window.minimumWidth
+                    x = window.x
+                }
+
+                else if (width > window.maximumWidth) {
+                    width = window.maximumWidth
+                    x = window.x
+                }
+
+                if (height < minimumHeight)
+                    height = minimumHeight
+                else if (height > maximumHeight)
+                    height = maximumHeight
+
+                window.setGeometry(x, y, width, height)
             }
         }
 
@@ -299,8 +264,8 @@ Window {
         }
 
         hoverEnabled: true
-        width: windowBorder
+        width: root.handleSize
-        height: windowBorder
+        height: root.handleSize
         cursorShape: Qt.SizeBDiagCursor
         onPressedChanged: dragging = pressed
         onMouseXChanged: updateWindowPosition()

assets/qml/FramelessWindow/WindowBorder.qml

@@ -30,6 +30,14 @@ import "../Widgets" as Widgets
 Rectangle {   
     id: root
 
+    //
+    // Custom signals
+    //
+    signal closed()
+    signal minimized()
+    signal maximized()
+    signal unmaximized()
+
     //
     // Window controls
     //
@@ -38,18 +46,24 @@ Rectangle {
     property bool closeEnabled: true
     property bool minimizeEnabled: true
     property bool maximizeEnabled: true
-    property bool fullscreenEnabled: true
+    property bool displayIcon: true
     property bool titlebarBorderEnabled: true
     property color textColor: palette.text
+    readonly property bool showMacControls: Cpp_IsMac
 
     //
     // Toggle maximized
     //
     function toggleMaximized() {
-        if (window.visibility === Window.Maximized)
+        if (window.visibility === Window.Maximized) {
             window.showNormal()
-        else
+            root.unmaximized()
+        }
+
+        else {
             window.showMaximized()
+            root.maximized()
+        }
     }
 
     //
@@ -66,7 +80,7 @@ Rectangle {
     //
     // Height calculation
     //
-    height: !Cpp_IsMac ? 38 : 32
+    height: !showMacControls ? 38 : 32
 
     //
     // Radius compensator rectangle
@@ -111,13 +125,25 @@ Rectangle {
         }
     }
 
+    //
+    // Window maximize by double click
+    //
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton
+        onDoubleClicked: {
+            if (root.maximizeEnabled)
+                root.toggleMaximized()
+        }
+    }
+
     //
     // macOS layout
     //
     Item {
-        visible: Cpp_IsMac
-        enabled: Cpp_IsMac
         anchors.fill: parent
+        visible: showMacControls
+        enabled: showMacControls
 
         RowLayout {
             spacing: 0
@@ -129,18 +155,25 @@ Rectangle {
 
             WindowButtonMacOS {
                 name: "close"
-                onClicked: window.close()
                 enabled: root.closeEnabled
                 visible: root.closeEnabled
                 Layout.alignment: Qt.AlignVCenter
+                onClicked: {
+                    window.close()
+                    root.closed()
+                }
+
             }
 
             WindowButtonMacOS {
                 name: "minimize"
-                onClicked: window.showMinimized()
                 Layout.alignment: Qt.AlignVCenter
                 enabled: root.minimizeEnabled && !root.fullScreen
                 visible: root.minimizeEnabled && !root.fullScreen
+                onClicked: {
+                    window.showMinimized()
+                    root.minimized()
+                }
             }
 
             WindowButtonMacOS {
@@ -154,22 +187,6 @@ Rectangle {
             Item {
                 Layout.fillWidth: true
             }
-
-            WindowButton {
-                width: 18
-                height: 18
-                textColor: root.textColor
-                visible: root.fullscreenEnabled
-                enabled: root.fullscreenEnabled
-                Layout.alignment: Qt.AlignVCenter
-                onClicked: root.toggleFullscreen()
-                highlightColor: Cpp_ThemeManager.highlight
-                name: root.fullScreen ? "restore" : "fullscreen"
-            }
-
-            Item {
-                width: 8
-            }
         }
     }
 
@@ -177,9 +194,9 @@ Rectangle {
     // Windows & Linux layout
     //
     Item {
-        visible: !Cpp_IsMac
-        enabled: !Cpp_IsMac
         anchors.fill: parent
+        visible: !showMacControls
+        enabled: !showMacControls
 
         RowLayout {
             spacing: 0
@@ -191,12 +208,11 @@ Rectangle {
 
             WindowButton {
                 textColor: root.textColor
-                visible: root.fullscreenEnabled
+                visible: root.displayIcon
-                enabled: root.fullscreenEnabled
+                enabled: root.displayIcon
+                source: "qrc:/images/icon.svg"
                 Layout.alignment: Qt.AlignVCenter
-                onClicked: root.toggleFullscreen()
                 highlightColor: Cpp_ThemeManager.highlight
-                name: root.fullScreen ? "restore" : "fullscreen"
             }
 
             Item {
@@ -206,11 +222,14 @@ Rectangle {
             WindowButton {
                 name: "minimize"
                 textColor: root.textColor
-                onClicked: window.showMinimized()
                 Layout.alignment: Qt.AlignVCenter
                 highlightColor: Cpp_ThemeManager.highlight
                 enabled: root.minimizeEnabled && !root.fullScreen
                 visible: root.minimizeEnabled && !root.fullScreen
+                onClicked: {
+                    window.showMinimized()
+                    root.minimized()
+                }
             }
 
             WindowButton {
@@ -226,11 +245,15 @@ Rectangle {
             WindowButton {
                 name: "close"
                 highlightColor: "#f00"
-                onClicked: window.close()
                 textColor: root.textColor
                 enabled: root.closeEnabled
                 visible: root.closeEnabled
                 Layout.alignment: Qt.AlignVCenter
+                onClicked: {
+                    window.close()
+                    root.closed()
+                }
+
             }
 
             Item {

assets/qml/JsonEditor/Footer.qml

@@ -27,6 +27,7 @@ import "../Widgets" as Widgets
 
 Rectangle {
     id: root
+    radius: jsonEditor.radius
     height: footer.implicitHeight + 4 * app.spacing
 
     //

assets/qml/Panes/Console.qml

@@ -96,7 +96,6 @@ Item {
         title: qsTr("Console")
         headerDoubleClickEnabled: false
         icon.source: "qrc:/icons/code.svg"
-        anchors.topMargin: app.spacing * 1.5
         anchors.margins: (app.spacing * 1.5) - 5
         backgroundColor: Cpp_ThemeManager.paneWindowBackground
 

assets/qml/Panes/Dashboard.qml

@@ -41,7 +41,6 @@ Item {
     ColumnLayout {
         anchors.fill: parent
         spacing: app.spacing * 2
-        anchors.topMargin: app.spacing * 1.5
         anchors.margins: (app.spacing * 1.5) - 5
 
         //

assets/qml/Panes/Setup.qml

@@ -146,7 +146,6 @@ Item {
         anchors.fill: parent
         anchors.leftMargin: 0
         headerDoubleClickEnabled: false
-        anchors.topMargin: app.spacing * 1.5
         icon.source: "qrc:/icons/settings.svg"
         anchors.margins: (app.spacing * 1.5) - 5
         backgroundColor: Cpp_ThemeManager.paneWindowBackground

assets/qml/Windows/About.qml

@@ -25,9 +25,9 @@ import QtQuick.Window 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.12
 
-import "../PlatformDependent" as PlatformDependent
+import "../FramelessWindow" as FramelessWindow
 
-PlatformDependent.CustomWindow {
+FramelessWindow.CustomWindow {
     id: root
 
     //
@@ -43,17 +43,17 @@ PlatformDependent.CustomWindow {
     height: minimumHeight
     x: (Screen.desktopAvailableWidth - width) / 2
     y: (Screen.desktopAvailableHeight - height) / 2
-    minimumWidth: column.implicitWidth + 4 * app.spacing
+    minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    maximumWidth: column.implicitWidth + 4 * app.spacing
+    maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
-    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
 
     //
     // Titlebar options
     //
     minimizeEnabled: false
     maximizeEnabled: false
-    fullscreenEnabled: false
+    displayIcon: false
     titlebarBorderEnabled: false
     titlebarText: Cpp_ThemeManager.text
     titlebarColor: Cpp_ThemeManager.dialogBackground
@@ -65,8 +65,8 @@ PlatformDependent.CustomWindow {
     Page {
         anchors {
             fill: parent
-            margins: 0
+            margins: root.margin
-            topMargin: titlebar.height
+            topMargin: titlebar.height + root.margin
         }
 
         palette.text: Cpp_ThemeManager.text
@@ -74,7 +74,19 @@ PlatformDependent.CustomWindow {
         palette.windowText: Cpp_ThemeManager.text
         palette.window: Cpp_ThemeManager.dialogBackground
         background: Rectangle {
-            color: "transparent"
+            radius: root.radius
+            color: root.backgroundColor
+
+            Rectangle {
+                height: root.radius
+                color: root.backgroundColor
+
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+            }
         }
 
         //

assets/qml/Windows/Acknowledgements.qml

@@ -25,9 +25,9 @@ import QtQuick.Window 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.12
 
-import "../PlatformDependent" as PlatformDependent
+import "../FramelessWindow" as FramelessWindow
 
-PlatformDependent.CustomWindow {
+FramelessWindow.CustomWindow {
     id: root
 
     //
@@ -38,34 +38,46 @@ PlatformDependent.CustomWindow {
     height: minimumHeight
     minimizeEnabled: false
     maximizeEnabled: false
-    fullscreenEnabled: false
+    displayIcon: false
     titlebarBorderEnabled: false
     titlebarText: Cpp_ThemeManager.text
     x: (Screen.desktopAvailableWidth - width) / 2
     y: (Screen.desktopAvailableHeight - height) / 2
     titlebarColor: Cpp_ThemeManager.dialogBackground
     backgroundColor: Cpp_ThemeManager.dialogBackground
-    minimumWidth: column.implicitWidth + 4 * app.spacing
+    minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    maximumWidth: column.implicitWidth + 4 * app.spacing
+    maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
-    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
 
     //
     // Use page item to set application palette
     //
     Page {
+        anchors {
+            fill: parent
+            margins: root.margin
+            topMargin: titlebar.height + root.margin
+        }
+
         palette.text: Cpp_ThemeManager.text
         palette.buttonText: Cpp_ThemeManager.text
         palette.windowText: Cpp_ThemeManager.text
         palette.window: Cpp_ThemeManager.dialogBackground
         background: Rectangle {
-            color: "transparent"
+            radius: root.radius
-        }
+            color: root.backgroundColor
+
+            Rectangle {
+                height: root.radius
+                color: root.backgroundColor
 
                 anchors {
-            fill: parent
+                    top: parent.top
-            margins: 0
+                    left: parent.left
-            topMargin: titlebar.height
+                    right: parent.right
+                }
+            }
         }
 
         //

assets/qml/Windows/CsvPlayer.qml

@@ -25,9 +25,9 @@ import QtQuick.Window 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.12
 
-import "../PlatformDependent" as PlatformDependent
+import "../FramelessWindow" as FramelessWindow
 
-PlatformDependent.CustomWindow {
+FramelessWindow.CustomWindow {
     id: root
 
     //
@@ -38,17 +38,17 @@ PlatformDependent.CustomWindow {
     height: minimumHeight
     minimizeEnabled: false
     maximizeEnabled: false
-    fullscreenEnabled: false
+    displayIcon: false
     titlebarBorderEnabled: false
     titlebarText: Cpp_ThemeManager.text
     x: (Screen.desktopAvailableWidth - width) / 2
     y: (Screen.desktopAvailableHeight - height) / 2
     titlebarColor: Cpp_ThemeManager.dialogBackground
     backgroundColor: Cpp_ThemeManager.dialogBackground
-    minimumWidth: column.implicitWidth + 4 * app.spacing
+    minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    maximumWidth: column.implicitWidth + 4 * app.spacing
+    maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
-    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
 
     //
     // Close CSV file when window is closed
@@ -62,18 +62,30 @@ PlatformDependent.CustomWindow {
     // Use page item to set application palette
     //
     Page {
+        anchors {
+            fill: parent
+            margins: root.margin
+            topMargin: titlebar.height + root.margin
+        }
+
         palette.text: Cpp_ThemeManager.text
         palette.buttonText: Cpp_ThemeManager.text
         palette.windowText: Cpp_ThemeManager.text
         palette.window: Cpp_ThemeManager.dialogBackground
         background: Rectangle {
-            color: "transparent"
+            radius: root.radius
-        }
+            color: root.backgroundColor
+
+            Rectangle {
+                height: root.radius
+                color: root.backgroundColor
 
                 anchors {
-            fill: parent
+                    top: parent.top
-            margins: 0
+                    left: parent.left
-            topMargin: titlebar.height
+                    right: parent.right
+                }
+            }
         }
 
         //

assets/qml/Windows/Donate.qml

@@ -26,9 +26,9 @@ import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.12
 
 import Qt.labs.settings 1.0
-import "../PlatformDependent" as PlatformDependent
+import "../FramelessWindow" as FramelessWindow
 
-PlatformDependent.CustomWindow {
+FramelessWindow.CustomWindow {
     id: root
 
     //
@@ -39,17 +39,17 @@ PlatformDependent.CustomWindow {
     height: minimumHeight
     minimizeEnabled: false
     maximizeEnabled: false
-    fullscreenEnabled: false
+    displayIcon: false
     titlebarBorderEnabled: false
     titlebarText: Cpp_ThemeManager.text
     x: (Screen.desktopAvailableWidth - width) / 2
     y: (Screen.desktopAvailableHeight - height) / 2
     titlebarColor: Cpp_ThemeManager.dialogBackground
     backgroundColor: Cpp_ThemeManager.dialogBackground
-    minimumWidth: column.implicitWidth + 4 * app.spacing
+    minimumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    maximumWidth: column.implicitWidth + 4 * app.spacing
+    maximumWidth: column.implicitWidth + 4 * app.spacing + 2 * root.margin
-    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    minimumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
-    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height
+    maximumHeight: column.implicitHeight + 4 * app.spacing + titlebar.height + 2 * root.margin
 
     //
     // Custom properties
@@ -93,18 +93,30 @@ PlatformDependent.CustomWindow {
     // Use page item to set application palette
     //
     Page {
+        anchors {
+            fill: parent
+            margins: root.margin
+            topMargin: titlebar.height + root.margin
+        }
+
         palette.text: Cpp_ThemeManager.text
         palette.buttonText: Cpp_ThemeManager.text
         palette.windowText: Cpp_ThemeManager.text
         palette.window: Cpp_ThemeManager.dialogBackground
         background: Rectangle {
-            color: "transparent"
+            radius: root.radius
-        }
+            color: root.backgroundColor
+
+            Rectangle {
+                height: root.radius
+                color: root.backgroundColor
 
                 anchors {
-            fill: parent
+                    top: parent.top
-            margins: 0
+                    left: parent.left
-            topMargin: titlebar.height
+                    right: parent.right
+                }
+            }
         }
 
         //

assets/qml/Windows/JsonEditor.qml

@@ -29,9 +29,9 @@ import Qt.labs.settings 1.0
 
 import "../JsonEditor"
 import "../Widgets" as Widgets
-import "../PlatformDependent" as PlatformDependent
+import "../FramelessWindow" as FramelessWindow
 
-PlatformDependent.CustomWindow {
+FramelessWindow.CustomWindow {
     id: root
 
     //
@@ -39,7 +39,8 @@ PlatformDependent.CustomWindow {
     //
     minimumWidth: 910
     minimumHeight: 720
-    fullscreenEnabled: false
+    displayIcon: false
+    borderColor: Cpp_ThemeManager.toolbarGradient1
     title: qsTr("JSON Editor - %1").arg(Cpp_JSON_Editor.jsonFileName)
 
     //
@@ -53,7 +54,7 @@ PlatformDependent.CustomWindow {
     //
     // Ask user to save changes before closing the window
     //
-    onClosing: (close) => close.accepted = Cpp_JSON_Editor.askSave()
+    //onClosing: (close) => close.accepted = Cpp_JSON_Editor.askSave()
 
     //
     // Dummy string to increase width of buttons
@@ -75,12 +76,13 @@ PlatformDependent.CustomWindow {
     // Use page item to set application palette
     //
     Page {
+        clip: true
         anchors.fill: parent
-        anchors.margins: root.radius
+        anchors.margins: root.margin
-        anchors.topMargin: titlebar.height
         palette.text: Cpp_ThemeManager.text
         palette.buttonText: Cpp_ThemeManager.text
         palette.windowText: Cpp_ThemeManager.text
+        anchors.topMargin: titlebar.height + root.margin
         palette.window: Cpp_ThemeManager.dialogBackground
 
         background: Rectangle {

assets/qml/Windows/MainWindow.qml

@@ -31,11 +31,13 @@ import "../Panes"
 import "../Windows"
 import "../Widgets"
 import "../JsonEditor"
+import "../FramelessWindow" as FramelessWindow
 import "../PlatformDependent" as PlatformDependent
 
-PlatformDependent.CustomWindow {
+FramelessWindow.CustomWindow {
     id: root
-    onClosing: Qt.quit()
+    onClosed: Qt.quit()
+    borderColor: Cpp_ThemeManager.toolbarGradient1
 
     //
     // Global properties
@@ -131,12 +133,12 @@ PlatformDependent.CustomWindow {
     // operating systems because of the global menubar in macOS)
     //
     visible: true
-    minimumWidth: 1250
     title: Cpp_AppName
     width: minimumWidth
     height: minimumHeight
-    minimumHeight: Cpp_IsMac ? 720 : 740
+    minimumWidth: 1250 + 2 * root.margin
     backgroundColor: Cpp_ThemeManager.windowBackground
+    minimumHeight: 720 + 2 * root.margin + root.titlebar.height
 
     //
     // Startup code
@@ -217,7 +219,7 @@ PlatformDependent.CustomWindow {
     }
 
     //
-    // Windows + Windows menubar loader
+    // Windows + Linux menubar loader
     //
     Item {
         enabled: !Cpp_IsMac
@@ -247,12 +249,13 @@ PlatformDependent.CustomWindow {
     // Main layout
     //
     Page {
-        anchors.margins: 5
+        clip: true
         anchors.fill: parent
-        anchors.topMargin: titlebar.height
+        anchors.margins: root.margin
         palette.text: Cpp_ThemeManager.text
         palette.buttonText: Cpp_ThemeManager.text
         palette.windowText: Cpp_ThemeManager.text
+        anchors.topMargin: titlebar.height + root.margin
 
         background: Rectangle {
             radius: root.radius

assets/qml/main.qml

@@ -21,6 +21,8 @@
  */
 
 import QtQuick 2.12
+import QtQuick.Controls 2.12
+
 import "Windows" as Windows
 
 Item {

src/Misc/ModuleManager.cpp

@@ -51,6 +51,7 @@
 
 #include <UI/Dashboard.h>
 #include <UI/WidgetLoader.h>
+
 #include <Widgets/Terminal.h>
 
 #include <QQuickWindow>
@@ -140,8 +141,7 @@ Misc::ModuleManager::ModuleManager()
 
     // Stop modules when application is about to quit
     setSplashScreenMessage(tr("Initializing..."));
-    connect(qApp, SIGNAL(aboutToQuit()), this, SLOT(stopOperations()));
+    connect(engine(), SIGNAL(quit()), this, SLOT(onQuit()));
-    connect(engine(), SIGNAL(quit()), this, SLOT(quit()));
 }
 
 /**
@@ -318,15 +318,6 @@ StringList Misc::ModuleManager::renderingEngines() const
     return list;
 }
 
-/**
- * Quits the application
- */
-void Misc::ModuleManager::quit()
-{
-    if (JSON::Editor::getInstance()->askSave())
-        qApp->quit();
-}
-
 /**
  * Hides the splash screen widget
  */
@@ -378,7 +369,7 @@ void Misc::ModuleManager::setSplashScreenMessage(const QString &message)
 /**
  * Calls the functions needed to safely quit the application
  */
-void Misc::ModuleManager::stopOperations()
+void Misc::ModuleManager::onQuit()
 {
     Plugins::Server::getInstance()->removeConnection();
     CSV::Export::getInstance()->closeFile();

src/Misc/ModuleManager.h

@@ -56,8 +56,7 @@ public:
     Q_INVOKABLE StringList renderingEngines() const;
 
 public slots:
-    void quit();
+    void onQuit();
-    void stopOperations();
     void hideSplashscreen();
     void setRenderingEngine(const int engine);
     void setSplashScreenMessage(const QString &message);

src/SingleCompilationUnit.cpp

@@ -460,6 +460,7 @@
 #include "moc_Compass.cpp"
 #include "moc_Console.cpp"
 #include "moc_Dashboard.cpp"
+#include "moc_WidgetLoader.cpp"
 #include "moc_DataGroup.cpp"
 #include "moc_Editor.cpp"
 #include "moc_Export.cpp"
@@ -483,7 +484,6 @@
 #include "moc_ThemeManager.cpp"
 #include "moc_TimerEvents.cpp"
 #include "moc_Translator.cpp"
-#include "moc_WidgetLoader.cpp"
 #include "moc_Utilities.cpp"
 
 //----------------------------------------------------------------------------------------