diff --git a/client/resources.qrc b/client/resources.qrc
index ac6e5a6d..d7f8ff7a 100644
--- a/client/resources.qrc
+++ b/client/resources.qrc
@@ -217,6 +217,5 @@
ui/qml/Controls2/TopCloseButtonType.qml
images/controls/x-circle.svg
ui/qml/Controls2/Drawer2Type.qml
- ui/qml/Components/HomeRootMenuButton.qml
diff --git a/client/ui/qml/Components/HomeRootMenuButton.qml b/client/ui/qml/Components/HomeRootMenuButton.qml
deleted file mode 100644
index b2ca98dc..00000000
--- a/client/ui/qml/Components/HomeRootMenuButton.qml
+++ /dev/null
@@ -1,140 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-
-import "../Controls2/TextTypes"
-import "../Controls2"
-
-Item {
- id: root
-
- property string text
- property int textMaximumLineCount: 2
- property int textElide: Qt.ElideRight
-
- property string descriptionText
-
- property var clickedFunction
-
- property string rightImageSource
-
- property string textColor: "#d7d8db"
- property string descriptionColor: "#878B91"
- property real textOpacity: 1.0
-
- property string rightImageColor: "#d7d8db"
-
- property bool descriptionOnTop: false
-
- property string defaultServerHostName
- property string defaultContainerName
-
- implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin
- implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin
-
- ColumnLayout {
- id: content
-
- anchors.right: parent.right
- anchors.left: parent.left
- anchors.bottom: parent.bottom
-
- RowLayout {
- Layout.topMargin: 24
- Layout.leftMargin: 24
- Layout.rightMargin: 24
- Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
- Header1TextType {
- Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
-
- maximumLineCount: 2
- elide: Qt.ElideRight
-
- text: root.text
- Layout.alignment: Qt.AlignLeft
- }
-
-
- ImageButtonType {
- id: rightImage
-
- hoverEnabled: false
- image: rightImageSource
- imageColor: rightImageColor
- visible: rightImageSource ? true : false
-
-// implicitSize: 18
-// backGroudRadius: 5
- horizontalPadding: 0
- padding: 0
- spacing: 0
-
-
- Rectangle {
- id: rightImageBackground
- anchors.fill: parent
- radius: 16
- color: "transparent"
-
- Behavior on color {
- PropertyAnimation { duration: 200 }
- }
- }
- }
- }
-
- LabelTextType {
- Layout.bottomMargin: 44
- Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
- text: {
- var description = ""
- if (ServersModel.isDefaultServerHasWriteAccess()) {
- if (SettingsController.isAmneziaDnsEnabled()
- && ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) {
- description += "Amnezia DNS | "
- }
- } else {
- if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) {
- description += "Amnezia DNS | "
- }
- }
-
- description += root.defaultContainerName + " | " + root.defaultServerHostName
- return description
- }
- }
- }
-
-
- MouseArea {
- anchors.fill: parent
- cursorShape: Qt.PointingHandCursor
- hoverEnabled: true
-
- onEntered: {
- rightImageBackground.color = rightImage.hoveredColor
-
- root.textOpacity = 0.8
- }
-
- onExited: {
- rightImageBackground.color = rightImage.defaultColor
-
- root.textOpacity = 1
- }
-
- onPressedChanged: {
- rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
-
- root.textOpacity = 0.7
- }
-
- onClicked: {
- if (clickedFunction && typeof clickedFunction === "function") {
- clickedFunction()
- }
- }
- }
-}
diff --git a/client/ui/qml/Controls2/Drawer2Type.qml b/client/ui/qml/Controls2/Drawer2Type.qml
index b34390ac..fc486744 100644
--- a/client/ui/qml/Controls2/Drawer2Type.qml
+++ b/client/ui/qml/Controls2/Drawer2Type.qml
@@ -10,11 +10,18 @@ Item {
target: PageController
function onForceCloseDrawer() {
- close()
+ if (root.opened()) {
+ close()
+ return
+ }
+
+ if (root.expanded()) {
+ collapse()
+ }
}
}
- signal closed
+ signal drawerClosed
visible: false
@@ -28,6 +35,13 @@ Item {
property int contentHeight: 0
property Item contentParent: contentArea
+ property bool dragActive: dragArea.drag.active
+
+ /** Initial height of button content */
+ property int collapsedHeight: 0
+
+ property bool fullMouseAreaVisible: true
+
state: "closed"
Rectangle {
@@ -37,7 +51,7 @@ Item {
height: parent.height
width: parent.width
radius: 16
- color: "#90000000"
+ color: "transparent" //"#90000000"
border.color: "transparent"
border.width: 1
visible: true
@@ -45,90 +59,119 @@ Item {
MouseArea {
id: fullMouseArea
anchors.fill: parent
- enabled: (root.state === "opened")
+ enabled: (root.opened() || root.expanded())
hoverEnabled: true
+ visible: fullMouseAreaVisible
onClicked: {
- if (root.state === "opened") {
+ if (root.opened()) {
close()
return
}
+
+ if (root.expanded()) {
+ collapse()
+ }
}
+ }
+
+ Rectangle {
+ id: placeAreaHolder
+ height: (!root.opened()) ? 0 : parent.height - contentHeight
+ anchors.right: parent.right
+ anchors.left: parent.left
+ visible: true
+ color: "transparent"
+
+ Drag.active: dragArea.drag.active
+ }
+
+
+ Rectangle {
+ id: contentArea
+
+ anchors.top: placeAreaHolder.bottom
+ height: contentHeight
+ radius: 16
+ color: root.defaultColor
+ border.width: 1
+ border.color: root.borderColor
+ width: parent.width
+ visible: true
Rectangle {
- id: placeAreaHolder
- height: parent.height - contentHeight
+ width: parent.radius
+ height: parent.radius
+ anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.left: parent.left
- visible: true
- color: "transparent"
-
- Drag.active: dragArea.drag.active
+ color: parent.color
}
+ MouseArea {
+ id: dragArea
- Rectangle {
- id: contentArea
+ anchors.fill: parent
- anchors.top: placeAreaHolder.bottom
- height: contentHeight
- radius: 16
- color: root.defaultColor
- border.width: 1
- border.color: root.borderColor
- width: parent.width
- visible: true
+ cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor // ?
+ hoverEnabled: true
- Rectangle {
- width: parent.radius
- height: parent.radius
- anchors.bottom: parent.bottom
- anchors.right: parent.right
- anchors.left: parent.left
- color: parent.color
- }
+ drag.target: placeAreaHolder
+ drag.axis: Drag.YAxis
+ drag.maximumY: (root.collapsed() || root.expanded()) ? (root.height - collapsedHeight) : root.height
+ drag.minimumY: (root.collapsed() || root.expanded()) ? (root.height - root.height * 0.9) : (root.height - root.height)
- MouseArea {
- id: dragArea
-
- anchors.fill: parent
-
- cursorShape: (root.state === "opened") ? Qt.PointingHandCursor : Qt.ArrowCursor
- hoverEnabled: true
-
- 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" && placeAreaHolder.y < root.height * 0.9) {
- root.state = "opened"
- return
- }
-
- if (root.state === "opened" && placeAreaHolder.y > (root.height - root.height * 0.9)) {
- close()
- return
- }
-
- placeAreaHolder.y = 0
+ /** If drag area is released at any point other than min or max y, transition to the other state */
+ onReleased: {
+ if (root.closed() && placeAreaHolder.y < root.height * 0.9) {
+ root.state = "opened"
+ return
}
- onClicked: {
- if (root.state === "opened") {
- close()
- return
- }
+ if (root.opened() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
+ close()
+ return
+ }
+
+
+ if (root.collapsed() && placeAreaHolder.y < (root.height - collapsedHeight)) {
+ root.state = "expanded"
+ return
+ }
+
+ if (root.expanded() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
+ root.state = "collapsed"
+ return
+ }
+
+
+ if (root.opened()) {
+ placeAreaHolder.y = 0
+ }
+ }
+
+ onClicked: {
+ if (root.opened()) {
+ close()
+ return
+ }
+
+ if (root.expanded()) {
+ collapse()
+ return
+ }
+
+ if (root.collapsed()) {
+ root.state = "expanded"
}
}
}
}
+
}
onStateChanged: {
- if (root.state === "closed") {
+ if (root.closed() || root.collapsed()) {
var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
if (initialPageNavigationBarColor !== 0xFF1C1D21) {
PageController.updateNavigationBarColor(initialPageNavigationBarColor)
@@ -138,11 +181,12 @@ Item {
PageController.drawerClose()
}
- closed()
+ drawerClosed()
return
}
- if (root.state === "opened") {
+
+ if (root.opened() || root.expanded()) {
if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
PageController.updateNavigationBarColor(0xFF1C1D21)
}
@@ -161,7 +205,7 @@ Item {
name: "closed"
PropertyChanges {
target: placeAreaHolder
- y: parent.height
+ y: root.height
}
},
@@ -171,6 +215,22 @@ Item {
target: placeAreaHolder
y: dragArea.drag.minimumY
}
+ },
+
+ State {
+ name: "collapsed"
+ PropertyChanges {
+ target: placeAreaHolder
+ y: root.height - collapsedHeight
+ }
+ },
+
+ State {
+ name: "expanded"
+ PropertyChanges {
+ target: placeAreaHolder
+ y: root.height - root.height * 0.9
+ }
}
]
@@ -199,6 +259,40 @@ Item {
properties: "y"
duration: 200
}
+ },
+
+ Transition {
+ from: "expanded"
+ to: "collapsed"
+ PropertyAnimation {
+ target: placeAreaHolder
+ properties: "y"
+ duration: 200
+ }
+
+ onRunningChanged: {
+ if (!running) {
+ draw2Background.color = "transparent"
+ fullMouseArea.visible = false
+ }
+ }
+ },
+
+ Transition {
+ from: "collapsed"
+ to: "expanded"
+ PropertyAnimation {
+ target: placeAreaHolder
+ properties: "y"
+ duration: 200
+ }
+
+ onRunningChanged: {
+ if (!running) {
+ draw2Background.color = "#90000000"
+ visibledMouseArea(true)
+ }
+ }
}
]
@@ -212,9 +306,11 @@ Item {
}
function open() {
- if (root.visible && root.state !== "closed") {
+ //if (root.visible && !root.closed()) {
+ if (root.opened()) {
return
}
+
draw2Background.color = "#90000000"
visibledMouseArea(true)
@@ -240,21 +336,52 @@ Item {
root.state = "closed"
}
- onVisibleChanged: {
- // e.g cancel, ......
- if (!visible) {
- if (root.state === "opened") {
- if (needCloseButton) {
- PageController.drawerClose()
- }
- }
-
- close()
- }
+ function collapse() {
+ draw2Background.color = "transparent"
+ root.state = "collapsed"
}
+
function visibledMouseArea(visbile) {
fullMouseArea.visible = visbile
dragArea.visible = visbile
}
+
+ function opened() {
+ return root.state === "opened" ? true : false
+ }
+
+ function expanded() {
+ return root.state === "expanded" ? true : false
+ }
+
+ function closed() {
+ return root.state === "closed" ? true : false
+ }
+
+ function collapsed() {
+ return root.state === "collapsed" ? true : false
+ }
+
+
+ onVisibleChanged: {
+ // e.g cancel, ......
+ if (!visible) {
+ if (root.opened()) {
+ if (needCloseButton) {
+ PageController.drawerClose()
+ }
+
+ close()
+ }
+
+ if (root.expanded()) {
+ if (needCloseButton) {
+ PageController.drawerClose()
+ }
+
+ collapse()
+ }
+ }
+ }
}
diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml
index dafa3bdc..a3a3ed9d 100644
--- a/client/ui/qml/Pages2/PageHome.qml
+++ b/client/ui/qml/Pages2/PageHome.qml
@@ -30,13 +30,13 @@ PageType {
target: PageController
function onRestorePageHomeState(isContainerInstalled) {
- menu.close()
+ buttonContent.collapse()
if (isContainerInstalled) {
containersDropDown.menuVisible = true
}
}
function onForceCloseDrawer() {
- menu.close()
+ buttonContent.collapse()
}
}
@@ -69,7 +69,7 @@ PageType {
}
}
- // collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
+ collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
expandedServersMenuDescription.text = description + root.defaultServerHostName
}
@@ -79,7 +79,7 @@ PageType {
Item {
anchors.fill: parent
- anchors.bottomMargin: defaultServerInfo.implicitHeight
+ anchors.bottomMargin: buttonContent.collapsedHeight
ConnectButton {
anchors.centerIn: parent
@@ -88,7 +88,7 @@ PageType {
Rectangle {
id: buttonBackground
- anchors.fill: defaultServerInfo
+ anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
radius: 16
color: root.defaultColor
@@ -105,41 +105,105 @@ PageType {
}
}
- HomeRootMenuButton {
- id: defaultServerInfo
- anchors.right: parent.right
- anchors.left: parent.left
- anchors.bottom: parent.bottom
-
- text: root.defaultServerName
- rightImageSource: "qrc:/images/controls/chevron-down.svg"
-
- defaultContainerName: root.defaultContainerName
- defaultServerHostName: root.defaultServerHostName
-
- clickedFunction: function() {
- menu.open()
- }
- }
-
Drawer2Type {
- id: menu
- parent: root
+ id: buttonContent
+ visible: true
+
+ fullMouseAreaVisible: false
+
+ /** True when expanded objects should be visible */
+ property bool expandedVisibility: buttonContent.expanded() || (buttonContent.collapsed() && buttonContent.dragActive)
+ /** True when collapsed objects should be visible */
+ property bool collapsedVisibility: buttonContent.collapsed() && !buttonContent.dragActive
width: parent.width
height: parent.height
contentHeight: parent.height * 0.9
+ ColumnLayout {
+ id: content
+
+ parent: buttonContent.contentParent
+
+ visible: buttonContent.collapsedVisibility
+
+ anchors.right: parent.right
+ anchors.left: parent.left
+ anchors.top: parent.top
+
+ onImplicitHeightChanged: {
+ if (buttonContent.collapsed() && buttonContent.collapsedHeight === 0) {
+ buttonContent.collapsedHeight = implicitHeight
+ }
+ }
+
+ RowLayout {
+ Layout.topMargin: 24
+ Layout.leftMargin: 24
+ Layout.rightMargin: 24
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+ Header1TextType {
+ id: collapsedButtonHeader
+ Layout.maximumWidth: root.width - 48 - 18 - 12 // todo
+
+ maximumLineCount: 2
+ elide: Qt.ElideRight
+
+ text: root.defaultServerName
+
+ Layout.alignment: Qt.AlignLeft
+ }
+
+
+ ImageButtonType {
+ id: collapsedButtonChevron
+
+ hoverEnabled: false
+ image: "qrc:/images/controls/chevron-down.svg"
+ imageColor: "#d7d8db"
+
+ horizontalPadding: 0
+ padding: 0
+ spacing: 0
+
+ Rectangle {
+ id: rightImageBackground
+ anchors.fill: parent
+ radius: 16
+ color: "transparent"
+
+ Behavior on color {
+ PropertyAnimation { duration: 200 }
+ }
+ }
+ }
+ }
+
+ LabelTextType {
+ id: collapsedServerMenuDescription
+ Layout.bottomMargin: 44
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+ visible: buttonContent.collapsedVisibility
+ }
+ }
+
+ Component.onCompleted: {
+ buttonContent.collapse()
+ }
+
ColumnLayout {
id: serversMenuHeader
- parent: menu.contentParent
+ parent: buttonContent.contentParent
anchors.top: parent.top
anchors.right: parent.right
anchors.left: parent.left
+ visible: buttonContent.expandedVisibility
+
Header1TextType {
Layout.fillWidth: true
Layout.topMargin: 24
@@ -222,6 +286,7 @@ PageType {
Layout.topMargin: 48
Layout.leftMargin: 16
Layout.rightMargin: 16
+ visible: buttonContent.expandedVisibility
headerText: qsTr("Servers")
}
@@ -230,7 +295,7 @@ PageType {
Flickable {
id: serversContainer
- parent: menu.contentParent
+ parent: buttonContent.contentParent
anchors.top: serversMenuHeader.bottom
anchors.right: parent.right
@@ -239,6 +304,8 @@ PageType {
anchors.topMargin: 16
contentHeight: col.implicitHeight
+ visible: buttonContent.expandedVisibility
+
clip: true
ScrollBar.vertical: ScrollBar {
@@ -342,7 +409,7 @@ PageType {
onClicked: function() {
ServersModel.currentlyProcessedIndex = index
PageController.goToPage(PageEnum.PageSettingsServerInfo)
- menu.close()
+ buttonContent.collapse()
}
}
}
diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml
index 8afad392..4ccd40d8 100644
--- a/client/ui/qml/Pages2/PageStart.qml
+++ b/client/ui/qml/Pages2/PageStart.qml
@@ -247,7 +247,7 @@ PageType {
z: 1
- onClosed: {
+ onDrawerClosed: {
tabBar.setCurrentIndex(tabBar.previousIndex)
}
}