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

feature: added ui for DefaultVPN

Browse source
This commit is contained in:
vladimir.kuznetsov 2024-12-13 16:08:52 +07:00
parent d06924c59d
commit 2cfdc1df64
25 changed files with 1444 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

70
client/ui/qml/DefaultVpn/Controls/BusyIndicatorType.qml Normal file
View file

@ -0,0 +1,70 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Shapes
import Config 1.0
Popup {
id: root
anchors.centerIn: parent
modal: true
closePolicy: Popup.NoAutoClose
visible: false
Overlay.modal: Rectangle {
color: Style.color.transparentBlack
}
background: Rectangle {
color: Style.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: Style.color.transparent
strokeColor: Style.color.gray3
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
}
}
}
}
}

154
client/ui/qml/DefaultVpn/Controls/ButtonType.qml Normal file
View file

@ -0,0 +1,154 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Config 1.0
import "TextTypes"
Button {
id: root
property string defaultBackgroundColor: Style.color.white
property string defaultBorderColor: Style.color.gray3
property string defaultTextColor: Style.color.accent1
property string defaultImageColor: Style.color.accent1
property string hoveredBackgroundColor: Style.color.gray1
property string hoveredBorderColor: Style.color.gray3
property string hoveredTextColor: Style.color.accent2
property string hoveredImageColor: Style.color.accent2
property string pressedBackgroundColor: Style.color.gray2
property string pressedBorderColor: Style.color.gray3
property string pressedTextColor: Style.color.accent3
property string pressedImageColor: Style.color.accent3
property string disabledBackgroundColor: Style.color.white
property string disabledBorderColor: Style.color.gray3
property string disabledTextColor: Style.color.gray8
property string disabledImageColor: Style.color.gray8
property int defaultBorderWidth: 0
property int disabledBorderWidth: 0
property int hoveredBorderWidth: 0
property string imageSource: ""
readonly property bool isImageOnly: root.text !== ""
background: Rectangle {
id: background
anchors.fill: parent
radius: 6
color: root.enabled ? root.defaultBackgroundColor : root.disabledBackgroundColor
border.color: root.enabled ? root.defaultBorderColor : root.disabledBorderColor
border.width: root.enabled ? root.defaultBorderWidth : root.disabledBorderWidth
}
MouseArea {
id: mouseArea
anchors.fill: background
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
enabled: root.enabled
onEntered: {
background.color = root.hoveredBackgroundColor
background.border.color = root.hoveredBorderColor
background.border.width = root.hoveredBorderWidth
image.imageColor = root.hoveredImageColor
buttonText.color = root.hoveredTextColor
}
onExited: {
background.color = root.defaultBackgroundColor
background.border.color = root.defaultBorderColor
background.border.width = root.defaultBorderWidth
image.imageColor = root.defaultImageColor
buttonText.color = root.defaultTextColor
}
onPressedChanged: {
if (pressed) {
background.color = root.pressedBackgroundColor
background.border.color = root.pressedBorderColor
image.imageColor = root.pressedImageColor
buttonText.color = root.pressedTextColor
} else if (entered) {
background.color = root.hoveredBackgroundColor
background.border.color = root.hoveredBorderColor
image.imageColor = root.hoveredImageColor
buttonText.color = root.hoveredTextColor
} else {
background.color = root.defaultBackgroundColor
background.border.color = root.defaultBorderColor
image.imageColor = root.defaultImageColor
buttonText.color = root.defaultTextColor
}
}
onClicked: {
root.clicked()
}
}
contentItem: Item {
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
RowLayout {
id: content
anchors.fill: parent
MediumTextType {
id: buttonText
Layout.fillWidth: true
Layout.topMargin: 12
Layout.bottomMargin: 12
Layout.leftMargin: 12
Layout.rightMargin: 12
visible: root.isImageOnly
color: root.defaultTextColor
text: root.text
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
}
Image {
id: image
property color imageColor: root.enabled ? root.defaultImageColor : root.disabledImageColor
Layout.preferredHeight: 22
Layout.preferredWidth: 22
Layout.alignment: Qt.AlignCenter
Layout.topMargin: 12
Layout.bottomMargin: 12
Layout.leftMargin: 12
Layout.rightMargin: 12
source: root.imageSource
visible: root.imageSource === "" ? false : true
layer {
enabled: true
effect: ColorOverlay {
color: image.imageColor
}
}
}
}
}
}

99
client/ui/qml/DefaultVpn/Controls/DropDownType.qml Normal file
View file

@ -0,0 +1,99 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Config 1.0
import "TextTypes"
Button {
id: root
property string defaultBackgroundColor: "#FFFFFF"
property string defaultBorderColor: "#D1D1D6"
property string defaultTextColor: "#000000"
property string defaultImageColor: "#000000"
property string hoveredBackgroundColor: "#FFFFFF"
property string hoveredBorderColor: "#D1D1D6"
property string hoveredTextColor: "#D1D1D6"
property string hoveredImageColor: "#D1D1D6"
property string pressedBackgroundColor: "#FFFFFF"
property string pressedBorderColor: "#D1D1D6"
property string pressedTextColor: "#D1D1D6"
property string pressedImageColor: "#D1D1D6"
property string disabledBackgroundColor: "#FFFFFF"
property string disabledBorderColor: "#D1D1D6"
property string disabledTextColor: "#D1D1D6"
property string disabledImageColor: "#D1D1D6"
property string imageSource: "qrc:/images/controls/chevron-down.svg"
hoverEnabled: true
background: Rectangle {
id: focusBorder
color: root.defaultBackgroundColor
border.color: root.defaultBorderColor
border.width: 1
anchors.fill: parent
radius: 6
}
MouseArea {
anchors.fill: focusBorder
enabled: false
cursorShape: Qt.PointingHandCursor
}
contentItem: Item {
anchors.fill: focusBorder
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
RowLayout {
id: content
anchors.fill: parent
anchors.leftMargin: 16
anchors.rightMargin: 16
MediumTextType {
id: buttonText
Layout.fillWidth: true
Layout.topMargin: 12
Layout.bottomMargin: 12
color: root.defaultTextColor
text: root.text
horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter
}
Image {
Layout.preferredHeight: 22
Layout.preferredWidth: 22
source: root.imageSource
visible: root.imageSource === "" ? false : true
layer {
enabled: true
effect: ColorOverlay {
color: root.defaultImageColor
}
}
}
}
}
}

