1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-30 00:12:50 -05:00

lock/greeter: keyboard accessibility improvements

This commit is contained in:
bbedward
2025-11-09 15:28:21 -05:00
parent b5c49573e5
commit 47c5320d67
3 changed files with 289 additions and 288 deletions

View File

@@ -14,6 +14,21 @@ DankActionButton {
property bool isShift: false property bool isShift: false
color: Theme.surface color: Theme.surface
property bool isIcon: text === "keyboard_hide" || text === "Backspace" || text === "Enter"
DankIcon {
anchors.centerIn: parent
name: {
if (parent.text === "keyboard_hide") return "keyboard_hide"
if (parent.text === "Backspace") return "backspace"
if (parent.text === "Enter") return "keyboard_return"
return ""
}
size: 20
color: Theme.surfaceText
visible: parent.isIcon
}
StyledText { StyledText {
id: contentItem id: contentItem
anchors.centerIn: parent anchors.centerIn: parent
@@ -21,5 +36,6 @@ DankActionButton {
color: Theme.surfaceText color: Theme.surfaceText
font.pixelSize: Theme.fontSizeXLarge font.pixelSize: Theme.fontSizeXLarge
font.weight: Font.Normal font.weight: Font.Normal
visible: !parent.isIcon
} }
} }

View File

