Update other dialogs to use single keyboard QML file

This commit is contained in:
David Rowe 2016-10-09 11:52:30 +13:00
parent 5a4665b02f
commit 827c2b015b
8 changed files with 59 additions and 855 deletions

View file

@ -74,7 +74,7 @@ Window {
property bool punctuationMode: false
implicitWidth: backgroundImage.width
implicitHeight: backgroundImage.height + (keyboardRaised ? 200 : 0)
implicitHeight: backgroundImage.height + (keyboardRaised ? keyboard.raisedHeight : 0)
// The buttons have their button state changed on hover, so we have to manually fix them up here
onBackEnabledChanged: backArrow.buttonState = addressBarDialog.backEnabled ? 1 : 0;
@ -275,34 +275,17 @@ Window {
}
}
// virtual keyboard, letters
HifiControls.KeyboardAlpha {
id: keyboard1
y: parent.keyboardRaised ? parent.height : 0
height: parent.keyboardRaised ? 200 : 0
visible: parent.keyboardRaised && !parent.punctuationMode
enabled: parent.keyboardRaised && !parent.punctuationMode
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
HifiControls.Keyboard {
id: keyboard
raised: parent.keyboardRaised
numeric: parent.punctuationMode
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
HifiControls.KeyboardPunctuation {
id: keyboard2
y: parent.keyboardRaised ? parent.height : 0
height: parent.keyboardRaised ? 200 : 0
visible: parent.keyboardRaised && parent.punctuationMode
enabled: parent.keyboardRaised && parent.punctuationMode
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
}
}
function getRequest(url, cb) { // cb(error, responseOfCorrectContentType) of url. General for 'get' text/html/json, but without redirects.

View file

@ -1,390 +0,0 @@
import QtQuick 2.0
Item {
id: keyboardBase
height: 200
property alias shiftKey: key27
property bool shiftMode: false
function resetShiftMode(mode) {
shiftMode = mode;
shiftKey.resetToggledMode(mode);
}
function toUpper(str) {
if (str === ",") {
return "<";
} else if (str === ".") {
return ">";
} else if (str === "/") {
return "?";
} else {
return str.toUpperCase(str);
}
}
function toLower(str) {
if (str === "<") {
return ",";
} else if (str === ">") {
return ".";
} else if (str === "?") {
return "/";
} else {
return str.toLowerCase(str);
}
}
function forEachKey(func) {
var i, j;
for (i = 0; i < column1.children.length; i++) {
var row = column1.children[i];
for (j = 0; j < row.children.length; j++) {
var key = row.children[j];
func(key);
}
}
}
onShiftModeChanged: {
forEachKey(function (key) {
if (shiftMode) {
key.glyph = keyboardBase.toUpper(key.glyph);
} else {
key.glyph = keyboardBase.toLower(key.glyph);
}
});
}
function alphaKeyClickedHandler(mouseArea) {
// reset shift mode to false after first keypress
if (shiftMode) {
resetShiftMode(false);
}
}
Component.onCompleted: {
// hook up callbacks to every ascii key
forEachKey(function (key) {
if (/^[a-z]+$/i.test(key.glyph)) {
key.mouseArea.onClicked.connect(alphaKeyClickedHandler);
}
});
}
Rectangle {
id: leftRect
y: 0
height: 200
color: "#252525"
anchors.right: keyboardRect.left
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
}
Rectangle {
id: keyboardRect
x: 206
y: 0
width: 480
height: 200
color: "#252525"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
Column {
id: column1
width: 480
height: 200
Row {
id: row1
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 0
Key {
id: key1
width: 44
glyph: "q"
}
Key {
id: key2
width: 44
glyph: "w"
}
Key {
id: key3
width: 44
glyph: "e"
}
Key {
id: key4
width: 43
glyph: "r"
}
Key {
id: key5
width: 43
glyph: "t"
}
Key {
id: key6
width: 44
glyph: "y"
}
Key {
id: key7
width: 44
glyph: "u"
}
Key {
id: key8
width: 43
glyph: "i"
}
Key {
id: key9
width: 42
glyph: "o"
}
Key {
id: key10
width: 44
glyph: "p"
}
Key {
id: key28
width: 45
glyph: "←"
}
}
Row {
id: row2
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 18
Key {
id: key11
width: 43
}
Key {
id: key12
width: 43
glyph: "s"
}
Key {
id: key13
width: 43
glyph: "d"
}
Key {
id: key14
width: 43
glyph: "f"
}
Key {
id: key15
width: 43
glyph: "g"
}
Key {
id: key16
width: 43
glyph: "h"
}
Key {
id: key17
width: 43
glyph: "j"
}
Key {
id: key18
width: 43
glyph: "k"
}
Key {
id: key19
width: 43
glyph: "l"
}
Key {
id: key32
width: 75
glyph: "⏎"
}
}
Row {
id: row3
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 0
Key {
id: key27
width: 46
glyph: "⇪"
toggle: true
onToggledChanged: {
shiftMode = toggled;
}
}
Key {
id: key20
width: 43
glyph: "z"
}
Key {
id: key21
width: 43
glyph: "x"
}
Key {
id: key22
width: 43
glyph: "c"
}
Key {
id: key23
width: 43
glyph: "v"
}
Key {
id: key24
width: 43
glyph: "b"
}
Key {
id: key25
width: 43
glyph: "n"
}
Key {
id: key26
width: 44
glyph: "m"
}
Key {
id: key31
width: 43
glyph: "_"
}
Key {
id: key33
width: 43
glyph: "?"
}
Key {
id: key36
width: 46
glyph: "/"
}
}
Row {
id: row4
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 19
Key {
id: key30
width: 89
glyph: "&123"
mouseArea.onClicked: {
keyboardBase.parent.punctuationMode = true;
}
}
Key {
id: key29
width: 285
glyph: " "
}
Key {
id: key34
width: 43
glyph: "⇦"
}
Key {
id: key35
x: 343
width: 43
glyph: "⇨"
}
}
}
}
Rectangle {
id: rightRect
y: 280
height: 200
color: "#252525"
border.width: 0
anchors.left: keyboardRect.right
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
}
Rectangle {
id: rectangle1
color: "#ffffff"
anchors.bottom: keyboardRect.top
anchors.bottomMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
}

View file

@ -1,324 +0,0 @@
import QtQuick 2.0
Item {
id: keyboardBase
height: 200
Rectangle {
id: leftRect
y: 0
height: 200
color: "#252525"
anchors.right: keyboardRect.left
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
}
Rectangle {
id: keyboardRect
x: 206
y: 0
width: 480
height: 200
color: "#252525"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
Column {
id: column1
width: 480
height: 200
Row {
id: row1
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 0
Key {
id: key1
width: 43
glyph: "1"
}
Key {
id: key2
width: 43
glyph: "2"
}
Key {
id: key3
width: 43
glyph: "3"
}
Key {
id: key4
width: 43
glyph: "4"
}
Key {
id: key5
width: 43
glyph: "5"
}
Key {
id: key6
width: 43
glyph: "6"
}
Key {
id: key7
width: 43
glyph: "7"
}
Key {
id: key8
width: 43
glyph: "8"
}
Key {
id: key9
width: 43
glyph: "9"
}
Key {
id: key10
width: 43
glyph: "0"
}
Key {
id: key28
width: 50
glyph: "←"
}
}
Row {
id: row2
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 0
Key {
id: key11
width: 43
glyph: "!"
}
Key {
id: key12
width: 43
glyph: "@"
}
Key {
id: key13
width: 43
glyph: "#"
}
Key {
id: key14
width: 43
glyph: "$"
}
Key {
id: key15
width: 43
glyph: "%"
}
Key {
id: key16
width: 43
glyph: "^"
}
Key {
id: key17
width: 43
glyph: "&"
}
Key {
id: key18
width: 43
glyph: "*"
}
Key {
id: key19
width: 43
glyph: "("
}
Key {
id: key32
width: 43
glyph: ")"
}
Key {
id: key37
width: 50
glyph: "⏎"
}
}
Row {
id: row3
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 4
Key {
id: key27
width: 43
glyph: "="
}
Key {
id: key20
width: 43
glyph: "+"
}
Key {
id: key21
width: 43
glyph: "-"
}
Key {
id: key22
width: 43
glyph: ","
}
Key {
id: key23
width: 43
glyph: "."
}
Key {
id: key24
width: 43
glyph: ";"
}
Key {
id: key25
width: 43
glyph: ":"
}
Key {
id: key26
width: 43
glyph: "'"
}
Key {
id: key31
width: 43
glyph: "\""
}
Key {
id: key33
width: 43
glyph: "<"
}
Key {
id: key36
width: 43
glyph: ">"
}
}
Row {
id: row4
width: 480
height: 50
anchors.left: parent.left
anchors.leftMargin: 19
Key {
id: key30
width: 65
glyph: "abc"
mouseArea.onClicked: {
keyboardBase.parent.punctuationMode = false
}
}
Key {
id: key29
width: 285
glyph: " "
}
Key {
id: key34
width: 43
glyph: "⇦"
}
Key {
id: key35
x: 343
width: 43
glyph: "⇨"
}
}
}
}
Rectangle {
id: rightRect
y: 280
height: 200
color: "#252525"
border.width: 0
anchors.left: keyboardRect.right
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
}
Rectangle {
id: rectangle1
color: "#ffffff"
anchors.bottom: keyboardRect.top
anchors.bottomMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
}

View file

@ -20,7 +20,7 @@ Item {
x: 0
y: 0
width: parent.width
height: keyboardRaised ? parent.height - keyboard1.height : parent.height
height: keyboardRaised ? parent.height - keyboard.height : parent.height
// creates a global EventBridge object.
WebEngineScript {
@ -82,7 +82,7 @@ Item {
onLoadingChanged: {
keyboardRaised = false;
punctuationMode = false;
keyboard1.resetShiftMode(false);
keyboard.resetShiftMode(false);
// Required to support clicking on "hifi://" links
if (WebEngineView.LoadStartedStatus == loadRequest.status) {
@ -105,32 +105,15 @@ Item {
}
}
// virtual keyboard, letters
HiFiControls.KeyboardAlpha {
id: keyboard1
y: keyboardRaised ? parent.height : 0
height: keyboardRaised ? 200 : 0
visible: keyboardRaised && !punctuationMode
enabled: keyboardRaised && !punctuationMode
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
HiFiControls.Keyboard {
id: keyboard
raised: parent.keyboardRaised
numeric: parent.punctuationMode
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
HiFiControls.KeyboardPunctuation {
id: keyboard2
y: keyboardRaised ? parent.height : 0
height: keyboardRaised ? 200 : 0
visible: keyboardRaised && punctuationMode
enabled: keyboardRaised && punctuationMode
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
}
}

View file

@ -116,7 +116,7 @@ ModalWindow {
var targetHeight = (textField.visible ? textField.controlHeight + hifi.dimensions.contentSpacing.y : 0) +
(extraInputs.visible ? extraInputs.height + hifi.dimensions.contentSpacing.y : 0) +
(buttons.height + 3 * hifi.dimensions.contentSpacing.y) +
(root.keyboardRaised ? (200 + hifi.dimensions.contentSpacing.y) : 0);
(root.keyboardRaised ? (keyboard.raisedHeight + hifi.dimensions.contentSpacing.y) : 0);
root.width = (targetWidth < d.minWidth) ? d.minWidth : ((targetWidth > d.maxWdith) ? d.maxWidth : targetWidth);
root.height = (targetHeight < d.minHeight) ? d.minHeight : ((targetHeight > d.maxHeight) ?
@ -153,39 +153,16 @@ ModalWindow {
}
}
Item {
Keyboard {
id: keyboard
height: keyboardRaised ? 200 : 0
raised: keyboardRaised
numeric: punctuationMode
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
bottomMargin: keyboardRaised ? hifi.dimensions.contentSpacing.y : 0
}
KeyboardAlpha {
id: keyboard1
visible: keyboardRaised && !punctuationMode
enabled: keyboardRaised && !punctuationMode
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
KeyboardPunctuation {
id: keyboard2
visible: keyboardRaised && punctuationMode
enabled: keyboardRaised && punctuationMode
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
}
}

View file

@ -27,7 +27,7 @@ ModalWindow {
id: root
resizable: true
implicitWidth: 480
implicitHeight: 360 + (fileDialogItem.keyboardRaised ? 200 + hifi.dimensions.contentSpacing.y : 0)
implicitHeight: 360 + (fileDialogItem.keyboardRaised ? keyboard.raisedHeight + hifi.dimensions.contentSpacing.y : 0)
minSize: Qt.vector2d(360, 240)
draggable: true
@ -626,7 +626,7 @@ ModalWindow {
left: parent.left
right: selectionType.visible ? selectionType.left: parent.right
rightMargin: selectionType.visible ? hifi.dimensions.contentSpacing.x : 0
bottom: keyboard1.top
bottom: keyboard.top
bottomMargin: hifi.dimensions.contentSpacing.y
}
readOnly: !root.saveDialog
@ -647,26 +647,16 @@ ModalWindow {
KeyNavigation.right: openButton
}
KeyboardAlpha {
id: keyboard1
height: parent.keyboardRaised ? 200 : 0
visible: parent.keyboardRaised && !parent.punctuationMode
enabled: visible
anchors.right: parent.right
anchors.left: parent.left
anchors.bottom: buttonRow.top
anchors.bottomMargin: visible ? hifi.dimensions.contentSpacing.y : 0
}
KeyboardPunctuation {
id: keyboard2
height: parent.keyboardRaised ? 200 : 0
visible: parent.keyboardRaised && parent.punctuationMode
enabled: visible
anchors.right: parent.right
anchors.left: parent.left
anchors.bottom: buttonRow.top
anchors.bottomMargin: visible ? hifi.dimensions.contentSpacing.y : 0
Keyboard {
id: keyboard
raised: parent.keyboardRaised
numeric: parent.punctuationMode
anchors {
left: parent.left
right: parent.right
bottom: buttonRow.top
bottomMargin: visible ? hifi.dimensions.contentSpacing.y : 0
}
}
Row {

View file

@ -22,6 +22,7 @@ ModalWindow {
implicitWidth: 640
implicitHeight: 320
visible: true
keyboardEnabled: false // Disable ModalWindow's keyboard.
signal selected(var result);
signal canceled();
@ -45,6 +46,11 @@ ModalWindow {
property int titleWidth: 0
onTitleWidthChanged: d.resize();
property bool keyboardRaised: false
property bool punctuationMode: false
onKeyboardRaisedChanged: d.resize();
function updateIcon() {
if (!root) {
return;
@ -59,11 +65,6 @@ ModalWindow {
height: pane.height
anchors.margins: 0
property bool keyboardRaised: false
property bool punctuationMode: false
onKeyboardRaisedChanged: d.resize();
QtObject {
id: d
readonly property int minWidth: 480
@ -74,15 +75,15 @@ ModalWindow {
function resize() {
var targetWidth = Math.max(titleWidth, pane.width)
var targetHeight = (items ? comboBox.controlHeight : textResult.controlHeight) + 5 * hifi.dimensions.contentSpacing.y + buttons.height
root.width = (targetWidth < d.minWidth) ? d.minWidth : ((targetWidth > d.maxWdith) ? d.maxWidth : targetWidth)
root.height = ((targetHeight < d.minHeight) ? d.minHeight: ((targetHeight > d.maxHeight) ? d.maxHeight : targetHeight)) + (modalWindowItem.keyboardRaised ? (200 + 2 * hifi.dimensions.contentSpacing.y) : 0)
root.width = (targetWidth < d.minWidth) ? d.minWidth : ((targetWidth > d.maxWdith) ? d.maxWidth : targetWidth);
root.height = ((targetHeight < d.minHeight) ? d.minHeight : ((targetHeight > d.maxHeight) ? d.maxHeight : targetHeight)) + (root.keyboardRaised ? (keyboard.raisedHeight + 2 * hifi.dimensions.contentSpacing.y) : 0)
}
}
Item {
anchors {
top: parent.top
bottom: keyboard1.top;
bottom: keyboard.top;
left: parent.left;
right: parent.right;
margins: 0
@ -116,33 +117,16 @@ ModalWindow {
}
}
// virtual keyboard, letters
KeyboardAlpha {
id: keyboard1
y: parent.keyboardRaised ? parent.height : 0
height: parent.keyboardRaised ? 200 : 0
visible: parent.keyboardRaised && !parent.punctuationMode
enabled: parent.keyboardRaised && !parent.punctuationMode
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: buttons.top
anchors.bottomMargin: parent.keyboardRaised ? 2 * hifi.dimensions.contentSpacing.y : 0
}
KeyboardPunctuation {
id: keyboard2
y: parent.keyboardRaised ? parent.height : 0
height: parent.keyboardRaised ? 200 : 0
visible: parent.keyboardRaised && parent.punctuationMode
enabled: parent.keyboardRaised && parent.punctuationMode
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: buttons.top
anchors.bottomMargin: parent.keyboardRaised ? 2 * hifi.dimensions.contentSpacing.y : 0
Keyboard {
id: keyboard
raised: keyboardRaised
numeric: punctuationMode
anchors {
left: parent.left
right: parent.right
bottom: buttons.top
bottomMargin: root.keyboardRaised ? 2 * hifi.dimensions.contentSpacing.y : 0
}
}
Flow {

View file

@ -141,7 +141,7 @@ Window {
bottom: parent.bottom
}
width: parent.contentWidth
height: footerContentHeight + (keyboardEnabled && keyboardRaised ? 200 : 0)
height: footerContentHeight + (keyboardEnabled && keyboardRaised ? keyboard.height : 0)
color: hifi.colors.baseGray
visible: footer.height > 0 || keyboardEnabled && keyboardRaised
@ -181,6 +181,7 @@ Window {
}
HiFiControls.Keyboard {
id: keyboard
enabled: keyboardEnabled
raised: keyboardRaised
numeric: punctuationMode
@ -196,7 +197,7 @@ Window {
onKeyboardRaisedChanged: {
if (keyboardEnabled && keyboardRaised) {
var delta = activator.mouseY
- (activator.height + activator.y - 200 - footerContentHeight - hifi.dimensions.controlLineHeight);
- (activator.height + activator.y - keyboard.raisedHeight - footerContentHeight - hifi.dimensions.controlLineHeight);
if (delta > 0) {
pane.scrollBy(delta);