Refine window Navigation to look more like a navigation

Add patreon button

ScreenPlay/CMakeLists.txt

@@ -71,6 +71,7 @@ set(QML
     qml/Monitors/MonitorsProjectSettingItem.qml
     qml/Navigation/Navigation.qml
     qml/Navigation/NavigationItem.qml
+    qml/Navigation/WindowNavButton.qml
     qml/Monitors/DefaultVideoControls.qml
     qml/Common/TagSelector.qml
     qml/Common/Tag.qml

ScreenPlay/Resources.qrc

@@ -154,5 +154,6 @@
         <file>qml/Create/WizardsFiles/QMLWidgetMain.qml</file>
         <file>translations/ScreenPlay_pl_PL.qm</file>
         <file>translations/ScreenPlay_pl_PL.ts</file>
+        <file>assets/icons/font-awsome/patreon-brands.svg</file>
     </qresource>
 </RCC>

ScreenPlay/assets/icons/font-awsome/patreon-brands.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="patreon" class="svg-inline--fa fa-patreon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z"></path></svg>

ScreenPlay/qml/Community/Community.qml

@@ -68,6 +68,15 @@ Item {
                 Layout.alignment: Qt.AlignVCenter
             }
 
+            Button {
+                text: qsTr("Reddit")
+                onClicked: Qt.openUrlExternally("https://www.reddit.com/r/ScreenPlayApp/")
+                icon.source: "qrc:/assets/icons/brand_reddit.svg"
+                icon.width: 14
+                icon.height: 14
+                Layout.alignment: Qt.AlignVCenter
+            }
+
             Button {
                 text: qsTr("Issue Tracker")
                 onClicked: Qt.openUrlExternally("https://gitlab.com/kelteseth/ScreenPlay/-/issues")

ScreenPlay/qml/Navigation/Navigation.qml

@@ -49,11 +49,29 @@ Rectangle {
         setNavigation(name)
     }
 
-    height: 60
+    height: 89
     width: 1366
     color: Material.theme === Material.Light ? "white" : Material.background
     layer.enabled: true
 
+    Rectangle {
+        id:navBg
+        height:29
+        width:parent.width
+        color: Material.theme === Material.Light ? Material.background : "#242424"
+
+        Text {
+            id: title
+            text: qsTr("ScreenPlay Alpha %1  - Open Source Wallpaper And Widgets").arg(ScreenPlay.version())
+            color: Material.primaryTextColor
+            anchors{
+                left:parent.left
+                leftMargin: 20
+                verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+
     MouseArea {
         id: mouseArea
 
@@ -77,6 +95,34 @@ Rectangle {
         }
     }
 
+    RowLayout {
+        anchors {
+            top:navBg.top
+            right: navBg.right
+            bottom: navBg.bottom
+        }
+
+        WindowNavButton {
+            id: miMinimize
+            Layout.alignment: Qt.AlignVCenter
+            icon.source: "qrc:/assets/icons/icon_minimize.svg"
+            onClicked: root.window.hide()
+        }
+        WindowNavButton {
+            id: miquit
+            Layout.alignment: Qt.AlignVCenter
+            icon.source: "qrc:/assets/icons/icon_close.svg"
+            onClicked: {
+                if(ScreenPlay.screenPlayManager.activeWallpaperCounter === 0
+                        && ScreenPlay.screenPlayManager.activeWidgetsCounter === 0){
+                    Qt.quit()
+                    return
+                }
+                dialog.open()
+            }
+        }
+    }
+
     Connections {
         function onRequestNavigationActive(isActive) {
             setActive(isActive)
@@ -89,12 +135,21 @@ Rectangle {
         target: ScreenPlay.util
     }
 
+
+
+
     Row {
         id: row
+        height: 60
+
+        anchors {
+            top:parent.top
+            topMargin: navBg.height
+            right: parent.right
+            left: parent.left
+            leftMargin: 20
+        }
 
-        anchors.fill: parent
-        anchors.left: parent.left
-        anchors.leftMargin: 20
         spacing: 0
 
         NavigationItem {
@@ -165,10 +220,28 @@ Rectangle {
         radius: 3
     }
 
+
+    RowLayout {
+        anchors {
+            top: parent.top
+            topMargin: navBg.height
+            right: quickActionRow.left
+            rightMargin: 20
+            bottom: parent.bottom
+        }
+
+        ToolButton {
+            icon.source: "qrc:/assets/icons/font-awsome/patreon-brands.svg"
+            text: qsTr("Support me on Patreon!")
+            onClicked: Qt.openUrlExternally("https://www.patreon.com/ScreenPlayApp")
+        }
+    }
+
     RowLayout {
         id: quickActionRow
         anchors {
             top: parent.top
+            topMargin: navBg.height
             right: parent.right
             rightMargin: 10
             bottom: parent.bottom
@@ -234,6 +307,25 @@ Rectangle {
             ToolTip.text: qsTr("Pause/Play all Wallpaper")
             ToolTip.visible: hovered
         }
+
+        ToolButton {
+            id: miCloseAll
+            enabled: quickActionRow.contentActive
+            Layout.alignment: Qt.AlignVCenter
+            icon.source: "qrc:/assets/icons/icon_close.svg"
+            icon.width: root.iconWidth
+            icon.height: root.iconHeight
+            icon.color: Material.iconColor
+            onClicked: {
+                ScreenPlay.screenPlayManager.removeAllWallpapers()
+                ScreenPlay.screenPlayManager.removeAllWidgets()
+            }
+
+            hoverEnabled: true
+            ToolTip.text: qsTr("Close All Content")
+            ToolTip.visible: hovered
+        }
+
         ToolButton {
                 id: miConfig
                 Layout.alignment: Qt.AlignVCenter
@@ -246,41 +338,9 @@ Rectangle {
                 ToolTip.visible: hovered
             }
 
-        Rectangle  {
-            color: Material.theme === Material.Light ? Material.iconDisabledColor : Qt.darker(Material.background)
-            height: quickActionRowBackground.height
-            width: 1
-        }
 
-        ToolButton {
-            id: miMinimize
-            Layout.alignment: Qt.AlignVCenter
-            icon.source: "qrc:/assets/icons/icon_minimize.svg"
-            icon.width: root.iconWidth
-            icon.height: root.iconHeight
-            onClicked: root.window.hide()
-            hoverEnabled: true
-            ToolTip.text: qsTr("Minimize to Tray")
-            ToolTip.visible: hovered
-        }
-        ToolButton {
-            id: miquit
-            Layout.alignment: Qt.AlignVCenter
-            icon.source: "qrc:/assets/icons/icon_close.svg"
-            icon.width: root.iconWidth
-            icon.height: root.iconHeight
-            onClicked: {
-                if(ScreenPlay.screenPlayManager.activeWallpaperCounter === 0
-                        && ScreenPlay.screenPlayManager.activeWidgetsCounter === 0){
-                    Qt.quit()
-                    return
-                }
-                dialog.open()
-            }
-            hoverEnabled: true
-            ToolTip.text: qsTr("Exit")
-            ToolTip.visible: hovered
-        }
+
+
 
         Dialog {
             id: dialog

ScreenPlay/qml/Navigation/WindowNavButton.qml

@@ -0,0 +1,79 @@
+import QtQuick
+import Qt5Compat.GraphicalEffects
+import QtQuick.Controls.Material
+
+/*!
+   \qmltype Window Nav Button
+   \brief A image selector with popup preview.
+
+*/
+MouseArea {
+    id: root
+
+    height: 29
+    width: 45
+
+    /*!
+        \qmlproperty color BackButtonIcon::color
+
+        Color if the icon.
+    */
+    property color color: Material.iconColor
+    /*!
+        \qmlproperty string BackButtonIcon::icon
+
+        Icon image if the icon.
+    */
+    property alias icon: img
+
+    cursorShape: Qt.PointingHandCursor
+    onEntered: root.state = "hover"
+    onExited: root.state = ""
+    hoverEnabled: true
+
+    Image {
+        id: img
+
+        source: root.icon
+        visible: false
+        width: 14
+        height: 14
+        smooth: true
+        anchors.centerIn: parent
+        sourceSize: Qt.size(width, width)
+    }
+
+    ColorOverlay {
+        id: iconColorOverlay
+
+        anchors.fill: img
+        source: img
+        color: root.color
+    }
+
+    states: [
+        State {
+            name: "hover"
+
+            PropertyChanges {
+                target: iconColorOverlay
+                color: Material.color(Material.Orange)
+            }
+
+        }
+    ]
+    transitions: [
+        Transition {
+            from: ""
+            to: "hover"
+            reversible: true
+
+            ColorAnimation {
+                target: iconColorOverlay
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+
+        }
+    ]
+}