@@ -10,185 +10,157 @@ Rectangle {
anchors.right: parent.right anchors.right: parent.right
color: Theme.widgetBackground color: Theme.widgetBackground
property double rowSpacing: 0.01 * width // horizontal spacing between keyboard signal dismissed
property double rowSpacing: 0.01 * width // horizontal spacing between keyboard
property double columnSpacing: 0.02 * height // vertical spacing between keyboard property double columnSpacing: 0.02 * height // vertical spacing between keyboard
property bool shift: false //Boolean for the shift state property bool shift: false //Boolean for the shift state
property bool symbols: false //Boolean for the symbol state property bool symbols: false //Boolean for the symbol state
property double columns: 10 // Number of column property double columns: 10 // Number of column
property double rows: 4 // Number of row property double rows: 4 // Number of row
property string strShift: '\u2191' // UPWARDS ARROW unicode property string strShift: '\u2191'
property string strBackspace: "Backspace" property string strBackspace: "Backspace"
property string strEnter: "Enter"
property string strClose: "keyboard_hide"
property var modelKeyboard: { property var modelKeyboard: {
"row_1": [ "row_1": [{
{ "text": 'q',
text: 'q', "symbol": '1',
symbol: '1', "width": 1
width: 1 }, {
}, "text": 'w',
{ "symbol": '2',
text: 'w', "width": 1
symbol: '2', }, {
width: 1 "text": 'e',
}, "symbol": '3',
{ "width": 1
text: 'e', }, {
symbol: '3', "text": 'r',
width: 1 "symbol": '4',
}, "width": 1
{ }, {
text: 'r', "text": 't',
symbol: '4', "symbol": '5',
width: 1 "width": 1
}, }, {
{ "text": 'y',
text: 't', "symbol": '6',
symbol: '5', "width": 1
width: 1 }, {
}, "text": 'u',
{ "symbol": '7',
text: 'y', "width": 1
symbol: '6', }, {
width: 1 "text": 'i',
}, "symbol": '8',
{ "width": 1
text: 'u', }, {
symbol: '7', "text": 'o',
width: 1 "symbol": '9',
}, "width": 1
{ }, {
text: 'i', "text": 'p',
symbol: '8', "symbol": '0',
width: 1 "width": 1
}, }],
{ "row_2": [{
text: 'o', "text": 'a',
symbol: '9', "symbol": '-',
width: 1 "width": 1
}, }, {
{ "text": 's',
text: 'p', "symbol": '/',
symbol: '0', "width": 1
width: 1 }, {
}, "text": 'd',
], "symbol": ':',
"row_2": [ "width": 1
{ }, {
text: 'a', "text": 'f',
symbol: '-', "symbol": ';',
width: 1 "width": 1
}, }, {
{ "text": 'g',
text: 's', "symbol": '(',
symbol: '/', "width": 1
width: 1 }, {
}, "text": 'h',
{ "symbol": ')',
text: 'd', "width": 1
symbol: ':', }, {
width: 1 "text": 'j',
}, "symbol": '€',
{ "width": 1
text: 'f', }, {
symbol: ';', "text": 'k',
width: 1 "symbol": '&',
}, "width": 1
{ }, {
text: 'g', "text": 'l',
symbol: '(', "symbol": '@',
width: 1 "width": 1
}, }],
{ "row_3": [{
text: 'h', "text": strShift,
symbol: ')', "symbol": strShift,
width: 1 "width": 1.5
}, }, {
{ "text": 'z',
text: 'j', "symbol": '.',
symbol: '€', "width": 1
width: 1 }, {
}, "text": 'x',
{ "symbol": ',',
text: 'k', "width": 1
symbol: '&', }, {
width: 1 "text": 'c',
}, "symbol": '?',
{ "width": 1
text: 'l', }, {
symbol: '@', "text": 'v',
width: 1 "symbol": '!',
} "width": 1
], }, {
"row_3": [ "text": 'b',
{ "symbol": "'",
text: strShift, "width": 1
symbol: strShift, }, {
width: 1.5 "text": 'n',
}, "symbol": "%",
{ "width": 1
text: 'z', }, {
symbol: '.', "text": 'm',
width: 1 "symbol": '"',
}, "width": 1
{ }, {
text: 'x', "text": strBackspace,
symbol: ',', "symbol": strBackspace,
width: 1 "width": 1.5
}, }],
{ "row_4": [{
text: 'c', "text": strClose,
symbol: '?', "symbol": strClose,
width: 1 "width": 1.5
}, }, {
{ "text": "123",
text: 'v', "symbol": 'ABC',
symbol: '!', "width": 1.5
width: 1 }, {
}, "text": ' ',
{ "symbol": ' ',
text: 'b', "width": 4.5
symbol: "'", }, {
width: 1 "text": '.',
}, "symbol": '.',
{ "width": 1
text: 'n', }, {
symbol: "%", "text": strEnter,
width: 1 "symbol": strEnter,
}, "width": 1.5
{ }]
text: 'm',
symbol: '"',
width: 1
},
{
text: "'",
symbol: "*",
width: 1.5
}
],
"row_4": [
{
text: "123",
symbol: 'ABC',
width: 1.5
},
{
text: ' ',
symbol: ' ',
width: 6
},
{
text: '.',
symbol: '.',
width: 1
},
{
text: strBackspace,
symbol: strBackspace,
width: 1.5
}
]
} }
//Here is the corresponding table between the ascii and the key event //Here is the corresponding table between the ascii and the key event
@@ -229,7 +201,7 @@ Rectangle {
"_x": Qt.Key_X, "_x": Qt.Key_X,
"_y": Qt.Key_Y, "_y": Qt.Key_Y,
"_z": Qt.Key_Z, "_z": Qt.Key_Z,
"_\u2190": Qt.Key_Backspace, "_": Qt.Key_Backspace,
"_return": Qt.Key_Return, "_return": Qt.Key_Return,
"_ ": Qt.Key_Space, "_ ": Qt.Key_Space,
"_-": Qt.Key_Minus, "_-": Qt.Key_Minus,
@@ -238,7 +210,9 @@ Rectangle {
"_;": Qt.Key_Semicolon, "_;": Qt.Key_Semicolon,
"_(": Qt.Key_BracketLeft, "_(": Qt.Key_BracketLeft,
"_)": Qt.Key_BracketRight, "_)": Qt.Key_BracketRight,
"_€": parseInt("20ac", 16) // I didn't find the appropriate Qt event so I used the hex format "_€": parseInt(
"20ac",
16) // I didn't find the appropriate Qt event so I used the hex format
, ,
"_&": Qt.Key_Ampersand, "_&": Qt.Key_Ampersand,
"_@": Qt.Key_At, "_@": Qt.Key_At,
@@ -250,112 +224,121 @@ Rectangle {
"_'": Qt.Key_Apostrophe, "_'": Qt.Key_Apostrophe,
"_%": Qt.Key_Percent, "_%": Qt.Key_Percent,
"_*": Qt.Key_Asterisk "_*": Qt.Key_Asterisk
} }
Item { Item {
id: keyboard_container id: keyboard_container
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 5 anchors.leftMargin: 5
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 5 anchors.topMargin: 5
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 5 anchors.bottomMargin: 5
//One column which contains 5 rows //One column which contains 5 rows
Column { Column {
spacing: columnSpacing spacing: columnSpacing
Row { Row {
id: row_1 id: row_1
spacing: rowSpacing spacing: rowSpacing
Repeater { Repeater {
model: modelKeyboard["row_1"] model: modelKeyboard["row_1"]
delegate: CustomButtonKeyboard { delegate: CustomButtonKeyboard {
text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase() : modelData.text text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase
width: modelData.width * keyboard_container.width / columns - rowSpacing () : modelData.text
height: keyboard_container.height / rows - columnSpacing width: modelData.width * keyboard_container.width / columns - rowSpacing
height: keyboard_container.height / rows - columnSpacing
onClicked: root.clicked(text)
} onClicked: root.clicked(text)
} }
} }
Row { }
id: row_2 Row {
spacing: rowSpacing id: row_2
Repeater { spacing: rowSpacing
model: modelKeyboard["row_2"] Repeater {
delegate: CustomButtonKeyboard { model: modelKeyboard["row_2"]
text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase() : modelData.text delegate: CustomButtonKeyboard {
width: modelData.width * keyboard_container.width / columns - rowSpacing text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase
height: keyboard_container.height / rows - columnSpacing () : modelData.text
width: modelData.width * keyboard_container.width / columns - rowSpacing
onClicked: root.clicked(text) height: keyboard_container.height / rows - columnSpacing
}
} onClicked: root.clicked(text)
} }
Row { }
id: row_3 }
spacing: rowSpacing Row {
Repeater { id: row_3
model: modelKeyboard["row_3"] spacing: rowSpacing
delegate: CustomButtonKeyboard { Repeater {
text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase() : modelData.text model: modelKeyboard["row_3"]
width: modelData.width * keyboard_container.width / columns - rowSpacing delegate: CustomButtonKeyboard {
height: keyboard_container.height / rows - columnSpacing text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase
isShift: shift && text === strShift () : modelData.text
width: modelData.width * keyboard_container.width / columns - rowSpacing
onClicked: root.clicked(text) height: keyboard_container.height / rows - columnSpacing
} isShift: shift && text === strShift
}
} onClicked: root.clicked(text)
Row { }
id: row_4 }
spacing: rowSpacing }
Repeater { Row {
model: modelKeyboard["row_4"] id: row_4
delegate: CustomButtonKeyboard { spacing: rowSpacing
text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase() : modelData.text Repeater {
width: modelData.width * keyboard_container.width / columns - rowSpacing model: modelKeyboard["row_4"]
height: keyboard_container.height / rows - columnSpacing delegate: CustomButtonKeyboard {
text: symbols ? modelData.symbol : shift ? modelData.text.toUpperCase
onClicked: root.clicked(text) () : modelData.text
} width: modelData.width * keyboard_container.width / columns - rowSpacing
} height: keyboard_container.height / rows - columnSpacing
}
} onClicked: root.clicked(text)
} }
signal clicked(string text) }
}
Connections { }
target: root }
function onClicked(text) { signal clicked(string text)
if (!keyboard_controller.target)
return; Connections {
if (text === strShift) { target: root
root.shift = !root.shift; // toggle shift function onClicked(text) {
} else if (text === '123') { if (!keyboard_controller.target)
root.symbols = true; return
} else if (text === 'ABC') { if (text === strShift) {
root.symbols = false; root.shift = !root.shift
} else { } else if (text === '123') {
// insert text into target root.symbols = true
if (text === strBackspace) { } else if (text === 'ABC') {
var current = keyboard_controller.target.text; root.symbols = false
keyboard_controller.target.text = current.slice(0, current.length - 1); } else if (text === strEnter) {
} else { if (keyboard_controller.target.accepted) {
// normal character keyboard_controller.target.accepted()
var charToInsert = root.symbols ? text : (root.shift ? text.toUpperCase() : text); }
var current = keyboard_controller.target.text; } else if (text === strClose) {
var cursorPos = keyboard_controller.target.cursorPosition; root.dismissed()
keyboard_controller.target.text = current.slice(0, cursorPos) + charToInsert + current.slice(cursorPos); } else {
keyboard_controller.target.cursorPosition = cursorPos + 1; if (text === strBackspace) {
} var current = keyboard_controller.target.text
keyboard_controller.target.text = current.slice(0, current.length - 1)
// shift is momentary } else {
if (root.shift && text !== strShift) var charToInsert = root.symbols ? text : (root.shift ? text.toUpperCase
root.shift = false; () : text)
} var current = keyboard_controller.target.text
} var cursorPos = keyboard_controller.target.cursorPosition
} keyboard_controller.target.text = current.slice(0,
cursorPos) + charToInsert + current.slice(cursorPos)
keyboard_controller.target.cursorPosition = cursorPos + 1
}
if (root.shift && text !== strShift)
root.shift = false
}
}
}
} }

View File

@@ -1,4 +1,4 @@
pragma ComponentBehavior: Bound pragma ComponentBehavior
import QtQuick import QtQuick
@@ -14,19 +14,21 @@ Item {
function show() { function show() {
if (!isKeyboardActive && keyboard === null) { if (!isKeyboardActive && keyboard === null) {
keyboard = keyboardComponent.createObject(keyboard_controller.rootObject); keyboard = keyboardComponent.createObject(
keyboard.target = keyboard_controller.target; keyboard_controller.rootObject)
isKeyboardActive = true; keyboard.target = keyboard_controller.target
keyboard.dismissed.connect(hide)
isKeyboardActive = true
} else } else
console.log("The keyboard is already shown"); console.log("The keyboard is already shown")
} }
function hide() { function hide() {
if (isKeyboardActive && keyboard !== null) { if (isKeyboardActive && keyboard !== null) {
keyboard.destroy(); keyboard.destroy()
isKeyboardActive = false; isKeyboardActive = false
} else } else
console.log("The keyboard is already hidden"); console.log("The keyboard is already hidden")
} }
// private // private