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

PageServerContainers animation fixed [ci skip]

Browse source
This commit is contained in:
pokamest 2022-08-24 16:58:00 +03:00
parent c4651cd915
commit b3d54ce57e
1 changed files with 439 additions and 462 deletions
Download patch file Download diff file Expand all files Collapse all files

901
client/ui/qml/Pages/PageServerContainers.qml
View file

@ -1,462 +1,439 @@
import QtQuick 2.12 import QtQuick 2.12
import QtQuick.Controls 2.12 import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.1 import QtQuick.Dialogs 1.1
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import SortFilterProxyModel 0.2 import SortFilterProxyModel 0.2
import ContainerProps 1.0 import ContainerProps 1.0
import ProtocolProps 1.0 import ProtocolProps 1.0
import PageEnum 1.0 import PageEnum 1.0
import ProtocolEnum 1.0 import ProtocolEnum 1.0
import "./" import "./"
import "../Controls" import "../Controls"
import "../Config" import "../Config"
import "InstallSettings" import "InstallSettings"
PageBase { PageBase {
id: root id: root
page: PageEnum.ServerContainers page: PageEnum.ServerContainers
logic: ServerContainersLogic logic: ServerContainersLogic
enabled: ServerContainersLogic.pageEnabled enabled: ServerContainersLogic.pageEnabled
function resetPage() { function resetPage() {
container_selector.selectedIndex = -1 container_selector.selectedIndex = -1
} }
Connections { Connections {
target: logic target: logic
function onUpdatePage() { function onUpdatePage() {
root.resetPage() root.resetPage()
} }
} }
BackButton { BackButton {
id: back id: back
} }
Caption { Caption {
id: caption id: caption
text: container_selector.selectedIndex > 0 ? qsTr("Install new service") : qsTr("Installed services") text: container_selector.selectedIndex > 0 ? qsTr("Install new service") : qsTr("Installed services")
} }
SelectContainer { SelectContainer {
id: container_selector id: container_selector
onAboutToHide: { onAboutToHide: {
pageLoader.focus = true pageLoader.focus = true
} }
onContainerSelected: { onContainerSelected: {
var containerProto = ContainerProps.defaultProtocol(c_index) var containerProto = ContainerProps.defaultProtocol(c_index)
if (ProtocolProps.defaultPort(containerProto) < 0) { if (ProtocolProps.defaultPort(containerProto) < 0) {
tf_port_num.enabled = false tf_port_num.enabled = false
tf_port_num.text = qsTr("Default") tf_port_num.text = qsTr("Default")
} }
else tf_port_num.text = ProtocolProps.defaultPort(containerProto) else tf_port_num.text = ProtocolProps.defaultPort(containerProto)
cb_port_proto.currentIndex = ProtocolProps.defaultTransportProto(containerProto) cb_port_proto.currentIndex = ProtocolProps.defaultTransportProto(containerProto)
tf_port_num.enabled = ProtocolProps.defaultPortChangeable(containerProto) tf_port_num.enabled = ProtocolProps.defaultPortChangeable(containerProto)
cb_port_proto.enabled = ProtocolProps.defaultTransportProtoChangeable(containerProto) cb_port_proto.enabled = ProtocolProps.defaultTransportProtoChangeable(containerProto)
} }
} }
Column { Column {
id: c1 id: c1
visible: container_selector.selectedIndex > 0 visible: container_selector.selectedIndex > 0
width: parent.width width: parent.width
anchors.top: caption.bottom anchors.top: caption.bottom
anchors.topMargin: 10 anchors.topMargin: 10
Caption { Caption {
font.pixelSize: 22 font.pixelSize: 22
text: UiLogic.containerName(container_selector.selectedIndex) text: UiLogic.containerName(container_selector.selectedIndex)
} }
Text { Text {
width: parent.width width: parent.width
anchors.topMargin: 10 anchors.topMargin: 10
padding: 10 padding: 10
font.family: "Lato" font.family: "Lato"
font.styleName: "normal" font.styleName: "normal"
font.pixelSize: 16 font.pixelSize: 16
color: "#181922" color: "#181922"
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap wrapMode: Text.Wrap
text: UiLogic.containerDesc(container_selector.selectedIndex) text: UiLogic.containerDesc(container_selector.selectedIndex)
} }
} }
Rectangle { Rectangle {
id: frame_settings id: frame_settings
visible: container_selector.selectedIndex > 0 visible: container_selector.selectedIndex > 0
width: parent.width width: parent.width
anchors.top: c1.bottom anchors.top: c1.bottom
anchors.topMargin: 10 anchors.topMargin: 10
border.width: 1 border.width: 1
border.color: "lightgray" border.color: "lightgray"
anchors.bottomMargin: 5 anchors.bottomMargin: 5
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
radius: 2 radius: 2
Grid { Grid {
id: grid id: grid
visible: container_selector.selectedIndex > 0 visible: container_selector.selectedIndex > 0
anchors.fill: parent anchors.fill: parent
columns: 2 columns: 2
horizontalItemAlignment: Grid.AlignHCenter horizontalItemAlignment: Grid.AlignHCenter
verticalItemAlignment: Grid.AlignVCenter verticalItemAlignment: Grid.AlignVCenter
topPadding: 5 topPadding: 5
leftPadding: 10 leftPadding: 10
spacing: 5 spacing: 5
LabelType { LabelType {
width: 130 width: 130
text: qsTr("Port") text: qsTr("Port")
} }
TextFieldType { TextFieldType {
id: tf_port_num id: tf_port_num
width: parent.width - 130 - parent.spacing - parent.leftPadding * 2 width: parent.width - 130 - parent.spacing - parent.leftPadding * 2
} }
LabelType { LabelType {
width: 130 width: 130
text: qsTr("Network Protocol") text: qsTr("Network Protocol")
} }
ComboBoxType { ComboBoxType {
id: cb_port_proto id: cb_port_proto
width: parent.width - 130 - parent.spacing - parent.leftPadding * 2 width: parent.width - 130 - parent.spacing - parent.leftPadding * 2
model: [ model: [
qsTr("udp"), qsTr("udp"),
qsTr("tcp"), qsTr("tcp"),
] ]
} }
} }
} }
BlueButtonType { BlueButtonType {
id: pb_cancel_add id: pb_cancel_add
visible: container_selector.selectedIndex > 0 visible: container_selector.selectedIndex > 0
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: pb_continue_add.top anchors.bottom: pb_continue_add.top
anchors.bottomMargin: 20 anchors.bottomMargin: 20
width: parent.width - 40 width: parent.width - 40
height: 40 height: 40
text: qsTr("Cancel") text: qsTr("Cancel")
font.pixelSize: 16 font.pixelSize: 16
onClicked: container_selector.selectedIndex = -1 onClicked: container_selector.selectedIndex = -1
} }
BlueButtonType { BlueButtonType {
id: pb_continue_add id: pb_continue_add
visible: container_selector.selectedIndex > 0 visible: container_selector.selectedIndex > 0
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 20 anchors.bottomMargin: 20
width: parent.width - 40 width: parent.width - 40
height: 40 height: 40
text: qsTr("Continue") text: qsTr("Continue")
font.pixelSize: 16 font.pixelSize: 16
onClicked: { onClicked: {
let cont = container_selector.selectedIndex let cont = container_selector.selectedIndex
let tp = ProtocolProps.transportProtoFromString(cb_port_proto.currentText) let tp = ProtocolProps.transportProtoFromString(cb_port_proto.currentText)
let port = tf_port_num.text let port = tf_port_num.text
ServerContainersLogic.onPushButtonContinueClicked(cont, port, tp) ServerContainersLogic.onPushButtonContinueClicked(cont, port, tp)
} }
} }
Flickable { Flickable {
visible: container_selector.selectedIndex <= 0 visible: container_selector.selectedIndex <= 0
clip: true clip: true
width: parent.width width: parent.width
anchors.top: caption.bottom anchors.top: caption.bottom
anchors.bottom: pb_add_container.top anchors.bottom: pb_add_container.top
contentHeight: col.height contentHeight: col.height
Column { Column {
visible: container_selector.selectedIndex <= 0 visible: container_selector.selectedIndex <= 0
id: col id: col
anchors { anchors {
left: parent.left; left: parent.left;
right: parent.right; right: parent.right;
} }
topPadding: 20 topPadding: 20
spacing: 10 spacing: 10
Caption { Caption {
id: cap1 id: cap1
text: qsTr("Installed Protocols and Services") text: qsTr("Installed Protocols and Services")
font.pixelSize: 20 font.pixelSize: 20
} }
SortFilterProxyModel { SortFilterProxyModel {
id: proxyContainersModel id: proxyContainersModel
sourceModel: UiLogic.containersModel sourceModel: UiLogic.containersModel
filters: ValueFilter { filters: ValueFilter {
roleName: "is_installed_role" roleName: "is_installed_role"
value: true value: true
} }
} }
SortFilterProxyModel { SortFilterProxyModel {
id: proxyProtocolsModel id: proxyProtocolsModel
sourceModel: UiLogic.protocolsModel sourceModel: UiLogic.protocolsModel
filters: ValueFilter { filters: ValueFilter {
roleName: "is_installed_role" roleName: "is_installed_role"
value: true value: true
} }
} }
ListView { ListView {
id: tb_c id: tb_c
x: 10 x: 10
width: parent.width - 10 width: parent.width - 10
height: tb_c.contentItem.height height: tb_c.contentItem.height
currentIndex: -1 currentIndex: -1
spacing: 5 spacing: 5
clip: true clip: true
interactive: false interactive: false
model: proxyContainersModel model: proxyContainersModel
delegate: Item { delegate: Item {
implicitWidth: tb_c.width - 10 implicitWidth: tb_c.width - 10
implicitHeight: c_item.height implicitHeight: c_item.height
Item { Item {
id: c_item id: c_item
width: parent.width width: parent.width
height: row_container.height + tb_p.height height: row_container.height + tb_p.height
anchors.left: parent.left anchors.left: parent.left
Rectangle { Rectangle {
anchors.top: parent.top anchors.top: parent.top
width: parent.width width: parent.width
height: 1 height: 1
color: "lightgray" color: "lightgray"
visible: index !== tb_c.currentIndex visible: index !== tb_c.currentIndex
} }
Rectangle { Rectangle {
anchors.top: row_container.top anchors.top: row_container.top
anchors.bottom: row_container.bottom anchors.bottom: row_container.bottom
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
color: "#63B4FB" color: "#63B4FB"
visible: index === tb_c.currentIndex visible: index === tb_c.currentIndex
} }
RowLayout { RowLayout {
id: row_container id: row_container
//width: parent.width anchors.left: parent.left
anchors.left: parent.left anchors.right: parent.right
anchors.right: parent.right
Text {
// anchors.top: lb_container_name.top id: lb_container_name
// anchors.bottom: lb_container_name.bottom text: name_role
font.pixelSize: 17
Text { color: "#100A44"
id: lb_container_name topPadding: 16
text: name_role bottomPadding: 12
font.pixelSize: 17 leftPadding: 10
//font.bold: true verticalAlignment: Text.AlignVCenter
color: "#100A44" wrapMode: Text.WordWrap
topPadding: 5 Layout.fillWidth: true
bottomPadding: 5
leftPadding: 10 MouseArea {
verticalAlignment: Text.AlignVCenter enabled: col.visible
wrapMode: Text.WordWrap anchors.top: lb_container_name.top
Layout.fillWidth: true anchors.bottom: lb_container_name.bottom
anchors.left: parent.left
MouseArea { anchors.right: parent.right
enabled: col.visible propagateComposedEvents: true
anchors.top: lb_container_name.top onClicked: {
anchors.bottom: lb_container_name.bottom if (tb_c.currentIndex === index) tb_c.currentIndex = -1
anchors.left: parent.left else tb_c.currentIndex = index
anchors.right: parent.right
propagateComposedEvents: true UiLogic.protocolsModel.setSelectedDockerContainer(proxyContainersModel.mapToSource(index))
onClicked: { }
if (tb_c.currentIndex === index) tb_c.currentIndex = -1 }
else tb_c.currentIndex = index }
UiLogic.protocolsModel.setSelectedDockerContainer(proxyContainersModel.mapToSource(index)) ImageButtonType {
} id: button_remove
} visible: index === tb_c.currentIndex
} Layout.alignment: Qt.AlignRight
checkable: true
ImageButtonType { icon.source: "qrc:/images/delete.png"
id: button_remove implicitWidth: 30
visible: index === tb_c.currentIndex implicitHeight: 30
Layout.alignment: Qt.AlignRight
checkable: true checked: default_role
icon.source: "qrc:/images/delete.png"
implicitWidth: 30 MessageDialog {
implicitHeight: 30 id: dialogRemove
standardButtons: StandardButton.Yes | StandardButton.Cancel
checked: default_role title: "AmneziaVPN"
text: qsTr("Remove container") + " " + name_role + "?" + "\n" + qsTr("This action will erase all data of this container on the server.")
MessageDialog { onAccepted: {
id: dialogRemove tb_c.currentIndex = -1
standardButtons: StandardButton.Yes | StandardButton.Cancel ServerContainersLogic.onPushButtonRemoveClicked(proxyContainersModel.mapToSource(index))
title: "AmneziaVPN" }
text: qsTr("Remove container") + " " + name_role + "?" + "\n" + qsTr("This action will erase all data of this container on the server.") }
onAccepted: {
tb_c.currentIndex = -1 onClicked: dialogRemove.open()
ServerContainersLogic.onPushButtonRemoveClicked(proxyContainersModel.mapToSource(index))
} VisibleBehavior on visible { }
} }
onClicked: dialogRemove.open() ImageButtonType {
id: button_share
VisibleBehavior on visible { } visible: index === tb_c.currentIndex
} Layout.alignment: Qt.AlignRight
icon.source: "qrc:/images/share.png"
ImageButtonType { implicitWidth: 30
id: button_share implicitHeight: 30
visible: index === tb_c.currentIndex onClicked: {
Layout.alignment: Qt.AlignRight ServerContainersLogic.onPushButtonShareClicked(proxyContainersModel.mapToSource(index))
icon.source: "qrc:/images/share.png" }
implicitWidth: 30
implicitHeight: 30 VisibleBehavior on visible { }
onClicked: { }
ServerContainersLogic.onPushButtonShareClicked(proxyContainersModel.mapToSource(index))
} ImageButtonType {
id: button_default
VisibleBehavior on visible { } visible: service_type_role == ProtocolEnum.Vpn
}
Layout.alignment: Qt.AlignRight
ImageButtonType { checkable: true
id: button_default img.source: checked ? "qrc:/images/check.png" : "qrc:/images/uncheck.png"
visible: service_type_role == ProtocolEnum.Vpn implicitWidth: 30
implicitHeight: 30
Layout.alignment: Qt.AlignRight
checkable: true checked: default_role
img.source: checked ? "qrc:/images/check.png" : "qrc:/images/uncheck.png" onClicked: {
implicitWidth: 30 ServerContainersLogic.onPushButtonDefaultClicked(proxyContainersModel.mapToSource(index))
implicitHeight: 30 }
}
checked: default_role }
onClicked: {
ServerContainersLogic.onPushButtonDefaultClicked(proxyContainersModel.mapToSource(index))
} ListView {
} id: tb_p
} currentIndex: -1
x: 10
anchors.top: row_container.bottom
ListView {
id: tb_p width: parent.width - 40
currentIndex: -1 height: index === tb_c.currentIndex ? tb_p.contentItem.height : 0
visible: index === tb_c.currentIndex implicitHeight: height
x: 10
anchors.top: row_container.bottom spacing: 0
clip: true
width: parent.width - 40 interactive: false
height: visible ? tb_p.contentItem.height : 0 model: proxyProtocolsModel
spacing: 0
clip: true Behavior on height {
interactive: false NumberAnimation {
model: proxyProtocolsModel duration: 200
}
VisibleBehavior on visible { } }
delegate: Item {
delegate: Item { id: dp_item
id: dp_item
implicitWidth: tb_p.width - 10
implicitWidth: tb_p.width - 10 implicitHeight: p_item.height
implicitHeight: p_item.height Item {
Item { id: p_item
id: p_item width: parent.width
width: parent.width height: lb_protocol_name.height
height: lb_protocol_name.height anchors.left: parent.left
anchors.left: parent.left Rectangle {
Rectangle { anchors.top: parent.top
anchors.top: parent.top width: parent.width
width: parent.width height: 1
height: 1 color: "lightgray"
color: "lightgray" visible: index > 0
visible: index !== tb_p.currentIndex }
}
// Rectangle { SettingButtonType {
// anchors.top: lb_protocol_name.top id: lb_protocol_name
// anchors.bottom: lb_protocol_name.bottom topPadding: 10
// width: parent.width bottomPadding: 10
// color: "#63B4FB" anchors.left: parent.left
// visible: index === tb_p.currentIndex anchors.leftMargin: 10
// }
width: parent.width
// Text { height: 45
// id: lb_protocol_name text: qsTr(name_role + " settings")
// text: name_role textItem.font.pixelSize: 16
// font.pixelSize: 16 icon.source: "qrc:/images/settings.png"
// topPadding: 5 onClicked: {
// bottomPadding: 5 tb_p.currentIndex = index
// leftPadding: 10 ServerContainersLogic.onPushButtonProtoSettingsClicked(
// verticalAlignment: Text.AlignVCenter proxyContainersModel.mapToSource(tb_c.currentIndex),
// wrapMode: Text.WordWrap proxyProtocolsModel.mapToSource(tb_p.currentIndex))
// } }
}
SettingButtonType { }
id: lb_protocol_name }
}
// anchors.top: lb_protocol_name.top }
// anchors.bottom: lb_protocol_name.bottom }
topPadding: 10 }
bottomPadding: 10 }
leftPadding: 10 }
anchors.left: parent.left
BlueButtonType {
width: parent.width id: pb_add_container
height: 30 visible: container_selector.selectedIndex < 0
text: qsTr(name_role + " settings")
textItem.font.pixelSize: 16 anchors.horizontalCenter: parent.horizontalCenter
icon.source: "qrc:/images/settings.png" anchors.bottom: parent.bottom
onClicked: { anchors.topMargin: 10
tb_p.currentIndex = index anchors.bottomMargin: 20
ServerContainersLogic.onPushButtonProtoSettingsClicked(
proxyContainersModel.mapToSource(tb_c.currentIndex), width: parent.width - 40
proxyProtocolsModel.mapToSource(tb_p.currentIndex)) height: 40
} text: qsTr("Install new protocols container")
} font.pixelSize: 16
} onClicked: container_selector.visible ? container_selector.close() : container_selector.open()
}
} }
} }
}
}
}
}
BlueButtonType {
id: pb_add_container
visible: container_selector.selectedIndex < 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.topMargin: 10
anchors.bottomMargin: 20
width: parent.width - 40
height: 40
text: qsTr("Install new protocols container")
font.pixelSize: 16
onClicked: container_selector.visible ? container_selector.close() : container_selector.open()
}
}