58
client/ui/qml/DefaultVpn/Controls/InputType.qml Normal file
View file

@ -0,0 +1,58 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Config 1.0
import "TextTypes"
ScrollView {
id: root
property string defaultBackgroundColor: Style.color.white
property string defaultBorderColor: Style.color.gray3
property string defaultTextColor: Style.color.gray6
property string hoveredBackgroundColor: Style.color.white
property string hoveredBorderColor: Style.color.gray6
property string hoveredTextColor: Style.color.black
property string disabledBackgroundColor: Style.color.gray2
property string disabledBorderColor: Style.color.gray3
property string disabledTextColor: Style.color.gray9
property string placeholderText
TextArea {
color: root.enabled ? root.defaultTextColor : (root.hovered || root.pressed) ? root.hoveredTextColor : root.disabledTextColor
background: Rectangle {
anchors.fill: parent
color: root.enabled ? root.defaultBackgroundColor : (root.hovered || root.pressed) ? root.hoveredBackgroundColor : root.disabledBackgroundColor
border.color: root.enabled ? root.defaultBorderColor : (root.hovered || root.pressed) ? root.hoveredBorderColor : root.disabledBorderColor
border.width: 1
radius: 6
}
topPadding: 12
bottomPadding: 12
leftPadding: 16
rightPadding: 16
inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhSensitiveData | Qt.ImhNoPredictiveText
selectionColor: Style.color.accent1
selectedTextColor: Style.color.white
font.pixelSize: 17
font.weight: 400
font.family: Style.font
wrapMode: TextEdit.Wrap
placeholderText: root.placeholderText
}
}

96
client/ui/qml/DefaultVpn/Controls/PopupType.qml Normal file
View file

@ -0,0 +1,96 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Config 1.0
import "TextTypes"
import "../Components"
Popup {
id: root
property string text
property bool closeButtonVisible: true
leftMargin: 25
rightMargin: 25
bottomMargin: 70
width: parent.width - leftMargin - rightMargin
anchors.centerIn: parent
modal: root.closeButtonVisible
closePolicy: Popup.CloseOnEscape
Overlay.modal: Rectangle {
visible: root.closeButtonVisible
color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
}
background: Rectangle {
anchors.fill: parent
color: Style.color.white
radius: 8
layer.enabled: true
layer.effect: DropShadow {
color: Style.color.gray3
horizontalOffset: 0
verticalOffset: 1
radius: 10
samples: 25
}
}
contentItem: Item {
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
anchors.fill: parent
RowLayout {
id: content
anchors.fill: parent
anchors.leftMargin: 16
anchors.rightMargin: 16
XSmallTextType {
horizontalAlignment: Text.AlignLeft
Layout.fillWidth: true
onLinkActivated: function(link) {
Qt.openUrlExternally(link)
}
text: root.text
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
}
}
Item {
id: focusItem
KeyNavigation.tab: closeButton
}
WhiteButtonNoBorder {
id: closeButton
visible: closeButtonVisible
imageSource: "qrc:/images/controls/x-circle.svg"
onClicked: function() {
root.close()
}
}
}
}
}

15
client/ui/qml/DefaultVpn/Controls/TextTypes/Header1TextType.qml Normal file
View file

@ -0,0 +1,15 @@
import QtQuick
import Config 1.0
Text {
lineHeight: 34
lineHeightMode: Text.FixedHeight
color: Style.color.black
font.pixelSize: 28
font.weight: 700
font.family: Style.font
wrapMode: Text.WordWrap
}

15
client/ui/qml/DefaultVpn/Controls/TextTypes/Header3TextType.qml Normal file
View file

@ -0,0 +1,15 @@
import QtQuick
import Config 1.0
Text {
lineHeight: 24
lineHeightMode: Text.FixedHeight
color: Style.color.black
font.pixelSize: 20
font.weight: 700
font.family: Style.font
wrapMode: Text.WordWrap
}

15
client/ui/qml/DefaultVpn/Controls/TextTypes/MediumTextType.qml Normal file
View file

@ -0,0 +1,15 @@
import QtQuick
import Config 1.0
Text {
lineHeight: 22
lineHeightMode: Text.FixedHeight
color: Style.color.black
font.pixelSize: 17
font.weight: 400
font.family: Style.font
wrapMode: Text.WordWrap
}

15
client/ui/qml/DefaultVpn/Controls/TextTypes/XSmallTextType.qml Normal file
View file

@ -0,0 +1,15 @@
import QtQuick
import Config 1.0
Text {
lineHeight: 18
lineHeightMode: Text.FixedHeight
color: Style.color.black
font.pixelSize: 13
font.weight: 400
font.family: Style.font
wrapMode: Text.WordWrap
}