Change sidebar monitor selection to no longer clip

Add flickable when the selection area is bigger than the sidebar

ScreenPlay/qml/Installed/Sidebar.qml

@@ -139,9 +139,9 @@ Item {
             }
         }
 
-        Rectangle {
+        Item {
             id: sidebarBackground
-            color: Material.theme === Material.Light ? "white" : Material.background
+
             anchors {
                 top: navBackground.bottom
                 right: parent.right
@@ -150,6 +150,12 @@ Item {
                 leftMargin: 5
             }
 
+            Rectangle {
+                anchors.fill: parent
+                color: Material.theme === Material.Light ? "white" : Material.background
+                opacity: 0.95
+            }
+
             Rectangle {
                 id: imageWrapper
                 height: 237

ScreenPlay/qml/Monitors/MonitorSelection.qml

@@ -7,10 +7,12 @@ import ScreenPlay 1.0
 
 Rectangle {
     id: rect
-    color: Material.theme === Material.Light ? Material.background : Qt.darker(Material.background)
+    color: Material.theme === Material.Light ? Material.background : Qt.darker(
+                                                   Material.background)
 
     height: availableHeight
     width: parent.width
+    clip: true
 
     // Width of the Sidebar or Space that should be used
     property real availableWidth: 0
@@ -52,7 +54,7 @@ Rectangle {
         for (var i = 0; i < rp.count; i++) {
             rp.itemAt(i).isSelected = false
         }
-         rp.itemAt(0).isSelected = true
+        rp.itemAt(0).isSelected = true
         getActiveMonitors()
     }
 
@@ -83,15 +85,13 @@ Rectangle {
             isWidthGreaterThanHeight = true
         }
 
-        if(rp.count === 1){
+        if (rp.count === 1) {
-            availableWidth = availableWidth *.66
+            availableWidth = availableWidth * .66
         }
 
-
         var dynamicHeight = availableWidth * windowsDelta
         var dynamicWidth = availableHeight * windowsDelta
 
-
         // Delta (height/width)
         var monitorHeightRationDelta = 0
         var monitorWidthRationDelta = 0
@@ -110,21 +110,36 @@ Rectangle {
             rp.itemAt(i).width = rp.itemAt(i).width * monitorWidthRationDelta
             rp.itemAt(i).x = rp.itemAt(i).x * monitorWidthRationDelta
             rp.itemAt(i).y = rp.itemAt(i).y * monitorHeightRationDelta
+
+            rp.contentWidth += rp.itemAt(i).width
+            rp.contentHeight += rp.itemAt(i).height
         }
+        rp.contentWidth += 200
+        rp.contentHeight += 200
     }
 
     Flickable {
+        id: flickable
         anchors.fill: parent
+        contentWidth: rp.contentWidth
+        contentHeight: rp.contentHeight
         ScrollBar.vertical: ScrollBar {
+            policy: ScrollBar.AlwaysOff
+
             snapMode: ScrollBar.SnapOnRelease
         }
         ScrollBar.horizontal: ScrollBar {
+            policy: ScrollBar.AlwaysOff
+
             snapMode: ScrollBar.SnapOnRelease
         }
 
+
         Repeater {
             id: rp
             model: ScreenPlay.monitorListModel
+            property int contentWidth
+            property int contentHeight
 
             Component.onCompleted: rp.itemAt(0).isSelected = true
 

ScreenPlay/qml/Navigation/NavigationItem.qml

@@ -64,7 +64,7 @@ Item {
             anchors.left: icon.right
             anchors.leftMargin: 10
             font.pointSize: 14
-            color: Material.foreground
+            color: Material.primaryTextColor
             anchors.verticalCenter: parent.verticalCenter
             font.family: ScreenPlay.settings.font
             font.weight: Font.Normal