update background color and drag-effect, moved dulicated code

client/ui/qml/Components/HomeContainersListView.qml

@@ -69,7 +69,7 @@ ListView {
                         isDefault = true
 
                         menuContent.currentIndex = index
-                        containersDropDown.menu.state = "closed"
+                        containersDropDown.menu.close()
 
 
                         if (needReconnected &&

client/ui/qml/Controls2/Drawer2Type.qml

@@ -10,7 +10,7 @@ Item {
         target: PageController
 
         function onForceCloseDrawer() {
-            root.state = "closed"
+            close()
         }
     }
 
@@ -32,8 +32,6 @@ Item {
 
     state: "closed"
 
-    Drag.active: dragArea.drag.active
-
     Rectangle {
         id: draw2Background
 
@@ -41,7 +39,7 @@ Item {
         height: root.parent.height
         width: parent.width
         radius: 16
-        color:  "transparent"
+        color:  "#90000000"
         border.color: "transparent"
         border.width: 1
         visible: true
@@ -54,6 +52,7 @@ Item {
 
             onClicked: {
                 if (root.state === "opened") {
+                    draw2Background.color = "transparent"
                     root.state = "closed"
                     return
                 }
@@ -61,14 +60,16 @@ Item {
 
             Rectangle {
                 id: placeAreaHolder
-                anchors.top: parent.top
                 height: parent.height - contentHeight
                 anchors.right: parent.right
                 anchors.left: parent.left
                 visible: true
                 color: "transparent"
+
+                Drag.active: dragArea.drag.active
             }
 
+
             Rectangle {
                 id: contentArea
 
@@ -98,27 +99,27 @@ Item {
                     cursorShape: (root.state === "opened") ? Qt.PointingHandCursor : Qt.ArrowCursor
                     hoverEnabled: true
 
-                    drag.target: root
+                    drag.target: placeAreaHolder
                     drag.axis: Drag.YAxis
                     drag.maximumY: root.height
                     drag.minimumY: root.height - root.height
 
                     /** If drag area is released at any point other than min or max y, transition to the other state */
                     onReleased: {
-                        if (root.state === "closed" && root.y < dragArea.drag.maximumY) {
+                        if (root.state === "closed" && placeAreaHolder.y < dragArea.drag.maximumY) {
                             root.state = "opened"
                             return
                         }
 
-                        if (root.state === "opened" && root.y > dragArea.drag.minimumY) {
+                        if (root.state === "opened" && placeAreaHolder.y > dragArea.drag.minimumY) {
-                            root.state = "closed"
+                            close()
                             return
                         }
                     }
 
                     onClicked: {
                         if (root.state === "opened") {
-                            root.state = "closed"
+                            close()
                             return
                         }
                     }
@@ -209,22 +210,24 @@ Item {
         if (root.visible && root.state !== "closed") {
             return
         }
+        draw2Background.color = "#90000000"
 
         root.y = 0
         root.state = "opened"
         root.visible = true
         root.height = parent.height
         contentArea.height = contentHeight
+        placeAreaHolder.height =  parent.height - contentHeight
+        placeAreaHolder.y = parent.height - root.height
 
         dragArea.drag.maximumY =  parent.height
         dragArea.drag.minimumY =  parent.height - root.height
 
-
         animationVisible.running = true
     }
 
     function close() {
-        root.visible = false
+        draw2Background.color = "transparent"
         root.state = "closed"
     }
 

client/ui/qml/Controls2/DropDownType.qml

@@ -187,7 +187,7 @@ Item {
             BackButtonType {
                 backButtonImage: root.headerBackButtonImage
                 backButtonFunction: function() {
-                    menu.state = "closed"
+                    menu.close()
                 }
             }
         }