amnezia-client/client/ui/qml/Pages2/PageHome.qml
2023-10-19 09:27:39 +08:00

428 lines
14 KiB
QML

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import SortFilterProxyModel 0.2
import PageEnum 1.0
import ProtocolEnum 1.0
import ContainerProps 1.0
import ContainersModelFilters 1.0
import "./"
import "../Controls2"
import "../Controls2/TextTypes"
import "../Config"
import "../Components"
PageType {
id: root
property string defaultColor: "#1C1D21"
property string borderColor: "#2C2D30"
property string defaultServerName: ServersModel.defaultServerName
property string defaultServerHostName: ServersModel.defaultServerHostName
property string defaultContainerName: ContainersModel.defaultContainerName
Connections {
target: PageController
function onRestorePageHomeState(isContainerInstalled) {
buttonContent.collapse()
if (isContainerInstalled) {
containersDropDown.menuVisible = true
}
}
function onForceCloseDrawer() {
buttonContent.collapse()
}
}
Connections {
target: ServersModel
function onDefaultServerIndexChanged() {
updateDescriptions()
}
}
Connections {
target: ContainersModel
function onDefaultContainerChanged() {
updateDescriptions()
}
}
function updateDescriptions() {
var description = ""
if (ServersModel.isDefaultServerHasWriteAccess()) {
if (SettingsController.isAmneziaDnsEnabled()
&& ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) {
description += "Amnezia DNS | "
}
} else {
if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) {
description += "Amnezia DNS | "
}
}
collapsedServerMenuDescription.text = description + root.defaultContainerName + " | " + root.defaultServerHostName
expandedServersMenuDescription.text = description + root.defaultServerHostName
}
Component.onCompleted: {
updateDescriptions()
}
Item {
anchors.fill: parent
anchors.bottomMargin: buttonContent.collapsedHeight
ConnectButton {
anchors.centerIn: parent
}
}
Rectangle {
id: buttonBackground
anchors { left: buttonContent.left; right: buttonContent.right; top: buttonContent.top }
radius: 16
color: root.defaultColor
border.color: root.borderColor
border.width: 1
Rectangle {
width: parent.radius
height: parent.radius
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.left: parent.left
color: parent.color
}
}
Drawer2Type {
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: buttonContent.contentParent
anchors.top: parent.top
anchors.right: parent.right
anchors.left: parent.left
visible: buttonContent.expandedVisibility
Header1TextType {
Layout.fillWidth: true
Layout.topMargin: 24
Layout.leftMargin: 16
Layout.rightMargin: 16
text: root.defaultServerName
horizontalAlignment: Qt.AlignHCenter
maximumLineCount: 2
elide: Qt.ElideRight
}
LabelTextType {
id: expandedServersMenuDescription
Layout.bottomMargin: 24
Layout.fillWidth: true
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
}
RowLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
spacing: 8
DropDownType {
id: containersDropDown
drawerParent: root
rootButtonImageColor: "#0E0E11"
rootButtonBackgroundColor: "#D7D8DB"
rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
rootButtonBackgroundPressedColor: Qt.rgba(215, 216, 219, 0.65)
rootButtonHoveredBorderColor: "transparent"
rootButtonDefaultBorderColor: "transparent"
rootButtonTextTopMargin: 8
rootButtonTextBottomMargin: 8
text: root.defaultContainerName
textColor: "#0E0E11"
headerText: qsTr("VPN protocol")
headerBackButtonImage: "qrc:/images/controls/arrow-left.svg"
rootButtonClickedFunction: function() {
ServersModel.currentlyProcessedIndex = serversMenuContent.currentIndex
containersDropDown.menuVisible = true
}
listView: HomeContainersListView {
rootWidth: root.width
Connections {
target: ServersModel
function onCurrentlyProcessedServerIndexChanged() {
updateContainersModelFilters()
}
}
function updateContainersModelFilters() {
if (ServersModel.isCurrentlyProcessedServerHasWriteAccess()) {
proxyContainersModel.filters = ContainersModelFilters.getWriteAccessProtocolsListFilters()
} else {
proxyContainersModel.filters = ContainersModelFilters.getReadAccessProtocolsListFilters()
}
}
model: SortFilterProxyModel {
id: proxyContainersModel
sourceModel: ContainersModel
}
Component.onCompleted: updateContainersModelFilters()
}
}
}
Header2Type {
Layout.fillWidth: true
Layout.topMargin: 48
Layout.leftMargin: 16
Layout.rightMargin: 16
visible: buttonContent.expandedVisibility
headerText: qsTr("Servers")
}
}
Flickable {
id: serversContainer
parent: buttonContent.contentParent
anchors.top: serversMenuHeader.bottom
anchors.right: parent.right
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.topMargin: 16
contentHeight: col.implicitHeight
visible: buttonContent.expandedVisibility
clip: true
ScrollBar.vertical: ScrollBar {
id: scrollBar
policy: serversContainer.height >= serversContainer.contentHeight ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
}
Keys.onUpPressed: scrollBar.decrease()
Keys.onDownPressed: scrollBar.increase()
Column {
id: col
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
spacing: 16
ButtonGroup {
id: serversRadioButtonGroup
}
ListView {
id: serversMenuContent
width: parent.width
height: serversMenuContent.contentItem.height
model: ServersModel
currentIndex: ServersModel.defaultIndex
clip: true
interactive: false
delegate: Item {
id: menuContentDelegate
property variant delegateData: model
implicitWidth: serversMenuContent.width
implicitHeight: serverRadioButtonContent.implicitHeight
ColumnLayout {
id: serverRadioButtonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
spacing: 0
RowLayout {
VerticalRadioButton {
id: serverRadioButton
Layout.fillWidth: true
text: name
descriptionText: {
var description = ""
if (hasWriteAccess) {
if (SettingsController.isAmneziaDnsEnabled()
&& ContainersModel.isAmneziaDnsContainerInstalled(index)) {
description += "Amnezia DNS | "
}
} else {
if (containsAmneziaDns) {
description += "Amnezia DNS | "
}
}
return description += hostName
}
checked: index === serversMenuContent.currentIndex
ButtonGroup.group: serversRadioButtonGroup
onClicked: {
serversMenuContent.currentIndex = index
ServersModel.currentlyProcessedIndex = index
ServersModel.defaultIndex = index
}
MouseArea {
anchors.fill: serverRadioButton
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
ImageButtonType {
image: "qrc:/images/controls/settings.svg"
imageColor: "#D7D8DB"
implicitWidth: 56
implicitHeight: 56
z: 1
onClicked: function() {
ServersModel.currentlyProcessedIndex = index
PageController.goToPage(PageEnum.PageSettingsServerInfo)
buttonContent.collapse()
}
}
}
DividerType {
Layout.fillWidth: true
Layout.leftMargin: 0
Layout.rightMargin: 0
}
}
}
}
}
}
}
}