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

Merge pull request #348 from amnezia-vpn/bugfix/changed_textfield_border_hover_color

Browse source 
added border hover effect for textarea
This commit is contained in:
Nethius 2023-09-29 16:24:28 +03:00 • committed by GitHub
commit ed1afa7549
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

122
client/ui/qml/Controls2/TextAreaType.qml
View file

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

27
client/ui/qml/Controls2/TextFieldWithHeaderType.qml
View file

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