Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added border hover effect for textarea #348

Merged
merged 2 commits into from
Sep 29, 2023
Merged

added border hover effect for textarea #348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b08a5b
added border hover effect for textarea
ronoaer Sep 25, 2023
ee99565
1. added border-hover-interaction
ronoaer Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 74 additions & 46 deletions client/ui/qml/Controls2/TextAreaType.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

FlickableType {
id: fl
interactive: false

anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: textArea.implicitHeight
TextArea {
id: textArea
anchors.top: parent.top
anchors.bottom: parent.bottom
contentHeight: textArea.implicitHeight
TextArea {
id: textArea

width: parent.width
width: parent.width

topPadding: 16
leftPadding: 16
anchors.topMargin: 16
anchors.bottomMargin: 16
topPadding: 16
leftPadding: 16
anchors.topMargin: 16
anchors.bottomMargin: 16

color: "#D7D8DB"
selectionColor: "#633303"
selectedTextColor: "#D7D8DB"
placeholderTextColor: "#878B91"
color: "#D7D8DB"
selectionColor: "#633303"
selectedTextColor: "#D7D8DB"
placeholderTextColor: "#878B91"

font.pixelSize: 16
font.weight: Font.Medium
font.family: "PT Root UI VF"
font.pixelSize: 16
font.weight: Font.Medium
font.family: "PT Root UI VF"

placeholderText: root.placeholderText
text: root.text
placeholderText: root.placeholderText
text: root.text

onCursorVisibleChanged: {
if (textArea.cursorVisible) {
fl.interactive = true
} else {
fl.interactive = false
onCursorVisibleChanged: {
if (textArea.cursorVisible) {
fl.interactive = true
} else {
fl.interactive = false
}
}
}

wrapMode: Text.Wrap
wrapMode: Text.Wrap

MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
fl.interactive = true
contextMenu.open()
MouseArea {
id: textAreaMouse
anchors.fill: parent
acceptedButtons: Qt.RightButton
hoverEnabled: true
onClicked: {
fl.interactive = true
contextMenu.open()
}
}
}

ContextMenuType {
id: contextMenu
textObj: textArea
onFocusChanged: {
root.border.color = getBorderColor(borderNormalColor)
}

ContextMenuType {
id: contextMenu
textObj: textArea
}
}
}

onPressed: {
root.border.color = getBorderColor(borderFocusedColor)
}

onExited: {
root.border.color = getBorderColor(borderNormalColor)
}

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 changes: 25 additions & 2 deletions client/ui/qml/Controls2/TextFieldWithHeaderType.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ Item {

property string backgroundColor: "#1c1d21"
property string backgroundDisabledColor: "transparent"
property string bgBorderHoveredColor: "#494B50"

implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
Expand All @@ -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 {
Expand Down Expand Up @@ -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)
}
}
}

Expand Down Expand Up @@ -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
}
}