added DropDown component

This commit is contained in:
vladimir.kuznetsov 2023-04-25 08:04:20 +03:00
parent 87f01007cc
commit a9ebf534c6
10 changed files with 261 additions and 17 deletions

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 9L12 15L18 9" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 212 B

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 15L12 9L6 15" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 213 B

View file

@ -196,5 +196,7 @@
<file>images/controls/arrow-left.svg</file>
<file>ui/qml/Pages2/PageSetupWizardProtocols.qml</file>
<file>ui/qml/Pages2/PageSetupWizardEasy.qml</file>
<file>images/controls/chevron-down.svg</file>
<file>images/controls/chevron-up.svg</file>
</qresource>
</RCC>

View file

@ -26,7 +26,7 @@ enum class Page {Start = 0, NewServer, NewServerProtocols, Vpn,
GeneralSettings, AppSettings, NetworkSettings, ServerSettings,
ServerContainers, ServersList, ShareConnection, Sites,
ProtocolSettings, ProtocolShare, QrDecoder, QrDecoderIos, About, ViewConfig,
AdvancedServerSettings, ClientManagement, ClientInfo
AdvancedServerSettings, ClientManagement, ClientInfo,
Test, WizardCredentials, WizardProtocols, WizardEasySetup};
Q_ENUM_NS(Page)

View file

@ -111,7 +111,6 @@ RadioButton {
Text {
text: root.footerText
visible: root.footerText !== ""
enabled: root.footerText !== ""
color: "#878B91"
font.pixelSize: 13
font.weight: 400

View file

@ -1,5 +1,227 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Item {
id: root
property string text
property string descriptionText
property var onClickedFunc
property string buttonImage: "qrc:/images/controls/chevron-down.svg"
property string defaultColor: "#1C1D21"
property string borderColor: "#494B50"
property alias menuModel: menuContent.model
width: buttonContent.implicitWidth
height: buttonContent.implicitHeight
Rectangle {
id: buttonBackground
anchors.fill: buttonContent
radius: 16
color: defaultColor
border.color: borderColor
Behavior on border.width {
PropertyAnimation { duration: 200 }
}
}
RowLayout {
id: buttonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
ColumnLayout {
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.topMargin: 16
Layout.bottomMargin: 16
Text {
visible: root.descriptionText !== ""
font.family: "PT Root UI"
font.styleName: "normal"
font.pixelSize: 13
font.letterSpacing: 0.02
color: "#878B91"
text: root.descriptionText
wrapMode: Text.WordWrap
Layout.fillWidth: true
height: 16
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
Text {
font.family: "PT Root UI"
font.styleName: "normal"
font.pixelSize: 16
color: "#d7d8db"
text: root.text
Layout.fillWidth: true
height: 24
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
ImageButtonType {
id: button
Layout.rightMargin: 16
hoverEnabled: false
image: buttonImage
onClicked: {
if (onClickedFunc && typeof onClickedFunc === "function") {
onClickedFunc()
}
}
Layout.alignment: Qt.AlignRight
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
buttonBackground.border.width = 1
}
onExited: {
buttonBackground.border.width = 0
}
onClicked: {
menu.visible = true
}
}
Drawer {
id: menu
edge: Qt.BottomEdge
width: parent.width
height: parent.height * 0.8
clip: true
modal: true
background: Rectangle {
anchors.fill: parent
anchors.bottomMargin: -radius
radius: 16
color: "#1C1D21"
}
Overlay.modal: Rectangle {
color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
}
Column {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 16
spacing: 16
Header2TextType {
width: parent.width
text: "Данные для подключения"
wrapMode: Text.WordWrap
leftPadding: 16
rightPadding: 16
}
ButtonGroup {
id: radioButtonGroup
}
ListView {
id: menuContent
width: parent.width
height: menuContent.contentItem.height
currentIndex: -1
clip: true
interactive: false
delegate: Item {
implicitWidth: menuContent.width
implicitHeight: radioButton.implicitHeight
RadioButton {
id: radioButton
implicitWidth: parent.width
implicitHeight: radioButtonContent.implicitHeight
hoverEnabled: true
ButtonGroup.group: radioButtonGroup
indicator: Rectangle {
anchors.fill: parent
color: radioButton.hovered ? "#2C2D30" : "#1C1D21"
}
RowLayout {
id: radioButtonContent
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
z: 1
Text {
id: text
text: modelData
color: "#D7D8DB"
font.pixelSize: 16
font.weight: 400
font.family: "PT Root UI VF"
height: 24
Layout.fillWidth: true
Layout.topMargin: 20
Layout.bottomMargin: 20
}
Image {
source: "qrc:/images/controls/check.svg"
visible: radioButton.checked
width: 24
height: 24
Layout.rightMargin: 8
}
}
}
}
}
}
}
}

View file

@ -9,8 +9,8 @@ Flickable {
width: parent.width
anchors.bottom: parent.bottom
anchors.left: root.left
anchors.right: root.right
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 1
Keys.onUpPressed: scrollBar.decrease()

View file

@ -9,7 +9,7 @@ Item {
property string descriptionText
property var onClickedFunc
property alias buttonImage : button.image
property alias buttonImage: button.image
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
@ -42,6 +42,8 @@ Item {
text: root.descriptionText
wrapMode: Text.WordWrap
visible: root.descriptionText !== ""
Layout.fillWidth: true
height: 16

View file

@ -79,18 +79,37 @@ PageBase {
// UiLogic.goToPage(PageEnum.Start)
// }
}
DropDownType {
Layout.fillWidth: true
text: "IP, логин и пароль от сервера"
descriptionText: "IP, логин и пароль от сервера"
menuModel: [
qsTr("SHA512"),
qsTr("SHA384"),
qsTr("SHA256"),
qsTr("SHA3-512"),
qsTr("SHA3-384"),
qsTr("SHA3-256"),
qsTr("whirlpool"),
qsTr("BLAKE2b512"),
qsTr("BLAKE2s256"),
qsTr("SHA1")
]
}
}
Drawer {
id: drawer
y: 0
x: 0
edge: Qt.BottomEdge
width: parent.width
height: parent.height * 0.4375
clip: true
modal: true
background: Rectangle {
anchors.fill: parent
@ -99,15 +118,9 @@ PageBase {
color: "#1C1D21"
}
modal: true
//interactive: activeFocus
// onAboutToHide: {
// pageLoader.focus = true
// }
// onAboutToShow: {
// tfSshLog.focus = true
// }
Overlay.modal: Rectangle {
color: Qt.rgba(14/255, 14/255, 17/255, 0.8)
}
ColumnLayout {
anchors.top: parent.top

View file

@ -135,7 +135,7 @@ Window {
id: pageLoader
onFinished: {
UiLogic.initalizeUiLogic()
UiLogic.initializeUiLogic()
}
}