From f7370a0280d44e9367c03b1c8d8d0d259ca298d2 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Mon, 18 Sep 2023 14:35:22 +0800 Subject: [PATCH 1/7] fixed: topright-corner button not visible when drawer closed --- client/ui/qml/Controls2/DrawerType.qml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/ui/qml/Controls2/DrawerType.qml b/client/ui/qml/Controls2/DrawerType.qml index 34b141b4..1c4c508f 100644 --- a/client/ui/qml/Controls2/DrawerType.qml +++ b/client/ui/qml/Controls2/DrawerType.qml @@ -48,19 +48,19 @@ Drawer { if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { PageController.updateNavigationBarColor(0xFF1C1D21) } + } + onOpened: { if (needCloseButton) { PageController.drawerOpen() } } - onAboutToHide: { + onClosed: { if (needCloseButton) { PageController.drawerClose() } - } - onClosed: { var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor() if (initialPageNavigationBarColor !== 0xFF1C1D21) { PageController.updateNavigationBarColor(initialPageNavigationBarColor) From de35a26285253aa7d5006d802d01d098efdd69e5 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Thu, 21 Sep 2023 23:03:12 +0800 Subject: [PATCH 2/7] added hover effect for default-server in pagehome --- client/resources.qrc | 1 + client/ui/qml/Controls2/DefaultSeverType.qml | 139 +++++++++++++++++++ client/ui/qml/Controls2/ImageButtonType.qml | 9 +- client/ui/qml/Pages2/PageHome.qml | 69 ++------- 4 files changed, 156 insertions(+), 62 deletions(-) create mode 100644 client/ui/qml/Controls2/DefaultSeverType.qml diff --git a/client/resources.qrc b/client/resources.qrc index 5b4d6ae7..75d7c220 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -215,5 +215,6 @@ ui/qml/Controls2/ListViewWithLabelsType.qml ui/qml/Pages2/PageServiceDnsSettings.qml ui/qml/Controls2/TopCloseButtonType.qml + ui/qml/Controls2/DefaultSeverType.qml diff --git a/client/ui/qml/Controls2/DefaultSeverType.qml b/client/ui/qml/Controls2/DefaultSeverType.qml new file mode 100644 index 00000000..91d2eb52 --- /dev/null +++ b/client/ui/qml/Controls2/DefaultSeverType.qml @@ -0,0 +1,139 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +import "TextTypes" + +Item { + id: root + + property string text + property int textMaximumLineCount: 2 + property int textElide: Qt.ElideRight + + property string descriptionText + + property var clickedFunction + + property string rightImageSource + + property string textColor: "#d7d8db" + property string descriptionColor: "#878B91" + property real textOpacity: 1.0 + + property string rightImageColor: "#d7d8db" + + property bool descriptionOnTop: false + + property string defaultServerHostName + property string defaultContainerName + + implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin + implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin + + ColumnLayout { + id: content + + anchors.right: parent.right + anchors.left: parent.left + anchors.bottom: parent.bottom + + RowLayout { + Layout.topMargin: 24 + Layout.leftMargin: 24 + Layout.rightMargin: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + Header1TextType { + Layout.maximumWidth: root.width - 48 - 18 - 12 // todo + + maximumLineCount: 2 + elide: Qt.ElideRight + + text: root.text + Layout.alignment: Qt.AlignLeft + } + + + ImageButtonType { + id: rightImage + + hoverEnabled: false + image: rightImageSource + imageColor: rightImageColor + visible: rightImageSource ? true : false + + implicitSize: 18 + backGroudRadius: 5 + horizontalPadding: 0 + padding: 0 + spacing: 0 + + + Rectangle { + id: rightImageBackground + anchors.fill: parent + radius: 16 + color: "transparent" + + Behavior on color { + PropertyAnimation { duration: 200 } + } + } + } + } + + LabelTextType { + Layout.bottomMargin: 44 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + text: { + var description = "" + if (ServersModel.isDefaultServerHasWriteAccess()) { + if (SettingsController.isAmneziaDnsEnabled() + && ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) { + description += "Amnezia DNS | " + } + } else { + if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) { + description += "Amnezia DNS | " + } + } + + description += root.defaultContainerName + " | " + root.defaultServerHostName + return description + } + } + } + + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + + onEntered: { + rightImageBackground.color = rightImage.hoveredColor + + root.textOpacity = 0.8 + } + + onExited: { + rightImageBackground.color = rightImage.defaultColor + + root.textOpacity = 1 + } + + onPressedChanged: { + rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor + + root.textOpacity = 0.7 + } + + onClicked: { + if (clickedFunction && typeof clickedFunction === "function") { + clickedFunction() + } + } + } +} diff --git a/client/ui/qml/Controls2/ImageButtonType.qml b/client/ui/qml/Controls2/ImageButtonType.qml index 843599a4..55e19f42 100644 --- a/client/ui/qml/Controls2/ImageButtonType.qml +++ b/client/ui/qml/Controls2/ImageButtonType.qml @@ -15,8 +15,11 @@ Button { property string imageColor: "#878B91" property string disableImageColor: "#2C2D30" - implicitWidth: 40 - implicitHeight: 40 + property int backGroudRadius: 12 + property int implicitSize: 40 + + implicitWidth: implicitSize + implicitHeight: implicitSize hoverEnabled: true @@ -31,7 +34,7 @@ Button { id: background anchors.fill: parent - radius: 12 + radius: backGroudRadius color: { if (root.enabled) { if(root.pressed) { diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index d8796524..125d3e6a 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -50,7 +50,7 @@ PageType { Rectangle { id: buttonBackground - anchors.fill: buttonContent + anchors.fill: defaultServerInfo radius: 16 color: root.defaultColor @@ -67,70 +67,21 @@ PageType { } } - ColumnLayout { - id: buttonContent + DefaultSeverType { + id: defaultServerInfo + height: 130 anchors.right: parent.right anchors.left: parent.left anchors.bottom: parent.bottom - RowLayout { - Layout.topMargin: 24 - Layout.leftMargin: 24 - Layout.rightMargin: 24 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + text: root.defaultServerName + rightImageSource: "qrc:/images/controls/chevron-down.svg" - spacing: 0 + defaultContainerName: root.defaultContainerName + defaultServerHostName: root.defaultServerHostName - Header1TextType { - Layout.maximumWidth: buttonContent.width - 48 - 18 - 12 // todo - - maximumLineCount: 2 - elide: Qt.ElideRight - - text: root.defaultServerName - horizontalAlignment: Qt.AlignHCenter - } - - Image { - Layout.preferredWidth: 18 - Layout.preferredHeight: 18 - - Layout.leftMargin: 12 - - source: "qrc:/images/controls/chevron-down.svg" - } - } - - LabelTextType { - Layout.bottomMargin: 44 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - - text: { - var description = "" - if (ServersModel.isDefaultServerHasWriteAccess()) { - if (SettingsController.isAmneziaDnsEnabled() - && ContainersModel.isAmneziaDnsContainerInstalled(ServersModel.getDefaultServerIndex())) { - description += "Amnezia DNS | " - } - } else { - if (ServersModel.isDefaultServerConfigContainsAmneziaDns()) { - description += "Amnezia DNS | " - } - } - - description += root.defaultContainerName + " | " + root.defaultServerHostName - return description - } - } - } - - MouseArea { - anchors.fill: buttonBackground - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - - onClicked: { - menu.visible = true + clickedFunction: function() { + menu.visible = true } } From 49923c421439ae181debffe2b23283a7cd10bd2d Mon Sep 17 00:00:00 2001 From: ronoaer Date: Sun, 24 Sep 2023 08:21:27 +0800 Subject: [PATCH 3/7] renamed deaultservertype, and moved to components --- client/resources.qrc | 2 +- .../DefaultSeverType.qml => Components/HomeRootMenuButton.qml} | 3 ++- client/ui/qml/Pages2/PageHome.qml | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) rename client/ui/qml/{Controls2/DefaultSeverType.qml => Components/HomeRootMenuButton.qml} (98%) diff --git a/client/resources.qrc b/client/resources.qrc index 75d7c220..ff101a5d 100644 --- a/client/resources.qrc +++ b/client/resources.qrc @@ -215,6 +215,6 @@ ui/qml/Controls2/ListViewWithLabelsType.qml ui/qml/Pages2/PageServiceDnsSettings.qml ui/qml/Controls2/TopCloseButtonType.qml - ui/qml/Controls2/DefaultSeverType.qml + ui/qml/Components/HomeRootMenuButton.qml diff --git a/client/ui/qml/Controls2/DefaultSeverType.qml b/client/ui/qml/Components/HomeRootMenuButton.qml similarity index 98% rename from client/ui/qml/Controls2/DefaultSeverType.qml rename to client/ui/qml/Components/HomeRootMenuButton.qml index 91d2eb52..aa6d8f9b 100644 --- a/client/ui/qml/Controls2/DefaultSeverType.qml +++ b/client/ui/qml/Components/HomeRootMenuButton.qml @@ -2,7 +2,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts -import "TextTypes" +import "../Controls2/TextTypes" +import "../Controls2" Item { id: root diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml index 125d3e6a..77c60684 100644 --- a/client/ui/qml/Pages2/PageHome.qml +++ b/client/ui/qml/Pages2/PageHome.qml @@ -67,7 +67,7 @@ PageType { } } - DefaultSeverType { + HomeRootMenuButton { id: defaultServerInfo height: 130 anchors.right: parent.right From 51497d87e01c5a7296a3b805e890a3e9e7b46dfd Mon Sep 17 00:00:00 2001 From: ronoaer Date: Mon, 25 Sep 2023 07:22:11 +0800 Subject: [PATCH 4/7] redirected to pagesetupwizardeasy when none containers installed --- client/ui/models/containers_model.cpp | 14 ++++++++++++++ client/ui/models/containers_model.h | 2 +- client/ui/qml/Components/ConnectButton.qml | 8 ++++++++ client/ui/qml/Pages2/PageSetupWizardEasy.qml | 2 ++ 4 files changed, 25 insertions(+), 1 deletion(-) diff --git a/client/ui/models/containers_model.cpp b/client/ui/models/containers_model.cpp index afff44b6..6cf855a6 100644 --- a/client/ui/models/containers_model.cpp +++ b/client/ui/models/containers_model.cpp @@ -214,6 +214,20 @@ bool ContainersModel::isAmneziaDnsContainerInstalled(const int serverIndex) return containers.contains(DockerContainer::Dns); } +bool ContainersModel::isAnyContainerInstalled() +{ + for (int row=0; row < rowCount(); row++) { + QModelIndex idx = this->index(row, 0); + + if (this->data(idx, IsInstalledRole).toBool() && + this->data(idx, ServiceTypeRole).toInt() == ServiceType::Vpn) { + return true; + } + } + + return false; +} + QHash ContainersModel::roleNames() const { QHash roles; diff --git a/client/ui/models/containers_model.h b/client/ui/models/containers_model.h index 741a0620..2cc41cbf 100644 --- a/client/ui/models/containers_model.h +++ b/client/ui/models/containers_model.h @@ -63,7 +63,7 @@ public slots: bool isAmneziaDnsContainerInstalled(); bool isAmneziaDnsContainerInstalled(const int serverIndex); - // bool isOnlyServicesInstalled(const int serverIndex); + bool isAnyContainerInstalled(); protected: QHash roleNames() const override; diff --git a/client/ui/qml/Components/ConnectButton.qml b/client/ui/qml/Components/ConnectButton.qml index ab28d0d0..b7484c73 100644 --- a/client/ui/qml/Components/ConnectButton.qml +++ b/client/ui/qml/Components/ConnectButton.qml @@ -5,6 +5,7 @@ import QtQuick.Shapes import Qt5Compat.GraphicalEffects import ConnectionState 1.0 +import PageEnum 1.0 Button { id: root @@ -137,6 +138,13 @@ Button { } onClicked: { + if (!ContainersModel.isAnyContainerInstalled()) { + ServersModel.currentlyProcessedIndex = ServersModel.getDefaultServerIndex() + PageController.goToPage(PageEnum.PageSetupWizardEasy) + + return + } + if (ConnectionController.isConnectionInProgress) { ConnectionController.closeConnection() } else if (ConnectionController.isConnected) { diff --git a/client/ui/qml/Pages2/PageSetupWizardEasy.qml b/client/ui/qml/Pages2/PageSetupWizardEasy.qml index b228a7a3..4f94e985 100644 --- a/client/ui/qml/Pages2/PageSetupWizardEasy.qml +++ b/client/ui/qml/Pages2/PageSetupWizardEasy.qml @@ -183,6 +183,8 @@ PageType { textColor: "#D7D8DB" borderWidth: 1 + visible: ContainersModel.isAnyContainerInstalled() + text: qsTr("Set up later") onClicked: function() { From 8b08a5bee0c6c13801ac331a93115738fb21cc97 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Mon, 25 Sep 2023 22:16:59 +0800 Subject: [PATCH 5/7] added border hover effect for textarea --- .../qml/Controls2/TextFieldWithHeaderType.qml | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/client/ui/qml/Controls2/TextFieldWithHeaderType.qml b/client/ui/qml/Controls2/TextFieldWithHeaderType.qml index 3f80428e..3a3f5a1a 100644 --- a/client/ui/qml/Controls2/TextFieldWithHeaderType.qml +++ b/client/ui/qml/Controls2/TextFieldWithHeaderType.qml @@ -30,6 +30,7 @@ Item { property string backgroundColor: "#1c1d21" property string backgroundDisabledColor: "transparent" + property string bgBorderHoveredColor: "#494B50" implicitWidth: content.implicitWidth implicitHeight: content.implicitHeight @@ -44,7 +45,7 @@ Item { Layout.preferredHeight: input.implicitHeight color: root.enabled ? root.backgroundColor : root.backgroundDisabledColor radius: 16 - border.color: textField.focus ? root.borderFocusedColor : root.borderColor + border.color: getBackgroundBorderColor(root.borderColor) border.width: 1 Behavior on border.color { @@ -102,12 +103,17 @@ Item { anchors.fill: parent acceptedButtons: Qt.RightButton onClicked: contextMenu.open() + enabled: true } ContextMenuType { id: contextMenu textObj: textField } + + onFocusChanged: { + backgroud.border.color = getBackgroundBorderColor(root.borderColor) + } } } @@ -149,11 +155,28 @@ Item { MouseArea { anchors.fill: root - cursorShape: Qt.PointingHandCursor + cursorShape: Qt.IBeamCursor + + hoverEnabled: true onPressed: function(mouse) { textField.forceActiveFocus() mouse.accepted = false + + backgroud.border.color = getBackgroundBorderColor(root.borderColor) + } + + onEntered: { + backgroud.border.color = getBackgroundBorderColor(bgBorderHoveredColor) + } + + + onExited: { + backgroud.border.color = getBackgroundBorderColor(root.borderColor) } } + + function getBackgroundBorderColor(noneFocusedColor) { + return textField.focus ? root.borderFocusedColor : noneFocusedColor + } } From ee99565b63c8ba4a96f6bf6bfc6b47d407afa64a Mon Sep 17 00:00:00 2001 From: ronoaer Date: Tue, 26 Sep 2023 16:38:08 +0800 Subject: [PATCH 6/7] 1. added border-hover-interaction 2. updated textarea-focus-interaction --- client/ui/qml/Controls2/TextAreaType.qml | 122 ++++++++++++++--------- 1 file changed, 75 insertions(+), 47 deletions(-) diff --git a/client/ui/qml/Controls2/TextAreaType.qml b/client/ui/qml/Controls2/TextAreaType.qml index 4b70c274..f4f75417 100644 --- a/client/ui/qml/Controls2/TextAreaType.qml +++ b/client/ui/qml/Controls2/TextAreaType.qml @@ -9,71 +9,99 @@ Rectangle { property alias textArea: textArea property alias textAreaText: textArea.text + property string borderHoveredColor: "#494B50" + property string borderNormalColor: "#2C2D30" + property string borderFocusedColor: "#d7d8db" + height: 148 color: "#1C1D21" border.width: 1 - border.color: "#2C2D30" + border.color: getBorderColor(borderNormalColor) radius: 16 - FlickableType { - id: fl - interactive: false + MouseArea { + id: parentMouse + anchors.fill: parent + cursorShape: Qt.IBeamCursor + onClicked: textArea.forceActiveFocus() + hoverEnabled: true - anchors.top: parent.top - anchors.bottom: parent.bottom - contentHeight: textArea.implicitHeight - TextArea { - id: textArea + FlickableType { + id: fl + interactive: false - width: parent.width + anchors.top: parent.top + anchors.bottom: parent.bottom + contentHeight: textArea.implicitHeight + TextArea { + id: textArea - topPadding: 16 - leftPadding: 16 - anchors.topMargin: 16 - anchors.bottomMargin: 16 + width: parent.width - color: "#D7D8DB" - selectionColor: "#633303" - selectedTextColor: "#D7D8DB" - placeholderTextColor: "#878B91" + topPadding: 16 + leftPadding: 16 + anchors.topMargin: 16 + anchors.bottomMargin: 16 - font.pixelSize: 16 - font.weight: Font.Medium - font.family: "PT Root UI VF" + color: "#D7D8DB" + selectionColor: "#633303" + selectedTextColor: "#D7D8DB" + placeholderTextColor: "#878B91" - placeholderText: root.placeholderText - text: root.text + font.pixelSize: 16 + font.weight: Font.Medium + font.family: "PT Root UI VF" - onCursorVisibleChanged: { - if (textArea.cursorVisible) { - fl.interactive = true - } else { - fl.interactive = false + placeholderText: root.placeholderText + text: root.text + + onCursorVisibleChanged: { + if (textArea.cursorVisible) { + fl.interactive = true + } else { + fl.interactive = false + } + } + + wrapMode: Text.Wrap + + MouseArea { + id: textAreaMouse + anchors.fill: parent + acceptedButtons: Qt.RightButton + hoverEnabled: true + onClicked: { + fl.interactive = true + contextMenu.open() + } + } + + onFocusChanged: { + root.border.color = getBorderColor(borderNormalColor) + } + + ContextMenuType { + id: contextMenu + textObj: textArea } } + } - wrapMode: Text.Wrap + onPressed: { + root.border.color = getBorderColor(borderFocusedColor) + } - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.RightButton - onClicked: { - fl.interactive = true - contextMenu.open() - } - } + onExited: { + root.border.color = getBorderColor(borderNormalColor) + } - ContextMenuType { - id: contextMenu - textObj: textArea - } + onEntered: { + root.border.color = getBorderColor(borderHoveredColor) } } - //todo make whole background clickable, with code below we lose ability to select text by mouse -// MouseArea { -// anchors.fill: parent -// cursorShape: Qt.IBeamCursor -// onClicked: textArea.forceActiveFocus() -// } + + function getBorderColor(noneFocusedColor) { + return textArea.focus ? root.borderFocusedColor : noneFocusedColor + } } From 37024eb91da6c3984c59f90a8cec3a3344693e22 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Tue, 26 Sep 2023 17:23:35 +0800 Subject: [PATCH 7/7] updated cursorshape of cardtype to Qt.PointingHandCursor --- client/ui/qml/Controls2/CardType.qml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/ui/qml/Controls2/CardType.qml b/client/ui/qml/Controls2/CardType.qml index 4b94cb1a..8429acb8 100644 --- a/client/ui/qml/Controls2/CardType.qml +++ b/client/ui/qml/Controls2/CardType.qml @@ -123,4 +123,11 @@ RadioButton { Layout.bottomMargin: 16 } } + + MouseArea { + anchors.fill: parent + + cursorShape: Qt.PointingHandCursor + enabled: false + } }