From a9ebf534c691e86536b652359e5bb8ab11f3f0d6 Mon Sep 17 00:00:00 2001 From: "vladimir.kuznetsov" Date: Tue, 25 Apr 2023 08:04:20 +0300 Subject: [PATCH] added DropDown component --- client/images/controls/chevron-down.svg | 3 + client/images/controls/chevron-up.svg | 3 + client/resources.qrc | 2 + client/ui/pages.h | 2 +- client/ui/qml/Controls2/CardType.qml | 1 - client/ui/qml/Controls2/DropDownType.qml | 222 ++++++++++++++++++ client/ui/qml/Controls2/FlickableType.qml | 4 +- .../ui/qml/Controls2/LabelWithButtonType.qml | 4 +- client/ui/qml/Pages2/PageStart.qml | 35 ++- client/ui/qml/main2.qml | 2 +- 10 files changed, 261 insertions(+), 17 deletions(-) create mode 100644 client/images/controls/chevron-down.svg create mode 100644 client/images/controls/chevron-up.svg diff --git a/client/images/controls/chevron-down.svg b/client/images/controls/chevron-down.svg new file mode 100644 index 00000000..3f453815 --- /dev/null +++ b/client/images/controls/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/images/controls/chevron-up.svg b/client/images/controls/chevron-up.svg new file mode 100644 index 00000000..b51628d2 --- /dev/null +++ b/client/images/controls/chevron-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/resources.qrc b/client/resources.qrc index d8cd40c5..3d009107 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -196,5 +196,7 @@ images/controls/arrow-left.svg ui/qml/Pages2/PageSetupWizardProtocols.qml ui/qml/Pages2/PageSetupWizardEasy.qml + images/controls/chevron-down.svg + images/controls/chevron-up.svg diff --git a/client/ui/pages.h b/client/ui/pages.h index 808725d2..9c5db53c 100644 --- a/client/ui/pages.h +++ b/client/ui/pages.h @@ -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) diff --git a/client/ui/qml/Controls2/CardType.qml b/client/ui/qml/Controls2/CardType.qml index fa7ee514..4b94cb1a 100644 --- a/client/ui/qml/Controls2/CardType.qml +++ b/client/ui/qml/Controls2/CardType.qml @@ -111,7 +111,6 @@ RadioButton { Text { text: root.footerText visible: root.footerText !== "" - enabled: root.footerText !== "" color: "#878B91" font.pixelSize: 13 font.weight: 400 diff --git a/client/ui/qml/Controls2/DropDownType.qml b/client/ui/qml/Controls2/DropDownType.qml index 5560aee7..ea02ac3c 100644 --- a/client/ui/qml/Controls2/DropDownType.qml +++ b/client/ui/qml/Controls2/DropDownType.qml @@ -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 + } + } + } + } + } + } + } } diff --git a/client/ui/qml/Controls2/FlickableType.qml b/client/ui/qml/Controls2/FlickableType.qml index b7c1203f..073be058 100644 --- a/client/ui/qml/Controls2/FlickableType.qml +++ b/client/ui/qml/Controls2/FlickableType.qml @@ -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() diff --git a/client/ui/qml/Controls2/LabelWithButtonType.qml b/client/ui/qml/Controls2/LabelWithButtonType.qml index 60c48569..92606940 100644 --- a/client/ui/qml/Controls2/LabelWithButtonType.qml +++ b/client/ui/qml/Controls2/LabelWithButtonType.qml @@ -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 diff --git a/client/ui/qml/Pages2/PageStart.qml b/client/ui/qml/Pages2/PageStart.qml index 5d303cb8..f87e0c6e 100644 --- a/client/ui/qml/Pages2/PageStart.qml +++ b/client/ui/qml/Pages2/PageStart.qml @@ -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 diff --git a/client/ui/qml/main2.qml b/client/ui/qml/main2.qml index deb64e89..c7e06eaa 100644 --- a/client/ui/qml/main2.qml +++ b/client/ui/qml/main2.qml @@ -135,7 +135,7 @@ Window { id: pageLoader onFinished: { - UiLogic.initalizeUiLogic() + UiLogic.initializeUiLogic() } }