diff --git a/client/resources.qrc b/client/resources.qrc
index d7f8ff7a..ac6e5a6d 100644
--- a/client/resources.qrc
+++ b/client/resources.qrc
@@ -217,5 +217,6 @@
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/HomeContainersListView.qml b/client/ui/qml/Components/HomeContainersListView.qml
index 86a755c1..1436c747 100644
--- a/client/ui/qml/Components/HomeContainersListView.qml
+++ b/client/ui/qml/Components/HomeContainersListView.qml
@@ -69,7 +69,7 @@ ListView {
isDefault = true
menuContent.currentIndex = index
- containersDropDown.menuVisible = false
+ containersDropDown.menu.state = "closed"
if (needReconnected &&
diff --git a/client/ui/qml/Components/HomeRootMenuButton.qml b/client/ui/qml/Components/HomeRootMenuButton.qml
new file mode 100644
index 00000000..b2ca98dc
--- /dev/null
+++ b/client/ui/qml/Components/HomeRootMenuButton.qml
@@ -0,0 +1,140 @@
+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 2daae742..3f3cf54b 100644
--- a/client/ui/qml/Controls2/Drawer2Type.qml
+++ b/client/ui/qml/Controls2/Drawer2Type.qml
@@ -22,10 +22,9 @@ Item {
property string defaultColor: "#1C1D21"
property string borderColor: "#2C2D30"
- property int collapsedHeight: 0
property bool needCollapsed: false
- property double scaely
+
property int contentHeight: 0
property Item contentParent: contentArea
@@ -50,15 +49,10 @@ Item {
MouseArea {
id: fullArea
anchors.fill: parent
- enabled: (root.state === "expanded" || root.state === "opened")
+ enabled: (root.state === "opened")
hoverEnabled: true
onClicked: {
- if (root.state === "expanded") {
- root.state = "collapsed"
- return
- }
-
if (root.state === "opened") {
root.state = "closed"
return
@@ -101,7 +95,7 @@ Item {
anchors.fill: parent
- cursorShape: (root.state === "opened" || root.state === "expanded") ? Qt.PointingHandCursor : Qt.ArrowCursor
+ cursorShape: (root.state === "opened") ? Qt.PointingHandCursor : Qt.ArrowCursor
hoverEnabled: true
drag.target: root
@@ -113,35 +107,17 @@ Item {
onReleased: {
if (root.state === "closed" && root.y < dragArea.drag.maximumY) {
root.state = "opened"
- // PageController.drawerOpen()
return
}
if (root.state === "opened" && root.y > dragArea.drag.minimumY) {
root.state = "closed"
- // PageController.drawerClose()
- return
- }
-
- if (root.state === "collapsed" && root.y < dragArea.drag.maximumY) {
- root.state = "expanded"
- return
- }
- if (root.state === "expanded" && root.y > dragArea.drag.minimumY) {
- root.state = "collapsed"
return
}
}
onClicked: {
- if (root.state === "expanded") {
- // PageController.drawerOpen()
- root.state = "collapsed"
- return
- }
-
if (root.state === "opened") {
- // PageController.drawerClose()
root.state = "closed"
return
}
@@ -152,7 +128,7 @@ Item {
}
onStateChanged: {
- if (root.state === "closed" || root.state === "collapsed") {
+ if (root.state === "closed") {
var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
if (initialPageNavigationBarColor !== 0xFF1C1D21) {
PageController.updateNavigationBarColor(initialPageNavigationBarColor)
@@ -166,7 +142,7 @@ Item {
return
}
- if (root.state === "expanded" || root.state === "opened") {
+ if (root.state === "opened") {
if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
PageController.updateNavigationBarColor(0xFF1C1D21)
}
@@ -181,21 +157,6 @@ Item {
/** Two states of buttonContent, great place to add any future animations for the drawer */
states: [
- State {
- name: "collapsed"
- PropertyChanges {
- target: root
- y: root.height - collapsedHeight
- }
- },
- State {
- name: "expanded"
- PropertyChanges {
- target: root
- y: dragArea.drag.minimumY
- }
- },
-
State {
name: "closed"
PropertyChanges {
@@ -214,25 +175,6 @@ Item {
]
transitions: [
- Transition {
- from: "collapsed"
- to: "expanded"
- PropertyAnimation {
- target: root
- properties: "y"
- duration: 200
- }
- },
- Transition {
- from: "expanded"
- to: "collapsed"
- PropertyAnimation {
- target: root
- properties: "y"
- duration: 200
- }
- },
-
Transition {
from: "opened"
to: "closed"
diff --git a/client/ui/qml/Controls2/DropDownType.qml b/client/ui/qml/Controls2/DropDownType.qml
index 83518bef..0506bdc7 100644
--- a/client/ui/qml/Controls2/DropDownType.qml
+++ b/client/ui/qml/Controls2/DropDownType.qml
@@ -42,6 +42,8 @@ Item {
property Item drawerParent: root
+ property Drawer2Type menu: menu
+
implicitWidth: rootButtonContent.implicitWidth
implicitHeight: rootButtonContent.implicitHeight
@@ -157,13 +159,12 @@ Item {
onClicked: {
if (rootButtonClickedFunction && typeof rootButtonClickedFunction === "function") {
rootButtonClickedFunction()
- } else {
- menu.open()
}
+
+ menu.open()
}
}
- //DrawerType {
Drawer2Type {
id: menu
@@ -186,7 +187,7 @@ Item {
BackButtonType {
backButtonImage: root.headerBackButtonImage
backButtonFunction: function() {
- root.menuVisible = false
+ menu.state = "closed"
}
}
}
diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml
index 519c17a5..dafa3bdc 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) {
- buttonContent.state = "expanded"
+ menu.close()
if (isContainerInstalled) {
containersDropDown.menuVisible = true
}
}
function onForceCloseDrawer() {
- buttonContent.state = "collapsed"
+ menu.close()
}
}
@@ -69,79 +69,27 @@ PageType {
}
}
- collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
+ // collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
expandedServersMenuDescription.text = description + root.defaultServerHostName
}
- Component.onCompleted: updateDescriptions()
-
- MouseArea {
- anchors.fill: parent
- enabled: buttonContent.state === "expanded"
- onClicked: {
- buttonContent.state = "collapsed"
- }
+ Component.onCompleted: {
+ updateDescriptions()
}
Item {
anchors.fill: parent
- anchors.bottomMargin: buttonContent.collapsedHeight
+ anchors.bottomMargin: defaultServerInfo.implicitHeight
ConnectButton {
anchors.centerIn: parent
}
}
- MouseArea {
- id: dragArea
-
- anchors.fill: buttonBackground
- cursorShape: buttonContent.state === "collapsed" ? Qt.PointingHandCursor : Qt.ArrowCursor
- hoverEnabled: true
-
- drag.target: buttonContent
- drag.axis: Drag.YAxis
- drag.maximumY: root.height - buttonContent.collapsedHeight
- drag.minimumY: root.height - root.height * 0.9
-
- /** If drag area is released at any point other than min or max y, transition to the other state */
- onReleased: {
- if (buttonContent.state === "collapsed" && buttonContent.y < dragArea.drag.maximumY) {
- buttonContent.state = "expanded"
- return
- }
- if (buttonContent.state === "expanded" && buttonContent.y > dragArea.drag.minimumY) {
- buttonContent.state = "collapsed"
- return
- }
- }
-
- onEntered: {
- collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor
- collapsedButtonHeader.opacity = 0.8
- }
- onExited: {
- collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor
- collapsedButtonHeader.opacity = 1
- }
- onPressedChanged: {
- collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor
- collapsedButtonHeader.opacity = 0.7
- }
-
-
- onClicked: {
- if (buttonContent.state === "collapsed") {
- buttonContent.state = "expanded"
- }
- }
- }
-
Rectangle {
id: buttonBackground
+ anchors.fill: defaultServerInfo
- anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
- height: root.height
radius: 16
color: root.defaultColor
border.color: root.borderColor
@@ -157,151 +105,40 @@ PageType {
}
}
- ColumnLayout {
- id: buttonContent
+ HomeRootMenuButton {
+ id: defaultServerInfo
+ anchors.right: parent.right
+ anchors.left: parent.left
+ anchors.bottom: parent.bottom
- /** Initial height of button content */
- property int collapsedHeight: 0
- /** True when expanded objects should be visible */
- property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active === true)
- /** True when collapsed objects should be visible */
- property bool collapsedVisibility: buttonContent.state === "collapsed" && dragArea.drag.active === false
+ text: root.defaultServerName
+ rightImageSource: "qrc:/images/controls/chevron-down.svg"
- Drag.active: dragArea.drag.active
- anchors.right: root.right
- anchors.left: root.left
- y: root.height - buttonContent.height
+ defaultContainerName: root.defaultContainerName
+ defaultServerHostName: root.defaultServerHostName
- Component.onCompleted: {
- buttonContent.state = "collapsed"
+ clickedFunction: function() {
+ menu.open()
}
+ }
- /** Set once based on first implicit height change once all children are layed out */
- onImplicitHeightChanged: {
- if (buttonContent.state === "collapsed" && collapsedHeight == 0) {
- collapsedHeight = implicitHeight
- }
- }
+ Drawer2Type {
+ id: menu
+ parent: root
- onStateChanged: {
- if (buttonContent.state === "collapsed") {
- var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
- if (initialPageNavigationBarColor !== 0xFF1C1D21) {
- PageController.updateNavigationBarColor(initialPageNavigationBarColor)
- }
- PageController.drawerClose()
- return
- }
- if (buttonContent.state === "expanded") {
- if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
- PageController.updateNavigationBarColor(0xFF1C1D21)
- }
- PageController.drawerOpen()
- return
- }
- }
+ width: parent.width
+ height: parent.height
+ contentHeight: parent.height * 0.9
- /** Two states of buttonContent, great place to add any future animations for the drawer */
- states: [
- State {
- name: "collapsed"
- PropertyChanges {
- target: buttonContent
- y: root.height - collapsedHeight
- }
- },
- State {
- name: "expanded"
- PropertyChanges {
- target: buttonContent
- y: dragArea.drag.minimumY
-
- }
- }
- ]
-
- transitions: [
- Transition {
- from: "collapsed"
- to: "expanded"
- PropertyAnimation {
- target: buttonContent
- properties: "y"
- duration: 200
- }
- },
- Transition {
- from: "expanded"
- to: "collapsed"
- PropertyAnimation {
- target: buttonContent
- properties: "y"
- duration: 200
- }
- }
- ]
-
- RowLayout {
- Layout.topMargin: 24
- Layout.leftMargin: 24
- Layout.rightMargin: 24
- Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
- visible: buttonContent.collapsedVisibility
-
- spacing: 0
-
- Header1TextType {
- id: collapsedButtonHeader
- Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo
-
- maximumLineCount: 2
- elide: Qt.ElideRight
-
- text: root.defaultServerName
- horizontalAlignment: Qt.AlignHCenter
-
- Behavior on opacity {
- PropertyAnimation { duration: 200 }
- }
- }
-
- ImageButtonType {
- id: collapsedButtonChevron
-
- Layout.leftMargin: 8
-
- hoverEnabled: false
- image: "qrc:/images/controls/chevron-down.svg"
- imageColor: "#d7d8db"
-
- icon.width: 18
- icon.height: 18
- backgroundRadius: 16
- horizontalPadding: 4
- topPadding: 4
- bottomPadding: 3
-
- onClicked: {
- if (buttonContent.state === "collapsed") {
- buttonContent.state = "expanded"
- }
- }
- }
- }
-
- LabelTextType {
- id: collapsedServerMenuDescription
- Layout.bottomMargin: 44
- Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
- visible: buttonContent.collapsedVisibility
- }
ColumnLayout {
id: serversMenuHeader
- Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
- Layout.fillWidth: true
- visible: buttonContent.expandedVisibility
+ parent: menu.contentParent
+
+ anchors.top: parent.top
+ anchors.right: parent.right
+ anchors.left: parent.left
Header1TextType {
Layout.fillWidth: true
@@ -330,6 +167,8 @@ PageType {
DropDownType {
id: containersDropDown
+ drawerParent: root
+
rootButtonImageColor: "#0E0E11"
rootButtonBackgroundColor: "#D7D8DB"
rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
@@ -383,7 +222,6 @@ PageType {
Layout.topMargin: 48
Layout.leftMargin: 16
Layout.rightMargin: 16
- visible: buttonContent.expandedVisibility
headerText: qsTr("Servers")
}
@@ -391,12 +229,16 @@ PageType {
Flickable {
id: serversContainer
- Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
- Layout.fillWidth: true
- Layout.topMargin: 16
+
+ parent: menu.contentParent
+
+ anchors.top: serversMenuHeader.bottom
+ anchors.right: parent.right
+ anchors.left: parent.left
+ anchors.bottom: parent.bottom
+ anchors.topMargin: 16
contentHeight: col.implicitHeight
- implicitHeight: root.height - (root.height * 0.1) - serversMenuHeader.implicitHeight - 52 //todo 52 is tabbar height
- visible: buttonContent.expandedVisibility
+
clip: true
ScrollBar.vertical: ScrollBar {
@@ -500,7 +342,7 @@ PageType {
onClicked: function() {
ServersModel.currentlyProcessedIndex = index
PageController.goToPage(PageEnum.PageSettingsServerInfo)
- buttonContent.state = "collapsed"
+ menu.close()
}
}
}