AZEN-SGG/amnezia-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #717 from amnezia-vpn/feature/page-home-drawer

Browse source 
changed the way the drawer is displayed on the pageHome
This commit is contained in:
pokamest 2024-03-31 12:15:21 +01:00 • committed by GitHub
commit 2ec448ba13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 95 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/ui/qml/Controls2/DrawerType2.qml
View file

@ -86,13 +86,6 @@ Item {
} }
} }
/** Set once based on first implicit height change once all children are layed out */
Component.onCompleted: {
if (root.isCollapsed && root.collapsedHeight == 0) {
root.collapsedHeight = drawerContent.implicitHeight
}
}
Rectangle { Rectangle {
id: background id: background
@ -186,7 +179,7 @@ Item {
y: root.height - drawerContent.height y: root.height - drawerContent.height
state: root.drawerCollapsed state: root.drawerCollapsed
implicitHeight: root.isCollapsed ? collapsedLoader.implicitHeight : expandedLoader.implicitHeight implicitHeight: root.isCollapsed ? collapsedHeight : expandedHeight
onStateChanged: { onStateChanged: {
if (root.isCollapsed) { if (root.isCollapsed) {
@ -246,7 +239,6 @@ Item {
Loader { Loader {
id: collapsedLoader id: collapsedLoader
visible: root.isCollapsed
sourceComponent: root.collapsedContent sourceComponent: root.collapsedContent
anchors.right: parent.right anchors.right: parent.right

70
client/ui/qml/Pages2/PageHome.qml
View file

@ -107,7 +107,21 @@ PageType {
id: drawer id: drawer
anchors.fill: parent anchors.fill: parent
collapsedContent: ColumnLayout { collapsedContent: Item {
implicitHeight: Qt.platform.os !== "ios" ? root.height * 0.9 : screen.height * 0.77
Component.onCompleted: {
drawer.expandedHeight = implicitHeight
}
ColumnLayout {
id: collapsed
anchors.left: parent.left
anchors.right: parent.right
Component.onCompleted: {
drawer.collapsedHeight = collapsed.implicitHeight
}
DividerType { DividerType {
Layout.topMargin: 10 Layout.topMargin: 10
Layout.fillWidth: false Layout.fillWidth: false
@ -127,24 +141,36 @@ PageType {
Connections { Connections {
target: drawer target: drawer
function onEntered() { function onEntered() {
if (drawer.isCollapsed) {
collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor collapsedButtonChevron.backgroundColor = collapsedButtonChevron.hoveredColor
collapsedButtonHeader.opacity = 0.8 collapsedButtonHeader.opacity = 0.8
} else {
collapsedButtonHeader.opacity = 1
}
} }
function onExited() { function onExited() {
if (drawer.isCollapsed) {
collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor collapsedButtonChevron.backgroundColor = collapsedButtonChevron.defaultColor
collapsedButtonHeader.opacity = 1 collapsedButtonHeader.opacity = 1
} else {
collapsedButtonHeader.opacity = 1
}
} }
function onPressed(pressed, entered) { function onPressed(pressed, entered) {
if (drawer.isCollapsed) {
collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor collapsedButtonChevron.backgroundColor = pressed ? collapsedButtonChevron.pressedColor : entered ? collapsedButtonChevron.hoveredColor : collapsedButtonChevron.defaultColor
collapsedButtonHeader.opacity = 0.7 collapsedButtonHeader.opacity = 0.7
} else {
collapsedButtonHeader.opacity = 1
}
} }
} }
Header1TextType { Header1TextType {
id: collapsedButtonHeader id: collapsedButtonHeader
Layout.maximumWidth: drawer.width - 48 - 18 - 12 // todo Layout.maximumWidth: drawer.isCollapsed ? drawer.width - 48 - 18 - 12 : drawer.width// todo
maximumLineCount: 2 maximumLineCount: 2
elide: Qt.ElideRight elide: Qt.ElideRight
@ -162,6 +188,8 @@ PageType {
Layout.leftMargin: 8 Layout.leftMargin: 8
visible: drawer.isCollapsed
hoverEnabled: false hoverEnabled: false
image: "qrc:/images/controls/chevron-down.svg" image: "qrc:/images/controls/chevron-down.svg"
imageColor: "#d7d8db" imageColor: "#d7d8db"
@ -183,55 +211,24 @@ PageType {
LabelTextType { LabelTextType {
id: collapsedServerMenuDescription id: collapsedServerMenuDescription
Layout.bottomMargin: 44 Layout.bottomMargin: drawer.isCollapsed ? 44 : ServersModel.isDefaultServerFromApi ? 89 : 44
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
text: ServersModel.defaultServerDescriptionCollapsed text: drawer.isCollapsed ? ServersModel.defaultServerDescriptionCollapsed : ServersModel.defaultServerDescriptionExpanded
} }
} }
expandedContent: Item {
id: serverMenuContainer
implicitHeight: Qt.platform.os !== "ios" ? root.height * 0.9 : screen.height * 0.77
Component.onCompleted: {
drawer.expandedHeight = serverMenuContainer.implicitHeight
}
ColumnLayout { ColumnLayout {
id: serversMenuHeader id: serversMenuHeader
anchors.top: parent.top anchors.top: collapsed.bottom
anchors.right: parent.right anchors.right: parent.right
anchors.left: parent.left anchors.left: parent.left
Header1TextType {
Layout.fillWidth: true
Layout.topMargin: 14
Layout.leftMargin: 16
Layout.rightMargin: 16
text: ServersModel.defaultServerName
horizontalAlignment: Qt.AlignHCenter
maximumLineCount: 2
elide: Qt.ElideRight
}
LabelTextType {
id: expandedServersMenuDescription
Layout.bottomMargin: ServersModel.isDefaultServerFromApi ? 69 : 24
Layout.fillWidth: true
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
text: ServersModel.defaultServerDescriptionExpanded
}
RowLayout { RowLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
spacing: 8 spacing: 8
visible: !ServersModel.isDefaultServerFromApi visible: !ServersModel.isDefaultServerFromApi
onVisibleChanged: expandedServersMenuDescription.Layout
DropDownType { DropDownType {
id: containersDropDown id: containersDropDown
@ -299,7 +296,6 @@ PageType {
} }
} }
ButtonGroup { ButtonGroup {
id: serversRadioButtonGroup id: serversRadioButtonGroup
} }