diff --git a/client/resources.qrc b/client/resources.qrc
index 5b4d6ae7..ff101a5d 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/Components/HomeRootMenuButton.qml
diff --git a/client/ui/qml/Components/HomeRootMenuButton.qml b/client/ui/qml/Components/HomeRootMenuButton.qml
new file mode 100644
index 00000000..aa6d8f9b
--- /dev/null
+++ b/client/ui/qml/Components/HomeRootMenuButton.qml
@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import "../Controls2/TextTypes"
+import "../Controls2"
+
+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..77c60684 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
+ HomeRootMenuButton {
+ 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
}
}