AZEN-SGG/amnezia-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added hover effect for default-server in pagehome

Browse source
This commit is contained in:
ronoaer 2023-09-21 23:03:12 +08:00
parent d4d6fbab88
commit de35a26285
4 changed files with 156 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/resources.qrc
View file

@ -215,5 +215,6 @@
<file>ui/qml/Controls2/ListViewWithLabelsType.qml</file>
<file>ui/qml/Pages2/PageServiceDnsSettings.qml</file>
<file>ui/qml/Controls2/TopCloseButtonType.qml</file>
<file>ui/qml/Controls2/DefaultSeverType.qml</file>
</qresource>
</RCC>

139
client/ui/qml/Controls2/DefaultSeverType.qml Normal file
View file

@ -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()
}
}
}
}

9
client/ui/qml/Controls2/ImageButtonType.qml
View file

@ -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) {

69
client/ui/qml/Pages2/PageHome.qml
View file

@ -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
}
}