From de35a26285253aa7d5006d802d01d098efdd69e5 Mon Sep 17 00:00:00 2001 From: ronoaer Date: Thu, 21 Sep 2023 23:03:12 +0800 Subject: [PATCH] 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 } }