diff --git a/client/resources.qrc b/client/resources.qrc index 357cb40c..b7bdd463 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -270,5 +270,6 @@ ui/qml/Controls2/TextTypes/SmallTextType.qml ui/qml/Filters/ContainersModelFilters.qml ui/qml/Components/SelectLanguageDrawer.qml + ui/qml/Controls2/BusyIndicatorType.qml diff --git a/client/translations/amneziavpn_ru.ts b/client/translations/amneziavpn_ru.ts index 89ca3dcd..197c9d40 100644 --- a/client/translations/amneziavpn_ru.ts +++ b/client/translations/amneziavpn_ru.ts @@ -1275,17 +1275,17 @@ And if you don't like the app, all the more support it - the donation will PageSettingsApplication - + Application - + Language - + Reset settings and remove all data from the application diff --git a/client/ui/controllers/pageController.h b/client/ui/controllers/pageController.h index 384d3c8d..f67da275 100644 --- a/client/ui/controllers/pageController.h +++ b/client/ui/controllers/pageController.h @@ -63,6 +63,7 @@ signals: void replaceStartPage(); void showErrorMessage(QString errorMessage); void showInfoMessage(QString message); + void showBusyIndicator(bool visible); private: QSharedPointer m_serversModel; diff --git a/client/ui/models/servers_model.cpp b/client/ui/models/servers_model.cpp index 866edca4..1bacdd45 100644 --- a/client/ui/models/servers_model.cpp +++ b/client/ui/models/servers_model.cpp @@ -44,8 +44,6 @@ QVariant ServersModel::data(const QModelIndex &index, int role) const return QVariant(); } - qDebug() << "d"; - const QJsonObject server = m_servers.at(index.row()).toObject(); switch (role) { diff --git a/client/ui/qml/Components/ConnectButton.qml b/client/ui/qml/Components/ConnectButton.qml index 1f27973a..f8e29c47 100644 --- a/client/ui/qml/Components/ConnectButton.qml +++ b/client/ui/qml/Components/ConnectButton.qml @@ -1,12 +1,21 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Shapes +import Qt5Compat.GraphicalEffects import ConnectionState 1.0 Button { id: root + property string defaultButtonColor: "#D7D8DB" + property string progressButtonColor: "#D7D8DB" + property string connectedButtonColor: "#FBB26A" + + implicitWidth: 190 + implicitHeight: 190 + Connections { target: ConnectionController @@ -17,48 +26,98 @@ Button { text: ConnectionController.connectionStateText - enabled: !ConnectionController.isConnectionInProgress +// enabled: !ConnectionController.isConnectionInProgress background: Item { - clip: true + implicitWidth: parent.width + implicitHeight: parent.height + transformOrigin: Item.Center - implicitHeight: border.implicitHeight - implicitWidth: border.implicitWidth + Shape { + id: backgroundCircle + width: parent.implicitWidth + height: parent.implicitHeight + anchors.bottom: parent.bottom + anchors.right: parent.right + layer.enabled: true + layer.samples: 4 + layer.effect: DropShadow { + anchors.fill: backgroundCircle + horizontalOffset: 0 + verticalOffset: 0 + radius: 10 + samples: 25 + color: "#FBB26A" + source: backgroundCircle + } - Image { - id: border + ShapePath { + fillColor: "transparent" + strokeColor: { + if (ConnectionController.isConnectionInProgress) { + return Qt.rgba(251/255, 178/255, 106/255, 1) + } else if (ConnectionController.isConnected) { + return connectedButtonColor + } else { + return defaultButtonColor + } + } + strokeWidth: 3 + capStyle: ShapePath.RoundCap - source: { - if (ConnectionController.isConnectionInProgress) { - return "/images/connectionProgress.svg" - } else if (ConnectionController.isConnected) { - return "/images/connectionOff.svg" - } else { - return "/images/connectionOn.svg" + PathAngleArc { + centerX: backgroundCircle.width / 2 + centerY: backgroundCircle.height / 2 + radiusX: 93 + radiusY: 93 + startAngle: 0 + sweepAngle: 360 + } + } + + MouseArea { + anchors.fill: parent + + cursorShape: Qt.PointingHandCursor + enabled: false + } + } + + Shape { + id: shape + width: parent.implicitWidth + height: parent.implicitHeight + anchors.bottom: parent.bottom + anchors.right: parent.right + layer.enabled: true + layer.samples: 4 + + visible: ConnectionController.isConnectionInProgress + + ShapePath { + fillColor: "transparent" + strokeColor: "#D7D8DB" + strokeWidth: 3 + capStyle: ShapePath.RoundCap + + PathAngleArc { + centerX: shape.width / 2 + centerY: shape.height / 2 + radiusX: 93 + radiusY: 93 + startAngle: 245 + sweepAngle: -180 } } RotationAnimator { - id: connectionProccess - - target: border + target: shape running: ConnectionController.isConnectionInProgress from: 0 to: 360 loops: Animation.Infinite - duration: 1250 + duration: 1000 } - - Behavior on source { - PropertyAnimation { duration: 200 } - } - } - - MouseArea { - anchors.fill: parent - - cursorShape: Qt.PointingHandCursor - enabled: false } } @@ -69,7 +128,7 @@ Button { font.weight: 700 font.pixelSize: 20 - color: "#D7D8DB" + color: ConnectionController.isConnected ? connectedButtonColor : defaultButtonColor text: root.text horizontalAlignment: Text.AlignHCenter diff --git a/client/ui/qml/Components/ShareConnectionDrawer.qml b/client/ui/qml/Components/ShareConnectionDrawer.qml index 99e172cc..b677c5b1 100644 --- a/client/ui/qml/Components/ShareConnectionDrawer.qml +++ b/client/ui/qml/Components/ShareConnectionDrawer.qml @@ -17,6 +17,7 @@ DrawerType { property alias headerText: header.headerText property alias configContentHeaderText: configContentHeader.headerText + property alias contentVisible: content.visible width: parent.width height: parent.height * 0.9 @@ -24,8 +25,18 @@ DrawerType { Item { anchors.fill: parent - FlickableType { + Header2Type { + id: header anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.topMargin: 20 + anchors.leftMargin: 16 + anchors.rightMargin: 16 + } + + FlickableType { + anchors.top: header.bottom anchors.bottom: parent.bottom contentHeight: content.height + 32 @@ -36,15 +47,9 @@ DrawerType { anchors.left: parent.left anchors.right: parent.right - anchors.topMargin: 20 anchors.leftMargin: 16 anchors.rightMargin: 16 - Header2Type { - id: header - Layout.fillWidth: true - } - BasicButtonType { Layout.fillWidth: true Layout.topMargin: 16 diff --git a/client/ui/qml/Controls2/BusyIndicatorType.qml b/client/ui/qml/Controls2/BusyIndicatorType.qml new file mode 100644 index 00000000..7e92998c --- /dev/null +++ b/client/ui/qml/Controls2/BusyIndicatorType.qml @@ -0,0 +1,68 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Shapes + +Popup { + id: root + anchors.centerIn: parent + + modal: true + closePolicy: Popup.NoAutoClose + + visible: false + + Overlay.modal: Rectangle { + color: Qt.rgba(14/255, 14/255, 17/255, 0.8) + } + + background: Rectangle { + color: "transparent" + } + + BusyIndicator { + id: busyIndicator + + visible: true + running: true + + contentItem: Item { + implicitWidth: 46 + implicitHeight: 46 + transformOrigin: Item.Center + + Shape { + id: shape + width: parent.implicitWidth + height: parent.implicitHeight + anchors.bottom: parent.bottom + anchors.right: parent.right + layer.enabled: true + layer.samples: 4 + + ShapePath { + fillColor: "transparent" + strokeColor: "#787878" + strokeWidth: 3 + capStyle: ShapePath.RoundCap + + PathAngleArc { + centerX: shape.width / 2 + centerY: shape.height / 2 + radiusX: 18 + radiusY: 18 + startAngle: 225 + sweepAngle: -90 + } + } + RotationAnimator { + target: shape + running: busyIndicator.visible && busyIndicator.running + from: 0 + to: 360 + loops: Animation.Infinite + duration: 1250 + } + } + } + } +} diff --git a/client/ui/qml/Pages2/PageSettingsServerData.qml b/client/ui/qml/Pages2/PageSettingsServerData.qml index 5db3ae96..c5af47e0 100644 --- a/client/ui/qml/Pages2/PageSettingsServerData.qml +++ b/client/ui/qml/Pages2/PageSettingsServerData.qml @@ -88,7 +88,9 @@ PageType { descriptionText: qsTr("Добавим их в приложение, если они не отображались") clickedFunction: function() { + PageController.showBusyIndicator(true) InstallController.scanServerForInstalledContainers() + PageController.showBusyIndicator(false) } } diff --git a/client/ui/qml/Pages2/PageShare.qml b/client/ui/qml/Pages2/PageShare.qml index 7f567b8d..decd461a 100644 --- a/client/ui/qml/Pages2/PageShare.qml +++ b/client/ui/qml/Pages2/PageShare.qml @@ -20,11 +20,21 @@ PageType { target: ExportController function onGenerateConfig(isFullAccess) { + shareConnectionDrawer.open() + shareConnectionDrawer.contentVisible = false + PageController.showBusyIndicator(true) if (isFullAccess) { ExportController.generateFullAccessConfig() } else { ExportController.generateConnectionConfig() } + PageController.showBusyIndicator(false) + shareConnectionDrawer.contentVisible = true + } + + function onExportErrorOccurred(errorMessage) { + shareConnectionDrawer.close() + PageController.showErrorMessage(errorMessage) } } @@ -328,7 +338,6 @@ PageType { } else { ExportController.generateConfig(true) } - shareConnectionDrawer.visible = true } } } diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml index 76450b16..09bebaa1 100644 --- a/client/ui/qml/Pages2/PageStart.qml +++ b/client/ui/qml/Pages2/PageStart.qml @@ -29,6 +29,12 @@ PageType { popupErrorMessage.popupErrorMessageText = errorMessage popupErrorMessage.open() } + + function onShowBusyIndicator(visible) { + busyIndicator.visible = visible + tabBarStackView.enabled = !visible + tabBar.enabled = !visible + } } StackViewType { @@ -130,4 +136,10 @@ PageType { id: popupErrorMessage } } + + BusyIndicatorType { + id: busyIndicator + anchors.centerIn: parent + z: 1 + } }