Improving characters choosing popup.
All checks were successful
continuous-integration/drone/push Build is passing

+ No longer covering the input
+ No longer cut off when editing the name
+ Improved keyboard navigation.
This commit is contained in:
Adsooi 2024-10-29 02:50:11 +01:00
parent f5b489ef44
commit da8aa59b0a
Signed by: Ad5001
GPG key ID: EF45F9C6AFE20160
3 changed files with 71 additions and 30 deletions

View file

@ -16,8 +16,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import QtQuick.Controls
import QtQuick import QtQuick
import QtQuick.Controls
import QtQml.Models
/*! /*!
\qmltype InsertCharacter \qmltype InsertCharacter
@ -42,15 +43,18 @@ Popup {
*/ */
property string category: 'all' property string category: 'all'
width: 280 width: insertGrid.width + 10
height: Math.ceil(insertGrid.insertChars.length/insertGrid.columns)*(width/insertGrid.columns)+5 height: insertGrid.height + 10
modal: true modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
Grid { GridView {
id: insertGrid id: insertGrid
width: parent.width width: 280
columns: 7 height: Math.ceil(model.count/columns)*cellHeight
property int columns: 7
cellWidth: width/columns
cellHeight: cellWidth
property var insertCharsExpression: [ property var insertCharsExpression: [
"∞","π","¹","²","³","⁴","⁵", "∞","π","¹","²","³","⁴","⁵",
@ -86,21 +90,34 @@ Popup {
}[insertPopup.category] }[insertPopup.category]
} }
Repeater { model: ListModel {}
model: parent.insertChars.length
delegate: Button {
Button { id: insertBtn
id: insertBtn width: insertGrid.cellWidth
width: insertGrid.width/insertGrid.columns height: insertGrid.cellHeight
height: width text: chr
text: insertGrid.insertChars[modelData] flat: text == " "
flat: text == " " font.pixelSize: 18
font.pixelSize: 18
onClicked: {
onClicked: { insertPopup.selected(text)
selected(text) insertPopup.close()
} }
}
Component.onCompleted: function() {
for(const chr of insertChars) {
console.log("Appending", chr)
model.append({ 'chr': chr })
} }
} }
} }
function setFocus() {
insertGrid.currentIndex = 0
insertGrid.forceActiveFocus()
}
Keys.onEscapePressed: close()
} }

View file

@ -500,29 +500,41 @@ Item {
Button { Button {
id: insertButton id: insertButton
text: "α"
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 5 anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 20 width: 20
height: width height: width
Icon {
id: icon
width: 12
height: 12
anchors.centerIn: parent
color: sysPalette.windowText
source: '../icons/properties/expression.svg'
}
onClicked: { onClicked: {
insertPopup.open() insertPopup.open()
insertPopup.focus = true insertPopup.setFocus()
} }
} }
P.InsertCharacter { P.InsertCharacter {
id: insertPopup id: insertPopup
x: Math.round((parent.width - width) / 2) x: parent.width - width
y: Math.round((parent.height - height) / 2) y: parent.height
category: "expression" category: "expression"
onSelected: function(c) { onSelected: function(c) {
editor.insert(editor.cursorPosition, c) editor.insert(editor.cursorPosition, c)
insertPopup.close() }
onClosed: function() {
focus = false focus = false
editor.focus = true editor.focus = true
} }

View file

@ -144,28 +144,40 @@ Item {
Button { Button {
id: insertButton id: insertButton
text: "α"
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 5 anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 20 width: 20
height: width height: width
visible: !isInt && !isDouble visible: !isInt && !isDouble
Icon {
id: icon
width: 12
height: 12
anchors.centerIn: parent
color: sysPalette.windowText
source: '../icons/properties/expression.svg'
}
onClicked: { onClicked: {
insertPopup.open() insertPopup.open()
insertPopup.focus = true insertPopup.setFocus()
} }
} }
Popup.InsertCharacter { Popup.InsertCharacter {
id: insertPopup id: insertPopup
x: Math.round((parent.width - width) / 2) x: parent.width - width
y: Math.round((parent.height - height) / 2) y: parent.height
onSelected: function(c) { onSelected: function(c) {
input.insert(input.cursorPosition, c) input.insert(input.cursorPosition, c)
insertPopup.close() }
onClosed: function() {
focus = false focus = false
input.focus = true input.focus = true
} }