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

added busy indicator component

Browse source 
- replaced the image of the connect button with native rendering
This commit is contained in:
vladimir.kuznetsov 2023-07-04 09:58:19 +09:00
parent b32935dd97
commit 43261f8469
10 changed files with 197 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/resources.qrc
View file

@ -270,5 +270,6 @@
<file>ui/qml/Controls2/TextTypes/SmallTextType.qml</file>
<file>ui/qml/Filters/ContainersModelFilters.qml</file>
<file>ui/qml/Components/SelectLanguageDrawer.qml</file>
<file>ui/qml/Controls2/BusyIndicatorType.qml</file>
</qresource>
</RCC>

6
client/translations/amneziavpn_ru.ts
View file

@ -1275,17 +1275,17 @@ And if you don&apos;t like the app, all the more support it - the donation will
<context>
<name>PageSettingsApplication</name>
<message>
<location filename="../ui/qml/Pages2/PageSettingsApplication.qml" line="43"/>
<location filename="../ui/qml/Pages2/PageSettingsApplication.qml" line="44"/>
<source>Application</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="../ui/qml/Pages2/PageSettingsApplication.qml" line="50"/>
<location filename="../ui/qml/Pages2/PageSettingsApplication.qml" line="51"/>
<source>Language</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="../ui/qml/Pages2/PageSettingsApplication.qml" line="66"/>
<location filename="../ui/qml/Pages2/PageSettingsApplication.qml" line="67"/>
<source>Reset settings and remove all data from the application</source>
<translation type="unfinished"></translation>
</message>

1
client/ui/controllers/pageController.h
View file

@ -63,6 +63,7 @@ signals:
void replaceStartPage();
void showErrorMessage(QString errorMessage);
void showInfoMessage(QString message);
void showBusyIndicator(bool visible);
private:
QSharedPointer<ServersModel> m_serversModel;

2
client/ui/models/servers_model.cpp
View file

@ -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) {

109
client/ui/qml/Components/ConnectButton.qml
View file

@ -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,40 +26,52 @@ 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
source: {
ShapePath {
fillColor: "transparent"
strokeColor: {
if (ConnectionController.isConnectionInProgress) {
return "/images/connectionProgress.svg"
return Qt.rgba(251/255, 178/255, 106/255, 1)
} else if (ConnectionController.isConnected) {
return "/images/connectionOff.svg"
return connectedButtonColor
} else {
return "/images/connectionOn.svg"
return defaultButtonColor
}
}
strokeWidth: 3
capStyle: ShapePath.RoundCap
RotationAnimator {
id: connectionProccess
target: border
running: ConnectionController.isConnectionInProgress
from: 0
to: 360
loops: Animation.Infinite
duration: 1250
}
Behavior on source {
PropertyAnimation { duration: 200 }
PathAngleArc {
centerX: backgroundCircle.width / 2
centerY: backgroundCircle.height / 2
radiusX: 93
radiusY: 93
startAngle: 0
sweepAngle: 360
}
}
@ -62,6 +83,44 @@ Button {
}
}
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 {
target: shape
running: ConnectionController.isConnectionInProgress
from: 0
to: 360
loops: Animation.Infinite
duration: 1000
}
}
}
contentItem: Text {
height: 24
@ -69,7 +128,7 @@ Button {
font.weight: 700
font.pixelSize: 20
color: "#D7D8DB"
color: ConnectionController.isConnected ? connectedButtonColor : defaultButtonColor
text: root.text
horizontalAlignment: Text.AlignHCenter

19
client/ui/qml/Components/ShareConnectionDrawer.qml
View file

@ -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

68
client/ui/qml/Controls2/BusyIndicatorType.qml Normal file
View file

@ -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
}
}
}
}
}

2
client/ui/qml/Pages2/PageSettingsServerData.qml
View file

@ -88,7 +88,9 @@ PageType {
descriptionText: qsTr("Добавим их в приложение, если они не отображались")
clickedFunction: function() {
PageController.showBusyIndicator(true)
InstallController.scanServerForInstalledContainers()
PageController.showBusyIndicator(false)
}
}

11
client/ui/qml/Pages2/PageShare.qml
View file

@ -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
}
}
}

12
client/ui/qml/Pages2/PageStart.qml
View file

@ -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
}
}